Apa itu halaman web

Setiap halaman yang kamu buka berawal dari file teks biasa. Klik kanan hampir di halaman mana pun, pilih View Page Source, dan kamu bisa membaca HTML yang dikirim server.

Halaman adalah file teks

Saat kamu mengetik alamat di browser, browser meminta sebuah file ke server dan menerima teks biasa. Teks itu ditulis dalam HTML, HyperText Markup Language. Browser membacanya dari atas ke bawah, menentukan bagian mana yang berupa judul, paragraf, tautan, dan gambar, lalu menggambar halaman yang kamu lihat. Kamu bisa membuktikannya di hampir semua situs: klik kanan halaman dan pilih View Page Source. Di balik warna dan tata letak ada file teks panjang yang bisa dibaca.

HTML adalah bahasa markah, bukan bahasa pemrograman. HTML tidak punya perulangan dan tidak berhitung. Tugasnya memberi label pada konten: baris ini judul utama, tiga baris ini sebuah daftar, frasa ini menaut ke halaman lain. Dua bahasa lain biasanya menyertainya. CSS menentukan tampilan (warna, huruf, jarak, tata letak), dan JavaScript membuat halaman bereaksi terhadap klik dan ketikan. Kursus ini membahas lapisan pertama. Kursus CSS membahas lapisan kedua.

Kerangka yang dimiliki setiap halaman

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

Baris pertama, <!DOCTYPE html>, adalah sisa dari masa awal web. Satu-satunya tugasnya sekarang adalah memberi tahu browser untuk memakai mode standar, bukan mode kompatibilitas lama yang meniru bug browser tahun 1990-an, jadi selalu pertahankan baris ini. Berikutnya elemen <html>, yang membungkus seluruh dokumen. Atribut lang-nya menyebut bahasa halaman. Pembaca layar memakainya untuk memilih pelafalan yang tepat, dan alat penerjemah memakainya untuk mengetahui bahasa yang diterjemahkan.

Di dalam <html> ada dua bagian. <head> memuat informasi tentang halaman yang tidak digambar di halaman itu sendiri. <meta charset="utf-8"> menyatakan pengodean karakter yang dipakai file; UTF-8 dapat menyimpan huruf dari semua sistem tulisan, termasuk Korea, sehingga teks tidak berubah menjadi simbol aneh. <title> adalah nama yang tampil di tab browser, di markah, dan di hasil pencarian, dan merupakan hal pertama yang diumumkan pembaca layar saat halaman dibuka. <body> memuat semua yang tampil di layar.

Dari teks menjadi pohon

Browser tidak menyimpan HTML-mu sebagai satu untaian panjang. Browser mengurainya menjadi pohon objek yang disebut DOM, Document Object Model. Setiap elemen menjadi simpul, dan elemen yang ditulis di dalam elemen lain menjadi anaknya. Pada gambar di bawah, title adalah anak dari head, sedangkan h1 dan p adalah anak dari body. Selektor CSS dan JavaScript sama-sama bekerja pada pohon ini, dan itulah salah satu alasan penyusunan bersarang yang cermat itu penting.

Browser itu pemaaf. Kalau kamu lupa tag penutup, pengurai mengikuti aturan perbaikan yang tertulis dalam standar HTML dan tetap membangun pohon, tetapi pohon hasil perbaikan itu mungkin bukan yang kamu maksud. Membiasakan diri menulis struktur dengan benar menghemat banyak waktu mencari kesalahan yang membingungkan di kemudian hari.

Siapa yang menulis aturannya

Tim Berners-Lee menulis usulan pertama World Wide Web pada Maret 1989 saat bekerja di CERN, dan pada akhir 1990 server web dan browser pertama sudah berjalan di sana. Sejak itu HTML berkembang pesat. Kini HTML didefinisikan oleh HTML Living Standard, yang dikelola WHATWG, kelompok yang dibentuk para pembuat browser. Pada tahun 2019 W3C dan WHATWG sepakat bekerja pada satu versi ini. Living berarti dokumen itu tidak punya nomor versi dan terus diperbarui, jadi nama HTML5 yang masih kamu jumpai di buku hanyalah label longgar.

Editor di bawah bekerja seperti browser mungil. Ketik di kiri dan hasilnya muncul di kanan sesaat kemudian. Putar menggambar ulang hasilnya seketika. Kalau menurutmu sudah selesai, tekan Periksa: halaman menjalankan beberapa tes pada HTML-mu dan memberi tahu mana yang masih gagal. Mulai lagi mengembalikan kode awal.