Halo kawan kawan disini saya akan sedikit berbagi tentang implementasi CSS dasar untuk membuat sebuah tampilan website.
LATAR BELAKANG
Project ini dibuat guna mempermudah siswa yang ingin mendaftar dan mengetahui tentang informasi informasi dari suatu sekolah sebelum mendaftar ke sekolah tersebut. Project ini merupakan pengembangan dari project yang lama, dengan menambahkan penggunaan dari CSS.
ALAT & BAHAN
- PC / Laptop
- Sublime Text
- Browser
Dalam pembuatan project ini , terdapat beberapa bagian, yaitu :
TAMPILAN UTAMA
Dalam tampilan utama ini , adalah gerbang kita untuk menuju pada form pendaftaran atau profil dari sekolah.
Di bawah ini merupakan script dari tampilan utama :
<!DOCTYPE html>
<html>
<head>
<title> PPDB ONLINE</title>
<style>
.button{
background-color: #FF3300;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
header {
padding: 2px;
border-radius: 10px;
background-color: #336699;
}
footer{
border-radius: 3px;
background-color: #336699;
}
</style>
</head>
<body bgcolor="#00AA00">
<center>
<header><center><font color="white" size="6px"><p>PPDB ONLINE SMKN 2 KARANGANYAR </font><br>
<font color="white" size="5px">SMK NEGERI 2 KARANGANYAR </font><br>
<font color="yellow" size="4px">Jl.Yos Sudarso, Bejen, Karanganyar 57716</font></center></p></header>
<center> <img src="smk.png" width="400"></center>
<center>
<a href="form.html" class="button">
DAFTAR ONLINE
</a>
<a href="index.html" class="button">
INFO TENTANG SMK
</a>
</a>
</center>
<br><footer><marquee direction="lefttorigth"><font color="white"> © SMKN 2 Karanganyar 2016 </font></marquee></footer>
</center>
</body>
</html>
 |
| Hasil script saat di run |
TAMPILAN PROFIL
Dalam tampilan profil ini terdapat informasi tentang sekolah yang akan di daftar oleh peserta.
Dalam pembuatan tampilan profil ini , kami menggunakan CSS external , yaitu terpisah dengan file html nya.
Di bawah ini merupakan script dari tampilan profil yang kami buat :
File profil.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> Profil Smk</title>
</head>
<body bgcolor="#336699">
<table border="0" width="100%" align="center">
<tr>
<td width="20%">
<img align="center" src="dinas.png" style="width:30%; height:20%; padding-left:35%" > </image>
<td width="60%">
<div class="head">
<b>
PORTAL INFORMASI <br>
SMK NEGERI 2 KARANGANYAR <br></b>
<font size="6px" face="Times New Roman">Jl.Yos Sudaroso, Bejen, Karanganyar Website:smkn2kra.sch.id </font>
</div>
<td width="20%">
<img align="center" src="smk.png" style="width:35%; height:30%; padding-left:35%" > </image>
</td>
</tr>
</table>
<ul>
<li><a href="visimisi.html">PROFIL</a></li>
<li><a href="jurusan.html">JURUSAN</a></li>
<li><a href="prestasi.html">PRESTASI</a></li>
<li><a href="dokumentasi.html">DOKUMENTASI</a></li>
<li><a href="denah.html">DENAH</a></li>
<li><a href="form.html">DAFTAR</a></li>
</ul>
<div class="img">
<div class="desc"> <b>TEKNIK PEMESINAN</b></div>
<a target="_blank" href="MESIN.jpg">
<img src="MESIN.jpg" width="300" height="200">
</a>
<div class="desc">Teknik dalam bidang mesin kerja</div>
<center><div class="button button"> Read More </div> </center>
</div>
</div>
<div class="img">
<div class="desc"> <b>TEKNIK OTOTRONIK </b></div>
<a target="_blank" href="OTO.jpg">
<img src="OTO.jpg" width="600" height="400">
</a>
<div class="desc">Teknik dalam bidang otomotif dan elektronik</div>
<center><div class="button button"> Read More </div> </center>
</div>
</div>
<div class="img">
<div class="desc"> <b>TEKNIK RPL </b></div>
<a target="_blank" href="RPL.jpg">
<img src="RPL.jpg" width="600" height="400">
</a>
<div class="desc">Teknik dalam bidang Komputer</div>
<center><div class="button button"> Read More </div> </center>
</div>
</div>
<div class="img">
<div class="desc"> <b>Teknik dalam bidang kain</b></div>
<a target="_blank" href="TEKSTIL.jpg">
<img src="TEKSTIL.jpg" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
<center><div class="button button"> Read More </div> </center>
</div>
</div>
<div class="foter">
<br>
DEVELOPED BY TEAM SMKN 2 KARANGANYAR -
BLC TELKOM KLATEN
</div>
</body>
</html>
File style.css untuk profil.html
body{
margin:0;
}
.head {
background-color: #336699;
font-family: raleway;
text-align: center;
font-size: 45px;
color: white;
width: auto;
height: 190px ;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #003366;
}
li {
font-family: raleway;
font-size: 18px;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 99px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.img {
margin: 25px;
border: 1px solid #ccc;
float: left;
background-color: #e6e6e6;
width: 365px;
height: 490px;
}
.img:hover {
border: 1px solid #336699;
}
.img img {
width: 100%;
height: 250px;
}
.desc {
font-family: raleway;
font-size: 24px;
padding: 20px;
text-align: center;
}
.button {
background-color: #003366;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
font-family: raleway ;
}
.button:hover {
background-color: #00CCCC;
color: #003366;
}
.foter{
background-color: #003366;
font-size: 26px;
font-family: raleway;
color: #fff;
text-align: center;
padding: 10px
width: 500px;
height: 96px;
margin-top: 570px;
}
 |
| Hasil profil.html saat di run |
TAMPILAN FORM PENDAFTARAN
Dalam project ini tentu terdapat formulir untuk mendaftar ke sekolah yang berada di portal. Kali ini kami membuat formulir yang masih sederhana menggunakan html dan sedikit css internal.
Di bawah ini merupakan script dan hasil dari formulir yang kami buat :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulir PPDB Online SMK NEGERI 2 KARANGANYAR</title>
<style>
h2 {
font-family: raleway;
color: #191970;
}
div.container {
width: device-width;
}
body {
background-image: url("smkbisa2.jpg");
background-size: 492px;
background-attachment: fixed;
margin-bottom: 100px;
margin-top: 50px;
}
div {
border-radius: 15px;
background-color: lightblue;
padding: 20px;
margin-left: 370px;
margin-right: 300px;
padding: 50px;
}
input[type=reset] {
background: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
border: 1px solid #999;
margin: 4px 10px;
padding: 5px;
width: 100px;
}
input[type=submit]:hover,
input[type=reset]:hover {
cursor: pointer;
}
input[type=submit]:active,
input[type=reset]:active {
background: #ff0000;
}
input[type=submit] {
background: linear-gradient(to bottom, #0088CC, #0044CC);
border: 1px solid #0088CC;
color: #FFF;
margin: 4px 10px;
padding: 5px;
width:100px;
}
input[type=submit]:active {
background: #0044CC;
}
select:focus,
input:focus {
border-color: rgb(82, 168, 236);
border-radius: 5px;
box-shadow: inset
0
1px 1px
rgb(0, 0, 0),
0 0 8px
rgb(82, 168, 236);
outline: 1;
}
#div2 {
float: right;
}
input[type=text] {
width: 80%;
padding: 8px 15px;
margin: 5px 0;
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
select{
width: 50%;
padding: 8px 14px;
border: none;
border-radius: 3px;
background-color: #f1f1f1;
}
select[type=radio] {
}
textarea {
width: 80%;
height: 150px;
padding: 8px 15px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
</style>
</head>
<body>
<form method="POST" action="konfirmasi.html">
<div class="container">
<center>
<table border="0">
<h2><center> FORMULIR PENDAFTARAN </center></h2>
<tr>
<td>Angkatan </td><td><select name="angkatan" > <option>2016/2017</option> <option>2015/2016</option> <option>2014/2015</option></select></td>
</tr>
<tr>
<td>Tahun Masuk </td>
<td><input type="text" name="tahunmasuk" /></td>
</tr>
<tr>
<td>NIS </td> <td><input type="text" name="nis"/></td>
</tr>
<tr>
<td>NISN </td> <td><input type="text" name="nisn"/></td>
</tr>
<tr>
<td>NIK </td> <td><input type="text" name="nik"/></td>
<tr>
<td>No. UN Sebelumnya </td> <td><input type="text" name="un"/></td>
<tr>
<td>Nama </td> <td><input type="Text" name="nama"/></td>
<tr>
<td>Nama Panggilan </td> <td><input type="text" name="panggilan"/></td>
<tr>
<td>Jenis Kelamin</td> <td><input type="radio" name="jeniskelamin" value="laki-laki" checked/> Laki - Laki <input type="radio" name="jeniskelamin" value="perempuan" /> Perempuan</td>
<tr>
<td>Tempat Lahir</td> <td><input type="text" name="tempatlahir"/></td>
</tr>
<td>Tanggal Lahir</td><td><select name="tanggal">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="bulan">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<select name="tahun">
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select></td>
<tr>
<td>Agama</td><td><select name="agama">
<option>Pilih Agama</option>
<option>Islam</option>
<option>Kristen</option>
<option>Katolik</option>
<option>Hindu</option>
<option>Budha</option>
<option>Konghucu</option>
</select></td>
</tr>
<tr>
<td>Kondisi</td><td><select name="kondisi">
<option>Sehat</option>
<option>Cacat</option>
<option>Tunanetra</option>
<option>Tunarungu</option>
<option>Tunawicara</option>
</select></td>
<tr>
<td>Kewarganegaraan</td><td><input type="radio" name="warganegara" value="wni" checked=""> WNI
<input type="radio" name="warganegara" value="wna">
WNA</td>
</tr>
<tr>
<td>Anak ke</td><td><input type="text" name="anak" placeholder="0"> dari <input type="text" name="saudara" placeholder="0"></td>
</tr>
<tr>
<td>Status Anak</td><td><select name="status">
<option>Anak Kandung</option>
<option>Anak Tiri</option>
</select></td>
</tr>
<tr>
<td>Jumlah Saudara Kandung</td><td><input type="text" name="jmlsdrka" placeholder="0"></td>
</tr>
<tr>
<td>Jumlah Saudara Tiri</td><td><input type="text" name="jmlsdrti" placeholder="0"></td>
</tr>
<tr>
<td>Bahasa</td><td><input type="text" name="bahasa"></td>
</tr>
<tr>
<td>Alamat</td><td><textarea name="alamat" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>Kode Pos</td><td><input type="text" name="pos"></td>
</tr>
<tr>
<td>Jarak ke Sekolah</td><td><input type="text" name="jarak" placeholder="0"> km</td>
</tr>
<tr>
<td>Telepon</td><td><input type="text" name="telepon"></td>
</tr>
<tr>
<td>Handphone</td><td><input type="text" name="handphone"></td>
</tr>
</table>
<td><input type="submit" value="Kirim"></td><td><input type="reset" value="Reset">
</center>
</div>
</form>
</body>
</html>
 | |
| Hasil script |
 |
| Folder directory |
Pembuatan project ini adalah implementasi dari pembelajaran CSS dasar yang kami pelajari. Project ini sekaligus pengembangan dari project html sebelumnya. Ok sekian dulu postingan kali ini dari saya , apabila ada kurangnya saya mohon maaf , Sekian dan Terima kasi.
1 komentar
kak boleh minta sc yg lainnya sperti visimisi.html,jurusan.html,pretasi.html dll??
EmoticonEmoticon