Cara Membuat Web Statis dengan HTML dan CSS

By Posted on

Cara Membuat Web Statis dengan HTML dan CSS – Pernahkah Anda berpikir untuk membuat situs web sederhana tanpa memerlukan platform atau bahasa pemrograman yang rumit? Dalam panduan haikalweb kali ini, kami akan membahas cara membuat situs web statis menggunakan HTML dan CSS, yang cocok untuk pemula yang ingin belajar dasar-dasar pembuatan situs web.

Alat yang Harus disiapkan

Sebelum memulai untuk membuat web statis, tentu diperlukan beberapa alat yang menunjang untuk dapat membuatnya. Berikut ini alat yang harus disiapkan:

  • Laptop,
  • Text editor code (Visual Studio code, Sublime text, notepad++, dan lain sebagainya),
  • Browser (Direkomendasikan menggunakan chrome),
  • Niat yang kuat.

Cara Membuat Web Statis dengan HTML dan CSS

1. Buat Folder Proyek Website Statis

Langkah pertama adalah membuat folder proyek di mana semua file situs web Anda akan disimpan. Anda dapat memberinya nama sesuai keinginan Anda, misalnya “Website_Statis“.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder terpisah yang akan menampung semua gambar yang akan digunakan dalam situs web Anda. Beri nama folder ini “img“. Download contoh gambar disini sebagai contoh penerapan dalam project nantinya.

3. Buat Sebuah File web_statis.html

Sekarang, mari buat file HTML utama untuk situs web Anda. Gunakan editor teks favorit Anda (seperti Notepad, Sublime Text, atau Visual Studio Code) dan buatlah file baru dengan nama “web_statis.html” di dalam folder proyek Anda.

Berikut ini source code HTML yang dapat Anda implemenatasikan sebagai contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Statis Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
    <section>
        <h2>Tentang Saya</h2>
        <p>Selamat datang di situs web saya. Saya adalah seorang pemula dalam dunia pembuatan situs web dan sangat senang bisa berbagi pengetahuan dengan Anda.</p>
        <img src="img/sample-image.jpg" alt="Contoh Gambar">
    </section>
    <footer>
        <p>&copy; 2024 Website Statis Saya</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, mari buat file CSS yang akan mengatur tampilan situs web Anda. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Example post using split content

Berikut ini source code CSS yang dapat Anda implementasikan sebagai contoh:

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

nav ul {
    list-style-type: none;
    padding: 0;
}

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

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

section {
    padding: 20px;
    margin: 20px;
    text-align: center;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Tampilan Website Statis

Anda dapat mengubah tampilan situs web Anda dengan mengedit file “style.css” sesuai keinginan Anda. Cobalah untuk menyesuaikan warna, ukuran font, layout, dan elemen desain lainnya sesuai preferensi Anda.

6. Simpan & Lihat Tampilan

Setelah selesai mengedit file HTML dan CSS, simpan perubahan Anda. Kemudian, buka file “web_statis.html” menggunakan browser web Anda untuk melihat tampilan situs web statis Anda.

Penutup

Dengan mengikuti langkah-langkah ini, Anda sekarang telah berhasil membuat sebuah situs web statis menggunakan HTML dan CSS! Jangan ragu untuk bereksperimen dan menambahkan lebih banyak fitur atau elemen desain sesuai dengan kebutuhan Anda. Semoga panduan ini bermanfaat untuk Anda dalam memulai perjalanan pembuatan situs web Anda sendiri!

Related posts: