Kalau kamu lagi belajar HTML, pasti sering dengar istilah elements dan attributes. Nah, di artikel ini, kita bakal bahas kedua hal ini dengan bahasa yang santai tapi tetap bikin paham. Yuk, kita mulai dari dasar-dasarnya dulu!
Apa Itu HTML Elements?
Elements di HTML adalah struktur dasar yang membangun sebuah halaman web. Bisa dibilang, ini kayak “bata” untuk bangun rumah. Setiap element biasanya punya pembuka (opening tag) dan penutup (closing tag), kayak gini:
<p>Ini adalah paragraf pertama</p>
- adalah tag pembuka.
- adalah tag penutup.
- Dan di antara kedua tag itu ada kontennya, yaitu “Ini adalah paragraf pertama”.
Ada juga element yang nggak perlu penutup. Contohnya:
<img src="gambar.jpg" alt="Deskripsi gambar">
Mengenal HTML Attributes
Kalau elements adalah “bata”-nya, attributes adalah “detail” di bata itu. Fungsinya buat nambahin informasi tambahan ke element. Biasanya attributes ditulis di dalam tag pembuka, kayak gini:
<a href="https://sovyan.com">Kunjungi Website</a>
Di contoh ini:
- href adalah nama attribute.
- “https://sovyan.com“ adalah nilainya.
Attributes sering dipakai untuk bikin element lebih “hidup” dan fungsional.
Contoh Program Lengkap HTML
Berikut adalah contoh sederhana kode HTML lengkap yang menggabungkan penggunaan elements dan attributes:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Belajar dasar HTML untuk pemula.">
<title>Belajar HTML Dasar</title>
</head>
<body>
<!-- Heading -->
<h1>Belajar HTML Dasar</h1>
<h2>Mengenal Elements dan Attributes</h2>
<!-- Paragraf -->
<p>HTML adalah bahasa dasar untuk membangun website. Di sini, kamu akan belajar tentang elements dan attributes.</p>
<!-- Link -->
<a href="https://sovyan.com" target="_blank">Kunjungi Sovyan</a>
<!-- Gambar -->
<img src="https://via.placeholder.com/150" alt="Contoh Gambar" style="display: block; margin: 10px 0;">
<!-- Daftar -->
<h3>Kenapa Harus Belajar HTML?</h3>
<ul>
<li>Mudah dipelajari</li>
<li>Pondasi web development</li>
<li>Banyak sumber belajar gratis</li>
</ul>
<!-- Formulir -->
<h3>Coba Kirim Data</h3>
<form action="#" method="post">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Masukkan email kamu"><br><br>
<button type="submit">Kirim</button>
</form>
</body>
</html>
Penjelasan Kode di Atas
- Heading
Menggunakan<h1>dan<h2>untuk menampilkan judul utama dan subjudul. - Paragraf
<p>digunakan untuk menulis teks dalam bentuk paragraf. - Link
<a>dengan attributehrefuntuk membuat link ke situs sovyan.com. - Gambar
<img>dengan attributessrcdanaltuntuk menambahkan gambar. - Daftar
<ul>(unordered list) dan<li>(list item) digunakan untuk membuat daftar. - Formulir
<form>,<label>, dan<input>untuk menerima input dari pengguna.
Kesimpulan
HTML itu gampang banget kalau kamu tahu dasar-dasarnya. Elements dan attributes adalah fondasi penting yang harus kamu pahami sebelum masuk ke hal yang lebih kompleks. Dengan sering latihan, kamu bakal makin jago bikin website keren!
Semoga artikel ini ngebantu kamu buat belajar HTML dengan lebih santai. Kalau ada pertanyaan, tulis di kolom komentar, ya!
Ingin belajar lebih banyak tentang HTML dan web development? Stay tuned di blog ini buat tips dan tutorial lainnya!
Komentar