Membuka Halaman HTML

File HTML yang telah dibuat belum berguna sebelum kita melihat hasilnya di browser. Membuka, mengubah, dan menyegarkan halaman adalah siklus yang akan kita ulang ratusan kali selama belajar web, sehingga cara kerja yang efisien sejak awal menghemat banyak waktu. Pada Chapter ini kita mempraktikkan tiga cara membuka file HTML, membaca alamat file:// yang muncul di address bar, dan merapikan siklus edit-simpan-refresh beserta pintasan keyboardnya.

Tiga Cara Membuka File #

Ketiganya menghasilkan halaman yang sama; yang membedakan adalah kecepatan dan keleluasaan kita:

1. Double-click file di File Explorer atau Finder: dibuka oleh browser bawaan sistem, paling cepat tetapi selalu browser yang sama.
2. Drag file ke jendela browser: seret file dari Explorer, lalu lepaskan di area halaman browser yang sedang terbuka. Cara ini praktis saat kita ingin memilih browser tertentu.
3. Ctrl+O di dalam browser (Cmd+O pada macOS): browser menampilkan dialog Open File, kita arahkan ke folder latihan, lalu pilih file HTML-nya.

Cara ketiga paling fleksibel karena tidak bergantung pada browser bawaan sistem. Ketika Budi ingin membandingkan halamannya di Chrome dan Firefox, Budi cukup menekan Ctrl+O di masing-masing browser. Untuk mengubah browser bawaan, gunakan pengaturan sistem operasi.

Alamat file:// dan http:// #

Perhatikan address bar setelah halaman terbuka. Browser menampilkan alamat lengkap berkas, misalnya file:///C:/Users/Budi/latihan-html/halaman-pertama.html pada Windows. Awalan file:// berarti halaman dimuat langsung dari penyimpanan komputer kita, bukan dikirim oleh server web.

Sebaliknya, halaman di internet memiliki awalan http atau https, misalnya www.example.com/artikel.html, yang berarti konten dikirim oleh server melalui jaringan. Untuk seluruh latihan di Course ini, file:// sudah cukup karena browser memperlakukan file lokal seperti halaman web biasa. Konsep server akan kita sentuh lagi ketika halaman mulai diunggah ke internet.

Menyegarkan Halaman Setelah Edit #

Browser tidak memantau perubahan file secara otomatis. Ketika kita mengubah kode di editor, browser masih menampilkan versi lama hingga kita memerintahkan pembaruan. Mekanismenya:

1. Ubah kode di editor, lalu simpan file dengan Ctrl+S.
2. Pindah ke jendela browser.
3. Tekan Ctrl+R (atau F5) untuk refresh; browser membaca ulang file dari disk dan merender versi terbaru.

Pintasan tambahan yang perlu dikenal adalah hard refresh dengan Ctrl+Shift+R. Browser menyimpan salinan aset yang pernah dimuat ke dalam cache agar tampilan berikutnya lebih cepat, dan hard refresh mengabaikan salinan itu serta memaksa browser membaca ulang semuanya. Untuk file lokal, refresh biasa hampir selalu cukup; hard refresh kita simpan untuk situasi ketika perubahan tidak mau muncul.

Tabel Pintasan Penting #

Tabel berikut merangkum pintasan yang membentuk siklus kerja kita sehari-hari:

Baris terakhir adalah pintasan untuk alat pada Chapter berikutnya. Dua baris pertama milik editor, tiga baris sisanya milik browser. Dengan lima pintasan ini, tangan kita tidak perlu kembali ke mouse selama siklus kerja berlangsung.

Contoh File untuk Latihan #

Kita uji siklus lengkap dengan file berikut. Simpan sebagai latihan-refresh.html, buka di browser, lalu ikuti latihan di bawah kode:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan Edit-Simpan-Refresh</title>
</head>
<body>
  <h1>Menu Sarapan</h1>
  <p>Halaman ini menyertai latihan siklus edit-simpan-refresh.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Menu Sarapan" di bagian atas halaman
  - Satu paragraf di bawahnya
  - Teks "Latihan Edit-Simpan-Refresh" pada tab browser

Cara membaca percobaan kita:

1. Baris 8 (<h1>Menu Sarapan</h1>): heading yang akan kita ubah. Edit baris ini di editor menjadi <h1>Menu Makan Siang</h1>, simpan dengan Ctrl+S, lalu tekan Ctrl+R di browser; judul besar berubah seketika.
2. Baris 9 (<p>...</p>): coba tambahkan satu kalimat baru di dalam paragraf ini tanpa menyimpan file, lalu refresh; teks baru tidak muncul, dan setelah disimpan, refresh berikutnya menampilkannya.
3. Baris 5 (<title>...): ubah judul dokumen, simpan, lalu amati teks pada tab browser setelah refresh; tab juga ikut diperbarui.

Latihan sederhana di atas menegaskan satu hal: hasil kerja kita hanya muncul di browser setelah file disimpan dan halaman disegarkan. Setelah siklus ini terasa mulus, Chapter berikutnya mengajak kita melihat ke dalam browser menggunakan DevTools.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Dealing with files
• WHATWG — URL Living Standard
• MDN Web Docs — Browsing the web

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan Edit-Simpan-Refresh</title>
</head>
<body>
  <h1>Menu Sarapan</h1>
  <p>Halaman ini menyertai latihan siklus edit-simpan-refresh.</p>
</body>
</html>