Tutorial Cara Membuat Website Sederhana Menggunakan HTML dan CSS

by Admin 1/02/2025 Posting Komentar

Pendahuluan

Website adalah salah satu bentuk teknologi paling umum yang digunakan saat ini. Dalam tutorial ini, Anda akan belajar membuat website sederhana menggunakan HTML untuk struktur dan CSS untuk desain.

Langkah-langkah

1. Persiapan

Sebelum memulai, pastikan Anda memiliki:

Text editor seperti Visual Studio Code atau Notepad++.
Browser web seperti Chrome, Firefox, atau Edge untuk melihat hasilnya.

2. Membuat File HTML

Buka text editor, buat file baru, dan beri nama index.html.

Ketik 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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
        <p>Ini adalah website pertama saya.</p>
    </header>
    <nav>
        <ul>
            <li><a href="#about">Tentang</a></li>
            <li><a href="#services">Layanan</a></li>
            <li><a href="#contact">Kontak</a></li>
        </ul>
    </nav>
    <section id="about">
        <h2>Tentang Saya</h2>
        <p>Saya seorang pengembang web pemula.</p>
    </section>
    <section id="services">
        <h2>Layanan</h2>
        <p>Saya menawarkan jasa pembuatan website sederhana.</p>
    </section>
    <section id="contact">
        <h2>Kontak</h2>
        <p>Email: contoh@email.com</p>
    </section>
    <footer>
        <p>&copy; 2025 Website Saya. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>

3. Membuat File CSS

Buat file baru di text editor dan beri nama style.css.

Ketik kode berikut:

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

header {
    text-align: center;
    background: #007BFF;
    color: white;
    padding: 20px;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
    background: #333;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

section {
    padding: 20px;
    margin: 10px auto;
    max-width: 800px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    text-align: center;
    background: #333;
    color: white;
    padding: 10px;
    margin-top: 20px;
}

4. Menyimpan dan Membuka Website

Simpan kedua file (index.html dan style.css) dalam folder yang sama.
Buka file index.html di browser dengan cara klik dua kali atau drag ke browser.

5. Hasil Akhir

Anda akan melihat website sederhana dengan header, navigasi, beberapa bagian konten, dan footer.

Pengembangan Lebih Lanjut

Tambahkan Interaktivitas: Gunakan JavaScript untuk menambahkan fitur interaktif seperti tombol, animasi, atau form.
Gunakan Framework: Gunakan framework CSS seperti Bootstrap untuk desain yang lebih cepat dan modern.
Upload ke Internet: Gunakan platform seperti GitHub Pages atau Netlify untuk mempublikasikan website Anda.

Pedia Kura