Menulis HTML hanya menuntut berkas teks, tetapi susunan alat yang tepat membuat latihan berjalan lebih cepat dan error lebih mudah ditemukan. Topik ini menetapkan alat kerja yang dipakai sepanjang jalur, yaitu editor teks dengan dukungan HTML, server statis lokal untuk menyajikan halaman, dan DevTools untuk memeriksanya. Setiap alat dipilih karena ringan, gratis, dan tersedia di semua sistem operasi yang umum.
Memilih editor teks#
Editor teks adalah alat utama untuk menulis markup karena dokumen HTML berupa teks biasa. Pilihan yang umum dan gratis adalah Visual Studio Code, dan editor teks lain yang setara tetap sah dipakai selama hasilnya berupa teks murni. Yang tidak cocok adalah pengolah kata, karena dokumen yang disimpannya membawa format kaya dan bukan lagi teks biasa.
Dukungan HTML pada editor menghemat banyak pekerjaan kecil. Penyorotan sintaks membedakan tag, atribut, dan teks, sehingga kesalahan ketik lebih cepat terlihat. Penulisan tag pembuka otomatis menyertakan tag penutupnya, dan pelengkapan menawarkan nama elemen yang valid. Editor modern juga membawa Emmet, yaitu fitur yang mengembangkan singkatan pendek menjadi markup lengkap, misalnya kerangka dokumen HTML dari satu karakter.
Pemasangan Visual Studio Code mengikuti prosedur standar pada situs resminya. Setelah terpasang, buat folder proyek lalu buka folder tersebut melalui menu File, Open Folder. Seluruh berkas latihan sebaiknya diletakkan di dalam satu folder yang sama agar editor dan server menunjuk lokasi yang seragam.
Menjalankan server statis lokal#
Halaman sederhana dapat dibuka langsung dari berkas melalui alamat file://, tetapi kebiasaan yang lebih baik adalah menyajikannya melalui server statis lokal. Server statis melayani berkas dari sebuah folder apa adanya melalui alamat http://localhost, sehingga halaman berperilaku serupa dengan halaman yang dilayani sungguhan. Beberapa fitur browser memperlakukan halaman file:// secara berbeda dari halaman http://, misalnya pada pembatasan permintaan lintas asal. Membiasakan server lokal sejak awal menghindarkan perbedaan semacam itu.
Langkah pertama adalah menyiapkan folder proyek. Seluruh berkas latihan diletakkan di dalam satu folder yang sama agar editor dan server menunjuk lokasi yang seragam. Perintah berikut membuat folder bernama proyek-web di dalam folder rumah (home), masuk ke dalamnya, lalu menampilkan posisinya.
# membuat folder proyek beserta seluruh foldernya bila belum ada
mkdir -p ~/proyek-web
# masuk ke folder proyek
cd ~/proyek-web
# menampilkan posisi folder saat ini
pwd/home/kal/proyek-webOpsi -p membuat seluruh folder yang dibutuhkan sekaligus dan diam saja ketika foldernya sudah ada, sehingga perintah yang sama aman dijalankan ulang. Jalur ~/proyek-web menunjuk folder rumah pengguna yang menjalankannya. Keluaran di atas diambil pada mesin dengan pengguna z, dan jalurnya menyesuaikan pengguna pada mesin lain.
Python menyertakan server statis bawaan yang cukup untuk seluruh jalur ini. Perintah berikut menyalakan server dari dalam folder proyek dan melayani isinya pada port 8000.
# tidak-dijalankan
# menjalankan server statis dari dalam folder proyek
cd ~/proyek-web
python3 -m http.server 8000Selama server berjalan, alamat http://localhost:8000 menampilkan halaman, dan daftar isi folder ditampilkan bila belum ada berkas index.html. Server dihentikan dengan menekan Ctrl+C pada terminalnya. Tanda tidak-dijalankan pada blok di atas menandai perintah yang memulai proses tanpa akhir, sehingga blok itu tidak dieksekusi saat tutorial ditulis, tetapi perintahnya tetap diketik utuh pada terminal untuk mencobanya.
Alternatif yang setara adalah ekstensi server untuk editor, misalnya ekstensi Live Server pada Visual Studio Code. Ekstensi semacam itu menyajikan folder yang sama melalui http://localhost, sehingga cara mengaksesnya tidak berubah. Tambahan utamanya adalah live reload, yaitu penyegaran halaman secara otomatis setiap berkas disimpan.
Mengenal DevTools#
DevTools adalah panel alat pengembang bawaan browser untuk memeriksa halaman yang sedang tampil. Panelnya dibuka dengan menekan F12 atau Ctrl+Shift+I pada Windows dan Linux, atau Cmd+Option+I pada macOS. Cara lainnya adalah menyorot elemen pada halaman, menekan tombol kanan mouse, lalu memilih Inspect. Ketiga cara membuka panel yang sama, dan posisinya dapat dipindah ke sisi mana pun menurut kebutuhan.
| Tab | Fungsi utama |
|---|---|
| Elements | Menampilkan pohon DOM yang sedang berjalan beserta gaya yang diterapkan pada elemen terpilih |
| Console | Menampilkan pesan dan error JavaScript, sekaligus menerima perintah JavaScript yang diketik langsung |
| Network | Mencatat setiap berkas yang diminta browser beserta status, ukuran, dan waktunya |
Tab Elements dipakai paling sering pada jalur ini. Sorotan pada pohon mengikuti elemen yang disorot di halaman, sehingga struktur yang sedang dipelajari dapat diperiksa langsung pada halaman nyata. Tab Console berguna ketika halaman mulai memuat skrip, karena error JavaScript muncul di sana beserta nomor barisnya. Tab Network membantu mendiagnosis berkas yang gagal dimuat, misalnya gambar yang tidak ditemukan dan berstatus 404.
Ketiga tab memperlihatkan keadaan halaman yang sedang berjalan, bukan berkas sumbernya. Suntingan kecil pada tab Elements hanya mengubah salinan di memori dan hilang setelah halaman dimuat ulang. Sebagai tempat mencari penyebab masalah, DevTools berperan seperti kaca pembesar, sedangkan berkas sumber tetap tempat perubahan ditulis.
Kesalahan umum#
- Server menolak berjalan dan menampilkan pesan Address already in use. Pesan itu berarti port 8000 sudah dipakai proses lain, sering kali server sebelumnya yang lupa dimatikan. Matikan proses lama dengan Ctrl+C, atau jalankan server pada port lain, misalnya python3 -m http.server 8080.
- Halaman tidak berubah setelah berkas disunting. Penyebab yang paling sering adalah berkas yang disunting bukan berkas yang dilayani, misalnya karena folder proyeknya berbeda. Periksa jalur yang terbuka pada editor dan pada alamat server, lalu muat ulang halaman. Apabila perubahan masih belum tampak, muat ulang dengan paksa melalui Ctrl+Shift+R agar cache browser dilewati.
- Dokumen disunting dengan pengolah kata. Berkas yang disimpan pengolah kata membawa format kaya dan karakter tambahan yang mengacaukan markup. Gunakan editor teks, dan pastikan ekstensi berkasnya benar, yaitu .html.
- Mengetik perintah server di folder yang salah. Server melayani folder tempat perintahnya diketik, sehingga alamat yang dibuka bisa berupa daftar isi folder yang kosong. Periksa posisi folder dengan pwd sebelum menyalakan server, atau arahkan kembali dengan cd ke ~/proyek-web.
Ringkasan#
- Editor teks dengan penyorotan sintaks dan pelengkapan tag mempercepat penulisan markup, sedangkan pengolah kata tidak cocok karena menyimpan format kaya.
- Server statis lokal menyajikan folder proyek melalui http://localhost, dan python3 -m http.server 8000 sudah cukup untuk memulai.
- Ekstensi live reload menyegarkan halaman secara otomatis setiap berkas disimpan, sehingga latihan berjalan lebih cepat.
- DevTools menyediakan tab Elements, Console, dan Network untuk memeriksa pohon DOM, pesan error, dan permintaan berkas.
Referensi#
- Set up a local testing server — MDN — Panduan memilih dan menjalankan server lokal untuk pengujian halaman.
- What are browser developer tools — MDN — Pengenalan panel DevTools beserta tab-tab utamanya.