BAB 2: Editor dan Lingkungan

Pilihan editor teks untuk menulis HTML dan cara menyiapkan lingkungan kerja.

Di bab sebelumnya kamu sudah membuat file index.html pertama dan membukanya langsung di browser. Prosesnya sederhana — tapi kamu mungkin bertanya-tanya: apakah Notepad atau TextEdit sudah cukup, ataukah ada alat yang lebih baik? Jawabannya ada di bab ini.

Pilihan editor bukan soal selera semata. Editor yang tepat akan membantumu menulis lebih cepat, menangkap kesalahan lebih awal, dan melihat hasil perubahan tanpa harus bolak-balik jendela terus-menerus.

Apa yang Dibutuhkan

HTML hanyalah teks biasa. Secara teknis, kamu bisa menulisnya di editor teks paling sederhana sekalipun — Notepad di Windows atau TextEdit di macOS. File disimpan dengan ekstensi .html, dibuka di browser, selesai. Tidak ada proses kompilasi, tidak ada dependensi yang harus diinstal.

Tapi begitu halaman berkembang melewati puluhan baris kode, menulis HTML tanpa bantuan editor yang lebih cerdas terasa seperti mengetik di kegelapan. Tag yang tidak tertutup, atribut yang salah eja, indentasi yang berantakan — semua ini mudah luput dari perhatian di editor polos.

Yang kamu butuhkan minimal adalah editor dengan syntax highlighting — pewarnaan kode yang membedakan tag, atribut, nilai, dan teks biasa secara visual. Fitur ini saja sudah cukup untuk membuat kode HTML jauh lebih mudah dibaca.

VS Code: Pilihan yang Paling Masuk Akal

Visual Studio Code (disingkat VS Code) adalah editor teks gratis dari Microsoft yang hari ini menjadi standar de facto di komunitas web development. Bukan karena dipaksakan, tapi karena ia memang menawarkan keseimbangan terbaik antara kemudahan penggunaan dan kemampuan yang kuat.

Untuk menulis HTML, VS Code sudah siap pakai tanpa konfigurasi apapun:

Syntax highlighting untuk HTML, CSS, dan JavaScript
Auto-closing tag — ketik <div> dan VS Code otomatis menambahkan </div>
Emmet built-in — shortcut untuk menghasilkan markup HTML dengan cepat
IntelliSense — saran nama tag dan atribut saat kamu mengetik
Terminal terintegrasi di dalam editor

Unduh di code.visualstudio.com, tersedia untuk Windows, macOS, dan Linux.

Jika ini pertama kalinya kamu menginstal VS Code, pilih opsi “Add to PATH” saat proses instalasi di Windows. Ini memungkinkan kamu membuka folder langsung dari terminal dengan perintah code nama-folder.

Cara Kerja di VS Code

Setelah VS Code terinstal, alur kerja dasarnya begini:

Buat folder baru di komputer kamu, misalnya belajar-html.
Buka VS Code, lalu pilih File → Open Folder dan arahkan ke folder tadi.
Buat file baru dengan klik ikon “New File” di panel kiri, beri nama index.html.
Mulai menulis HTML.

Satu shortcut yang wajib kamu hafal dari awal: ketik ! di baris pertama file .html kosong, lalu tekan Tab. VS Code akan menghasilkan kerangka dokumen HTML lengkap secara otomatis — ini adalah fitur Emmet yang akan sangat sering kamu gunakan.

<!-- index.html — hasil shortcut ! + Tab -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

Ubah lang="en" menjadi lang="id" dan ganti isi <title> sesuai kebutuhan — kerangka ini yang akan menjadi titik awal semua file HTML yang kamu buat ke depan.

Melihat Hasil Secara Langsung

Cara paling sederhana melihat perubahan HTML adalah membuka file di browser lalu menekan F5 (refresh) setiap kali menyimpan. Ini berfungsi, tapi cepat melelahkan.

Ekstensi Live Server di VS Code menyelesaikan masalah ini. Setelah terpasang, ia menjalankan server lokal kecil dan otomatis me-refresh browser setiap kali file disimpan — kamu cukup fokus menulis, hasilnya langsung terlihat.

Cara menginstal Live Server:

Klik ikon Extensions di panel kiri VS Code (atau tekan Ctrl+Shift+X).
Ketik “Live Server” di kolom pencarian.
Pilih ekstensi dari Ritwick Dey dan klik Install.
Setelah terpasang, klik kanan pada file .html di panel file dan pilih Open with Live Server.

Browser akan terbuka otomatis. Setiap perubahan yang kamu simpan (Ctrl+S) langsung terefleksi tanpa perlu refresh manual.

Live Server menjalankan file melalui http://localhost:5500 — bukan langsung dari disk. Untuk sebagian besar latihan HTML dasar ini tidak ada bedanya, tapi beberapa fitur Web API (yang akan kita bahas di bab-bab akhir) memang membutuhkan konteks HTTP, jadi kebiasaan menggunakan Live Server dari sekarang tidak ada ruginya.

Struktur Folder yang Rapi

Sebelum menulis satu baris kode pun, luangkan sebentar untuk memikirkan struktur folder. Halaman web yang dimulai dari satu file .html akan segera berkembang menjadi beberapa file: gambar, stylesheet CSS, file JavaScript. Folder yang terorganisasi dari awal menghemat banyak kebingungan di kemudian hari.

Struktur yang umum digunakan untuk proyek HTML sederhana:

belajar-html/
  index.html
  about.html
  css/
    style.css
  images/
    logo.png
    foto-profil.jpg
  js/
    script.js

Untuk latihan-latihan di ebook ini, kamu tidak perlu struktur yang serumit itu. Cukup satu folder dengan file index.html di dalamnya sudah memadai — kita akan menambahkan file dan subfolder seiring kebutuhan berkembang.

Latihan

Setelah VS Code dan Live Server terpasang, coba ini:

Buat folder belajar-html dan buka di VS Code.
Buat file index.html, ketik ! + Tab untuk menghasilkan kerangka HTML.
Tambahkan sebuah <h1> dan dua <p> di dalam <body>.
Aktifkan Live Server, lalu coba ubah teks di salah satu <p> dan simpan — perhatikan browser langsung berubah tanpa refresh manual.

Struktur folder dan editor sudah siap. Di bab berikutnya kita akan membedah setiap bagian dari kerangka HTML yang baru saja kamu hasilkan — dan kamu akan memahami mengapa setiap baris di sana tidak bisa sembarangan dihapus.

BAB 2: Editor dan Lingkungan

Apa yang Dibutuhkan

VS Code: Pilihan yang Paling Masuk Akal

Cara Kerja di VS Code

Melihat Hasil Secara Langsung

Struktur Folder yang Rapi

Latihan

Referensi