Cara Membuat Website Perpustakaan dengan HTML

Cara Membuat Website Perpustakaan dengan HTML – Seiring dengan perkembangan teknologi, perpustakaan tidak lagi hanya terbatas pada ruang fisik saja. Namun saat ini kita dapat merasakan kemudahan akses ilmu pengetahuan melalui perpustakaan digital yang dapat diakses secara online.

Pernahkah kamu mengetahui website perpustakaan? Nah, bagaimana kalau kita mencoba membuat website perpustakaan sederhana dengan HTML? Jika kamu berminat bisa mengikuti terus panduan singkat di bawah ini, karena TeknoTask akan memandu kamu untuk mulai membuat website perpustakaan yang nantinya bisa disesuaikan dengan keinginanmu.

Pengertian Website Perpustakaan

Website perpustakaan adalah situs web yang dibuat dan dikelola oleh suatu perpustakaan atau lembaga informasi. Tujuan utama dari website ini adalah memberikan akses elektronik kepada pengguna terhadap sumber daya dan layanan perpustakaan.

Seiring dengan kemajuan teknologi, website perpustakaan memainkan peran penting dalam menyediakan informasi yang mudah diakses, memfasilitasi pencarian koleksi, dan memperluas layanan perpustakaan secara online. Dalam website perpustakaan, umumnya menyajikan berbagai fitur, antara lain:

Katalog Online: Sistem pencarian daring yang memudahkan pengguna mencari dan menemukan buku, jurnal, media elektronik, dan sumber daya lainnya yang dimiliki oleh perpustakaan.
Peminjaman dan Pengembalian Online: Fasilitas untuk melakukan peminjaman dan pengembalian melalui internet, termasuk pengelolaan akun pengguna.
Sumber Daya Digital: Akses ke koleksi digital, seperti e-book, jurnal elektronik, database, dan materi audiovisual.
Jadwal dan Acara: Informasi mengenai jadwal operasional perpustakaan, acara khusus, seminar, dan kegiatan lainnya.
Panduan Penelitian: Bantuan dalam melakukan penelitian dengan menyediakan panduan, sumber daya, dan tutorial online.
Layanan Referensi: Pemberian layanan bantuan dan jawaban atas pertanyaan pengguna melalui chat, email, atau sistem komunikasi online lainnya.
Berita dan Informasi Terbaru: Update terkini tentang koleksi baru, acara, atau berita lainnya yang relevan dengan perpustakaan.
Galeri dan Pameran: Menampilkan koleksi khusus, arsip, atau pameran online yang dimiliki oleh perpustakaan.

Website perpustakaan memberikan akses yang lebih mudah dan cepat kepada pengguna, memungkinkan mereka untuk memanfaatkan sumber daya perpustakaan tanpa harus berada di tempat ruangan perpustakaan.

Cara Membuat Website Perpustakaan Sederhana dengan HTML dan CSS

1. Persiapkan Struktur Folder

Adapun langkah pertama yang perlu dilakukan untuk membuat web perpus adalah membuka manajer file dan membuat folder baru untuk proyek website perpustakaan. Beri nama folder tersebut “WebsitePerpustakaan”.

Di dalamnya, buatlah subfolder “buku” untuk menyimpan gambar buku dan folder logo untuk menyimpan logo perpustakaan. Selain itu buat juga file dengan nama index.html dan style.css untuk memasukkan kode webnya, struktur foldernya seperti berikut:

WebsitePerpustakaan

buku
– buku1.jpg
– buku2.jpg
– buku3.jpg
– buku4.jpg
– buku5.jpg
– buku6.jpg
logo
– logo website.jpg
index.html
style.css

Untuk contoh gambar bukunya bisa kamu unduh disini, dan apabila kamu belum memiliki logo website bisa unduh disini.

2. Buat File HTML Utama (index.html)

