Membuat Website dengan HTML | Informatika Kelas 9

HTML Itu Apa?

HTML (HyperText Markup Language) adalah bahasa untuk membuat struktur halaman web. HTML bukan bahasa pemrograman — ia adalah bahasa markup yang memberitahu browser "ini adalah judul", "ini adalah paragraf", "ini adalah gambar".

🏠 Analogi Rumah

HTML = kerangka rumah (dinding, atap, lantai). CSS = cat, dekorasi, furnitur. JavaScript = listrik, alarm, dan sistem otomatis. Kita mulai dari kerangkanya dulu!

Struktur Dasar HTML

Setiap file HTML punya struktur yang sama. Ini adalah kerangka minimalnya:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Tab Browser</title>
</head>
<body>
    <!-- Konten website ditulis di sini -->
    <h1>Halo, Dunia!</h1>
    <p>Ini website pertamaku.</p>
</body>
</html>

<head>

Berisi informasi tersembunyi — judul, encoding, link CSS. Tidak ditampilkan di halaman.

<body>

Semua yang ditampilkan di browser ada di sini: teks, gambar, tombol, dll.

<meta charset>

Menentukan encoding karakter agar huruf Indonesia (é, ñ) tampil benar.

<title>

Judul yang muncul di tab browser dan hasil pencarian Google.

Tag-Tag HTML yang Sering Dipakai

<h1> sampai <h6>

Judul/heading. h1 paling besar, h6 paling kecil

<h1>Judul Utama</h1>

<p>

Paragraf teks biasa

<p>Ini paragraf pertama.</p>

<a href="...">

Link yang bisa diklik

<a href="https://google.com">Buka Google</a>

<img src="..." alt="...">

Menampilkan gambar

<img src="foto.jpg" alt="Foto Profil">

<ul> dan <li>

Daftar berurutan (bullet points)

<ul><li>Item satu</li></ul>

<ol> dan <li>

Daftar bernomor

<ol><li>Langkah 1</li></ol>

<strong>

Teks tebal (penting)

Ini <strong>sangat penting</strong>!

<div>

Kotak pembungkus untuk mengelompokkan elemen

<div class="kartu">...</div>

Proyek: Halaman Profil Diri

Buat halaman web profil dirimu sendiri! Berisi foto, nama, biodata singkat, hobi, dan cita-cita.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Profil - [Nama Kamu]</title>
</head>
<body>
    <h1>Hai, Saya [Nama Kamu]! 👋</h1>
    <img src="fotoku.jpg" alt="Foto Saya" width="150">

    <h2>Tentang Saya</h2>
    <p>Saya pelajar kelas 9 di SMP Negeri ... Lamongan.
    Saya suka belajar teknologi dan bermain game.</p>

    <h2>Hobi Saya</h2>
    <ul>
        <li>🎮 Bermain game edukatif</li>
        <li>📚 Membaca komik dan novel</li>
        <li>🎵 Mendengarkan musik</li>
    </ul>

    <h2>Cita-cita</h2>
    <p>Saya ingin menjadi <strong>programmer</strong>
    yang bisa membuat aplikasi bermanfaat.</p>
</body>
</html>

✅ Cara Memulai

Buka Notepad / VS Code / Notepad++
Ketik kode HTML di atas, ganti dengan info dirimu
Simpan sebagai profil.html (perhatikan ekstensi .html!)
Buka file tersebut dengan browser — hore, website pertamamu!
Atau coba langsung di codepen.io tanpa install apapun

Ringkasan 📝

HTML = bahasa markup untuk membuat kerangka halaman web
Struktur dasar: DOCTYPE → html → head + body
Tag utama: h1-h6 (judul), p (paragraf), a (link), img (gambar), ul/ol (daftar)
Setiap tag punya tag pembuka dan penutup: <p>...</p>

Membuat Website dengan HTML 🌐

HTML Itu Apa?

Struktur Dasar HTML

Tag-Tag HTML yang Sering Dipakai

Proyek: Halaman Profil Diri

Ringkasan 📝