collected pixels: 02/24/10

Rabu, 24 Februari 2010

Modul 2 Komponen HTML Lanjut (2)

Untuk komponen HTML lanjut berikutnya adalah membuat desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.
Pembuatan desain tabel ini menggunakan kode HTML seperti halnya membuat tabel biasa, namun dengan modifikasi pada beberapa bagian.

Tabel ini terdiri dari beberapa kolom dan baris. Pada baris ke 6, diberikan tambahan garis horizontal yang tergabung menjadi satu kesatuan dengan tabel. Screen shoot tampilan halaman web desain tabel dapat dilihat pada gambar di atas.

Untuk membuat tampilan seperti pada screen shoot di atas, kode HTML yang harus dimasukkan adalah sebagai berikut.

<!DOCTYPE html       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <br /> <br /> <head> <br />   <title>Grafik Berbasis Table</title> <br />   <style type="text/css">  </style><br /> </head><br /> <br /> <body><br /> <table width="45%" border="0" cellpadding="0" cellspacing="0" ><tr align="center"> <th colspan="5" bgcolor="#FFFFFF" ><strong>PERBANDINGAN FITUR </strong></th> </tr> <tr align="center"> <th width="32" height="23" bgcolor="#FFFFFF" class="atasbawah" >No. </th> <th width="210" class="ataskiribawah" >Fitur </th> <th width="112" class="ataskiribawah" >Enterprise </th> <th width="39" class="ataskiribawah" >Pro </th> <th width="49" class="atasbawah" >Free </th> </tr> <tr> <td>1</td> <td class="kiri">Garansi seumur hidup</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">-</td> <td align="center">-</td> </tr> <tr> <td>2</td> <td class="kiri">Multiuser</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">-</td> <td align="center">-</td> </tr> <tr> <td>3</td> <td class="kiri">Update Otomatis</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">X</td> <td align="center">-</td> </tr> <tr> <td>4</td> <td class="kiri">Cetak Laporan</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">X</td> <td align="center">-</td> </tr> <tr> <td class="bawah">5 </td> <td class="kiribawah">Notifikasi Eror </td> <td align="center" class="kiribawah">X </td> <td align="center" class="kiribawah">X </td> <td align="center" class="bawah">X </td> </tr> <tr> <td height="19">6</td> <td class="kiri">Ubah Tema</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">X</td> <td align="center">X</td> </tr> <tr> <td class="bawah">7</td> <td class="kiribawah">Try Icon</td> <td align="center" class="kiribawah">X</td> <td align="center" class="kiribawah">X</td> <td align="center" class="bawah">X</td> </tr> </table></body><br /> </html><br />

Modul 2 Komponen HTML Lanjut (1)

Pada pembahasan komponen HTML lanjut ini, kita akan belajar untuk membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel.
Pembuatan grafik batang menggunakan kode HTML ternyata tidak sesulit yang dibayangkan.

Kita bisa mengatur panjang dan lebar masing-masing batang statisnya. Selain itu, kita juga dapat memberikan warna backcolour pada masing-masing batang statis.
Pembuatan kreasi grafik batang statis ini menggunakan elemen tabel yang dimerge menjadi satu.
Gambar di atas adalah screen shoot tampilan halaman web kreasi grafik batang statis dengan memanfaatkan elemen tabel.

<!  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>Grafik Berbasis Tabel</title><br /> </head><br /> <br /> <body><br /> <table width="80%" cellpadding="0" cellspacing="0" bgcolor="white"><tr> <th width="200" height="40" ><hr />Perusahaan <hr /></th> <th colspan="8" ><hr />Pendapatan <hr /></th> </tr> <tr> <td height="27" >Angin Reboot Ltd</td> <td colspan="3" ></td> <td colspan="2" align="left" bgcolor="white"><table width="298"   border="2" cellspacing="0" bgcolor="green"><tr> <th height="23" ></th> </tr> </table></td> <td width="91" align="left" valign="bottom" bgcolor="white">+150%<br /> <br /> </td> <td width="11" colspan="2" align="left" valign="bottom" ></td> </tr> <tr> <td height="33" >Command Prompt, Inc</td> <td colspan="3" ></td> <td width="15" align="left" bgcolor="white"><table width="100"   border="2" cellspacing="0" bgcolor="green"><tr> <th height="23" ></th> </tr> </table></td> <td width="150" align="left" valign="bottom" bgcolor="white">+55%<br /> <br /> </td> <td colspan="3" valign="bottom" ></td> </tr> <tr> <td height="36" >Hibernate Ltd</td> <td width="88" align="right" valign="bottom" ></td> <td width="71" align="right" valign="bottom" >-23%</td> <td width="40" align="right" bgcolor="white"><table width="40"   border="2" cellspacing="0" bgcolor="yellow"> <tr> <th height="23" ></th> </tr> </table></td> </tr> <tr> <td height="27" >Shutdown Ltd</td> <td align="right" valign="bottom" >-75%</td> <td colspan="2" align="right" valign="bottom" bgcolor="white"   ><table width="151" border="2" cellspacing="0" bgcolor="red"><tr> <th height="23" ></th> </tr> </table></td> </tr> <tr> <td height="27" ><hr /> </td> <td align="right" valign="bottom" ><hr /> </td> <td colspan="2" align="right" valign="bottom" bgcolor="white" ><hr   /> </td> <td colspan="5" ><hr /> </td> </tr> </table><br /> </body><br /> </html>

Pages

Rabu, 24 Februari 2010

Modul 2 Komponen HTML Lanjut (2)

Modul 2 Komponen HTML Lanjut (1)