Memilih Code Editor

Sebelum kita menulis satu baris HTML pun, kita membutuhkan satu alat kerja utama: code editor, yaitu program untuk menulis dan menyimpan kode dalam bentuk teks biasa. Alat ini menemani seluruh perjalanan belajar kita. Chapter ini membahas kriteria editor untuk pemula, membandingkan tiga editor populer, lalu menguji pilihan kita dengan file HTML sederhana.

Kriteria Editor untuk Pemula #

Editor teks tersedia dalam jumlah besar, tetapi untuk belajar HTML kita tidak membutuhkan yang paling canggih. Empat kemampuan berikut yang perlu dicari:

• Highlight sintaks: tag, atribut, dan teks diberi warna berbeda sehingga struktur dokumen terbaca sekilas.
• Autocomplete: editor melengkapi penutup tag secara otomatis, sehingga kita jarang lupa menulis </p> atau tanda kutip pada atribut.
• Gratis: tahap belajar tidak seharusnya dikenai biaya lisensi; banyak editor berkualitas sepenuhnya gratis.
• Lintas OS: editor yang sama dapat dipasang di Windows, macOS, dan Linux.

Editor yang memberi warna dan saran otomatis melatih mata kita mengenali struktur dokumen dengan cepat.

Editor Teks, Bukan Pengolah Kata #

Kesalahan pertama yang sering dilakukan pemula adalah menulis HTML di pengolah kata seperti Microsoft Word atau Google Docs. Pengolah kata menyimpan lebih banyak data daripada teks yang kita ketik: informasi font, ukuran, dan margin ikut tercatat di dalam file berformat seperti .docx. Browser hanya mengharapkan teks polos (plain text), sehingga data format tersebut membuat dokumen gagal ditampilkan dengan benar.

Ketika Budi menyimpan halaman HTML dari Microsoft Word sebagai halaman.docx, browser tidak menemukan satu pun tag yang valid di dalamnya. Pengolah kata juga mengubah tanda kutip lurus menjadi tanda kutip melengkung yang tidak valid untuk atribut HTML. Perbedaan kedua jenis program ini dirangkum pada tabel berikut:

Perbandingan Tiga Editor Populer #

Tiga editor berikut paling sering muncul dalam tutorial web untuk pemula; perbedaan utamanya ada pada harga, platform, dan kelengkapan fitur:

Semua editor pada tabel sah untuk Course ini. Sublime Text unggul pada kecepatan, tetapi lisensinya berbayar untuk pemakaian jangka panjang. Notepad++ gratis dan ringan, tetapi hanya berjalan di Windows. VS Code memenuhi keempat kriteria tanpa biaya, sehingga menjadi pilihan paling aman.

Rekomendasi: VS Code dan Ekstensi Dasar #

Kita memakai Visual Studio Code sepanjang Course ini: gratis, lintas OS, dan menyertakan highlight sintaks, autocomplete, serta fitur bawaan bernama Emmet yang menyingkat penulisan tag. Untuk tahap awal, dua hal berikut cukup:

• Fitur bawaan: highlight sintaks, autocomplete, dan Emmet sudah aktif tanpa pengaturan tambahan.
• Extension Prettier: modul tambahan gratis yang merapikan indentasi dan format kode dengan satu perintah.

Menguji Editor dengan File Contoh #

Sekarang kita memastikan editor bekerja. Buka VS Code, pilih File > New File, salin kode berikut, lalu simpan sebagai editor-uji.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Uji Code Editor</title>
</head>
<body>
  <h1>Editor kita sudah siap</h1>
  <p>Jika teks ini tampil rapi di browser, berarti editor kita menyimpan kode dengan benar.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Editor kita sudah siap" di bagian atas halaman
  - Satu paragraf di bawahnya
  - Teks "Uji Code Editor" pada tab browser

Mari kita periksa yang terlihat di editor:

1. Seluruh kode tampil berwarna: tag seperti <h1> diberi warna berbeda dari teks isinya; inilah highlight sintaks.
2. Saat kita mengetik <p>: editor menyarankan penutup </p> dan melengkapinya setelah Enter; inilah autocomplete.
3. Struktur terlihat rapi berkat indentasi: dua spasi pada isi <head> dan <body> memperjelas elemen yang berada di dalam elemen lain.

Dengan editor sudah teruji, alat berikutnya adalah program untuk melihat hasilnya. Chapter Memasang Browser membahas browser sebagai tempat halaman HTML kita berjalan.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Memilih code editor
• MDN Web Docs — Dealing with files

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Uji Code Editor</title>
</head>
<body>
  <h1>Editor kita sudah siap</h1>
  <p>Jika teks ini tampil rapi di browser, berarti editor kita menyimpan kode dengan benar.</p>
</body>
</html>