Memahami Dasar-Dasar HTML: Pondasi Utama Dunia Web

HTML (HyperText Markup Language) adalah bahasa markah standar yang digunakan untuk membuat struktur halaman web. Bayangkan HTML sebagai kerangka bangunan sebuah rumah. Ia menentukan di mana dinding, pintu, jendela, dan atap akan ditempatkan. Browser web kemudian membaca file HTML dan menerjemahkannya menjadi halaman visual yang kita lihat.

Secara sederhana, HTML menggunakan serangkaian elemen untuk memberi tahu browser bagaimana konten harus ditampilkan. Elemen-elemen ini ditandai dengan tag. Tag biasanya datang berpasangan: tag pembuka (misalnya, <h1>) dan tag penutup (misalnya, </h1>), dengan konten berada di antaranya.

Contoh Struktur Dasar HTML:

HTML
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertamaku</title>
</head>
<body>
    <h1>Selamat Datang di Halaman Web Saya!</h1>
    <p>Ini adalah paragraf pertama di halaman web saya.</p>
</body>
</html>

Mari kita bedah struktur dasar ini:

<!DOCTYPE html>: Deklarasi ini memberi tahu browser bahwa dokumen ini adalah dokumen HTML5.
<html>: Tag ini adalah elemen root yang membungkus seluruh konten HTML. Atribut lang="id" menunjukkan bahwa bahasa utama dokumen adalah Bahasa Indonesia.
<head>: Bagian ini berisi informasi meta tentang dokumen HTML, seperti judul halaman, set karakter, dan tautan ke file CSS. Informasi di dalam <head> biasanya tidak ditampilkan langsung di halaman web.
- <meta charset="UTF-8">: Menentukan pengkodean karakter yang digunakan, UTF-8 adalah standar yang mendukung berbagai karakter.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Konfigurasi penting untuk memastikan halaman web responsif di berbagai perangkat.
- <title>Halaman Pertamaku</title>: Menentukan judul yang muncul di tab browser atau jendela.
<body>: Bagian ini berisi semua konten yang terlihat oleh pengguna di halaman web, seperti teks, gambar, tautan, dan elemen lainnya.
- <h1>Selamat Datang di Halaman Web Saya!</h1>: Contoh elemen heading tingkat pertama.
- <p>Ini adalah paragraf pertama di halaman web saya.</p>: Contoh elemen paragraf.

Tag dan Elemen Penting di Awal Pembelajaran:

Heading (<h1> hingga <h6>): Digunakan untuk membuat judul dengan tingkatan yang berbeda (h1 adalah yang paling penting).
Paragraf (<p>): Digunakan untuk membuat blok teks paragraf.
Link (<a>): Membuat tautan ke halaman lain atau sumber daya. Atribut href menentukan tujuan tautan.
HTML
<a href="https://www.google.com">Kunjungi Google</a>
Gambar (<img>): Menyisipkan gambar. Atribut src menentukan lokasi gambar, dan alt memberikan teks alternatif jika gambar tidak dapat ditampilkan.
HTML
<img src="gambar.jpg" alt="Deskripsi Gambar">
List (<ul> dan <ol>): Membuat daftar tidak berurut (unordered list) dan daftar berurut (ordered list). Setiap item dalam daftar menggunakan tag <li>.
HTML
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Langkah 1</li> <li>Langkah 2</li> </ol>

Tools Sederhana untuk Memulai:

Anda tidak memerlukan perangkat lunak yang rumit untuk mulai belajar HTML. Cukup gunakan:

Text Editor: Aplikasi sederhana untuk menulis dan mengedit teks biasa. Contoh: Notepad (Windows), TextEdit (Mac), VS Code, Sublime Text.
Web Browser: Aplikasi untuk melihat halaman web. Contoh: Google Chrome, Mozilla Firefox, Microsoft Edge.

Langkah Awal: