Dalam posting kali ini, penulis ingin melanjutkan pembelajaran mengenai HTML. Kali ini kita akan mencoba untuk membuat tabel dalam HTML dengan menkombinasikannya juga dengan Javascript agar lebih dinamis.
Berikut sintaknya :
<html >
<head>
<script type="text/javascript">
function info(){
alert("UKM Seni Tari merupakan UKM yang anggotanya semuanya wanita dan memiliki anggota berjumlah 20 orang. Mari gabung dengan UKM Seni Tari. Seru loooo..!!");
var x = window.confirm("Anda mau gabung dengan UKM Seni Tari ?");
if(x){
var x =window.prompt("Masukan nama Anda")
var y =window.prompt("Masukan kelas Anda")
if(x!=null){
if(y!=null)
window.alert("Selamat Datang "+x+" kelas "+y+" di UKM Seni Tari")
}
}
else
window.alert("Terimkasih")
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SISTEM INFORMASI MENAJEMEN UKM STIS</title>
</head>
<body>
<p><h3 align="center" >DAFTAR UKM STIS TAHUN 2011</h3></p>
<table border="2" width="500" align="center">
<tr>
<td onmouseover="this.bgColor='#FF0000'" onmouseout="this.bgColor='#FF00FF'" valign="middle" align="center">NAMA UKM</td>
<td onmouseover="this.bgColor='#FFFF00'" onmouseout="this.bgColor='#FF00FF'" valign="middle" align="center">Jumlah Anggota</td>
</tr>
<tr>
<td onmouseover="this.bgColor='#FF0000'" onmouseout="this.bgColor='#FF00FF'" onclick="info()" id="senitari">Seni Tari</td>
<td onmouseover="this.bgColor='#FFFF00'" onmouseout="this.bgColor='#FF00FF'">20 orang</td>
</tr>
<tr>
<td onmouseover="this.bgColor='#FF0000'" onmouseout="this.bgColor='#FF00FF'">Futsal</td>
<td onmouseover="this.bgColor='#FFFF00'" onmouseout="this.bgColor='#FF00FF'">30orang</td>
</tr>
<tr>
<td onmouseover="this.bgColor='#FF0000'" onmouseout="this.bgColor='#FF00FF'">Komputasi.Net</td>
<td onmouseover="this.bgColor='#FFFF00'" onmouseout="this.bgColor='#FF00FF'">50orang</td>
</tr>
<tr>
<td onmouseover="this.bgColor='#FF0000'" onmouseout="this.bgColor='#FF00FF'">Theater</td>
<td onmouseover="this.bgColor='#FFFF00'" onmouseout="this.bgColor='#FF00FF'">35 orang</td>
</tr>
</table>
</body>
</html>
Ketik sintak di atas di editor notepad, kemudian save dengan format namafile.html. Kemudian jalankan dengan browser Anda. Letakkan kursor di atas table. Lihat perubahan nya. Warnanya akan berubah. Kemudian coba klik pada kolom bertulisan Seni Tari. Maka ketika diklik, code javascript akan dieksekusi melalui fungsi info().
::Selamat Mencoba dan Berkreasi::
No comments:
Post a Comment