Cara Membuat Program HTML: Panduan Pemula

HyperText Markup Language (HTML) adalah tulang punggung dari setiap halaman web yang Anda lihat di internet. Memahami cara membuat program HTML dasar adalah langkah pertama yang krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web. Artikel ini akan memandu Anda langkah demi langkah untuk mulai membuat struktur HTML pertama Anda, bahkan jika Anda benar-benar pemula.

Representasi dasar struktur dokumen HTML

Langkah 1: Persiapan Alat yang Dibutuhkan

Anda tidak memerlukan perangkat lunak mahal untuk memulai. Yang Anda butuhkan hanyalah:

Text Editor: Ini adalah tempat Anda mengetikkan kode. Pilihan populer meliputi Visual Studio Code (VS Code), Sublime Text, atau Notepad++ (untuk Windows). Bahkan Notepad bawaan Windows atau TextEdit (Mac) sudah cukup untuk tahap paling awal.
Browser Web: Untuk melihat hasil program Anda. Hampir semua browser modern (Chrome, Firefox, Edge) akan berfungsi dengan baik.

Langkah 2: Memahami Struktur Dasar HTML

Setiap dokumen HTML yang valid harus memiliki kerangka dasar. Kerangka ini memberi tahu browser bagaimana cara menafsirkan konten di dalamnya. Mari kita lihat kode kerangka minimal:

Kode Kerangka Minimal


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman Saya</title>
</head>
<body>
    <h1>Halo Dunia, Ini Program HTML Pertama Saya!</h1>
    <p>Ini adalah paragraf sederhana.</p>
</body>
</html>

Mari kita bedah setiap bagian:

<!DOCTYPE html>: Mendefinisikan jenis dokumen ini sebagai HTML5. Ini harus selalu menjadi baris pertama.
<html>: Elemen akar yang membungkus seluruh halaman. Atribut lang="id" menunjukkan bahasa konten adalah Indonesia.
<head>: Berisi metadata tentang dokumen (informasi untuk browser dan mesin pencari), seperti karakter set dan judul halaman (yang muncul di tab browser).
<body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, tautan, dan tabel.

Langkah 3: Menyimpan dan Menjalankan File

Setelah Anda mengetikkan kode di atas ke dalam text editor Anda:

Simpan file tersebut dengan nama apa pun yang Anda inginkan, tetapi pastikan ekstensi akhirnya adalah .html. Contoh: index.html atau program_pertama.html.
Temukan file yang baru saja Anda simpan di komputer Anda.
Klik dua kali pada file tersebut. File akan otomatis terbuka di browser web default Anda, menampilkan hasil program HTML pertama Anda.

Setiap kali Anda membuat perubahan pada kode di text editor, Anda harus menyimpan ulang file tersebut, lalu me-refresh halaman browser untuk melihat pembaruannya.

Langkah 4: Mengenal Tag Konten Dasar

HTML bekerja menggunakan 'tag' yang membungkus konten. Tag biasanya datang berpasangan (opening tag dan closing tag), seperti  dan .

Contoh Tag Populer

Untuk membuat konten lebih menarik, gunakan tag berikut di dalam <body>:

Judul (Headings)

Terdapat enam level judul, dari yang paling penting (H1) hingga yang kurang penting (H6).

<h1>Judul Utama (Paling Besar)</h1>
<h3>Sub Judul Penting</h3>
<h6>Catatan Kecil</h6>

Paragraf dan Pemformatan Teks

Untuk teks biasa gunakan . Untuk penekanan, gunakan  (tebal/penting) atau  (miring/penekanan).

<p>Ini adalah konten paragraf. Kita bisa menambahkan <strong>kata yang ditekankan</strong> di sini.</p>

Langkah 5: Menambahkan Tautan (Hyperlink)

Tautan adalah inti dari web. Tag yang digunakan adalah <a> (anchor) dengan atribut href yang menentukan tujuan tautan.

<p>Kunjungi situs resmi W3C untuk belajar lebih lanjut: 
    <a href="https://www.w3.org" target="_blank">Pelajari HTML Lanjutan</a>
</p>

Penggunaan target="_blank" memastikan tautan terbuka di tab browser baru, bukan menggantikan halaman saat ini.

Langkah 6: Memasukkan Gambar

Untuk menampilkan gambar, kita menggunakan tag tunggal (self-closing) yaitu <img>. Tag ini memerlukan dua atribut penting: src (sumber lokasi gambar) dan alt (teks alternatif).

<img src="path/ke/gambar_saya.jpg" 
     alt="Deskripsi singkat gambar tentang alam" 
     width="100%">

Atribut alt sangat penting untuk aksesibilitas dan SEO; ini akan dibaca oleh pembaca layar dan ditampilkan jika gambar gagal dimuat.

Kesimpulan dan Langkah Selanjutnya

Anda kini telah berhasil membuat program HTML pertama Anda! Meskipun artikel ini hanya menyentuh dasar-dasar, pemahaman tentang struktur dokumen, tag konten dasar, tautan, dan gambar adalah fondasi kokoh. HTML adalah tentang struktur. Setelah Anda menguasai bagaimana menyusun elemen, langkah selanjutnya adalah mempelajari CSS (Cascading Style Sheets) untuk mempercantik tampilan, dan JavaScript untuk menambahkan interaktivitas. Selamat mencoba dan teruslah bereksplorasi!