Membuat Halaman Web Sederhana

Kursus: Membuat Website dari Nol

Pada bagian ini, Anda akan belajar cara membuat halaman web pertama menggunakan HTML. Materi yang akan dibahas meliputi:

a. Struktur Dasar Halaman HTML

Membuat file HTML pertama (index.html)

Struktur utama:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertama Saya</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah halaman web pertama saya.</p>
</body>
</html>

Penjelasan elemen utama seperti <html>, <head>, <body>, dan <title>.

b. Menambahkan Elemen HTML Dasar

Heading (<h1> sampai <h6>)
Paragraf (<p>)
Link (<a href="https://example.com">Kunjungi Situs</a>)
Gambar (<img src="gambar.jpg" alt="Deskripsi Gambar">)
Daftar (Ordered dan Unordered List)

c. Membuat Layout Sederhana

Menggunakan <div> untuk mengelompokkan elemen
Membuat menu navigasi dasar dengan <nav> dan <ul>
Membuat footer sederhana dengan <footer>

Berikut adalah contoh layout sederhana menggunakan HTML:

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

    <!-- Header -->
    <header>
        <h1>Website Saya</h1>
        <p>Selamat datang di website sederhana saya.</p>
    </header>

    <!-- Navigasi -->
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>

    <!-- Konten Utama -->
    <main>
        <section>
            <h2>Artikel Terbaru</h2>
            <article>
                <h3>Judul Artikel</h3>
                <p>Ini adalah contoh artikel dengan sedikit teks sebagai isi kontennya.</p>
            </article>
        </section>
    </main>

    <!-- Sidebar -->
    <aside>
        <h3>Menu Samping</h3>
        <ul>
            <li><a href="#">Kategori 1</a></li>
            <li><a href="#">Kategori 2</a></li>
        </ul>
    </aside>

    <!-- Footer -->
    <footer>
        <p>Hak Cipta &copy; 2025 - Website Saya</p>
    </footer>

</body>
</html>

Penjelasan Struktur:

<header> → Bagian kepala halaman (judul dan deskripsi).
<nav> → Navigasi/menu utama.
<main> → Konten utama website.
<section> → Mengelompokkan bagian dalam konten utama.
<article> → Menampilkan artikel atau postingan.
<aside> → Sidebar atau menu samping.
<footer> → Bagian bawah halaman (hak cipta, informasi tambahan).

Untuk hasilnya kurang lebih seperti gambar berikut:

Hasil Website