Kali ini saya sedang belajar HTML. Lebih tepatnya membuat grafik pada tabel. Yah, karena namanya belajar jadi ya belum begitu perfect lah.. cuma ala kadarnya aja. Jadi pada tulisan kali ini, saya akan menampilkan grafik batang. Seperti pada gambar di bawah ini...
Dan Script dari grafik diatas adalah :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Grafik</title>
</head>
<body bgcolor=gray>
<table border=0 align="center" cellspacing=5 cellpadding=5>
<caption><b>GRAFIK HASIL TES PENDTIUM '09</b></caption>
<tr>
<td align="right">100</td>
<td rowspan=11 bgcolor=black></td>
<td width="15" height="20">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" height="100" bgcolor=red rowspan=10></td>
<td></td>
<td></td>
<td width ="15" bgcolor=blue rowspan=10></td>
</tr>
<tr>
<td align="right">90</td>
<td width="15" height="20"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" height="40" bgcolor=green rowspan=9></td>
<td width="15" bgcolor=purple rowspan=9></td>
</tr>
<tr>
<td align="right">80</td>
<td width="15" height="20"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" bgcolor=yellow rowspan=8></td>
</tr>
<tr>
<td align="right">70</td>
<td width ="15" rowspan=7></td>
<td width ="15" height="40" rowspan=2></td>
<td width ="15" height="140" bgcolor=yellow rowspan=7></td>
<td width ="15" height="20" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=7></td>
<td width ="15" rowspan=7></td>
<td width ="15" rowspan=7></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
</tr>
<tr >
<td align="right">60</td>
<td width ="15" bgcolor=green rowspan=6></td>
<td width="15" bgcolor=green rowspan=6></td>
</tr>
<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
<td width ="15" bgcolor=blue rowspan=5></td>
</tr>
<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=blue rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>
<tr >
<td align="right">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" height="60" bgcolor=blue rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=3></td>
</tr>
<tr >
<td align="right">20</td>
<td width ="15" rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
<td width="15" bgcolor=yellow rowspan=2></td>
<td width="15" bgcolor=green rowspan=2></td>
</tr>
<tr >
<td align="right">10</td>
</tr>
<tr>
<td></td>
<td height="25" colspan=25 bgcolor=black></td>
</tr>
<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>PTI '09 - A</b></td>
<td></td>
<td colspan=5 align="center"><b>PTI '09 - B</b></td>
<td></td>
<td colspan=5 align="center"><b>PTI '09 - C</b></td>
<td></td>
<td colspan=5 align="center"><b>PTI '09 - D</b></td>
<td></td>
</table>
<table border=0 align="left" cellspacing=0 cellpadding=0>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>
<tr>
<td bgcolor=red width="40"></td>
<td><i> : Kemampuan membaca</i></td>
</tr>
<tr>
<td bgcolor=yellow width="40"></td>
<td><i> : Kemampuan menulis</i></td>
</tr>
<tr>
<td bgcolor=green width="40"></td>
<td><i> : Kemampuan mendengar</i></td>
</tr>
<tr>
<td bgcolor=blue width="40"></td>
<td><i> : Kemampuan berbicara</i></td>
</tr>
<tr>
<td bgcolor=purple width="40"></td>
<td><i> : Kemampuan menggambar</i></td>
</tr>
</table>
<br><br><br><br><br><br><br>
<font face="times new roman">
© informatic-rip.blogspot.com
</font>
</body>
</html>
<html lang="en">
<head>
<title>Tugas Praktikum Grafik</title>
</head>
<body bgcolor=gray>
<table border=0 align="center" cellspacing=5 cellpadding=5>
<caption><b>GRAFIK HASIL TES PENDTIUM '09</b></caption>
<tr>
<td align="right">100</td>
<td rowspan=11 bgcolor=black></td>
<td width="15" height="20">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" height="100" bgcolor=red rowspan=10></td>
<td></td>
<td></td>
<td width ="15" bgcolor=blue rowspan=10></td>
</tr>
<tr>
<td align="right">90</td>
<td width="15" height="20"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" height="40" bgcolor=green rowspan=9></td>
<td width="15" bgcolor=purple rowspan=9></td>
</tr>
<tr>
<td align="right">80</td>
<td width="15" height="20"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" bgcolor=yellow rowspan=8></td>
</tr>
<tr>
<td align="right">70</td>
<td width ="15" rowspan=7></td>
<td width ="15" height="40" rowspan=2></td>
<td width ="15" height="140" bgcolor=yellow rowspan=7></td>
<td width ="15" height="20" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=7></td>
<td width ="15" rowspan=7></td>
<td width ="15" rowspan=7></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
</tr>
<tr >
<td align="right">60</td>
<td width ="15" bgcolor=green rowspan=6></td>
<td width="15" bgcolor=green rowspan=6></td>
</tr>
<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
<td width ="15" bgcolor=blue rowspan=5></td>
</tr>
<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=blue rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>
<tr >
<td align="right">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width ="15" height="60" bgcolor=blue rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=3></td>
</tr>
<tr >
<td align="right">20</td>
<td width ="15" rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
<td width="15" bgcolor=yellow rowspan=2></td>
<td width="15" bgcolor=green rowspan=2></td>
</tr>
<tr >
<td align="right">10</td>
</tr>
<tr>
<td></td>
<td height="25" colspan=25 bgcolor=black></td>
</tr>
<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>PTI '09 - A</b></td>
<td></td>
<td colspan=5 align="center"><b>PTI '09 - B</b></td>
<td></td>
<td colspan=5 align="center"><b>PTI '09 - C</b></td>
<td></td>
<td colspan=5 align="center"><b>PTI '09 - D</b></td>
<td></td>
</table>
<table border=0 align="left" cellspacing=0 cellpadding=0>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>
<tr>
<td bgcolor=red width="40"></td>
<td><i> : Kemampuan membaca</i></td>
</tr>
<tr>
<td bgcolor=yellow width="40"></td>
<td><i> : Kemampuan menulis</i></td>
</tr>
<tr>
<td bgcolor=green width="40"></td>
<td><i> : Kemampuan mendengar</i></td>
</tr>
<tr>
<td bgcolor=blue width="40"></td>
<td><i> : Kemampuan berbicara</i></td>
</tr>
<tr>
<td bgcolor=purple width="40"></td>
<td><i> : Kemampuan menggambar</i></td>
</tr>
</table>
<br><br><br><br><br><br><br>
<font face="times new roman">
© informatic-rip.blogspot.com
</font>
</body>
</html>
Demikianlah hasil karya saya. Semoga dapat bermanfaat. Terimakasih... ^^
0 komentar:
Posting Komentar