Selamat Datang di Blog AGUNG PANJI SASMITO

Minggu, 13 Februari 2011

Belajar Web Programming : Tugas Praktikum 1 Modul 2 - Komponen HTML Lanjut

Posted in , | 2/13/2011 04:16:00 PM | by Agung P. Sasmito | @ajungpangi

Selamat siang =)
Setelah mengerjakan studi kasus, langkah selanjutnya adalah mengerjakan tugas praktikum. Nah, kali ini di modul 2 kita dituntut untuk bisa menggunakan tabel. Sekarang saatnya kita membuat diagram batang statis dengan menggunakan tabel.

Mau tahu caranya? Algoritmanya cukup sederhana. Baris-baris yang ingin kita buat diagram cukup kita span kemudian kita beri background colour. Sekarang akan saya tunjukkan cara membuat diagram dengan menggunakan tabel.

Sintaks:


<!DOCTYPE HTML>
<html lang = "en">
<title>Grafik - Tugas Praktikum 1 Modul 2 - ajungpangi</title>
<body>
<center>
<font face="Copperplate Gothic Bold"size='5'color='blue'>Layanan Internet Broadband <br/>yang Digunakan oleh Mahasiswa PTI</font>
<br/><br/>
<table border = '0' cellspacing='0'>
<tr>
<td height='20'width='10'><div align='right'><font face='Arial'>100 </font></div></td>
<td rowspan='13'height='20'width='2' bgcolor='black'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>

<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='10'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td rowspan='9'height='20'width='20'bgcolor='red'></td>
<td rowspan='9'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td rowspan='9'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td rowspan='8'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'><div align='right'><font face='Arial'>50 </font></div></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='green'></td>
<td rowspan='4'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='2'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='2'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td rowspan='2'height='2'width='10'><div align='right'><font face='Arial'>0 </font></div></td>
<td colspan='26'height='2'bgcolor='black'></td>
</tr>
<tr>
<td colspan='26'height='10'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='2'></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2007</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2008</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2009</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2010</b></font></center></td>
<td height='20'width='20'></td>
</tr>
</table>
</center>
<br/>
<div align = 'center'>
<table border = '0' cellspacing='0'>
<tr>
<td colspan='3'width='50'height='20'><font face='Arial'><i><b>Keterangan</b></i></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='red'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Telkomsel Flash (PT. Telekomunikasi Seluler)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='blue'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Mobi - Smart EvDO (PT. Smartfren Sinarmas)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='green'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Wimode - Aha (Bakrie Connectifity)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='yellow'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Lintasarta (Indosat Broadband)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='aqua'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Other Wireless</b></font></td>
</tr>
</table>
</div>
</body>
</html>


Sintaks yang cukup panjang dan membuat pusing -_-
Kira-kira seperti apa yaa jadinya?

Hasil Screenshoot:

Mau lebih dekat dengan webpage ini?
Kunjungi ajungpangi.110mb.com =)

Tidak ada komentar:

Posting Komentar

Jangan lupa memberi komentar pada setiap postingan saya!

Langganan: Posting Komentar (Atom)

TInggalkan Komentar