Struktur Dasar Website - Lummatun By Kang Mursi

Kursus: Membuat Website dari Nol

Poin 3: Struktur Dasar Website

Dalam membangun sebuah website, penting untuk memahami struktur dasarnya. Struktur ini mencakup berbagai elemen yang menyusun halaman web agar dapat berfungsi dengan baik.

Berikut adalah komponen utama dari struktur dasar website:

1. Struktur Umum Halaman Web

Sebuah website umumnya terdiri dari tiga bagian utama:

Header → Bagian atas halaman yang biasanya berisi logo, menu navigasi, dan elemen penting lainnya seperti pencarian atau kontak.
Main Content (Konten Utama) → Bagian tengah halaman yang berisi isi utama website, seperti artikel, produk, atau layanan.
Footer → Bagian bawah halaman yang biasanya berisi informasi tambahan seperti hak cipta, tautan ke halaman lain, dan media sosial.

2. Elemen Dasar dalam HTML

Struktur dasar halaman website ditulis dalam HTML (HyperText Markup Language). Beberapa elemen penting dalam HTML yang membentuk struktur dasar website adalah:

<!DOCTYPE html> → Menentukan jenis dokumen HTML.
<html> → Elemen utama yang mencakup seluruh halaman web.
<head> → Berisi metadata, seperti judul halaman (<title>), stylesheet (<link>), dan skrip (<script>).
<body> → Berisi konten yang akan ditampilkan kepada pengguna, termasuk teks, gambar, dan elemen lainnya.

Contoh struktur dasar HTML sederhana:

<!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>
        <h1>Selamat Datang di Website Saya</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Artikel Utama</h2>
        <p>Ini adalah contoh konten utama dalam sebuah website.</p>
    </main>

    <footer>
        <p>&copy; 2025 Website Saya. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>

3. Layout Website

Untuk membuat tampilan lebih menarik dan responsif, pengembang biasanya menggunakan CSS (Cascading Style Sheets). Beberapa metode umum dalam mengatur layout:

CSS Grid → Digunakan untuk membuat tata letak yang kompleks dengan grid berbasis baris dan kolom.
Flexbox → Digunakan untuk mengatur elemen dalam satu dimensi (horizontal atau vertikal).
Framework CSS → Seperti Bootstrap atau Tailwind CSS untuk mempercepat pembuatan desain.

4. Interaksi dengan JavaScript

Agar website menjadi lebih dinamis, JavaScript sering digunakan untuk menambahkan fitur interaktif seperti:

Animasi dan efek transisi.
Validasi form sebelum dikirim ke server.
Menampilkan atau menyembunyikan elemen berdasarkan aksi pengguna.

Kesimpulan

Struktur dasar website terdiri dari header, main content, dan footer, dengan elemen-elemen HTML sebagai dasar penyusunannya. CSS digunakan untuk tampilan, sedangkan JavaScript berperan dalam interaksi. Memahami struktur ini adalah langkah pertama dalam membangun website yang baik dan fungsional.