Hallo, kawan kawan pada kali ini saya akan sedikit memaparkan hasil kerja kami. Pada kali ini kami menerapkan konsep HTML yang kami pelajari pada pembuatan tampilan PPDB dan Portal informasi sekolah kami dengan menggunakan HTML sederhana.
LATAR BELAKANG
Kami membuat projet ini guna untuk menerapkan dari konsep dasar HTML ke pembuatan suatu tampilan website sederhana.
ALAT & BAHAN
- Laptop / PC
- Sublime Text
- Browser
- 10 Menit
Dalam pembuatan project ini , kami membuat beberapa file html yang kemudian di link kan menjadi satu.
Pertama tama kita membuat untuk tampilan utama.
index.html
File ini digunakan untuk tampilan untama untuk link menuju form atau profil sekolah.
<!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>
Selanjutnya kita buat file portal informasi dari smk yang akan di daftar oleh calon pendaftar baru
<!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>
Selanjutnya kita buat file form yang di gunakn untuk input data siswa yang akan mendaftar.
!DOCTYPE html>
<html>
<head>
<title>Formulir PPDB Online SMK NEGERI 2 KARANGANYAR</title>
</head>
<body bgcolor="#99FFFF">
<font color="blue">
<marquee speed="100%" behavior="alternate" direction="left" scrollamount="5"> ISI FORMULIR DENGAN DATA YANG RESMI </marquee>
<marquee speed="100%" behavior="alternate" direction="left" scrollamount="5"> KIRIM APABILA DATA SUDAH PASTI BENAR </marquee>
</font>
<hr color="#336666">
<form method="POST" action="konfirmasi.html">
<center>
<table bgcolor="black" border="1">
<tr>
<td>
<table bgcolor="white" border="0">
<h2><center><font color="white"> FORMULIR PENDAFTARAN </font> </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="checkbox" name="jeniskelamin" value="laki-laki" checked="" /> Laki - Laki <input type="checkbox" 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="wni" value="wni" checked=""> WNI
<input type="radio" name="wna" 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>Jara 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>
</tr>
</table>
<br>
<input type="submit" value="KIRIM"> <input type="reset" value="RESET" >
</center>
</form>
</body>
</html>
 | |
| Saat di run di browser |
Tampilan project ini sangat sederhana karena hanya menggunakan html jika kawan ingin membuat tampilanya lebih menarik maka harus menggunakan CSS/Boostrap. Untuk project yang menggunakan css akan di lanjutkan pada post selanjutnya jika kita sudah mempelajari css.
EmoticonEmoticon