Cara Membuat Web Perpustakaan dengan HTML dan CSS

Cara Membuat Web Perpustakaan dengan HTML dan CSS – Dalam era di mana teknologi semakin merambah ke berbagai aspek kehidupan, kemampuan untuk membangun situs web menjadi keterampilan yang semakin penting. Salah satu langkah awal yang bagus untuk dipelajari adalah membuat situs web sederhana menggunakan HTML dan CSS. Di artikel ini, riztekno akan membahas langkah-langkah detail untuk membuat web perpustakaan yang informatif dan mudah dipahami, khususnya bagi pemula.

Perpustakaan, sebagai tempat yang kaya akan pengetahuan, dapat dihadirkan ke dalam dunia digital dengan cara yang sederhana namun efektif. Melalui langkah-langkah yang akan kami jelaskan, Anda akan mempelajari dasar-dasar pembuatan situs web, sekaligus menyajikan informasi yang berguna kepada pengguna. Mari kita mulai dengan langkah pertama dalam petualangan mencipta, mengekspresikan, dan berbagi pengetahuan melalui web perpustakaan yang Anda buat sendiri.

Alat yang harus Disiapkan

Berikut ini Beberapa alat yang harus Disiapkan untuk membuat web perpustakaan dengan html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Notepad++ (Text editor code),
  • Niat yang kuat.

Cara Mudah Membuat Web Perpustakaan dengan HTML dan CSS

1. Buat Folder Project Web Perpustakaan

Langkah pertama adalah membuat folder khusus untuk proyek web perpustakaan Anda. Anda dapat memberikan nama folder yang mudah diingat dan relevan, misalnya “Web_Perpustakaan“.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di situs web perpustakaan Anda nantinya. Download gambar disini untuk dapat di implementasikan kedalam project web perpustakaan.

3. Buat Sebuah File web_perpustakaan.html

Sekarang, mari buat file HTML untuk halaman web perpustakaan kita. Buka editor teks favorit Anda dan buatlah file baru dengan nama “web_perpustakaan.html“. Mulailah dengan struktur dasar HTML seperti di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perpustakaan Online</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Perpustakaan Online</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Katalog</a></li>
            <li><a href="#">Pencarian</a></li>
            <li><a href="#">Tentang Kami</a></li>
        </ul>
    </nav>

    <main>
        <section class="book">
            <img src="img/book1.jpg" alt="Buku 1">
            <h2>Judul Buku 1</h2>
            <p>Penulis: Penulis Buku 1</p>
            <button class="read-button">Baca</button>
        </section>

        <section class="book">
            <img src="img/book2.jpg" alt="Buku 2">
            <h2>Judul Buku 2</h2>
            <p>Penulis: Penulis Buku 2</p>
            <button class="read-button">Baca</button>
        </section>

        <section class="book">
            <img src="img/book3.jpg" alt="Buku 2">
            <h2>Judul Buku 3</h2>
            <p>Penulis: Penulis Buku 2</p>
            <button class="read-button">Baca</button>
        </section>

        <section class="book">
            <img src="img/book4.jpg" alt="Buku 2">
            <h2>Judul Buku 4</h2>
            <p>Penulis: Penulis Buku 2</p>
            <button class="read-button">Baca</button>
        </section>

        
        <!-- Tambahkan lebih banyak elemen buku sesuai kebutuhan -->
    </main>

    <footer>
        <p>Hak Cipta © 2024 Perpustakaan Online</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita perlu membuat file CSS untuk mendesain tampilan web perpustakaan kita. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda. Tambahkan file css berikut ini:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

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

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

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.book {
    margin: 20px;
    text-align: center;
}

.book img {
    width: 200px;
    height: 300px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 5px;
}

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

/* Tambahkan kode CSS ini ke file styles.css */

.read-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.read-button:hover {
    background-color: #45a049;
}
 

5. Mengubah Tampilan Web Perpustakaan

Sekarang saatnya untuk merancang tampilan situs web perpustakaan kita. Gunakan CSS untuk menambahkan warna, font, layout, dan elemen-elemen desain lainnya sesuai keinginan Anda. Berikut adalah contoh kode CSS untuk membuat tampilan sederhana:

<section class="book">
    <img src="img/book2.jpg" alt="Buku 2">
    <h2>Judul Buku 2</h2>
    <p>Penulis: Penulis Buku 2</p>
    <button class="read-button">Baca</button>
</section>
 

6. Save & View Tampilan

Setelah selesai mengedit file HTML dan CSS, simpan perubahan yang Anda buat. Kemudian buka file “web_perpustakaan.html” di browser web Anda untuk melihat tampilan situs web perpustakaan Anda. Pastikan untuk menyimpan file dengan benar dan periksa apakah semuanya berfungsi dengan baik.

Artikel Terkait:   Cara Membuat Website Properti dengan HTML dan CSS

Preview hasil

Berikut ini preview hasil web perpustakaan dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan begitu, semoga artikel ini dapat membantu Anda dalam memahami konsep dasar pembuatan situs web dan memberikan inspirasi untuk mengembangkan proyek lebih lanjut. Jangan ragu untuk terus belajar dan bereksperimen dengan teknologi ini. Selamat mencoba, dan selamat berkarya dalam menyebarkan pengetahuan melalui web perpustakaan yang Anda bangun dengan tangan sendiri.