Panduan Lengkap Membuat Website Sederhana Menggunakan HTML dan CSS

ika Anda baru mulai belajar membuat website, memahami dasar-dasar HTML dan CSS adalah langkah pertama yang sangat penting. Dalam tutorial ini, kita akan membuat website sederhana yang bisa menjadi pondasi bagi proyek web yang lebih besar.

Apa yang Dibutuhkan?

Editor Teks: Anda bisa menggunakan editor teks seperti Visual Studio Code, Sublime Text, atau bahkan Notepad.
Browser: Untuk melihat hasilnya, Anda bisa menggunakan browser apa saja (Chrome, Firefox, dll).

Langkah 1: Struktur Dasar HTML

HTML adalah bahasa markup yang digunakan untuk membuat struktur website. Mulailah dengan membuat file baru bernama index.html dan ketikkan kode berikut:

<!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>
    </header>
    <main>
        <section>
            <h2>Tentang Kami</h2>
            <p>Website ini dibuat sebagai contoh tutorial membuat website sederhana menggunakan HTML dan CSS.</p>
        </section>
        <section>
            <h2>Layanan Kami</h2>
            <ul>
                <li>Desain Web</li>
                <li>Pengembangan Web</li>
                <li>Konsultasi IT</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Website Saya</p>
    </footer>
</body>
</html>

Kode di atas akan membuat struktur sederhana yang mencakup header, main content, dan footer.

Langkah 2: Styling Dasar dengan CSS

Untuk mempercantik tampilan website, buat file baru bernama style.css. Letakkan file ini di direktori yang sama dengan index.html. Tambahkan kode berikut:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

Keterangan:

header dan footer memiliki background warna gelap dengan teks putih.
Bagian main memiliki padding agar konten tidak terlalu mepet dengan tepi layar.

Langkah 3: Menghubungkan HTML dan CSS

Sekarang, buka kembali file index.html dan tambahkan kode berikut di dalam elemen <head>:

<link rel="stylesheet" href="style.css">

Kode ini akan menghubungkan file style.css dengan file index.html, sehingga styling CSS akan diterapkan pada HTML Anda.

Langkah 4: Melihat Hasilnya

Buka file index.html di browser. Anda akan melihat website sederhana dengan teks, daftar, dan tampilan yang bersih.

Langkah 5: Menambahkan Gaya Tambahan (Opsional)

Untuk menambahkan sedikit warna pada bagian header, Anda bisa mengubah kode di style.css menjadi seperti berikut:

header {
    background-color: #005b96;
    color: #fff;
    padding: 15px 0;
    text-align: center;
}

Dengan warna baru, header akan terlihat lebih menarik dan profesional.

Penutup

Selamat! Anda telah membuat website sederhana menggunakan HTML dan CSS. Tutorial ini adalah langkah awal untuk memahami struktur dan styling dasar dalam pengembangan website. Dari sini, Anda dapat mengeksplorasi lebih lanjut tentang JavaScript, framework CSS seperti Bootstrap, atau bahkan mempelajari bahasa pemrograman seperti PHP untuk pengembangan website yang lebih kompleks.