HTML 01: Mengenal HTML dan Membuat Dokumen Pertama

HTML adalah bahasa yang digunakan untuk menyusun isi halaman web. HTML menentukan mana yang menjadi judul, paragraf, gambar, tautan, formulir, dan bagian-bagian lain. HTML bukan bahasa untuk mengatur warna atau posisi; pekerjaan tersebut nanti dilakukan oleh CSS.

Tujuan Belajar

Setelah menyelesaikan modul ini, Anda dapat:

• menjelaskan fungsi HTML dengan bahasa sederhana;
• membedakan tag, elemen, dan atribut;
• membuat dokumen HTML yang valid;
• membuka hasilnya melalui browser.

1. Tag, Elemen, dan Atribut

Perhatikan contoh paling kecil berikut:

Bagian-bagiannya adalah:

• <p> merupakan tag pembuka;
• </p> merupakan tag penutup;
• seluruh baris disebut elemen paragraf;
• class="pesan" adalah atribut, yaitu informasi tambahan untuk elemen.

Sebagian besar tag memiliki pasangan pembuka dan penutup. Jangan khawatir jika belum menghafal semuanya. Anda akan mengenalnya melalui latihan.

2. Struktur Dokumen HTML

Buat file bernama index.html, lalu tulis kode berikut:

Fungsi setiap bagian:

• <!DOCTYPE html> memberi tahu browser bahwa dokumen memakai HTML5.
• <html> membungkus seluruh dokumen. lang="id" menyatakan bahasa utamanya adalah Bahasa Indonesia.
• <head> menyimpan informasi tentang halaman yang tidak menjadi isi utama.
• <title> menentukan tulisan pada tab browser.
• <body> berisi semua yang terlihat oleh pengunjung.

3. Cara Browser Membacanya

Browser membaca HTML dari atas ke bawah, membentuk struktur seperti pohon, kemudian menampilkannya sebagai halaman. Karena itu, elemen harus disusun dengan benar.

Pada contoh tersebut, h2 dan p berada di dalam article. Hubungan ini disebut nesting atau bersarang.

Kesalahan Umum

• Menyimpan file sebagai index.html.txt.
• Lupa menulis tag penutup.
• Menempatkan isi halaman di luar <body>.
• Menyilangkan tag, misalnya <strong><em>Teks</strong></em>.

Latihan

1. Ubah isi <title> menjadi nama Anda.
2. Ganti judul dan paragraf di dalam <body>.
3. Tambahkan paragraf kedua.
4. Simpan lalu muat ulang browser.

Rangkuman

HTML menyusun makna dan struktur konten. Sebuah dokumen dasar memiliki DOCTYPE, html, head, dan body. Fokus pertama Anda bukan menghafal tag, melainkan memahami cara elemen disusun dan saling membungkus.