Kita telah mengenal definisi HTML, perjalanan file hingga ter-render, anatomi elemen, dan atribut. Sekarang saatnya merangkai seluruh konsep tersebut menjadi satu halaman HTML utuh dan membuka hasilnya di browser. Chapter ini memandu langkah demi langkah, mulai dari menyiapkan folder kerja sampai melihat halaman pertama tampil di layar.

Langkah 1: Menyiapkan Folder Kerja #

Folder khusus menjaga file belajar tetap terkumpul di satu tempat. Buat folder bernama belajar-html di lokasi yang mudah dijangkau, misalnya di dalam folder Dokumen. Lewat terminal, folder dibuat dengan perintah:

bash 
mkdir belajar-html

Sepanjang chapter ini, kita bekerja di dalam folder tersebut.

Langkah 2: Membuat File index.html #

Buka editor teks — Notepad, TextEdit, atau VS Code — lalu buat berkas baru dan simpan dengan nama index.html di dalam folder belajar-html. Nama index.html dipilih karena nama tersebut adalah nama baku halaman utama sebuah website; server umumnya mencari file index.html saat pengunjung membuka alamat utama.

Struktur folder setelah langkah ini:

text 
belajar-html/
└── index.html

Langkah 3: Menulis Dokumen Lengkap #

Dokumen HTML terkecil yang sah memuat dua bagian besar: head untuk informasi dokumen dan body untuk konten yang tampil di layar. Ketik kode berikut ke dalam index.html — diketik manual, bukan disalin, agar tangan terbiasa dengan pola tag:

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Pertama Budi</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini halaman HTML pertama yang saya tulis.</p>
</body>
</html>

Simpan file dengan Ctrl+S, lalu kita telaah setiap barisnya:

  1. Baris 1 (<!DOCTYPE html>): deklarasi doctype; memberi tahu browser untuk memproses dokumen dalam mode standar HTML modern. Ditulis dengan huruf besar sesuai konvensi.
  2. Baris 2 (<html lang="id">): elemen akar yang membungkus seluruh isi dokumen; atribut lang="id" menyatakan bahasa konten adalah Bahasa Indonesia.
  3. Baris 3 (<head>): pembuka bagian metadata — informasi tentang dokumen yang tidak tampil sebagai isi halaman.
  4. Baris 4 (<meta charset="UTF-8">): menetapkan pengodean karakter UTF-8 agar huruf tampil konsisten; standar menempatkan deklarasi tersebut pada bagian paling awal dokumen, dalam rentang 1024 byte pertama.
  5. Baris 5 (<title>...</title>): judul dokumen yang tampil pada tab browser dan hasil pencarian.
  6. Baris 6 (</head>): penutup bagian metadata.
  7. Baris 7 (<body>): pembuka bagian isi — semua yang tampil di layar ditulis di dalam bagian ini.
  8. Baris 8 (<h1>...</h1>): judul tingkat teratas halaman.
  9. Baris 9 (<p>...</p>): paragraf pertama halaman.
  10. Baris 10-11 (</body> dan </html>): penutup bagian isi dan elemen akar.

Langkah 4: Membuka File di Browser #

Buka aplikasi browser — Chrome, Firefox, Edge, atau Safari — lalu gunakan salah satu cara berikut:

  • Klik dua kali file index.html dari file manager.
  • Di browser: menu File → Open File (Ctrl+O atau Cmd+O), lalu pilih index.html.

Browser membaca file langsung dari penyimpanan komputer. Address bar akan menampilkan alamat dengan skema file://, misalnya file:///C:/Users/Budi/belajar-html/index.html di Windows atau file:///home/budi/belajar-html/index.html di Linux. Skema file:// menandakan halaman dimuat tanpa server — berbeda dari halaman internet yang dimuat melalui skema http:// atau https://.

Hasil di Browser #

Tab browser menampilkan judul “Halaman Pertama Budi”, dan area halaman menampilkan:

Judul “Halo, Dunia!” tampil besar dan tebal sebagai heading, diikuti paragraf berukuran huruf normal. Demo di atas menyematkan isi body persis seperti file index.html yang baru kita tulis — judul dokumen tetap tampil pada tab browser saat kamu membuka file milikmu sendiri. Coba ubah isi paragraf, simpan, lalu muat ulang tab dengan F5 — perubahan langsung terlihat. Siklus sunting–simpan–muat ulang inilah alur kerja utama kita sepanjang Course HTML.

Ringkasan #

  • Dokumen HTML minimal: doctype, elemen html, head dengan meta charset dan title, lalu body.
  • head memuat metadata; body memuat konten yang tampil.
  • Skema file:// berarti browser memuat file langsung dari penyimpanan tanpa server.
  • Alur kerja: sunting, simpan, muat ulang.

Halaman pertama telah tampil di browser. Section berikutnya menyiapkan lingkungan kerja yang lebih nyaman sebelum kita menyelami elemen-elemen HTML satu per satu.