Salam Sejahtera,
Kali ini saya akan memposting cara pembuatan web sederhana dengan tema "Perpustakaan BSI" untuk memenuhi nilai kuis Pemrograman Web.
Akan ada beberapa script yang akan saya posting,
1.Script dan screenshoot menu utama
yang pertama adalah script di menu utama (sebelum log in)
Berikut adalah scriptnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpus BSI</title>
</head>
<body>
<h1><marquee>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>
<div id="container">
<div class="header">Perpustakaan Universitas BSI</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='formlogin.html'>Login</a></li>
<li><a href='alert.html'>Home</a></li>
<li><a href='alert.html'>Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">HOT ITEM</h3>
<h2 align="center">Belajar CSS</h2><br>
<div align="center">
<img src="images/belajarcss.jpg" width="350" height="50">
</div>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href='alert.html'>Web Design</a></li>
<li><a href='alert.html'>Pemrograman</a></li>
<li><a href='alert.html'>Database</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="footer"><p align="center">Coppyrigth Perpustakaan BSI</a></p>
</div>
</div>
</body>
</html>
Dan berikut adalah screenshootnya :
2.Script dan screenshoot "Alert Message"
Kemudian script selanjutnya adalah script alert dimana pada saat kita mengklik selain login maka akan timbul alert atau message "Anda harus Login terlebih dahulu",berikut adalah scriptnya :
<html>
<head>
<script type="text/javascript">
function message()
{
alert("Anda Harus Login Terlebih Dahulu")
}
</script>
</head>
<body onload="message()">
</body>
</html>
dan screenshootnya seperti ini :
3.Script dan screenshoot Form Login
berikutnya adalah script form Login untuk akses masuk :
<!DOCTYPE html>
<html>
<head>
<title>log in | Administrator</title>
<style>
body{margin: 200px 500px; background:aqua;}
</style>
</head>
<body>
<form action="index2.html" method="post">
<h3>Welcome To Administrator</h3>
<hr>
<table>
<tr>
<td>user name</td><td>:</td><td> <input type="text" name="username"/></td>
</tr>
<tr>
<td>Password </td><td>:</td><td> <input type="password" name="password"/></td>
</tr>
<tr>
<td></td><td></td> <td><input type="submit" name="login" value="log in"/> <input type="submit" name="cancel" value="cancel"/></td>
</tr>
</table>
</form>
</body>
</html>
Dan screenshootnya seperti ini :
4.Script dan screenshoot Menu utama setelah Login
Setelah login berhasil kita masuk kemenu utama,berikut adalah scriptnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpus BSI</title>
</head>
<body>
<h1><marquee>Perpustakaan Universitas Bina Sarana Informatika</marquee></h1>
<div id="container">
<div class="header">Selamat Datang Mr.Rizky</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='index.html'>Logout</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<h2 align="center">30 Tahun Menyandang Akademik,BSI Mejadi Universitas</h2><br>
<div align="center">
<img src="images/univbsi.jpg" width="350" height="50">
</div>
<p><a href='beritabsi.html'>Baca Selengkapnya >></a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href='bukuwebdesign.html'>Web Design</a></li>
<li><a href='bukupemrograman.html'>Pemrograman</a></li>
<li><a href='bukudatabase.html'>Database</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="footer"><p align="center">Coppyrigth 2018 Perpustakaan BSI</a></p>
</div>
</div>
</body>
</html>
dan screenshootnya seperti ini :
5.Script dan screenshoot "Berita Seputar BSI"
Ada ikon berita ditengah tengah web yang dapat kita klik dan kita baca,untuk scriptnya sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan BSI</title>
</head>
<body>
<div id="container">
<div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
<h5>Selamat Datang, Rizky</h5>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='index.html'>Logout</a></li>
<li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
</ul>
<br>
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href='bukuwebdesign.html'>Web Design</a></li>
<li><a href='bukupemrograman.html'>Pemrograman</a></li>
<li><a href='bukudatabase.html'>Database</a></li>
</ul>
</p>
</div>
</div>
<div class="middle2">
<h2 align="left">Seputar BSI</h2><br>
<div align="center">
</div> <img src="images/univbsi.jpg" width="800" height="300">
</br>
</br>
SETELAH 30 tahun menyandang sebagai Akademi, kampus Bina Sarana Informatika (BSI) kini telah berubah menjadi Universitas.
Perubahan status ini merupakan penggabungan 21 dari 24 perguruan yang ada di BSI.
Direktur BSI Naba Aji Notoseputro mengatakan, perubahan nama Akademi BSI menjadi Universitas BSI melalui proses yang cukup panjang.
Perubahan ini dilakukan sebagai salah satu kesiapan BSI dalam menghadapi era disruptif atau pasar baru di bidang teknologi informasi (TI).
"Dengan memiliki enam akademi di 25 kampus se-Indonesia, maka pihak Yayasan BSI berinisiatif untuk menyatukan akademi yang dimiliki untuk menjadi satu berupa universitas," kata Naba Aji saat jumpa pers di BSI Convention Center, Kecamatan Bekasi Utara, Kota Bekasi, Minggu (16/9).
Dalam kesempatan itu, hadir Sekretaris Jendral Kementerian Riset, Teknologi dan Pendidikan Tinggi (Kemenristekdikti) Ainun Na'im, Direktur Jendral Pembelajaran dan Kemahasiswaan Kemenristekdikti Intan Ahmad dan Kepala Lembaga Layanan Pendidikan Tinggi Wilayah III DKI Jakarta Ilah Sailah.
Perubahan status akademis menjadi universitas ini ditandai dengan penyerahan Surat Keputusan Perubahan Akademi BSI dari Ainun kepada Naba Aji.
Naba memastikan, perubahan status ini tidak akan berdampak pada kenaikan tarif kuliah bagi para mahasiswa.
Menurut dia, tarif yang diberlakukan pada mahasiswa akan tetap sama hingga satu sampai dua tahun.
"Sasaran kami adalah masyarakat menengah, bukan masyarakat yang premium, sehingga pasca perubahan ini biaya kuliah akan tetap sama sampai 1-2 tahun dan tentunya menyesuaikan kondisi," ujar Naba.
Artikel ini telah tayang di Wartakotalive dengan judul 30 Tahun Menyandang Akademi, Kampus BSI Kini jadi Universitas, http://wartakota.tribunnews.com/2018/09/16/30-tahun-menyandang-akademi-kampus-bsi-kini-jadi-universitas.
Penulis: Fitriyandi Al Fajri
Editor: Andy Pribadi
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>
Kemudian Screenshootnya seperti gambar dibawah ini :
6.Script dan screenshoot "Daftar Buku"
Scriptnya adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan BSI</title>
</head>
<body>
<div id="container">
<div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
<h5>Selamat Datang, Rizky</h5>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='index.html'>Logout</a></li>
<li><a href='index2.html'>Home</a></li>
</ul>
<br>
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href='bukuwebdesign.html'>Web Design</a></li>
<li><a href='bukupemrograman.html'>Pemrograman</a></li>
<li><a href='bukudatabase.html'>Database</a></li>
</ul>
</p>
</div>
</div>
<div class="middle2">
<h2 align="left">Daftar Buku</h2><br>
<div align="center">
</div>
<table border=1>
<tr>
<th > <img src="buku1.jpg" width="200" height="200"> </th>
<th > <img src="buku2.jpg" width="200" height="200"> </th>
<th > <img src="buku3.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="buku4.jpg" width="200" height="200"> </th>
<th > <img src="buku5.jpg" width="200" height="200"> </th>
<th > <img src="buku6.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="buku7.jpg" width="200" height="200"> </th>
<th > <img src="buku8.jpg" width="200" height="200"> </th>
<th > <img src="buku9.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="buku10.jpg" width="200" height="200"> </th>
<th > <img src="buku11.jpg" width="200" height="200"> </th>
<th > <img src="buku12.jpg" width="200" height="200"> </th>
</tr>
</table>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>
Dan screenshootnya :
7.Script dan screenshoot buku terpopuler >> web design
Scriptnya adalah :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan BSI</title>
</head>
<body>
<div id="container">
<div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
<h5>Selamat Datang, Rizky</h5>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='index.html'>Logout</a></li>
<li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
</ul>
<br>
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href='bukupemrograman.html'>Pemrograman</a></li>
<li><a href='bukudatabase.html'>Database</a></li>
</ul>
</p>
</div>
</div>
<div class="middle2">
<h2 align="left">Web Design</h2><br>
<div align="center">
</div>
<table border=1>
<tr>
<th > <img src="bukuwebdesign/1.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/2.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/3.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukuwebdesign/4.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/5.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/6.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukuwebdesign/7.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/8.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/9.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukuwebdesign/10.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/11.jpg" width="200" height="200"> </th>
<th > <img src="bukuwebdesign/12.jpg" width="200" height="200"> </th>
</tr>
</table>
</div>
</body>
</html>
Kemudian Screenshootnya :
8.Script dan screenshoot buku terpopuler >> pemrograman
Scriptnya adalah :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan BSI</title>
</head>
<body>
<div id="container">
<div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
<h5>Selamat Datang, Rizky</h5>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='index.html'>Logout</a></li>
<li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
</ul>
<br>
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href='bukuwebdesign.html'>Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href='bukudatabase.html'>Database</a></li>
</ul>
</p>
</div>
</div>
<div class="middle2">
<h2 align="left">Pemrograman</h2><br>
<div align="center">
</div>
<table border=1>
<tr>
<th > <img src="bukupemrograman/1.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/2.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/3.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukupemrograman/4.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/5.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/6.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukupemrograman/7.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/8.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/9.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukupemrograman/10.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/11.jpg" width="200" height="200"> </th>
<th > <img src="bukupemrograman/12.jpg" width="200" height="200"> </th>
</tr>
</table>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>
Dan screenshootnya :
9.Script dan screenshoot buku terpopuler >> Database
Sciptnya adalah :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan BSI</title>
</head>
<body>
<div id="container">
<div class="header"><img src="images/perpusbsi.jpg" width="100" height="100"><h1>Perpustakaan Universitas BSI</h1></div>
<h5>Selamat Datang, Rizky</h5>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href='index.html'>Logout</a></li>
<li><a href='index2.html'>Home</a></li>
<li><a href='daftar_buku.html'>Daftar Buku</a></li>
</ul>
<br>
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href='bukuwebdesign.html'>Web Design</a></li>
<li><a href='bukupemrograman.html'>Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</p>
</div>
</div>
<div class="middle2">
<h2 align="left">Database</h2><br>
<div align="center">
</div>
<table border=1>
<tr>
<th > <img src="bukudatabase/1.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/2.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/3.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukudatabase/4.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/5.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/6.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukudatabase/7.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/8.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/9.jpg" width="200" height="200"> </th>
</tr>
<tr>
<th > <img src="bukudatabase/10.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/11.jpg" width="200" height="200"> </th>
<th > <img src="bukudatabase/12.jpg" width="200" height="200"> </th>
</tr>
</table>
</div>
<div class="footer"><p align="center">Copyright © 2018 - Perpustakaan BSI</a></p>
</div>
</body>
</html>
Dan screenshootnya seperti ini :
10.Script CSS style
Berikut adalah script css untuk design dan warna pada Web :
*{
padding :0 ;
margin :0 ;
}
body{
width: 100%;
background-color: #f1f1f2;
}
marquee{
background-color: #bcbabe;
color: #black
}
p{
margin-bottom: 20px;
line-height: 1.5em;
}
h3{
font : white;
border-bottom: 1px solid #08010f;
}
a{
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: inherit;
font-size: 20px;
color: #d4d2db;
}
a:hover{
color: #ff0000;
}
#container{
max-width: 100%;
background: #a1d6e2;
overflow: hidden;
margin : 60px 50px;
padding: 10px 50px 10px 50px;
}
.header{
font-size: 30px;
text-align : center;
background-color: #1995ad;
}
.header h1{
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}
/* main */
.left{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background-color: #0c5986;
}
.left ul{
list-style-type: none;
}
.left ul li{
display: block;
}
.left ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
font: #64bed4;
}
.left ul li a:hover{
color: #ca1414 ;
}
.middle{
width: 500px;
border: 1px solid #dedede;
padding: 5px;
margin: 10px;
float: left;
}
.middle2{
width: 800px;
border: 1px solid #dedede;
padding: 5px;
margin: 10px;
float: left;
}
.middle img{
background-image: img src="images/..vizta.jpg";
max-width: 100%;
height: auto;
}
.middle a{
font-weight: bold;
}
.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background-color: #0c5986;
}
.right ul{
list-style-type: none;
}
.right ul li{
display: block;
}
.right ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
}
.right ul li a:hover{
color: #ca1414;
}
#footer{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 28pt;
color: #6813c9;
clear: both;
border: 1px solid #dedede;
padding: 15px;
}
@media screen and(max-width:995px){
#container{
width: 100%;
}
#left-columm{
width: 70%;
}
#right-columm{
width: 30%;
}
img{
width: 100%;
}
}
/* MEDIA QUIRIES (Responsive)***********/
@media screen and (max-width:1080px){
.container{
width: 100%;
}
.left{
width: 25%;
background: #0c7575d7;
}
.middle{
width: 68%;
float: right;
}
.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #0c7575d7;
}
}
/* Untuk ukuran layar 700px kebawah */
@media screen and (max-width:780px){
.header,
.footer{
text-align: center;
}
.left{
width: auto;
float: none;
}
.middle{
width: auto;
float: none;
}
.right{
width: auto;
float: none;
}
}
Demikianlah yang bisa saya share kepada kawan kawan tentang cara pembuatan web sederhana "Perpustakaan BSI" semoga bermanfaat dan sekiranya ada yang ingin ditambahkan seperti kritik atau saran bisa diisi dikolom komentar
Terima Kasih
No comments:
Post a Comment