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 situs berita sampai katalog perpustakaan daring, dibangun di atas HTML. Contoh di materi HTML dan CSS membangun satu hasil nyata: halaman katalog dan kontak Perpustakaan Pelita, perpustakaan umum dengan tiga rak (Fiksi, Sains & Teknologi, dan Sejarah) dan tujuh judul buku. Lab di setiap bab memakai studi kasus lain, jadi di sana kamu menerapkan konsepnya sendiri, bukan menyalin contoh materi. 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 buku
CSS	tampilan	warna, ukuran huruf, tata letak
JavaScript	perilaku	tombol pinjam buku

1.2 Elemen, Tag, dan Atribut

Perhatikan satu baris HTML berikut:

Berkas: index.html

<p class="slogan">Cari, pinjam, dan kembalikan buku dengan mudah.</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: Baru di rak Fiksi benar, sedangkan Baru 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 judul buku favoritmu.

1.3 Kerangka Dokumen HTML

Halaman HTML yang utuh selalu punya kerangka yang sama:

Berkas: index.html

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Perpustakaan Pelita · Katalog</title>
  </head>
  <body>
    <h1>Perpustakaan Pelita</h1>
    <p>Cari, pinjam, dan kembalikan buku dengan mudah.</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 juga bisa menonaktifkan kode sementara, seperti paragraf terakhir pada contoh berikut. 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 perpustakaan-pelita.
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-perpustakaan.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 “Perpustakaan Pelita” 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.

Berikutnya: menyusun teks, judul bertingkat, dan daftar agar isi halaman mudah dibaca.

Kondisi awal

Kamu baru mulai mengenal web. Kita memakai cerita Smart Retail, toko dengan produk, kategori, harga, dan stok yang dilihat kasir. Bab ini adalah tur terarah tanpa lab dan tanpa zona tempel. Belum perlu memasang aplikasi khusus: pada Langkah 3 kamu hanya memakai editor teks dan browser yang biasanya sudah ada di komputer.

Playground adalah kotak contoh kode di materi. Tekan Jalankan, lalu lihat Preview, yaitu hasil tampilan kode. Ikuti contoh dari atas ke bawah.

Panduan mengenal halaman web

Langkah 1: Ikuti perjalanan halaman

Browser adalah aplikasi pembuka web, seperti Chrome atau Firefox. Server adalah komputer yang melayani permintaan berkas situs. Saat pengguna membuka alamat katalog Smart Retail, browser meminta halaman ke server. Server mengirim HTML; browser membacanya dan meminta berkas lain yang disebut di halaman, misalnya gambar.

HTML (HyperText Markup Language) adalah bahasa markah: penanda struktur dan makna isi. HTML menandai judul dan paragraf, bukan menghitung perubahan stok. CSS mengatur tampilan seperti warna dan jarak. JavaScript memberi perilaku seperti menanggapi tombol. Jalankan contoh HTML ini.

Berkas: index.html

HTML + JavaScript

Hasil: Preview menampilkan judul Smart Retail dan paragraf Katalog produk untuk kasir di bawahnya.

Langkah 2: Bedakan elemen, tag, dan atribut

Tag adalah penanda dalam kurung sudut.  membuka paragraf dan  menutupnya. Elemen mencakup tag pembuka, isi, dan tag penutup. Atribut memberi informasi tambahan di tag pembuka, dengan bentuk nama dan nilai seperti class="slogan". Atribut class memberi nama kelompok elemen untuk penataan nanti; atribut title memberi keterangan saat kursor diam di atas elemen.

Elemen bersarang berada di dalam elemen lain. Tutup elemen terdalam lebih dahulu.  menandai isi penting; pada contoh ini hanya nama produk yang dibungkusnya. void element tidak punya isi maupun tag penutup, misalnya   untuk pindah baris dan <meta> untuk informasi halaman. Biasakan nama tag huruf kecil.

Berkas: index.html

HTML + JavaScript

Hasil: Es Teh Botol tampil tebal; jam layanan berada pada baris sesudah Buka setiap hari. Pada browser desktop, diamkan kursor di paragraf terakhir untuk melihat keterangan Jam layanan toko.

Langkah 3: Baca kerangka dokumen utuh

