Hari 3: HTML Dasar – Struktur dan Elemen Fundamental

by

Setelah mempersiapkan workspace dengan tools yang diperlukan, sekarang saatnya kita mempelajari fondasi utama dari setiap website yang ada di internet: HTML (HyperText Markup Language). HTML adalah bahasa markup standar yang digunakan untuk membuat struktur halaman web. Tanpa HTML, website tidak akan memiliki kerangka yang terstruktur dan browser tidak akan mengerti bagaimana menampilkan konten. Memahami HTML adalah langkah krusial pertama dalam perjalanan Anda menjadi web developer, karena semua teknologi web lainnya seperti CSS dan JavaScript dibangun di atas fondasi HTML yang solid.

HTML Dasar - Struktur dan Elemen Fundamental

Keywords: HTML dasar, struktur HTML, elemen HTML, belajar HTML, tutorial HTML

Setiap website yang Anda lihat di internet dibangun di atas fondasi HTML. Hari ini kita mulai membangun fondasi website pertama Anda! Bersiaplah untuk menulis baris kode pertama Anda dan menyaksikan bagaimana teks sederhana bertransformasi menjadi struktur web yang terorganisir.

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. Tepatnya, HTML bukanlah bahasa pemrograman melainkan bahasa markup yang menggunakan tag untuk mendefinisikan struktur dan konten halaman web. HTML memberi tahu browser bagaimana menampilkan konten seperti teks, gambar, video, dan elemen lainnya.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang harus diikuti. Berikut adalah kerangka fundamental:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten halaman web akan ditulis di sini -->
</body>
</html>

Mari kita pecah struktur ini:

  • <!DOCTYPE html>: Mendefinisikan dokumen sebagai HTML5
  • <html>: Elemen root yang membungkus seluruh konten HTML
  • <head>: Berisi metadata tentang dokumen (tidak terlihat di halaman)
  • <meta charset="UTF-8">: Menentukan encoding karakter (penting untuk mendukung berbagai bahasa)
  • <meta name="viewport">: Memastikan tampilan responsif di perangkat mobile
  • <title>: Judul halaman yang muncul di tab browser
  • <body>: Berisi semua konten yang terlihat oleh pengguna

Elemen HTML Fundamental

HTML terdiri dari berbagai elemen yang didefinisikan dengan tag. Setiap elemen memiliki tujuan spesifik dalam membangun struktur halaman:

1. Heading Elements (H1-H6)

Heading digunakan untuk membuat struktur hierarki konten:

<h1>Heading Utama (Paling Penting)</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<!-- Hingga H6 -->

Penting: Gunakan H1 hanya sekali per halaman untuk judul utama.

2. Paragraph Element

Untuk membuat paragraf teks:

<p>Ini adalah paragraf pertama. Paragraf digunakan untuk menampilkan blok teks yang terstruktur.</p>
<p>Ini adalah paragraf kedua. Browser secara otomatis akan memberikan jarak antar paragraf.</p>

3. Link Elements

Membuat hyperlink ke halaman lain:

<a href="https://www.contoh.com">Kunjungi Website Contoh</a>

Atribut href menentukan URL tujuan.

4. Image Elements

Menampilkan gambar di halaman:

<img src="gambar.jpg" alt="Deskripsi Gambar">

Atribut src menentukan sumber gambar, sedangkan alt memberikan teks alternatif untuk aksesibilitas dan jika gambar gagal dimuat.

5. List Elements

Membuat daftar berurut (ordered) dan tidak berurut (unordered):

<!-- Unordered List (Bullet Points) -->
<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
</ul>

<!-- Ordered List (Numbered) -->
<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
    <li>Langkah ketiga</li>
</ol>

6. Division Element

<div> adalah elemen kontainer generik yang digunakan untuk mengelompokkan elemen lain:

<div>
    <h2>Bagian Konten</h2>
    <p>Ini adalah paragraf dalam div.</p>
