Pengenalan HTML & Cara Kerja Browser

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Menjelaskan apa itu HTML dengan kata-katamu sendiri
Memahami bagaimana browser membaca dan menampilkan HTML
Membuat file HTML pertamamu

Materi Singkat

Bayangkan kamu sedang membangun sebuah rumah. Sebelum bisa mengecat dinding atau memasang furnitur, kamu butuh kerangka dulu — bata, semen, dan struktur dasar. Nah, HTML adalah kerangka sebuah halaman web.

HTML singkatan dari HyperText Markup Language. Jangan khawatir dengan istilah ini — yang penting kamu tahu bahwa HTML adalah bahasa yang digunakan untuk memberi tahu browser "ini adalah judul", "ini adalah paragraf", "ini adalah gambar".

Bagaimana Browser Membacanya?

Saat kamu mengetik alamat website di browser (Chrome, Firefox, dll.), browser mengunduh file HTML dari server, lalu membacanya dari atas ke bawah seperti kamu membaca buku. Setiap instruksi dalam HTML disebut tag.

Tag ditulis dengan tanda kurung sudut < >. Contohnya, <p> adalah tag untuk paragraf. Hampir semua tag punya pasangan penutup yang diawali garis miring: </p>.

<p>Ini adalah sebuah paragraf.</p>

Browser membaca <p>, mengerti "ini awal paragraf", lalu menampilkan teksnya, lalu menemukan </p> yang berarti "paragraf selesai di sini".

File HTML

File HTML adalah file teks biasa dengan ekstensi .html. Kamu bisa membuatnya dengan Notepad, VS Code, atau editor teks apapun. Saat kamu membuka file .html di browser, browser akan menampilkannya sebagai halaman web.

Contoh Kode

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah halaman web pertamaku.</p>
  </body>
</html>

Penjelasan:

<!DOCTYPE html> — memberitahu browser bahwa ini adalah file HTML5 (versi HTML terbaru)
<html> — tag pembuka, semua konten halaman ada di sini
<head> — berisi informasi tentang halaman (tidak tampil di layar)
<title> — judul yang muncul di tab browser
<body> — semua yang tampil di layar ada di sini
<h1> — judul besar
<p> — paragraf

Tugas Kecil

Coba kerjakan ini sendiri dulu sebelum melihat jawaban: