HTML (HyperText Markup Language) adalah bahasa markah yang mendasari setiap halaman web yang kita buka. Dalam artikel ini, kita akan menjelajahi dasar-dasar HTML, termasuk struktur dasar, penggunaan tag, tag list (ordered dan unordered), serta penerapan atribut HTML dalam konteks kasus nyata.
Struktur Dasar HTML
Setiap halaman web dimulai dengan struktur dasar HTML yang konsisten. Berikut adalah contoh struktur dasar HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Halaman HTML</title>
</head>
<body>
<!-- Konten Halaman Web -->
</body>
</html><html>: Tag pembuka dan penutup yang menyeliputi seluruh konten halaman.<head>: Bagian ini berisi informasi terkait dokumen, seperti judul halaman dan pengaturan karakter.<body>: Bagian utama yang memuat semua konten yang akan ditampilkan di halaman.
Penggunaan Tag HTML
Tag HTML adalah elemen-elemen dasar yang membentuk struktur halaman. Contoh penggunaan tag seperti <h1> (heading) dan <p> (paragraf):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Penggunaan Tag HTML</title>
</head>
<body>
<h1>Selamat Datang di Dunia HTML</h1>
<p>HTML memungkinkan kita untuk membuat halaman web yang struktural dan informatif.</p>
</body>
</html>
<h1>: Tag untuk heading level 1 (judul utama).<p>: Tag untuk paragraf teks.
Tag List (Ordered dan Unordered)
Penggunaan tag list membantu menyajikan informasi secara terstruktur. Berikut contoh penggunaan tag list:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Tag List HTML</title>
</head>
<body>
<h2>Daftar Buah-buahan</h2>
<ul>
<li>Apel</li>
<li>Mangga</li>
<li>Pisang</li>
</ul>
<h2>Daftar Tugas</h2>
<ol>
<li>Membuat outline artikel</li>
<li>Menulis konten HTML</li>
<li>Menambahkan contoh kasus</li>
</ol>
</body>
</html>
<ul>: Tag untuk membuat daftar tak terurut (unordered list).<ol>: Tag untuk membuat daftar terurut (ordered list).<li>: Tag untuk setiap item dalam daftar.
Atribut HTML
Atribut HTML memberikan informasi tambahan atau pengaturan khusus pada elemen. Berikut contoh penggunaan atribut class dan id:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Atribut HTML</title>
<style>
.judul {
color: blue;
}
#paragraf-merah {
color: red;
}
</style>
</head>
<body>
<h2 class="judul">Judul dengan Class</h2>
<p id="paragraf-merah">Paragraf dengan ID dan Warna Merah</p>
</body>
</html>
class: Atribut untuk memberikan nama kelas elemen.id: Atribut untuk memberikan identifikasi unik pada elemen.
Kesimpulan
Melalui pemahaman dasar-dasar HTML, struktur dasar, penggunaan tag, tag list, dan atribut, Anda telah mengambil langkah penting dalam menguasai bahasa markah yang mendasari web. Penerapan praktis dalam contoh kasus memberikan wawasan yang lebih baik, memungkinkan Anda membangun halaman web dengan lebih percaya diri. Lanjutkan eksplorasi dan praktek untuk memperdalam pemahaman Anda tentang HTML dan menjadi pengembang web yang lebih terampil.
