Cara Membuat Web Perpustakaan dengan HTML dan CSS (Bootstrap)
6 min readApr 1, 2022
Perpustakaan adalah rumah dari koleksi buku-buku yang berisi pengetahuan. Dengan membaca, kita mendapatkan sudut pandang baru dalam memecahkan masalah.
Sekarang perpustaan sudah bisa diakses melalui online. Buku digital sudah banyak beredar dan bisa diakses bebas oleh masyarakat.
Di sini saya akan membagikan coding website perpustakaan dengan menggunakan HTML sederhana untuk kalian yang ingin belajar cara membuat website:
- Untuk membuat halaman depan, buat file index.html lalu isi dengan kode berikut
<!doctype html><html lang="en"><head><title>Perpustakaan Ilham</title><!-- Bootstrap core CSS --><link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/all.min.css" integrity="sha512-gRH0EcIcYBFkQTnbpO8k0WlsD20x5VzjhOA1Og8+ZUAhcMUCvd+APD35FJw3GzHAP3e+mP28YcDJxVr745loHw==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head><body><div class="container"><header class="blog-header py-3"><div class="row flex-nowrap justify-content-between align-items-center"><div class="col-4 pt-1"><a class="text-muted" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg></a></div><div class="col-4 text-center"><a class="blog-header-logo text-dark" href="#">Perpustakaan Ilham</a></div><div class="col-4 d-flex justify-content-end align-items-center"><a class="btn btn-sm btn-outline-secondary" href="login.html">Login</a></div></div></header><div style="background-image: url(https://pijarsekolah.id/wp-content/uploads/2021/12/perpus-1024x576.jpg); background-size: 100%;" class="jumbotron p-3 p-md-5 text-white rounded bg-dark"><div class="px-0"><h1 class="text-light bg-dark display-4 font-italic">Perpustakaan Online</h1><p class="text-light bg-dark lead my-3">Membaca adalah jendela dunia.</p></div></div><div class="container"><h3 class="pb-3 font-italic border-bottom">Rekomendasi Buku</h3></div><div class="row mb-2"><div class="col-md-6"><div class="card flex-md-row mb-4 box-shadow h-md-250"><div class="card-body d-flex flex-column align-items-start"><strong class="d-inline-block mb-2 text-primary">Non-fiksi</strong><h3 class="mb-0"><a class="text-dark" href="#">Sapiens: Riwayat Singkat Umat Manusia</a></h3><div class="mb-1 text-muted">Yuval Noah Harari (2011)</div><p class="card-text mb-auto">Sapiens membahas sisi yang tak banyak diungkit buku sejarah atau evolusi manusia lain: bagaimana manusia berangkat dari sekadar satu spesies hewan menjadi makhluk berperadaban.</p></div><img class="card-img-right flex-auto d-none d-md-block" src="https://mojokstore.com/wp-content/uploads/2020/02/Sapiens.jpg" alt="Card image cap" height="200px"></div></div><div class="col-md-6"><div class="card flex-md-row mb-4 box-shadow h-md-250"><div class="card-body d-flex flex-column align-items-start"><strong class="d-inline-block mb-2 text-success">Pengembangan Diri</strong><h3 class="mb-0"><a class="text-dark" href="#">Tipping Point: Bagaimana Hal Kecil Berhasil Membuat Perubahan</a></h3><div class="mb-1 text-muted">Malcolm Gladwell (2019)</div><p class="card-text mb-auto">The Tipping Point adalah sebuah peta penunjuk jalan menuju perubahan dengan pesan penuh harapan-bahwa orang yang imajinatif.</p></div><img class="card-img-right flex-auto d-none d-md-block" src="https://inc.mizanstore.com/aassets/img/com_cart/produk/the-tipping-point-cover-baru-malcolm-gladwell.jpg" height="200px" alt="Card image cap"></div></div></div></div><div class="container"><a href="daftar_buku.html"><button type="button" class="btn-block btn btn-outline-primary"><i class="fas fa-book"></i> Daftar Buku</button></a></div><hr/><nav class="navbar navbar-expand-sm navbar-light d-flex justify-content-between" style="background-color: #e3f2fd;"><a class="p-2 text-muted" href="#">© Ilham Setia Bhakti - 2022</a></nav></body></html>
2. Buat file login.html untuk membuat halam login
<!doctype html><html lang="en"><head><title>Perpustakaan Ilham</title><!-- Bootstrap core CSS --><link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/all.min.css" integrity="sha512-gRH0EcIcYBFkQTnbpO8k0WlsD20x5VzjhOA1Og8+ZUAhcMUCvd+APD35FJw3GzHAP3e+mP28YcDJxVr745loHw==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head><body><div class="container"><section class="vh-100"><div class="container py-5 h-100"><div class="row d-flex justify-content-center align-items-center h-100"><div class="col-12 col-md-8 col-lg-6 col-xl-5"><div class="card shadow-2-strong" style="border-radius: 1rem;"><div class="card-body p-5 text-center"><h3 class="mb-5">Login Akun</h3><div class="form-outline mb-4"><input type="email" id="typeEmailX-2" placeholder="Email" class="form-control form-control-lg" /></div><div class="form-outline mb-4"><input type="password" id="typePasswordX-2" placeholder="Password" class="form-control form-control-lg" /></div><!-- Checkbox --><div class="form-check d-flex justify-content-start mb-4"><input class="form-check-input" type="checkbox" value="" id="form1Example3" /><label class="form-check-label" for="form1Example3"> Ingat Password </label></div><button class="btn btn-primary btn-lg btn-block" type="submit">Login</button></div></div></div></div></div></section></div><hr/><nav class="navbar navbar-expand-sm navbar-light d-flex justify-content-between" style="background-color: #e3f2fd;"><a class="p-2 text-muted" href="#">© Ilham Setia Bhakti - 2022</a></nav></body></html>
3. Terakhir buat halaman daftar_buku.html
<!doctype html><html lang="en"><head><title>Daftar Buku Perpustakaan</title><!-- Bootstrap core CSS --><link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/all.min.css" integrity="sha512-gRH0EcIcYBFkQTnbpO8k0WlsD20x5VzjhOA1Og8+ZUAhcMUCvd+APD35FJw3GzHAP3e+mP28YcDJxVr745loHw==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head><body><div class="container"><header class="blog-header py-3"><div class="row flex-nowrap justify-content-between align-items-center"><div class="col-4 pt-1"><a class="text-muted" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg></a></div><div class="col-4 text-center"><a class="blog-header-logo text-dark" href="#">Perpustakaan Ilham</a></div><div class="col-4 d-flex justify-content-end align-items-center"><a class="btn btn-sm btn-outline-secondary" href="#">Login</a></div></div><div class="nav-scroller py-1 mb-2"><nav class="nav d-flex justify-content-between"><a class="p-2 text-muted" href="#">Bisnis</a><a class="p-2 text-muted" href="#">Fiksi</a><a class="p-2 text-muted" href="#">Komik</a><a class="p-2 text-muted" href="#">Non-fiksi</a><a class="p-2 text-muted" href="#">Ekonomi</a><a class="p-2 text-muted" href="#">Teknologi</a><a class="p-2 text-muted" href="#">Motivasi</a><a class="p-2 text-muted" href="#">Novel</a></nav></div></header><div class="container"><h3 class="pb-3 font-italic border-bottom">Daftar Buku</h3></div><div class="card-deck"><div class="card"><img class="card-img-top" src="https://s3-ap-southeast-1.amazonaws.com/ebook-previews/50468/191730/1.jpg" alt="Card image cap"><div class="card-body"><h5 class="card-title">Step By Step: Google Adsense</h5><p class="card-text"><small class="text-muted">Dedik Kurniawan</small></p></div></div><div class="card"><img class="card-img-top" src="https://s3-ap-southeast-1.amazonaws.com/ebook-previews/50466/191728/1.jpg" alt="Card image cap"><div class="card-body"><h5 class="card-title">Otodidak Web Programming: Membuat Website Edutainment</h5><p class="card-text"><small class="text-muted">Muhammad Ibnu Sa'ad</small></p></div></div><div class="card"><img class="card-img-top" src="https://s3-ap-southeast-1.amazonaws.com/ebook-previews/50265/190367/1.jpg" alt="Card image cap"><div class="card-body"><h5 class="card-title">Membuat Website Cantik & Menarik Dengan Jquery</h5><p class="card-text"><small class="text-muted">Arista Prasetyo Adi</small></p></div></div></div><hr/><div class="card-deck"><div class="card"><img class="card-img-top" src="https://s3-ap-southeast-1.amazonaws.com/ebook-previews/50468/191730/1.jpg" alt="Card image cap"><div class="card-body"><h5 class="card-title">Step By Step: Google Adsense</h5><p class="card-text"><small class="text-muted">Dedik Kurniawan</small></p></div></div><div class="card"><img class="card-img-top" src="https://s3-ap-southeast-1.amazonaws.com/ebook-previews/50466/191728/1.jpg" alt="Card image cap"><div class="card-body"><h5 class="card-title">Otodidak Web Programming: Membuat Website Edutainment</h5><p class="card-text"><small class="text-muted">Muhammad Ibnu Sa'ad</small></p></div></div><div class="card"><img class="card-img-top" src="https://s3-ap-southeast-1.amazonaws.com/ebook-previews/50265/190367/1.jpg" alt="Card image cap"><div class="card-body"><h5 class="card-title">Membuat Website Cantik & Menarik Dengan Jquery</h5><p class="card-text"><small class="text-muted">Arista Prasetyo Adi</small></p></div></div></div><hr/><nav aria-label="Page navigation example"><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav><hr/><nav class="navbar navbar-expand-sm navbar-light d-flex justify-content-between" style="background-color: #e3f2fd;"><a class="p-2 text-muted" href="#">© Ilham Setia Bhakti - 2022</a></nav></body></html>
Tampilan Halaman Utama
Tampilan Halaman Login
Tampilan Halaman Daftar Buku
