Contoh Kode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar HTML dan CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Konten HTML ada di sini -->
<h1>JUDUL PEMBELAJARAN FRONT END DEVELOPER</h1>
<h2>Materi Dasar HTML</h2>
<p>Dalam Materi Merupakan Pembelajaran Front End Developer. Ini adalah paragraf Teks Pertama Dalam halaman HTML</p>
<p>Dalam Materi Merupakan Pembelajaran Front End Developer. Ini adalah paragraf Teks Kedua halaman HTML</p>
<ul>
<li>Ini Daftar 1</li>
<li>Ini Daftar 2</li>
<li>Ini Daftar 3</li>
</ul>
<!-- Perbaikan pada tag <a> -->
<a href="https://chatgpt.com">Chat GPT</a>
<!-- Perbaikan pada tag <img> -->
<img src="gambar.jpg" alt="ini contoh link gambar">
<form action="/submit" method="POST">
<p>Form Pendaftaran</p>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Daftar">
</form>
</body>
</html>
Contoh Kode Style.css
body {
background-color: #f0f0f0; /* Warna latar belakang */
}
h1 {
color: #FF0000;
font-size: 25px;
text-align: center; /* Mengatur alignment teks */
}
h2 {
color: #0000ff;
font-size: 15px;
text-align: center; /* Mengatur alignment teks */
}
p {
margin: 25px; /* Mengatur margin luar */
padding: 15px; /* Mengatur padding dalam */
border: 1px solid black; /* Mengatur border */
}
.container {
display: flex; /* Mengaktifkan flexbox */
justify-content: center; /* Mengatur elemen ke tengah */
align-items: center; /* Mengatur elemen secara vertikal ke tengah */
}