Membuat File HTML

Seluruh kode HTML pada akhirnya disimpan sebagai file bertanda .html. Cara kita membuat, menamai, dan menata file tersebut menentukan apakah browser dapat membukanya dengan benar. Pada Chapter ini kita mempraktikkan langkah membuat file .html di editor, menyusun folder kerja sederhana, dan menetapkan aturan penamaan file yang aman. Kita juga membongkar satu jebakan klasik pemula: file yang sebenarnya tersimpan sebagai .html.txt tanpa kita sadari.

Langkah Membuat File .html #

Editor apa pun mengikuti pola langkah yang sama; kita praktikkan dengan VS Code:

1. Pilih File > New File sehingga muncul area kerja kosong.
2. Tulis atau tempel kode HTML yang ingin kita simpan.
3. Pilih File > Save As, arahkan ke folder latihan, lalu isi nama file lengkap dengan ekstensi, misalnya halaman-pertama.html.
4. Periksa dua pengaturan di jendela Save As sebelum menekan tombol simpan: encoding tertulis UTF-8 dan tipe file tidak dipaksa menjadi .txt.

Ekstensi .html adalah penanda bagi sistem operasi dan browser bahwa file ini berisi dokumen web. Pengaturan UTF-8 sama pentingnya: UTF-8 adalah pengodean karakter yang dipakai hampir seluruh web dan harus cocok dengan deklarasi <meta charset="utf-8"> di dalam dokumen. Bila pengodean editor berbeda, karakter khusus seperti em-dash (—) tampil sebagai simbol aneh di browser.

Menyusun Folder Kerja #

Kebiasaan yang baik adalah membuat satu folder induk untuk seluruh latihan, misalnya latihan-html di dalam folder Documents, lalu mengelompokkan file di dalamnya:

latihan-html/
├── halaman-pertama.html
├── cek-browser.html
└── latihan/
    ├── profil-siti.html
    └── daftar-belanja.html

Struktur sederhana di atas memiliki dua manfaat. Pertama, kita selalu tahu di mana mencari hasil kerja, sehingga membuka file di browser menjadi cepat. Kedua, ketika sebuah halaman nanti butuh file pendamping seperti gambar, file itu cukup diletakkan di folder yang sama dengan halamannya.

Penamaan File kebab-case #

Konvensi penamaan yang kita pakai di Course ini adalah kebab-case: huruf kecil semua, dengan tanda hubung sebagai pengganti spasi. Aturan lengkapnya:

• Gunakan huruf kecil (profil-siti.html, bukan Profil-Siti.html).
• Pisahkan kata dengan tanda hubung, bukan spasi (daftar-belanja.html).
• Hindari karakter khusus selain tanda hubung dan angka.
• Akhiri selalu dengan ekstensi .html.

Alasan aturan ini bukan sekadar kerapian. Nama tanpa spasi dan huruf kapital menjadi URL yang bersih saat halaman diunggah, berperilaku sama di Windows maupun Linux, dan tidak menimbulkan galat saat kita mengetik jalur file di terminal maupun atribut href.

Jebakan: File Tersimpan sebagai .html.txt #

Jebakan ini paling sering terjadi di Windows. Secara bawaan, Windows menyembunyikan ekstensi file yang dikenalnya, sehingga file latihan.html.txt hanya tampil sebagai latihan.html di File Explorer. Ketika Budi menyimpan dari Notepad dengan tipe Text Documents (*.txt), Notepad menambahkan akhiran .txt di belakang nama, dan browser kemudian menampilkan kode mentah alih-alih halaman yang dirender — padahal kodenya tidak salah, hanya namanya.

Cara mencegah dan memperbaikinya:

1. Buka File Explorer, pilih tab View, lalu centang File name extensions agar semua ekstensi terlihat.
2. Bila sudah terlanjur tersimpan salah, klik kanan file, pilih Rename, hapus akhiran .txt, lalu konfirmasi perubahan ekstensi.
3. Saat menyimpan dari Notepad, ubah Save as type menjadi All Files supaya nama yang kita tulis dipakai apa adanya.

Contoh File Lengkap #

File berikut merangkum seluruh aturan Chapter ini. Simpan sebagai halaman-pertama.html di folder latihan-html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Halaman Pertama Siti</title>
</head>
<body>
  <h1>Selamat datang di latihan HTML</h1>
  <p>Halaman ini disimpan dengan nama kebab-case dan pengodean UTF-8.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Selamat datang di latihan HTML" di bagian atas halaman
  - Satu paragraf penjelasan di bawahnya
  - Teks "Halaman Pertama Siti" pada tab browser

Mari kita telaah keputusan penting pada file ini:

1. Nama halaman-pertama.html: memenuhi aturan kebab-case sehingga aman dipakai di semua sistem operasi.
2. Baris 4 (<meta charset="utf-8">): mendeklarasikan pengodean karakter; deklarasi ini cocok dengan pengaturan UTF-8 pada jendela Save As.
3. Baris 5 (<title>Halaman Pertama Siti</title>): judul dokumen yang tampil pada tab browser; judul yang spesifik memudahkan Siti membedakan banyak tab latihan.
4. Baris 8-9: satu heading dan satu paragraf sebagai isi halaman.

File yang tersimpan benar kini menunggu untuk dilihat. Chapter Membuka Halaman HTML berikutnya membahas cara membukanya di browser beserta siklus kerja edit-simpan-refresh.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Sintaks dasar HTML
• MDN Web Docs — UTF-8
• MDN Web Docs — Dealing with files

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Halaman Pertama Siti</title>
</head>
<body>
  <h1>Selamat datang di latihan HTML</h1>
  <p>Halaman ini disimpan dengan nama kebab-case dan pengodean UTF-8.</p>
</body>
</html>