Nia Wita: Februari 2011

Membuat Tabel Perbandingan Dengan HTML

Tabel perbandingan sering digunakan untuk membadingkan pengelompokan jabatan, masa benda, ukuran, dll.
kali ini adalah contoh dari tabel perbandingan yang saya buat dengan HTML.

Gambar diatas adalah contoh tabel Perbandingan Fitur

Berikut ini adalah script HTML nya:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">

<head>
<title>Tabel Perbandingan</title>
</head>

<body background="bg.jpg">

<table width="700" border="0" align="center">

<tr>
<td width="375" colspan=8 align="center"><strong>####### PERBANDINGAN FITUR ########</strong></td>
</tr>

<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>

</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>

</tr>

<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">3</td>

<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>

<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>

</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>

</tr>

<tr>
<td width="25" align="center">7</td>
<td width="150">Try icon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>

</tr>

</table>

</body>
</html>

Selamat mencoba.....!!!
sampai bertemu pada percobaan berikutnya.

Pembuatan Grafik Berbasis Tabel Pada HTML

Grafik adalah suatu yang digunakan untuk mempresentasikan hasil pada suatu perusahaan ataupun instansi grafik ada bermacam-macam, kali ini saya akan mencoba untuk membuat grafik berbasi tabel.

Gambar diatas adalah contoh grapik berbasi tabel

dan untuk script HTML nya seperti berikut :

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en">
<head>
<title>Grafik Berbasis tabel</title>
</head>
<body>
<span style="font-family:arial;font-size:130%;color:Blue;">Kreasi Grafik Statis</span>
<table width="561" height="241">
 <tr>
     <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>    
        <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>  
    </tr>  
    <tr>         
     <td width="172">Angin Reebot Ltd </td>     
        <td width="27"></td>     
        <td width="31"></td>     
        <td width="25"></td>     
        <td width="33"></td>     
        <td width="16"></td>     
        <td width="13"></td>     
        <td colspan="6" bgcolor="#006600"></td>     
        <td width="17">+150%</td>  
    </tr>   
    <tr>     
     <td>Command Prompt, Inc </td>     
        <td></td>     
        <td></td>     
        <td></td>     
        <td></td>     
        <td></td>     
        <td></td>     
        <td colspan="4" bgcolor="#006600"></td>     
        <td width="16">+55%</td>     
        <td width="16"></td>     
        <td></td>   
    </tr>  
    <tr>     
     <td>Hibernate Ltd </td>    
        <td></td>     
        <td></td>     
        <td></td>     
        <td>-23%</td>     
        <td colspan="2" bgcolor="#FFFF00"></td>     
        <td width="34"></td>     
        <td width="16"></td>     
        <td width="16"></td>     
        <td width="16"></td>     
        <td></td>     
        <td></td>    
        <td></td>   
     </tr>   
     <tr>     
      <td>Shutdown Ltd </td>     
        <td></td>     
        <td>-75%</td>     
        <td colspan="4" bgcolor="#FF0000"></td>     
        <td></td>     
        <td></td>     
        <td></td>     
        <td></td>     
        <td></td>    
        <td></td>     
        <td></td>   
     </tr>   
     <tr>     
      <td colspan="14" style="border-top:#000000 solid"></td>   
     </tr> </table>

</body> 
</html>

Selamat mencoba membuat. peace!!

Membuat Frame Bertumpuk (Nested Frames)

Kegunaan frame biasanya digunakan untuk membuat suatu halaman yang interaktif di dalam dokumen HTML. Dengan frame kita dapat menampilkan lebih dari satu halaman web dalam halaman browser yang sama. Setiap dokumen HTML dapat ditampilkan di dalam frame dan setiap frame adalah bebas antara satu dengan yang lain.

Gambar diatas adalah contoh dari frameset yang didalamnya terdapat gambar.

berikut ini adalah scriptnya

<html>
<head><title>frameset</title>
</head>
<frameset rows="20%,60%,20%" >
 <frame src="aaaa.html">
    <frameset cols="30%,50%,20%">
     <frame src="bbbbbbb.html">
     <frame src="aaaa.html">
     <frame src="cccccccccccc.html">
     </frameset>

<frame src="cccccccccccc.html">
</frameset><noframes></noframes>
</html>

Silakan mencoba..........!!

Nia Wita

Pages

Rabu, 16 Februari 2011

Membuat Tabel Perbandingan Dengan HTML

Pembuatan Grafik Berbasis Tabel Pada HTML

Membuat Frame Bertumpuk (Nested Frames)