Getting Started
Dalam tutorial ini, kita tidak akan langsung membahas tag HTML secara mendalam, melainkan fokus pada persiapan alat (tools). Memiliki tools yang tepat akan membuat proses belajar kamu jauh lebih mudah, cepat, dan menyenangkan.
1. Instalasi Text Editor: Visual Studio Code
Untuk menulis kode HTML, kamu sebenarnya bisa menggunakan aplikasi sederhana seperti Notepad. Namun, untuk pengembangan profesional, kita memerlukan alat yang lebih canggih yang disebut Code Editor atau IDE (Integrated Development Environment).
Kita akan menggunakan Visual Studio Code (VS Code).
Mengapa VS Code?
- Populer & Gratis: Didukung oleh Microsoft dan komunitas yang besar.
- Syntax Highlighting: Mewarnai kode agar mudah dibaca.
- IntelliSense: Memberikan saran otomatis saat kamu mengetik, sehingga mengurangi risiko typo (salah ketik).
Langkah Instalasi:
Kunjungi situs resmi code.visualstudio.com.
Klik tombol Download yang sesuai dengan sistem operasi kamu (Windows, macOS, atau Linux).
Jalankan file installer dan ikuti petunjuk instalasi (cukup klik "Next" hingga selesai).
Setelah selesai, buka aplikasi VS Code.
Saran
Saat instalasi di Windows, centang opsi "Add to PATH" dan "Add 'Open with Code' action to Windows Explorer context menu" agar kamu bisa membuka folder proyek dengan cepat lewat klik kanan.
2. Menginstal Ekstensi Live Server
HTML adalah bahasa yang statis. Secara default, setiap kali kamu mengubah kode, kamu harus menyimpan file lalu menekan tombol "Refresh" di browser secara manual untuk melihat perubahannya. Ini sangat membuang waktu.
Solusinya adalah menggunakan ekstensi bernama Live Server.
Mengapa Live Server? Alat ini membuat server lokal sederhana yang memiliki fitur hot reload. Artinya, setiap kali kamu menyimpan file (Save), browser akan otomatis memuat ulang halaman untuk menampilkan perubahan terbaru.
Langkah Instalasi:
Buka VS Code.
Di bilah samping kiri (sidebar), klik ikon kotak-kotak atau tekan Ctrl+Shift+X (di Windows) untuk membuka menu Extensions.
Ketik "Live Server" di kolom pencarian.
Pilih ekstensi buatan Ritwick Dey atau buka URL ini.
Klik tombol Install.
Tunggu hingga proses selesai. Jika berhasil, tombol akan berubah menjadi "Uninstall".
3. Membuat Proyek HTML Pertama
Sekarang setelah sudah siap, mari kita pastikan semuanya berfungsi dengan membuat file HTML sederhana.
Langkah-langkah:
Buat Folder Proyek:
Buat folder baru di komputer kamu, beri nama belajar-html.
Jangan gunakan spasi pada nama folder, gunakan tanda strip (-) atau underscore (_) sebagai pemisah.
Buka di VS Code:
Buka VS Code, pilih menu File > Open Folder, lalu pilih folder belajar-html yang baru saja kamu buat.
Buat File HTML:
Di panel Explorer (sebelah kiri), klik ikon "New File" (gambar kertas dengan tanda plus) dan beri nama file index.html.
Catatan
Nama file index.html adalah standar industri untuk halaman utama sebuah website. Browser akan otomatis mencari file ini saat mengunjungi sebuah direktori.
Tulis Kode Dasar:
Ketik kode berikut ke dalam file index.html kamu:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Saya siap belajar menjadi web developer.</p>
</body>
</html>Penjelasan Singkat Kode:
<!DOCTYPE html>: Memberitahu browser bahwa kita menggunakan HTML5 (versi terbaru).<html>: Elemen pembungkus utama (root) dari seluruh dokumen.<head>: Bagian ini berisi informasi tentang halaman yang tidak tampil langsung di layar utama browser (seperti judul di tab browser).<body>: Bagian ini berisi semua konten yang tampil di layar (teks, gambar, tombol, dll).
Menjalankan Kode dengan Live Server Sekarang saatnya melihat hasilnya.
- Pastikan file
index.htmlsedang terbuka di editor. - Lihat di pojok kanan bawah jendela VS Code, cari tombol bertuliskan "Go Live". Klik tombol tersebut. (Klik kanan di area kode, lalu pilih "Open with Live Server")
- Browser default kamu akan otomatis terbuka dan menampilkan halaman dengan tulisan "Halo, Dunia!".
Cobalah ubah teks di dalam tag <h1> menjadi nama kamu, lalu simpan (Ctrl+S). Lihatlah browser kamu, teksnya akan berubah seketika tanpa perlu kamu refresh!
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<h1>Halo, Nama Kamu!</h1>
<p>Saya siap belajar menjadi web developer.</p>
</body>
</html>