Contoh Program HTML Sederhana & Dasar

HTML (HyperText Markup Language) adalah tulang punggung dari setiap halaman web. Memahami contoh program HTML sederhana adalah langkah pertama yang krusial bagi siapa pun yang ingin memulai perjalanan dalam pengembangan web. Struktur dasar HTML sangat mudah dipelajari karena ia hanya mengandalkan serangkaian 'tag' untuk memberi tahu browser cara menampilkan konten.

Sebuah dokumen HTML yang paling dasar harus selalu dimulai dengan deklarasi tipe dokumen, yaitu <!DOCTYPE html>. Ini memberi tahu peramban bahwa dokumen tersebut ditulis menggunakan standar HTML versi terbaru. Setelah itu, seluruh konten web akan dibungkus di dalam tag utama <html>.

Struktur Dasar Sebuah Halaman Web

Setiap dokumen HTML terstruktur menjadi dua bagian utama: bagian kepala (<head>) yang berisi metadata tentang halaman (seperti judul yang muncul di tab browser dan tautan ke CSS), dan bagian tubuh (<body>) yang berisi semua konten yang terlihat oleh pengguna.

Mari kita lihat contoh kode paling fundamental yang sering digunakan sebagai titik awal pembelajaran. Kode ini akan menampilkan judul utama, beberapa paragraf teks, dan sebuah gambar sederhana.

<!-- Deklarasi Dokumen -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web Sederhana Saya</title>
</head>
<body>

    <header>
        <h1>Selamat Datang di Dunia HTML</h1>
    </header>

    <p>Ini adalah paragraf pertama. HTML menggunakan tag untuk mendefinisikan elemen.</p>
    
    <img src="icon.svg" alt="Ikon Ilustrasi">

</body>
</html>

Penjelasan Elemen Kunci

Dalam contoh program HTML sederhana di atas, beberapa tag sangat penting untuk diketahui:

<html>: Akar dari semua konten.
<head>: Berisi informasi non-visual tentang halaman. Tag meta seperti viewport sangat penting untuk memastikan tampilan yang baik di perangkat seluler (responsif).
<body>: Tempat konten utama seperti teks, gambar, dan tautan diletakkan.
<h1>: Heading (Judul) tingkat pertama, yang paling penting secara hierarki.
<p>: Mendefinisikan paragraf teks biasa.
<img>: Tag untuk menyematkan gambar. Atribut alt (teks alternatif) sangat penting untuk aksesibilitas dan SEO.

HTML sendiri bersifat statis. Untuk membuatnya lebih menarik secara visual, kita biasanya menggabungkan HTML dengan CSS (Cascading Style Sheets) dan menambahkan interaktivitas menggunakan JavaScript. Namun, fondasinya tetaplah struktur HTML yang bersih dan terorganisir dengan baik.

Visualisasi Sederhana

Berikut adalah representasi visual sederhana dari konsep struktur dokumen yang kita bahas, dirender menggunakan SVG agar tetap tajam di semua resolusi layar, sangat cocok untuk tampilan web modern.

Penguasaan terhadap contoh program HTML sederhana ini memberikan dasar yang kuat. Dari sini, Anda dapat mulai bereksperimen dengan elemen-elemen lain seperti daftar (<ul>, <ol>), tautan (<a>), dan tabel (<table>) untuk membangun struktur halaman yang lebih kompleks. Ingatlah, konsistensi dalam penggunaan tag dan struktur yang benar adalah kunci keberhasilan dalam pengembangan web.

Struktur Dasar Sebuah Halaman Web

Penjelasan Elemen Kunci

Visualisasi Sederhana

Related Posts