</div>

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML. Format umum: nama-atribut="nilai". Beberapa atribut penting:

  • id: Identifier unik untuk elemen
  • class: Menentukan satu atau lebih class names untuk elemen (digunakan untuk CSS dan JavaScript)
  • style: Menambahkan style CSS langsung ke elemen
  • src: Menentukan sumber (untuk gambar, script, dll)
  • href: Menentukan URL tujuan (untuk link)

Prinsip Semantik dalam HTML

HTML5 memperkenalkan elemen semantik yang memberikan makna pada struktur:

  • <header>: Bagian kepala dokumen atau section
  • <nav>: Navigasi utama
  • <main>: Konten utama dokumen
  • <section>: Bagian tematik dalam dokumen
  • <article>: Konten yang berdiri sendiri
  • <aside>: Konten samping (sidebar)
  • <footer>: Bagian kaki dokumen atau section

Menggunakan elemen semantik meningkatkan aksesibilitas dan SEO.

Study Kasus

Mari kita lihat kisah Rina, seorang mahasiswa desain grafis yang ingin beralih ke web development. Rina awalnya mengira web development sangat rumit karena melihat kode yang panjang dan membingungkan. Namun setelah mempelajari HTML dasar, ia menyadari bahwa HTML sebenarnya sangat logis dan terstruktur. Rina mulai dengan membuat halaman profil sederhana menggunakan elemen HTML fundamental. Ia menggunakan heading untuk judul, paragraf untuk biografi, list untuk keahlian, dan gambar untuk foto profil. Dalam waktu seminggu, Rina sudah bisa membuat halaman HTML yang terstruktur dengan baik. Kasus ini menunjukkan bahwa memahami struktur HTML adalah langkah pertama yang dapat diakses oleh siapa pun, bahkan tanpa latar belakang teknis sekalipun.

Contoh Praktik

Sekarang, mari kita buat halaman HTML sederhana tentang profil pribadi. Ikuti langkah-langkah berikut:

  1. Buka VS Code atau code editor pilihan Anda
  2. Buat file baru dan simpan dengan nama index.html
  3. Ketikkan struktur dasar HTML:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Saya</title>
</head>
<body>
    <h1>Profil Pribadi</h1>
    
    <img src="https://via.placeholder.com/150" alt="Foto Profil">
    
    <h2>Tentang Saya</h2>
    <p>Halo! Nama saya [Nama Anda]. Saya seorang pemula dalam web development yang sedang belajar membuat website.</p>
    
    <h2>Keahlian</h2>
    <ul>
        <li>HTML Dasar</li>
        <li>CSS (sedang dipelajari)</li>
        <li>JavaScript (rencana belajar)</li>
    </ul>
    
    <h2>Kontak</h2>
    <p>Email: <a href="mailto:email@example.com">email@example.com</a></p>
    <p>LinkedIn: <a href="https://linkedin.com/in/profil">Profil LinkedIn</a></p>
    
    <footer>
        <p>© 2023 Profil Saya. Hak Cipta Dilindungi.</p>
    </footer>
</body>
</html>

Selanjutnya, Simpan file dan buka di browser (klik kanan file → Open with Live Server jika Anda menggunakan ekstensi Live Server di VS Code)

    Anda akan melihat halaman web sederhana dengan:

    • Judul utama “Profil Pribadi”
    • Gambar placeholder
    • Paragraf pengantar
    • Daftar keahlian
    • Informasi kontak dengan link
    • Footer dengan hak cipta

    Ini adalah fondasi HTML pertama Anda! Dari sini, kita akan terus menambahkan elemen dan fitur lebih kompleks di hari-hari berikutnya.

    Praktikkan langsung! Buat halaman HTML sederhana tentang diri Anda dan bagikan di kolom komentar! Kami akan memberikan feedback konstruktif untuk membantu Anda meningkatkan keterampilan HTML Anda. Jangan lupa gunakan setidaknya 5 jenis elemen HTML yang kita pelajari hari ini: heading, paragraf, gambar, list, dan link. Bagikan karya Anda dan lihat bagaimana teman-teman lain juga memulai perjalanan web development mereka!

    Bagikan artikel ini:

    FacebookTikTokXInstagramWhatsApp

    Leave a Comment