HTML (singkatan dari HyperText Markup Language) adalah bahasa buat menulis isi halaman web: judul, paragraf, gambar, link. Markup artinya penanda: kamu menandai tiap bagian teks, "ini judul", "ini paragraf", lalu browser menampilkannya sesuai tanda itu. HyperText artinya teks yang bisa nyambung ke halaman lain lewat link.
🧪 Tebakan cepat: halaman yang cuma pakai HTML, tanpa CSS sama sekali, masih bisa dibaca gak? Tebak dulu, jawabannya ada di bagian "HTML, CSS, dan JavaScript".
Tag: penanda di sekitar teks
Penanda di HTML disebut tag. Ini satu judul dan satu paragraf:
<h1>Halo!</h1>
<p>Ini paragraf biasa.</p>
Ambil baris pertama:
<h1>adalah tag pembuka, artinya "judul mulai di sini".Halo!adalah isinya, teks yang tampil di halaman.</h1>adalah tag penutup. Bentuknya sama dengan tag pembuka, ditambah garis miring/.
Tag pembuka, isi, dan tag penutup bareng-bareng disebut elemen. Baris kedua juga elemen: <p> menandai paragraf.
Hasilnya di halaman: "Halo!" tampil besar dan tebal, lalu "Ini paragraf biasa." di bawahnya. Tag-nya sendiri gak kelihatan. Tugasnya cuma ngasih tahu browser arti isinya.
Tag penutup itu penting. Kalau </h1> hilang, browser menganggap judulnya belum selesai, jadi paragraf di bawahnya ikut jadi judul besar.
Di latihan pertama, kode <h1>Halo Dunia!</h1> sudah ada di editor dan sudah benar. Cukup tekan Run Test buat lihat hasilnya.
Kerangka satu halaman HTML
Satu halaman HTML yang lengkap punya kerangka kayak gini:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini website pertamaku.</p>
</body>
</html>
<!DOCTYPE html>di baris paling atas memberi tahu browser bahwa ini dokumen HTML modern. Dia bukan elemen, jadi gak punya penutup.<html>adalah tag paling luar. Dia membungkus seluruh dokumen, termasuk<head>dan<body>. Tulisanlang="id"memberi tahu bahwa halamannya berbahasa Indonesia.<head>berisi info tentang halaman, dan isinya gak tampil di halaman. Contohnya<title>: teksnya muncul di tab browser.<body>berisi semua yang tampil di halaman: judul, paragraf, gambar, link.
Gampangnya: yang dilihat pengunjung masuk <body>, info buat browser dan mesin pencari masuk <head>. Tag yang ada di dalam tag lain ditulis menjorok ke dalam, biar kelihatan siapa membungkus siapa.
HTML, CSS, dan JavaScript
Tiga bahasa ini bagi tugas:
- HTML menyusun struktur dan arti isinya: ini judul, ini paragraf, ini daftar.
- CSS mengatur tampilannya: warna, ukuran huruf, posisi.
- JavaScript bikin halaman bisa bereaksi, misalnya menu yang kebuka waktu diklik.
Jadi halaman tanpa CSS tetap bisa dibaca, cuma polos: huruf dan warna bawaan browser. Kalau halaman web itu rumah, HTML rangkanya, CSS cat dan dekorasinya.
⚠️ Jebakan yang sering ketemu
- Isi halaman ditulis di
<head>. Teks di sana gak akan tampil. Judul, paragraf, dan gambar masuk<body>. - Lupa
<!DOCTYPE html>. Browser pindah ke mode lama (quirks mode) yang meniru browser zaman dulu, jadi tampilannya bisa sedikit beda. - Tag huruf besar.
<H1>tetap jalan, tapi kebiasaan yang dipakai di mana-mana adalah huruf kecil semua:<h1>.
TL;DR: HTML (HyperText Markup Language) adalah bahasa penanda buat menyusun isi halaman web. Tag pembuka, isi, dan tag penutup membentuk satu elemen, misalnya <h1>Halo!</h1>. Kerangka halaman: <!DOCTYPE html>, lalu <html> yang membungkus semuanya, <head> buat info yang gak tampil (kayak <title>), dan <body> buat semua yang tampil. HTML menyusun struktur, CSS mengatur tampilan.
