Cara Membuat Website Perpustakaan dengan HTML

by

Cara Membuat Website Perpustakaan dengan HTML – Dalam era digital ini, memiliki sebuah website perpustakaan adalah langkah yang sangat penting untuk mempermudah akses informasi dan menjangkau lebih banyak pengguna. Dengan memanfaatkan kemudahan HTML, bahasa pemrograman web yang sangat populer dan mudah dipahami, Anda dapat membuat website perpustakaan Anda sendiri dengan cepat dan tanpa perlu pengetahuan teknis yang mendalam.

Mari kita jelajahi langkah-langkah sederhana untuk membuat website perpustakaan menggunakan HTML. Dengan panduan ini, Anda akan dapat membuat tampilan website perpustakaan yang menarik dan informatif, bahkan jika Anda seorang pemula dalam dunia pengembangan web.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website perpustakaan dengan html:

  • Perangkat laptop,
  • Google chrome (Web browser) digunakan untuk melihat preview website,
  • Sublime text (Text editor code) digunakan untuk menulis kode html,
  • Niat yang kuat.

Cara Membuat Website Perpustakaan dengan HTML

1. Buat Folder Project Website Perpustakaan

Pertama, buatlah sebuah folder di komputer Anda sebagai tempat untuk menyimpan semua file terkait proyek website perpustakaan Anda. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “Website_Perpus“.

2. Buat Folder “img”

Dalam folder proyek Anda, buatlah sebuah sub-folder yang bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan dalam website perpustakaan Anda nantinya. Download gambar disini untuk dapat membuat website perpustakaan dengan html.

3. Buat Sebuah File “website_perpustakaan.html”

Sekarang, buatlah sebuah file HTML baru di dalam folder proyek Anda. Anda dapat menamainya “website_perpustakaan.html“. File ini akan menjadi halaman utama dari website perpustakaan Anda.

Artikel Terkait:   Cara Membuat Website Pariwisata dengan HTML dan CSS

Berikut ini file html yang dapat Anda tambahkan untuk dapat membuat website perpustakaan dengan html:

<!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>
        <div class="container">
            <h1>Perpustakaan Online</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Beranda</a></li>
                    <li><a href="https://riztekno.com/">Buku</a></li>
                    <li><a href="https://riztekno.com/">Tentang Kami</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="landing">
        <div class="container">
            <div class="landing-content">
                <h2>Selamat Datang di Perpustakaan Online</h2>
                <p>Temukan berbagai koleksi buku terbaik kami. Mulai petualangan literaturmu sekarang!</p>
                <a href="#" class="btn">Selengkapnya</a>
            </div>
            <div class="landing-image">
                <img src="img/landing.jpg" alt="Perpustakaan">
            </div>
        </div>
    </section>

    <section id="books">
        <div class="container">
            <h2>Koleksi Buku</h2>
            <div class="book-list">
                <div class="book">
                    <img src="img/book1.jpg" alt="Buku 1">
                    <h3>Judul Buku 1</h3>
                    <p>Penulis: Penulis Buku 1</p>
                    <a href="https://riztekno.com/" class="btn">Detail</a>
                </div>
                <div class="book">
                    <img src="img/book2.jpg" alt="Buku 2">
                    <h3>Judul Buku 2</h3>
                    <p>Penulis: Penulis Buku 2</p>
                    <a href="https://riztekno.com/" class="btn">Detail</a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>
 

4. Buat File “style.css”

Selanjutnya, buatlah file CSS baru di dalam folder proyek Anda dan beri nama “style.css“. File ini akan digunakan untuk mendesain tampilan dari website perpustakaan Anda.

Artikel Terkait:   Cara Membuat Website Penjualan dengan HTML

Berikut ini file css yang dapat Anda tambahkan untuk dapat membuat website perpustakaan dengan html:

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

.container {
    width: 80%;
    margin: 0 auto;
}

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

header h1 {
    margin: 0;
}

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

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

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

#landing {
    padding: 50px 0;
    background-color: #f4f4f4;
    text-align: center;
}

.landing-content {
    float: left;
    width: 50%;
}

.landing-image {
    float: right;
    width: 50%;
}

.landing-image img {
    max-width: 100%;
    height: auto;
}

#books {
    padding: 50px 0;
    background-color: #fff;
    text-align: center;
}

.book-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.book {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
}

.book img {
    max-width: 100%;
    height: auto;
}

.btn {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #555;
}
 

5. Mengubah Buku Tersedia

Untuk menambahkan atau mengubah buku yang tersedia di perpustakaan Anda, cukup tambahkan atau ganti gambar dan informasi buku di dalam file HTML “website_perpustakaan.html“.

Berikut ini contoh perubahan yang dapat Anda coba untuk mengubah buku tersedia:

<div class="book">
    <img src="img/book1.jpg" alt="Buku 1">
    <h3>Judul Buku 1</h3>
    <p>Penulis: Penulis Buku 1</p>
    <a href="#" class="btn">Detail</a>
</div>
 

6. Simpan dan Lihat Tampilan

Setelah Anda selesai membuat perubahan, simpan semua file Anda dan buka file “website_perpustakaan.html” menggunakan browser web favorit Anda untuk melihat tampilan website perpustakaan yang telah Anda buat.

Artikel Terkait:   Cara Membuat Gallery di HTML dan CSS

Preview hasil

Berikut ini preview hasil yang nantinya akan tampil jika Anda berhasil membuat website perpustakaan dengan html:

Penutup

Setelah Anda mengikuti langkah-langkah di atas dan berhasil membuat website perpustakaan Anda, jangan ragu untuk terus eksplorasi dan tambahkan fitur-fitur baru sesuai kebutuhan Anda. Ingatlah bahwa pembelajaran dalam pengembangan web adalah proses yang berkelanjutan, dan semakin Anda berlatih, semakin baik keterampilan Anda akan menjadi.

Selamat mencoba membangun website perpustakaan Anda sendiri! Semoga website yang Anda buat dapat bermanfaat bagi pengguna dan membantu meningkatkan aksesibilitas informasi bagi semua orang.

Related posts: