14 Feb 2011

Tugas Praktikum Modul 1&2 - Praktikum Pemrograman Berbasis Web

Diposting oleh Rista Rusdianawati di 4:21 AM
Label:
1. Tugas Praktikum 1 Modul 2 - Membuat grafik batang statis dengan memanfaatkan elemen tabel.


--> inilah hasil tampilannya :


--> berikut adalah scriptnya :

<!DOCTYPE HTML>  
<html lang="en">    
<head>  
<title>diagram elemen tabel</title>  
</head>  
<link rel="shortcut icon" href="lucu.gif">
  
<body>  
<font face="Aharoni">
<table width="500" height="280" border="0" cellpadding="0" cellspacing="0">   
<caption><b>GRAFIK PERBANDINGAN SIKAP</caption></b>
<tr> <!--baris pertama--> 
    <td width="20">100</td> 
    <td width="10" bgcolor="#000000"></td>  
    <td width="20"></td> 
    <td width="20"></td>  
    <td width="20"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
    <td width="22"></td>  
<td width="22"></td> 
<td width="22"></td> 
  </tr>  
  <tr> <!--baris kedua--> 
    <td></td>
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td>&nbsp;</td>
  </tr>  
  <tr> <!--baris ketiga--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td> 
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris keempat--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td> 
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris kelima--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>
<td></td>
<td></td>
<td></td>
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris keenam--> 
    <td>50</td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>
    <td bgcolor="#FFFF00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#00FFFF"></td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris ketujuh--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#0000FF"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris kedelapan--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris kesembilan--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#33FFFF"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris kesepuluh--> 
    <td></td>  
    <td width="5" bgcolor="#000000"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000CC"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#33FFFF"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td></td>  
    <td bgcolor="#FF0000"></td>  
    <td bgcolor="#0000FF"></td>  
    <td bgcolor="#00CC00"></td>  
    <td bgcolor="#FFFF00"></td>  
    <td bgcolor="#00FFFF"></td>  
    <td>&nbsp;</td>  
  </tr>  
  <tr>  <!--baris kesebelas--> 
    <td height="6">0</td>  
    <td width="6" height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000"></td>  
    <td height="6" bgcolor="#000000">&nbsp;</td>  
  </tr>  
  <tr>  <!--baris keduabelas--> 
    <td></td>
<td></td>
<td></td>
    <td colspan="5"><div align="center">Rista</div></td>  
    <td></td>  
    <td colspan="5"><div align="center">Dania</div></td>  
    <td></td>  
    <td colspan="5"><div align="center">Dian</div></td>  
    <td></td>  
    <td colspan="5"><div align="center">Yeyen</div></td>  
    <td>&nbsp;</td>  
  </tr>  
</table>  
  
  
<p>Keterangan :</p>  
<table width="190" border="0" cellspacing="0">  
  <tr>  
    <td width="35" bgcolor="#FF0000"></td>  
    <td align="center">:</td>
<td>Pemberani</td>  
  </tr>  
  <tr>  
    <td bgcolor="#0000FF"></td>
<td align="center">:</td>
    <td>Pekerja Keras</td>  
  </tr>  
  <tr>  
    <td bgcolor="#00CC00"></td>
<td align="center">:</td>
    <td>Baik Hati</td>  
  </tr>  
  <tr>  
    <td bgcolor="#FFFF00"></td>
<td align="center">:</td>
    <td>Narsis</td>  
  </tr>  
  <tr>  
    <td bgcolor="#00FFFF"></td>
<td align="center">:</td>
    <td>Lebay</td>  
  </tr>  
</table>  
  
</font>  
</body>  
</html>

2. Tugas Praktikum 2 Modul 2 - Membuat desain tabel dengan memanfaatkan fitur pengelompokan.


--> inilah hasil tampilnnya :

berikut adalah scriptnya :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>tabel fitur pengelompokan</title>
</head>
<link rel="shortcut icon" href="dia.gif">


<body>
<table border="2" rules="groups" cellspacing="1" cellpadding="2" frame="hsides"><colgroup align="center"></colgroup><colgroup align="left"></colgroup><colgroup align="center"></colgroup><colgroup align="center"></colgroup>
<caption>PERBANDINGAN SIKAP</caption>
<tbody><b>
<tr>
<th width="25">No.</th>
<th width="160">Spesifikasi Sikap</th>
<th width="50">Poin </th>
<th width="70">Rista </th>
<th width="70">Dania</th>
</tr>
</tbody></b>


<tbody>
<tr>
<td align="center">1</td>
<td>Rajin</td>
<td align="center">5</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>


<tr>
<td align="center">2</td>
<td>Penyayang Teman</td>
<td align="center">4</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">3</td>
<td>Baik Hati</td>
<td align="center">3</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">4</td>
<td>Tidak Sombong</td>
<td align="center">2</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">5</td>
<td>Suka Olahraga</td>
<td align="center">1</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
</tbody>


<tbody>
<tr>
<td align="center">6</td>
<td>Pemalas</td>
<td align="center">-5</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>

<tr>
<td align="center">7</td>
<td>Suka tidur</td>
<td align="center">-4</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">8</td>
<td>Narsis</td>
<td align="center">-3</td>
<td align="center">-</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">9</td>
<td>Gampang GR</td>
<td align="center">-2</td>
<td align="center">-</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">10</td>
<td>Pendendam</td>
<td align="center">-1</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
</tbody>


<tbody>
<tr>
<th width="350" colspan=3>Jumlah poin</th>
<td align="center">11</td>
<td align="center">0</td>
</tr>
</tbody>
</table>


<i>Source : Hasil Penelitian Sikap Penduduk Teram GAMA 9</i><br/>
&copy;RistaRusdianawati


</body>
</html>


Silahkan dicoba.....

0 komentar:

Posting Komentar

silakan komen......

Langganan: Posting Komentar (Atom)