Pada materi kali ini saya akan membagikan bagaimana cara mudah membuat website perpustakaan yang sederhana, dan tentunya mudah untuk dipahami. Berikut akan saya lampirkan coding html & Css yang digunakan dalam pembuatan website tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Web Perpustakaan Sederhana</title>
<style type="text/css">
body {
background-image: url(p.jpg);
background-size: cover;
background-attachment: fixed;
}
h1 {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.yuhu){
background: #111;
}
.yuhu {
background-color: #04aa6d;
}
td {
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<h1 align="center">WELCOME TO LIBRARY STIM SUKMA MEDAN</h1>
<ul>
<li><a class="yuhu" href="home.html">Home</a></li>
<li><a href="profil.html">Profil</a></li>
<li><a href="profil.html">Login</a></li>
<li><a href="profil.html">Daftar Buku</a></li>
<li><a href="profil.html">Kegiatan</a></li>
</ul>
<marquee behavior="alternate" bgcolor="#999999" scrollamount="6"width="100%">
<h2>"Tumpukan Buku Takkan Menghianati Masa Depanmu"</h2>
</marquee>
<h2 align="center">DAFTAR BUKU</h2><br>
<div align="center">
</div><br><br>
<table style="width: 100%">
<tr>
<th><img src="it.jpg" width="200px" height="300px"></th>
<th><img src="bisnis.jpg" width="200px" height="300px"></th>
<th><img src="akutansi.jpg" width="200px" height="300px"></th>
<th><img src="pariwisata.jpg" width="200px" height="300px"></th>
<th><img src="perkantoran.jpg" width="200px" height="300px"></th>
<th><img src="manajemen.jpg" width="200px" height="300px"></th>
</tr>
<tr >
<td>Teknolologi Informatika</td>
<td>Pengantar Bisnis</td>
<td>Akutansi Dasar</td>
<td>Pengembangan Pariwisata</td>
<td>Administrasi Perkantoran</td>
<td>Pengantar Manajemen</td>
</tr>
</body>
</html>
Ketika kita sudah mengetikkan coding tersebut pada aplikasi notpad,sublime ataupun aplikasi lainnya, maka hasilnya akan seperti gambar dibawah ini.
Tidak ada komentar:
Posting Komentar