Cara Membuat Dokumen HTML untuk Pemula (Panduan Lengkap)

Belajar membuat dokumen HTML itu seperti belajar membuat fondasi rumah — jika pondasi kuat, semua struktur di atasnya bisa berdiri dengan baik. Artikel ini akan membimbing kamu dari awal sampai mahir membuat dokumen HTML, memahami setiap bagian struktur HTML, hingga cara menjalankannya di browser. Penjelasan dibuat sedetail mungkin agar kamu benar-benar paham sebelum masuk ke materi lanjutan seperti CSS dan JavaScript.

Apa Itu Dokumen HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Dokumen HTML adalah file yang berisi kode-kode HTML dan akan dibaca oleh browser untuk menampilkan konten seperti judul, teks, gambar, dan tautan.

Secara sederhana, dokumen HTML adalah “kerangka” yang memberi tahu browser apa saja elemen yang harus ditampilkan serta susunannya di halaman web.

Untuk memahami lebih jauh konsep HTML secara teoritis, kamu bisa membaca artikel Apa Itu HTML dan Fungsinya.

Alat yang Kamu Butuhkan

Sebelum mulai membuat dokumen HTML, siapkan alat berikut:

Editor Teks – Bisa menggunakan Notepad biasa, Notepad++, atau yang lebih canggih seperti Visual Studio Code.
Browser – Seperti Google Chrome, Mozilla Firefox, atau lainnya untuk melihat hasil HTML yang kamu buat.

Kamu bisa membaca panduan editor di artikel Mengenal Editor Kode (Notepad dan Visual Studio Code) jika masih bingung memilih editor yang tepat.

Langkah 1: Membuat File HTML Pertama

Ikuti langkah berikut untuk membuat file HTML:

Buka editor teks kamu (misalnya Notepad atau Visual Studio Code).
Klik File → Save As.
Ganti nama dengan index.html.
Pilih “All Files” pada pilihan format (jika ada).
Klik Save.

Dengan langkah di atas, kamu telah membuat file yang akan menjadi dasar halaman web kamu.

Struktur Dasar Dokumen HTML

Dokumen HTML memiliki struktur tertentu yang harus dipahami. Struktur ini memberi tahu browser bagian mana yang merupakan judul, isi konten, dan elemen lainnya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Contoh dokumen HTML pertama">
    <title>Dokumen HTML Pertama</title>
</head>
<body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah dokumen HTML pertama saya.</p>
</body>
</html>

Setiap bagian memiliki fungsi khusus:

<!DOCTYPE html> – Menandakan bahwa ini adalah dokumen HTML5.
<html> – Elemen pembungkus utama dari seluruh konten HTML.
<head> – Bagian yang berisi informasi metadata, tidak terlihat langsung di halaman.
<title> – Judul halaman yang nampak di tab browser.
<meta charset="UTF-8"> – Penanda karakter teks (UTF-8).
<body> – Tempat semua konten yang akan dilihat oleh pengunjung.

Jika kamu ingin mempelajari lebih dalam tentang struktur HTML, artikel Mengenal Struktur File HTML dari Dasar akan sangat membantu.

Menambahkan Konten pada Dokumen HTML

Setelah kamu paham struktur dasarnya, saatnya menambahkan konten pada dokumen HTML.

Teks dan Paragraf

Kamu bisa menambahkan teks yang dibungkus oleh tag paragraf seperti ini:

<p>Ini adalah teks paragraf di dalam dokumen HTML.</p>

Teks yang ada di dalam tag <p> akan otomatis dipisahkan sebagai paragraf oleh browser.

Judul dan Subjudul

HTML menyediakan tag heading dari <h1> hingga <h6>. Ini digunakan untuk memberi struktur konten:

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

Heading membantu mesin pencari memahami hierarki konten kamu. Pelajari lebih lanjut tentang heading di artikel Panduan Lengkap HTML Headings.

Membuka Dokumen HTML di Browser

Setelah menambahkan konten, simpan file tersebut dan buka di browser. Caranya:

Temukan file index.html di folder tempat kamu menyimpannya.
Klik kanan file tersebut.
Pilih “Open With” dan pilih browser yang kamu pakai.

Jika berhasil, kamu akan melihat isi dokumen HTML yang kamu buat di layar browser.

Kesalahan Umum Saat Membuat Dokumen HTML

Berikut beberapa kesalahan yang sering terjadi pada pemula dan bagaimana cara memperbaikinya:

Tag tidak tertutup – Pastikan setiap tag pembuka memiliki tag penutup.
Penulisan huruf kapital tidak konsisten – HTML bersifat tidak case-sensitive, tetapi penulisan konsisten membantu keterbacaan.
File tidak berekstensi .html – Browser hanya mengenali file HTML jika berekstensi .html atau .htm.

Jika kamu menghadapi error di dokumen HTML, artikel Cara Memperbaiki Kesalahan pada HTML memberikan panduan lengkap untuk memperbaikinya.

Kesimpulan

Membuat dokumen HTML adalah langkah dasar dalam proses belajar membuat website. Dengan memahami struktur HTML dan bagaimana menulis elemen-elemen dasar seperti paragraf dan heading, kamu telah membangun fondasi yang kuat untuk melanjutkan ke topik seperti CSS, JavaScript, dan lainnya.

Artikel lanjutan seperti Panduan Lengkap Belajar Tag Dasar HTML dan Cara Membuat Website Responsif bisa kamu pelajari setelah kamu nyaman dengan dasar-dasar HTML.

Adi Prayitno