Membuka HTML di Browser

File HTML tidak dijalankan seperti program biasa; kita membuka file tersebut layaknya membuka dokumen, lalu browser membaca isinya dan menampilkan hasil render. Alur tersebut membuat siklus belajar HTML sangat cepat: tanpa kompilasi, tanpa server, cukup file dan browser. Chapter ini membahas cara membuka file, membaca alamatnya, serta alur kerja edit–simpan–muat ulang.

Cara Membuka File #

Tiga cara berikut sama-sama benar:

Klik dua kali file index.html di File Explorer atau Finder — sistem operasi membuka file tersebut dengan browser bawaan untuk ekstensi .html.
Klik kanan → Open With — memilih browser tertentu untuk sekali buka; berguna ketika komputer terpasang beberapa browser.
Dari dalam browser — tekan Ctrl+O (Windows/Linux) atau Cmd+O (macOS), lalu pilih file index.html.

Membaca Alamat file:// #

Setelah file terbuka, address bar browser menampilkan alamat yang diawali skema file://:

text

file:///C:/Users/Budi/website-pertama/index.html
file:///home/budi/website-pertama/index.html

Baris pertama adalah contoh alamat di Windows, baris kedua di Linux atau macOS. Skema file:// berarti browser membaca berkas langsung dari penyimpanan lokal komputer. Tiga garis miring setelah file: adalah bagian normal dari format alamat: dua garis milik penulisan skema, satu garis menandai akar penyimpanan.

Perbedaan file:// dan http:// #

Aspek	`file://`	`http://`
Sumber halaman	Dibaca langsung dari penyimpanan lokal	Diminta dari web server
Kebutuhan server	Tidak perlu	Server wajib berjalan
Posisi di Course ini	Cukup untuk seluruh chapter	Dibahas pada Course lanjutan

Perilaku lanjutan tertentu — misalnya pemrosesan form di sisi server — memang hanya relevan pada alamat http://. Untuk mempelajari struktur dan tampilan halaman, alamat file:// sepenuhnya memadai, dan seluruh contoh Course ini memakai pola tersebut.

Alur Kerja: Edit, Simpan, Muat Ulang #

Browser tidak membaca layar editor; browser membaca isi file dari penyimpanan. Akibatnya, perubahan di editor tidak otomatis terlihat hingga file disimpan dan halaman dimuat ulang:

text

tulis di editor → simpan (Ctrl+S / Cmd+S) → muat ulang (F5 / Ctrl+R / Cmd+R) → lihat hasil

Muat ulang dapat dilakukan lewat tombol refresh pada browser atau pintasan di atas. Ketika hasil editan tidak muncul, periksa dua hal berurutan: apakah file sudah disimpan, lalu apakah halaman sudah dimuat ulang.

Halaman pertama kita kini tampil di layar. Chapter terakhir pada Section ini memperkenalkan DevTools, perkakas untuk mengintip cara browser membaca kode HTML kita.