HTML · Bab 1

Mengenal Web & Struktur Dokumen HTML

Peran browser dan server, arti elemen, tag, dan atribut, kerangka dokumen HTML yang benar, komentar, serta cara memeriksa halaman dengan DevTools.

Setiap halaman web yang kamu buka, dari toko daring sampai situs berita, dibangun di atas HTML. Di topik HTML dan CSS kamu akan membangun satu hasil nyata: halaman katalog dan kontak untuk toko ritel Smart Retail, toko kebutuhan harian dengan tiga kategori (Snacks & Confectionery, Cold Beverages, dan Stationery) dan tujuh produk. Toko yang sama nanti tumbuh menjadi aplikasi kasir di topik Laravel. Bab ini memperkenalkan cara kerja web dan bentuk dasar sebuah dokumen HTML.

1.1 Browser, Server, dan HTML

Saat kamu mengetik alamat situs, browser (Chrome, Firefox, Edge, Safari) mengirim permintaan ke server, yaitu komputer yang menyimpan berkas situs itu. Server menjawab dengan berkas HTML, lalu browser membaca HTML tersebut, meminta berkas lain yang disebutnya (gambar, CSS, JavaScript), dan menggambar hasilnya di layar.

HTML (HyperText Markup Language) adalah bahasa markah (markup language): ia menandai bagian-bagian isi, misalnya “ini judul”, “ini paragraf”, “ini gambar”. HTML bukan bahasa pemrograman karena tidak punya logika seperti percabangan atau perulangan. Tiga bahasa web bekerja bersama:

Bahasa	Peran	Contoh
HTML	struktur dan makna isi	judul, paragraf, daftar produk
CSS	tampilan	warna, ukuran huruf, tata letak
JavaScript	perilaku	tombol tambah ke keranjang

1.2 Elemen, Tag, dan Atribut

Perhatikan satu baris HTML berikut:

<p class="slogan">Belanja kebutuhan harian, cepat dan hemat.</p>

 adalah tag pembuka, dan  adalah tag penutup (ada garis miring).
Teks di antaranya adalah isi.
Tag pembuka, isi, dan tag penutup bersama-sama disebut satu elemen, yaitu elemen paragraf.
class="slogan" adalah atribut: informasi tambahan untuk elemen, ditulis di tag pembuka dengan pola nama="nilai".

Sebagian elemen tidak punya isi dan tidak punya tag penutup. Elemen seperti ini disebut void element, contohnya   (pindah baris), <img> (gambar), <meta>, dan <input>.

Elemen boleh berada di dalam elemen lain (bersarang), asalkan ditutup dengan urutan terbalik dari urutan dibuka: Promo hari ini benar, sedangkan Promo salah. Nama tag tidak membedakan huruf besar dan kecil, tetapi kebiasaan yang dipakai di mana-mana adalah huruf kecil.

HTML + JavaScript

🧪 Coba ubah: ganti isi <h1>, lalu tambahkan satu paragraf baru berisi nama produk favoritmu dari toko ini.

1.3 Kerangka Dokumen HTML

Halaman HTML yang utuh selalu punya kerangka yang sama:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Smart Retail · Katalog</title>
  </head>
  <body>
    <h1>Smart Retail</h1>
    <p>Belanja kebutuhan harian, cepat dan hemat.</p>
  </body>
</html>

Baris	Gunanya
`<!doctype html>`	memberi tahu browser bahwa ini dokumen HTML modern, sehingga halaman ditampilkan dengan aturan standar
`<html lang="id">`	akar dokumen; `lang="id"` menyatakan bahasa Indonesia, dipakai pembaca layar untuk pelafalan dan oleh fitur terjemahan
`<head>`	data tentang halaman yang tidak tampil di isi halaman
`<meta charset="utf-8">`	pengodean karakter, supaya huruf seperti é dan emoji tampil benar; letakkan di awal `<head>`
`<meta name="viewport" …>`	membuat halaman menyesuaikan lebar layar ponsel (dibahas lagi di topik CSS)
`<title>`	judul di tab browser, di daftar bookmark, dan di hasil mesin pencari
`<body>`	semua isi yang tampil di halaman

Playground di situs ini sudah menyediakan kerangka tersebut, jadi di playground cukup tulis isi <body>. Saat membuat berkas sendiri, kerangka lengkap wajib ditulis.

1.4 Komentar

Komentar adalah catatan untuk pembaca kode. Browser tidak menampilkannya. Komentar dibuka dengan , dan boleh terdiri atas beberapa baris.

HTML + JavaScript

🧪 Coba ubah: hapus tanda pembuka dan penutup komentar kedua, lalu jalankan. Paragraf di dalamnya kini tampil.

Komentar tetap ikut terkirim ke browser dan bisa dilihat siapa pun lewat “lihat sumber halaman”. Jangan pernah menulis kata sandi atau data rahasia di komentar.

1.5 Membuat Berkas HTML Sendiri

Buat folder baru, misalnya smart-retail.
Buka folder itu di editor teks (misalnya VS Code), lalu buat berkas index.html.
Salin kerangka dari bagian 1.3, simpan, lalu buka berkasnya di browser (klik dua kali, atau seret ke jendela browser).
Setiap kali mengubah kode: simpan, lalu muat ulang halaman di browser.

Nama index.html dipilih karena server web biasanya menyajikan berkas bernama itu sebagai halaman utama sebuah folder. Biasakan nama berkas memakai huruf kecil, tanpa spasi, dan memakai tanda hubung (kontak-toko.html).

1.6 Memeriksa Halaman dengan DevTools

Setiap browser desktop punya DevTools, alat bawaan untuk melihat isi halaman.

Klik kanan sebuah bagian halaman, lalu pilih Inspect (di browser berbahasa Indonesia: Periksa). Pintasannya F12 atau Ctrl+Shift+I (macOS: Cmd+Option+I).
Panel Elements menampilkan pohon elemen. Arahkan kursor ke satu elemen di pohon, dan bagian itu akan disorot di halaman.
Klik dua kali teks di panel Elements untuk mengubahnya. Perubahan ini hanya sementara dan hilang saat halaman dimuat ulang.
“Lihat sumber halaman” (Ctrl+U) menampilkan teks HTML asli dari server. Panel Elements menampilkan hasil olahan browser, termasuk perbaikan otomatis atas kesalahan. Karena itu keduanya bisa berbeda.

Coba sekarang: jalankan playground di bagian 1.2, klik kanan judul “Smart Retail” di hasilnya, lalu pilih Inspect.

1.7 Ringkasan

Browser meminta berkas ke server, lalu menampilkan HTML yang diterimanya.
Elemen terdiri atas tag pembuka, isi, dan tag penutup. Atribut memberi informasi tambahan dengan pola nama="nilai".
Kerangka wajib: <!doctype html>, <html lang="id">, <head> (berisi <meta charset="utf-8">, meta viewport, dan <title>), lalu <body>.
Komentar  tidak tampil, tetapi tetap terbaca di sumber halaman.
DevTools (Inspect) adalah alat utama untuk memeriksa halaman.