Demo Struktur HTML Lengkap

by oktaviardi pratama

HTML

<!-- Contoh Link CSS (hanya simulasi, tidak ada file asli) -->
    <link rel="stylesheet" href="style.css">

    <!-- 1. HEADER: Bagian Kepala Website -->
    <header>
        <h1>Website Belajar HTML Oktaviardi</h1>
        <p>Situs demo untuk memahami struktur dasar web</p>
    </header>

    <!-- NAVIGASI: Menggunakan List dan Link -->
    <nav>
        <a href="#teks" target="_self">Dasar Teks</a>
        <a href="#list" target="_self">Daftar List</a>
        <a href="https://google.com" target="_blank">Link Eksternal (Google)</a>
    </nav>

    <!-- 2. MAIN: Konten Utama Halaman (Hanya boleh ada satu) -->
    <main>
        
        <!-- SECTION 1: Elemen Teks Dasar -->
        <section id="teks">
            <h2>1. Elemen Teks Dasar</h2>
            <h3>Ini adalah Sub-judul (H3)</h3>
            
            <p>Ini adalah paragraf pertama (<code>&lt;p&gt;</code>). Paragraf digunakan untuk blok teks biasa.</p>
            
            <p>Ini paragraf kedua. Perhatikan penggunaan <span class="highlight">span</span> untuk memberi warna pada sebagian kata tanpa membuat baris baru.</p>
            
            <p>
                Contoh Line Break (<code>&lt;br&gt;</code>):<br>
                Baris 1<br>
                Baris 2<br>
                Baris 3
            </p>

            <hr> <!-- Horizontal Rule untuk pemisah visual -->
            <p><small>Teks kecil di bawah garis pemisah.</small></p>
        </section>

        <!-- SECTION 2: Lists (Daftar) -->
        <section id="list">
            <h2>2. Ordered & Unordered List</h2>
            
            <h3>Langkah Membuat Kopi (Ordered List - ol):</h3>
            <ol>
                <li>Siapkan biji kopi dan giling.</li>
                <li>Seduh dengan air panas.</li>
                <li>Tuang ke dalam cangkir.</li>
                <li>Nikmati selagi hangat.</li>
            </ol>

            <h3>Daftar Belanja (Unordered List - ul):</h3>
    ...

CSS

/* CSS Sederhana hanya agar tampilan lebih jelas saat dipelajari */
        body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 0; color: #333; }
        header, footer { background-color: #f4f4f4; padding: 20px; text-align: center; }
        nav { background: #333; color: #fff; padding: 10px; text-align: center; }
        nav a { color: #fff; margin: 0 15px; text-decoration: none; font-weight: bold; }
        main { padding: 20px; max-width: 800px; margin: auto; }
        section { margin-bottom: 30px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
        .highlight { background-color: yellow; } /* Contoh penggunaan span */
        hr { border: 0; border-top: 2px solid #333; margin: 20px 0; }