Halo teman-teman semua! Postingan kali ini akan melanjutkan seri tutorial HTML Dasar kita sebelumnya. Di artikel pertama, kita sudah membahas tentang Sejarah Singkat HTML dan perkembangannya dari versi awal hingga yang terbaru, yaitu HTML5.

Pada artikel kali ini, kita akan langsung masuk ke ranah praktek. Kita akan membuat program pertama kita, yaitu menampilkan tulisan "Hello, World!" ke layar browser. Di dunia pemrograman, membuat "Hello, World!" adalah tradisi wajib bagi setiap developer saat baru pertama kali mempelajari sebuah teknologi baru. Yuk, kita mulai!

Persiapan Sebelum Ngoding

Sebelum mulai mengetikkan kode, ada dua tools utama yang wajib kalian siapkan di komputer atau laptop:

Code Editor: Tempat kita menuliskan kode HTML. Di sini gua sangat merekomendasikan Visual Studio Code (VS Code) karena fiturnya lengkap, gratis, dan paling banyak digunakan oleh developer profesional saat ini. (Link Download: Visual Studio Code)
Web Browser: Tempat kita menampilkan dan menguji kode HTML yang sudah dibuat. Di sini gua menggunakan Google Chrome. (Link Download: Google Chrome)

Note: Buat kalian yang belum punya PC atau Laptop, kalian tetep bisa belajar kok! Kalian bisa install aplikasi code editor gratis di HP Android seperti TrebEdit atau Acode lewat Play Store.

Langkah-Langkah Membuat "Hello, World!" di HTML

Jika semua aplikasinya sudah siap, silakan ikuti langkah-langkah mudah di bawah ini:

Buka aplikasi VS Code di laptop kalian.
Buat file baru dengan cara klik menu File > New Text File, atau tekan tombol kombinasi Ctrl + N (Windows) / Cmd + N (Mac).
Langsung simpan file kosong tersebut dengan menekan Ctrl + S / Cmd + S. Beri nama file tersebut index.html (pastikan akhirannya (.html), bukan (.txt)). Teman-teman bebas menyimpannya di folder mana saja.
Ketikkan struktur dasar HTML5 di bawah ini ke dalam file index.html tersebut:

Struktur Dasar HTML5:

<!DOCTYPE html>
<html>
<head>
    <title>Program Pertama HTML</title>



    <h1>Hello, World!</h1>


</html>

5. Jangan lupa simpan kembali filenya dengan menekan Ctrl + S.

6. Sekarang, buka folder tempat kalian menyimpan file index.html tadi, lalu **double-klik** pada file tersebut. Secara otomatis, file akan terbuka di dalam web browser kalian.

Hasil Output di Browser:

Hello, World!

Bagaimana? Mudah banget, kan? Teks "Hello, World!" berhasil tampil dengan ukuran besar di layar browser kalian!

💡 Bedah Kode: Memahami Anatomi Struktur HTML

Biar kalian gak cuma sekadar copas, yuk kita bedah sedikit fungsi dari baris-baris kode yang kalian ketik tadi:

<!DOCTYPE html> : Ini adalah deklarasi untuk memberi tahu browser bahwa dokumen yang sedang dibuka adalah dokumen versi HTML5.
<html> : Tag utama yang membungkus seluruh elemen atau kode HTML dari awal sampai akhir halaman.
<head> : Bagian "kepala" website. Isinya berupa informasi latar belakang website yang tidak tampil langsung di halaman, seperti judul tab browser yang diatur lewat tag <title>.
<body> : Bagian "tubuh" website. Nah, semua teks, gambar, video, atau tag <h1> yang lu tulis di dalam sini adalah bagian yang akan tampil langsung di layar browser pembaca.

Kesimpulan

Membuat program pertama di HTML sangatlah sederhana. Kuncinya ada pada pembuatan file ber-ekstensi .html dan menuliskan struktur dasar web dengan benar. Tag <h1> yang kita gunakan di dalam tag body bertugas untuk menampilkan teks "Hello, World!" menjadi judul yang tebal.

Sampai di sini dulu tutorial kedua kita. Jangan ragu buat langsung praktek ya! Kalau ada langkah yang membingungkan atau kodenya gak mau tampil di browser, langsung saja corat-coret di Kolom Komentar bawah. Kita selesaikan bareng-bareng!

Sampai jumpa di tutorial selanjutnya!

🔥 Naik Kelas: Yuk Belajar Mengatur Ukuran Judul!

Di tutorial ini lu udah sukses pakai tag <h1> buat nampilin tulisan besar. Tapi tahu ngga sih kalau di HTML ada 6 tingkatan judul yang ukurannya bisa disesuaikan otomatis buat bikin struktur web yang rapi?

Lanjut ke Tutorial #3: Mengenal Heading HTML →