Belajar HTML - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar HTML! Series ini akan membawa kalian menguasai HTML — bahasa markup standar untuk membangun halaman web — dari struktur dokumen paling dasar hingga markup yang siap produksi untuk desain modern. Total ada 23 episode yang tersusun dari empat fase: dasar dan struktur dokumen, semantik dan aksesibilitas, konten dinamis dan integrasi dengan CSS dan JavaScript, serta best practice, optimasi, dan responsive web.

Tapi sebelum menulis tag HTML pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena HTML adalah fondasi dari semua halaman web. Kalau struktur dokumen salah, maka CSS dan JavaScript yang kalian tulis di episode-episode berikutnya akan ikut salah juga.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan text editor dan browser, membuat project pertama, dan memverifikasi bahwa halaman benar-benar tampil lewat server lokal. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#Memahami Dokumen Web

Web bekerja dengan model client-server. Browser kalian adalah client yang mengirim permintaan lewat protokol HTTP, lalu server merespons dengan dokumen HTML. Dokumen itulah yang ditampilkan sebagai halaman. Pahami alur sederhana berikut:

• Browser mengirim permintaan ke sebuah alamat URL.
• Server merespons dengan file HTML.
• Browser membaca markup, membangun struktur internal, lalu merender konten.

Alur di atas adalah fondasi yang akan terus dipakai. Kalian tidak perlu menguasai detail jaringan, cukup paham bahwa setiap halaman web dimulai dari satu dokumen HTML.

#Kebiasaan Membaca dan Menulis Markup

Skill paling penting bukan menghafal tag, melainkan kebiasaan membaca kode dan menulis secara runtut. Saat membuka halaman apa pun, biasakan klik kanan lalu pilih View Source untuk melihat markup aslinya. Amati bagaimana tag ditulis, bagaimana atribut dipakai, dan bagaimana indentasi dibentuk.

Konsistensi indentasi dan penulisan tag dengan huruf kecil akan membuat kode kalian mudah dibaca. Kebiasaan kecil ini akan terbayar di episode 19 ketika kita membahas penulisan HTML yang bersih dan mudah dipelihara.

#Perangkat Lunak yang Perlu Disiapkan

#Text Editor

Kalian membutuhkan text editor. Rekomendasi utama adalah Visual Studio Code karena gratis, ringan, dan punya ekosistem extension yang bagus untuk frontend. Alternatif lain: Neovim, Sublime Text, atau editor apapun yang kalian nyaman pakai.

Untuk VS Code, pasang dua extension berikut: Prettier untuk memformat kode secara konsisten, dan Live Server untuk preview dengan reload otomatis. Keduanya akan menghemat banyak waktu selama series ini.

#Browser dan DevTools

Browser adalah runtime HTML. Gunakan Google Chrome, Firefox, atau Microsoft Edge versi terbaru. Semua browser modern punya DevTools yang menjadi laboratorium kalian: inspeksi elemen, melihat struktur dokumen di panel Elements, dan mengecek respons jaringan di panel Network.

Buka DevTools dengan menekan F12 atau Ctrl+Shift+I. Kebiasaan mengeksplorasi lewat DevTools akan dipakai di hampir setiap episode series ini.

#Server Lokal

Server lokal penting karena banyak fitur dan konvensi hanya bekerja lewat protokol HTTP, bukan lewat file yang dibuka langsung dari disk. Python menyediakan server statis bawaan:

python3 -m http.server 8080

Perintah python3 -m http.server 8080 akan melayani semua file di folder tempat kalian menjalankannya lewat alamat http://localhost:8080. Jika Python belum terpasang, alternatif lain adalah Node.js dengan npx serve ..

#Menyiapkan Project Pertama

#Struktur Folder

Buat folder project dengan struktur yang rapi sejak awal:

mkdir belajar-html
cd belajar-html
touch index.html
mkdir css js

Dengan struktur ini, stylesheet disimpan di subfolder css dan skrip di subfolder js. Konsistensi struktur folder akan memudahkan kalian saat project membesar di episode-episode akhir.

#Dokumen HTML Minimal

Sekarang isi index.html dengan dokumen minimal yang valid:

index.html

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Ini paragraf pertama saya.</p>
  </body>
</html>

Struktur inilah yang nanti akan dikembangkan di episode 2. Detail setiap bagiannya, mulai dari <!DOCTYPE html> sampai elemen body, akan kita bedah satu per satu.

#Verifikasi Environment

#Membuka Halaman di Browser

Dengan server berjalan, buka http://localhost:8080 di browser. Kalian harus melihat judul Halo Dunia dan satu paragraf. Verifikasi juga lewat terminal:

curl -s http://localhost:8080/index.html

Jika server aktif, perintah ini akan mengembalikan isi index.html. Command curl -s http://localhost:8080/index.html menunjukkan dokumen dapat diakses melalui HTTP — konfirmasi bahwa environment kalian sudah benar.

#Checklist Kesiapan

Sebelum lanjut ke episode 1, pastikan semuanya sudah terpenuhi:

• Text editor terpasang dengan extension Live Server dan Prettier.
• Browser modern terpasang dan DevTools bisa dibuka.
• Server statis berjalan dan halaman tampil di localhost:8080.
• Dokumen HTML minimal tersimpan sebagai index.html.
• Folder css dan js sudah dibuat untuk project berikutnya.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi. Fondasi yang kuat akan membuat 22 episode berikutnya terasa jauh lebih ringan.

#Penutup

Inti yang harus dibawa pulang:

• HTML adalah fondasi halaman web: browser meminta dokumen lewat HTTP, lalu merender markupnya.
• Kebiasaan membaca kode dan indentasi konsisten lebih penting daripada menghafal tag.
• Gunakan text editor dengan Live Server untuk workflow yang cepat.
• Jalankan server lokal dengan python3 -m http.server 8080 agar halaman diakses lewat HTTP.
• Verifikasi halaman pertama dengan browser dan perintah curl.

Di episode 1 selanjutnya kita akan membahas memahami HTML dan peranannya dalam web — definisi dan sejarah singkat HTML, posisinya dalam tumpukan CSS dan JavaScript, serta bagaimana browser memproses markup menjadi halaman. Pastikan environment kalian sudah siap, karena perjalanan Belajar HTML baru saja dimulai!