Buka Sublime Text dan buat file baru dengan nama “index.html” dalam folder proyek, jika sudah membuat maka isi file ini dengan struktur HTML dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Perpustakaan XYZ</title>
</head>
<body>
        <header>
        <div class="header-container">
            <div class="logo">
                <img src="logo/logo teknotask.png" alt="Logo Perpustakaan XYZ">
            </div>
            <div class="button-daftar">
                <button>Daftar</button>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="#katalog">Katalog</a></li>
                <li><a href="#layanan">Layanan</a></li>
                <li><a href="#koleksi">Koleksi</a></li>
                <li><a href="#kontak">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section id="katalog">
        <div class="buku-populer">
            <h2>Buku Populer</h2>
            <div class="buku">
                <img src="buku/buku1.jpeg" alt="Buku Populer 1">
                <h3>Judul Buku 1</h3>
                <p>Penulis: Penulis 1</p>
                <p>Stok: 50</p>
            </div>

            <div class="buku">
                <img src="buku/buku2.jpeg" alt="Buku Populer 2">
                <h3>Judul Buku 2</h3>
                <p>Penulis: Penulis 2</p>
                <p>Stok: 30</p>
            </div>
            <!-- Tambahkan buku populer lainnya sesuai kebutuhan -->
        </div>

        <div class="buku-terbaru">
            <h2>Buku Terbaru</h2>
            <div class="buku">
                <img src="buku/buku3.jpeg" alt="Buku Terbaru 1">
                <h3>Judul Buku 5</h3>
                <p>Penulis: Penulis 5</p>
                <p>Stok: 25</p>
            </div>

            <div class="buku">
                <img src="buku/buku4.jpeg" alt="Buku Terbaru 2">
                <h3>Judul Buku 6</h3>
                <p>Penulis: Penulis 6</p>
                <p>Stok: 18</p>
            </div>
            <!-- Tambahkan buku terbaru lainnya sesuai kebutuhan -->
        </div>
    </section>

    <section id="layanan">
        <h2>Layanan</h2>
        <p>Perpustakaan XYZ menyediakan berbagai layanan seperti konsultasi literasi, klub buku, dan lainnya.</p>
    </section>

    <section id="koleksi">
        <h2>Koleksi Buku Unggulan</h2>
        <div class="buku">
            <img src="buku/buku5.jpeg" alt="Buku Unggulan 1">
            <h3>Judul Buku 7</h3>
            <p>Penulis: Penulis 7</p>
            <p>Stok: 12</p>
        </div>

        <div class="buku">
            <img src="buku/buku6.jpeg" alt="Buku Unggulan 2">
            <h3>Judul Buku 8</h3>
            <p>Penulis: Penulis 8</p>
            <p>Stok: 8</p>
        </div>
        <!-- Tambahkan buku unggulan lainnya sesuai kebutuhan -->
    </section>

    <section id="kontak">
        <h2>Kontak</h2>
        <p>Jika Anda memiliki pertanyaan atau membutuhkan bantuan, hubungi kami melalui:</p>
        <p>Email: [email protected]</p>
        <p>Telepon: (123) 456-7890</p>
    </section>

    <footer>
        <p>© 2024 Perpustakaan XYZ. All rights reserved.</p>
    </footer>
</body>
</html>

3. Buat File CSS (style.css)

Selanjutnya, buat file baru dengan nama “style.css” dalam folder proyek, jika sudah membuat maka isi file ini dengan kode CSS dibawah ini.

<style type="text/css">
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #27ae60;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px; /* Tambahkan padding agar tidak terlalu mepet dengan tepi header */
}

.logo img {
    width: 180px; /* Sesuaikan ukuran logo sesuai kebutuhan */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* Tambahkan ini untuk membuat navigasi sejajar dengan logo dan button daftar */
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.button-daftar button {
    background-color: #fff;
    color: #27ae60;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}


#katalog {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

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

.buku img {
    width: 200px; /* Sesuaikan ukuran maksimum buku */
    height: 250px;
    border-radius: 8px;
    margin-bottom: 10px;
}

#layanan,
#koleksi,
#kontak {
    text-align: center;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

footer {
    background-color: #27ae60;
    color: #fff;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;
}
</style>

4. Tambahkan Konten Katalog Buku (index.html)

Kembali ke file “index.html” menggunakan Sublime Text, jika kamu ingin menambahkan isi buku dan konten tambahan maka kamu bisa menambahkan konten katalog buku sesuai dengan keinginanmu di file index.html.

<div class="buku">
                <img src="buku/buku2.jpeg" alt="Buku Populer 2">
                <h3>Judul Buku 2</h3>
                <p>Penulis: Penulis 2</p>
                <p>Stok: 30</p>
            </div>
            <!-- Tambahkan buku populer lainnya sesuai kebutuhan -->
        </div>

5. Jalankan Kode

jika semua kode sudah sesuai untuk membuat website perpustakaan, selanjutnya simpan semua perubahan kode di HTML maupun CSSnya, lalu buka file “index.html” menggunakan browser default untuk melihat hasilnya.

6. Tampilkan Website

Selamat! Kamu telah berhasil membuat website perpustakaan sederhana dengan HTML dan CSS menggunakan Sublime Text. Selanjutnya kamu bisa menyesuaikan konten dan desain sesuai dengan kebutuhan proyek yang kamu butuhkan untuk web perpustakaan yang dibuat.

Penutup

Seperti itulah panduan mengenai cara membuat web perpustakaan sederhana hanya menggunakan HTML dan CSS, kini kamu bisa membuat dunia ilmu pengetahuan dalam genggamanmu dan bisa diakses dengan mudah melalui website saja.