Ritual “Hello World!”: Membuat File HTML Pertama dan Membukanya di Browser
Setelah mengenal dasar HTML, sekarang saatnya masuk praktik nyata. Di dunia pemrograman web ada satu langkah awal yang hampir selalu dilakukan semua pemula: membuat halaman “Hello World!”. Ini bukan sekadar tradisi, tapi cara paling cepat memastikan kamu sudah bisa membuat file HTML, menulis struktur dasar, dan menjalankannya di browser. Di tutorial ini kamu akan membuat file HTML pertama dari nol sampai tampil di layar, sambil memahami fungsi setiap bagiannya.
Persiapan Sebelum Membuat File HTML Pertama
Untuk mulai belajar HTML kamu tidak butuh software rumit. Cukup dua hal:
- Code editor (Notepad, Notepad++, VS Code, atau sejenisnya)
- Browser (Chrome, Firefox, Edge, dan lainnya)
Tidak perlu server, tidak perlu instalasi paket tambahan. HTML bisa langsung dibuka di browser sebagai file lokal.
Membuat File HTML Pertama
Buat file baru di komputermu lalu beri nama:
index.html
Pastikan ekstensi benar-benar .html, bukan .txt. Ini penting karena browser hanya mengenali file HTML dari ekstensinya.
Buka file tersebut dengan code editor lalu tulis struktur HTML dasar berikut.
<!DOCTYPE html> <html> <head> <title>Halaman Pertamaku</title> </head> <body> Hello World! </body> </html>
Simpan file, lalu buka dengan cara double-click. Jika browser menampilkan teks Hello World, berarti file HTML pertamamu sudah berhasil dibuat.
Memahami Struktur Dasar HTML Hello World
Sekarang kita pahami bagian pentingnya supaya tidak sekadar menyalin kode.
Baris ini memberi tahu browser bahwa dokumen menggunakan HTML modern.
<!DOCTYPE html>
Tag pembungkus seluruh halaman:
<html> ... </html>
Bagian informasi halaman yang tidak tampil di isi layar:
<head> <title>Halaman Pertamaku</title> </head>
Bagian yang benar-benar tampil di halaman web:
<body> Hello World! </body>
Coba ubah isi tag title, simpan, lalu refresh browser. Judul tab akan berubah. Ini latihan penting dalam belajar HTML: ubah → simpan → refresh → lihat hasil.
Mengganti Hello World dengan Struktur HTML yang Benar
Teks polos sebaiknya diberi tag agar punya makna struktur. Ganti isi body dengan contoh berikut.
<body> <h1>Hello World!</h1> <p>Ini halaman HTML pertama saya.</p> </body>
Sekarang halaman memiliki heading dan paragraf. HTML bukan hanya menampilkan teks, tapi memberi arti pada teks.
Menambahkan Elemen Dasar Lainnya
Mari tambah beberapa elemen supaya halaman lebih lengkap.
<body>
<h1>Hello World!</h1>
<p>Ini halaman HTML pertama saya.</p>
<hr>
<h2>Yang Sudah Saya Pelajari</h2>
<ul>
<li>Membuat file HTML</li>
<li>Menjalankan di browser</li>
<li>Memahami struktur dasar</li>
</ul>
</body>
Di sini kamu sudah memakai heading, paragraf, garis pemisah, list, dan item list — semua elemen dasar yang akan sering dipakai di halaman web.
Menambahkan Link di Halaman HTML
Salah satu kekuatan utama HTML adalah tautan. Tambahkan link berikut di bawah list.
<p>Kunjungi <a href="https://example.com">website contoh</a></p>
Simpan dan refresh. Klik link tersebut. Jika berpindah halaman, berarti kamu sudah berhasil membuat hyperlink pertama.
Pola Latihan Terbaik Saat Belajar HTML
Agar cepat paham, biasakan pola berikut saat belajar HTML:
- ubah satu bagian kode
- simpan file
- refresh browser
- lihat perubahan
- ulangi
Belajar HTML paling efektif bukan dengan membaca saja, tapi dengan mencoba dan melihat hasil langsung di browser.
Kenapa Latihan Hello World Ini Wajib Kamu Lakukan
Latihan membuat halaman Hello World bukan sekadar pembuka simbolis, tapi titik di mana kamu mulai membangun kebiasaan kerja seorang developer web. Dari sini kamu melatih alur dasar: menulis kode, menyimpan file dengan benar, membuka di browser, lalu mengecek hasilnya. Pola ini akan terus dipakai di semua tahap berikutnya, bahkan saat project sudah jauh lebih kompleks.
Latihan ini juga membuat hubungan antara kode dan tampilan menjadi nyata. Setiap perubahan kecil yang kamu tulis bisa langsung terlihat hasilnya. Proses sebab–akibat seperti ini mempercepat pemahaman teknis dibanding hanya membaca teori. Semakin sering kamu mencoba dan mengubah, semakin cepat insting struktur HTML terbentuk.
Banyak orang ingin langsung masuk ke desain atau fitur interaktif, padahal kekuatan halaman web selalu berdiri di atas struktur HTML yang rapi. Jika tahap dasar ini sudah terasa nyaman, langkah ke CSS dan JavaScript akan jauh lebih ringan.
Di artikel selanjutnya kita akan menyiapkan “alat tempur” yang lebih enak dipakai untuk menulis kode, yaitu code editor yang punya fitur bantuan otomatis, penanda error, dan percepatan penulisan. Dari situ proses belajar HTML akan terasa lebih cepat dan minim salah ketik. Lanjut gas di pemberhentian berikutnya.
