Kerangka HTML pertamamu, baris demi baris

Semua halaman web, sesederhana atau serumit apa pun, berangkat dari satu berkas teks berisi HTML. Di bagian pertama seri ini kita membuat berkas itu dari nol dan membahas isinya pelan-pelan. Tidak ada yang perlu dihafal: tujuan kita hanya paham kenapa setiap baris ada di sana.

Apa itu HTML

HTML adalah bahasa untuk memberi struktur pada isi halaman: mana judul, mana paragraf, mana gambar, mana tautan. HTML bukan bahasa pemrograman; ia tidak menghitung atau mengambil keputusan. Tugasnya menandai isi supaya peramban tahu cara menampilkannya.

Dua bahasa lain akan menyusul di seri ini dan seri berikutnya. CSS mengatur tampilan (warna, huruf, tata letak), sedangkan JavaScript mengatur perilaku (apa yang terjadi saat tombol diklik). Urutan belajarnya memang begitu: struktur dulu, tampilan kemudian, perilaku belakangan.

Menyiapkan folder dan berkas

Buat satu folder khusus untuk latihan, misalnya halaman-pertama. Di dalamnya buat berkas baru bernama index.html. Nama ini bukan kebetulan: server web umumnya mencari berkas index.html sebagai halaman utama sebuah folder.

halaman-pertama/
└── index.html

Kerangka minimal

Buka index.html di editor kode, lalu ketik kerangka berikut. Sebaiknya diketik sendiri, bukan disalin, supaya tangan ikut terbiasa dengan polanya.

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Halaman pertamaku</title>
  </head>
  <body>
    <h1>Halo, dunia!</h1>
    <p>Ini halaman web pertama saya.</p>
  </body>
</html>

Simpan berkasnya. Dua belas baris ini sudah merupakan halaman web yang sah dan lengkap.

Membedah baris demi baris

Mari lihat satu per satu apa yang baru saja kita tulis.

• <!doctype html> memberi tahu peramban bahwa dokumen ini memakai HTML modern. Selalu letakkan di baris pertama.
• <html lang="id"> adalah pembungkus seluruh dokumen. Atribut lang="id" menyatakan isi halaman berbahasa Indonesia; ini membantu pembaca layar memilih pelafalan yang benar.
• <head> berisi keterangan tentang halaman yang tidak tampil sebagai isi: judul tab, pengaturan karakter, dan nantinya tautan ke berkas CSS.
• <meta charset="utf-8"> memastikan huruf beraksen dan simbol tampil benar.
• <meta name="viewport" ...> membuat halaman menyesuaikan lebar layar ponsel. Kita bahas lebih dalam di bagian kelima.
• <title> adalah teks yang muncul di tab peramban dan di hasil mesin pencari.
• <body> berisi semua yang benar-benar terlihat oleh pengunjung.

Perhatikan polanya: hampir setiap elemen punya tag pembuka seperti <p> dan tag penutup seperti </p>, dengan isi di antaranya. Beberapa elemen, misalnya <meta>, tidak punya isi sehingga tidak butuh tag penutup.

Indentasi (jarak menjorok di awal baris) tidak memengaruhi tampilan halaman. Fungsinya membantu manusia melihat elemen mana berada di dalam elemen mana. Biasakan rapi sejak awal; dua spasi per tingkat sudah cukup.

Menambah isi ke body

Sekarang ubah isi <body> supaya mulai terasa seperti halaman milik sendiri. Sepanjang seri ini kita membangun halaman profil sederhana untuk tokoh contoh bernama Rani.

<body>
  <h1>Rani Kusuma</h1>
  <p>Saya sedang belajar membuat halaman web dari nol.</p>
  <p>Halaman ini saya tulis sendiri, baris demi baris.</p>
</body>

Elemen <h1> adalah judul utama halaman; pakai hanya satu per halaman. Elemen <p> adalah paragraf. Kalau kamu menekan Enter berkali-kali di dalam satu paragraf, peramban tetap menampilkannya sebagai satu paragraf. Untuk paragraf baru, tulis elemen <p> baru.

Membuka di peramban

Buka folder latihan lewat pengelola berkas, lalu klik dua kali index.html. Berkas akan terbuka di peramban dan kamu melihat judul besar beserta dua paragraf. Setiap kali mengubah kode, simpan berkas lalu muat ulang halaman di peramban untuk melihat hasilnya.

Kesalahan yang sering terjadi

• Lupa menutup tag, misalnya menulis <p> tanpa </p>. Peramban berusaha menebak maksudmu, tetapi hasilnya bisa berantakan.
• Tag penutup salah urutan. Elemen yang dibuka terakhir harus ditutup lebih dulu.
• Menyimpan berkas dengan akhiran .txt, sehingga peramban menampilkan kodenya sebagai teks biasa.
• Menaruh isi halaman di dalam <head>. Semua yang ingin dilihat pengunjung tempatnya di <body>.