Playground menyediakan kerangka halaman, sehingga contoh di atas cukup memuat isi halaman. Untuk berkas sendiri, baca kerangka lengkap berikut. Dokumen berarti satu berkas HTML. Ini contoh untuk disimpan di komputer, bukan potongan zona lab.

Berkas: index.html

<!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>Katalog produk untuk kasir.</p>
  </body>
</html>

Bagian	Fungsi
`<!doctype html>`	Memilih aturan HTML modern di browser
`<html lang="id">`	Membungkus dokumen dan menyatakan bahasa Indonesia, termasuk untuk pelafalan pembaca layar, yaitu aplikasi yang membacakan isi halaman bagi pengguna yang sulit melihat layar
`<head>`	Menyimpan informasi tentang halaman
`<meta charset="utf-8">`	Menentukan pengodean karakter agar huruf dan tanda baca terbaca benar
Meta `viewport`	Menyesuaikan area tampilan dengan layar perangkat
`<title>`	Memberi judul tab browser, bukan judul di isi halaman
`<body>`	Membungkus isi yang tampil di halaman

Buat folder smart-retail, buka dengan editor teks seperti VS Code, lalu buat index.html. Salin kode utuh di atas dan simpan. Buka berkas itu di browser dengan klik dua kali. Setiap selesai menyunting, simpan berkas lalu muat ulang browser. Nama index.html lazim menjadi halaman utama folder di server; gunakan nama huruf kecil tanpa spasi, misalnya kontak-toko.html.

Hasil: berkas lokal menampilkan judul Smart Retail dan paragraf katalog; tab browser berjudul Smart Retail · Katalog.

Langkah 4: Temukan komentar yang tidak tampil

Komentar adalah catatan dalam kode, dibuka dengan . Browser tidak menampilkan isinya. Komentar tetap bisa dibaca dari sumber halaman, jadi jangan menyimpan kata sandi di sana. Jalankan contoh berikut. Teks & adalah cara menulis tanda & dalam HTML; bab berikutnya menjelaskannya sebagai entitas karakter.

Berkas: index.html

HTML + JavaScript

Hasil: judul kategori dan tiga nama kategori tampil. Catatan Bagian kategori produk serta paragraf Kategori baru belum tersedia tidak tampil.

Langkah 5: Periksa hasil olahan browser

DevTools adalah alat pemeriksaan bawaan browser desktop. Pada berkas lokal Langkah 3, klik kanan judul Smart Retail lalu pilih Inspect atau Periksa. Panel Elements menampilkan susunan elemen yang sudah dibaca browser. Arahkan kursor ke elemen judul pada panel tersebut untuk menyorotnya di halaman.

Klik dua kali teks Smart Retail di Elements dan ganti dengan Smart Retail — Katalog. Perubahan ini sementara. Muat ulang halaman untuk membaca kembali berkas tersimpan. Menu Lihat sumber halaman menampilkan HTML asal; Elements menampilkan hasil olahan browser, termasuk perbaikan otomatis jika ada tag yang salah.

Hasil: judul berubah saat teksnya disunting lewat Elements, lalu kembali menjadi Smart Retail setelah halaman dimuat ulang.

Kalau ada galat

Semua teks setelah nama produk ikut tebal. Tag penutup mungkin hilang. Salin ulang paragraf Langkah 2, termasuk  sebelum kata tersedia. Browser sering memperbaiki HTML tanpa pesan galat, sehingga kesalahan terlihat sebagai tampilan yang keliru.

Halaman lokal tidak berubah. Simpan index.html, muat ulang browser, dan cocokkan alamat berkas yang terbuka dengan berkas yang disunting. Perubahan di DevTools hilang saat muat ulang karena tidak menyimpan berkas.

Isi sesudah komentar menghilang. Pastikan komentar ditutup dengan -->, seperti Langkah 4. Komentar yang tidak ditutup dapat menyembunyikan isi sesudahnya.

Judul tab tidak muncul dalam Preview. Preview berada di dalam halaman materi. Periksa judul tab dengan membuka berkas lokal utuh dari Langkah 3; judul yang terlihat di isi tetap berasal dari <h1>.

Keadaan akhir

Kamu sudah melihat struktur halaman Smart Retail, tag, atribut, komentar, dan pemeriksaan browser. Bab 2 melanjutkan cerita ini dengan menyusun panduan belanja di lab.