Pengenalan HTML 1
Memulai HTML

Analogi: HTML sebagai kerangka rumah

Bayangkan sebuah rumah. Sebelum dicat, diberi perabot, dan dipasang lampu, rumah itu harus punya kerangka: pondasi, dinding, atap, pintu, dan jendela. HTML berperan sebagai kerangka itu. Ia tidak mengurus warna cat (itu tugas CSS) dan tidak mengurus pintu otomatis yang terbuka sendiri (itu tugas JavaScript). HTML hanya menjawab satu pertanyaan: apa saja isi halaman ini dan bagaimana susunannya? Judul, paragraf, gambar, tabel, dan tautan semuanya dinyatakan lewat tag HTML.

Mengenal anatomi sebuah tag

Sebagian besar elemen HTML terdiri dari tiga bagian: tag pembuka, isi, dan tag penutup. Tag penutup sama dengan tag pembuka, hanya ditambah garis miring. Pada contoh <p>Halo</p>, tulisan "Halo" adalah isi yang diapit tag pembuka dan penutup. Gabungan ketiganya disebut elemen. Ada juga elemen yang tidak punya isi dan tidak perlu ditutup, misalnya <br> untuk pindah baris dan <img> untuk gambar.

Tag boleh bersarang, artinya satu elemen berada di dalam elemen lain. Aturannya sederhana: siapa yang dibuka paling akhir harus ditutup paling dulu, seperti menumpuk dan membongkar kotak.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pertamaku</title>
</head>
<body>
    <h1>Halo, Dunia!</h1>
    <p>Nama saya <b>Rani</b>, saya sedang belajar HTML.</p>
</body>
</html>

Penjelasan baris demi baris: <!DOCTYPE html> memberi tahu browser bahwa dokumen ini memakai HTML5. Tag <html> membungkus seluruh halaman. Bagian <head> berisi informasi tentang halaman (judul pada tab browser, pengkodean huruf) yang tidak ditampilkan sebagai isi. Bagian <body> berisi semua yang benar-benar terlihat oleh pengunjung. Atribut lang="id" memberi tahu browser dan mesin pencari bahwa halaman ini berbahasa Indonesia.

Kesalahan yang sering terjadi

• Lupa menutup tag, misalnya menulis <p> tanpa </p>. Browser sering menebak sendiri sehingga tampilan menjadi berantakan.
• Menyimpan file dengan nama test1.html.txt. Pastikan ekstensi benar-benar .html, bukan .txt yang tersembunyi.
• Menulis konten di luar <body>, sehingga hasilnya tidak muncul sesuai harapan.
• Lupa me-refresh browser setelah mengubah file dan menyimpannya kembali.

Ringkasan

HTML adalah bahasa penanda yang menyusun kerangka halaman web. Setiap halaman punya html, head, dan body. Elemen ditulis dengan tag pembuka dan penutup, dan boleh bersarang. File disimpan berekstensi .html lalu dibuka di browser.

Latihan

1. Apa perbedaan isi <head> dan <body>?
   Lihat jawaban

   Head berisi informasi tentang halaman (judul tab, pengkodean huruf) dan tidak tampil sebagai isi; body berisi semua yang terlihat oleh pengunjung.
2. Pada <p>Halo</p>, bagian mana yang disebut tag penutup?
   Lihat jawaban

   </p>, yaitu tag yang diawali garis miring.
3. Buatlah halaman bertajuk "Profilku" yang berisi judul besar nama kamu dan satu paragraf tentang hobimu. Tag apa saja yang kamu pakai?
   Lihat jawaban

   Minimal html, head, title, body, h1, dan p. Simpan sebagai profil.html dan buka di browser.
4. Mengapa sebuah file bernama halaman.html.txt tidak tampil sebagai web saat diklik dua kali?
   Lihat jawaban

   Ekstensi aslinya .txt, sehingga dibuka sebagai teks biasa oleh editor, bukan dirender oleh browser.