Memisahkan Struktur dan Penyajian

Dalam pengembangan web modern, penting untuk memisahkan struktur HTML dan tampilan CSS. Ini memungkinkan Anda untuk merancang tampilan situs dengan lebih fleksibel dan memelihara kode yang lebih mudah. Di bawah ini adalah langkah-langkah untuk melakukannya:

1. Buat Struktur HTML Dasar

Mulailah dengan membuat struktur dasar HTML Anda. Misalnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Situs Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Judul Situs Web</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Artikel 1</h2>
            <p>Ini adalah artikel pertama.</p>
        </section>
        <section>
            <h2>Artikel 2</h2>
            <p>Ini adalah artikel kedua.</p>
        </section>
    </main>
    <footer>
        <p>Hak Cipta &copy; 2023 Situs Web Contoh</p>
    </footer>
</body>
</html>

2. Buat Berkas CSS Terpisah

Buat berkas CSS terpisah dengan nama "style.css". Ini memisahkan kode tampilan dari struktur HTML. Berikut contoh sederhana:

/* style.css */

/* Gaya untuk header */
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

/* Gaya untuk navigasi */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #333;
}

/* Gaya untuk artikel */
section {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

/* Gaya untuk footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

3. Terapkan CSS pada Struktur HTML

Terakhir, pastikan Anda merujuk ke berkas CSS di dalam elemen <head> HTML. Ini akan menerapkan gaya CSS ke elemen-elemen HTML sesuai dengan selektor yang telah Anda definisikan.

Dengan memisahkan struktur dan penyajian ini, Anda dapat dengan mudah mengedit tampilan situs Anda tanpa harus mengubah struktur HTML. Selain itu, kode Anda akan lebih terorganisir dan mudah dipelihara.

PREVIOUS
NEXT