Pr!!Nc33$$.WuL@n: Februari 2010

Elemen-Elemen HTML,,,

Hii guys yuk balajar bkin bikin dokumen HTML,,,

Kalau mau belajar bikin dokumen ada elemen-elemen fundamental dari HTML sendiri, tapi kaliini kiata bahas yang paling sering digunakan ja yachhh!!!!!!

Elemennya meliputi :

Link: Untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya (atau bisa juga mengaitkan blok-blok di dalam satu dokumen
Tabel: Untuk menghasilkan data dalam bentuk tabular.
Frame: Untuk membagi halaman web secara independen.
Form: Untuk menghasilkan form masukan data.

Sebagai contohnya yuk kiat buat kreasi grafik batang statis dengan memanfaatkan elemen tabel. Source codenya begini :

</code><!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>Grafik Berbasis Tabel 1</title> </head> <body> <table width="600" > <caption>GRAFIK BERBASIS TABEL</caption> <tr> <td width="600" colspan="2"> <table frame="hsides" align="left" cellspacing="0" cellpadding="5">  <tr> <th width="200">Perusahaan</th>  <th width="400" >Pendapatan</th> </tr> </table> </td> </tr> <tr> <td> <table frame="below" align="left" cellspacing="0"cellpadding="1">  <tr> <td width="200">Angin Reboot Ltd</td> <td width="25"></td> <td width="70"></td> <td width="30"></td> <td width="200" colspan="2"><table bgcolor="black"><tr><th width="200" height="20" bgcolor="green"></th></tr></table></td> <td>+150%</td> </tr> <tr> <td width="200">Command Prompt,Inc</td> <td width="25"></td> <td width="70"></td> <td width="30"></td> <td width="80"><table bgcolor="black"><tr><th width="80" height="20" bgcolor="green"></th></tr></table></td> <td align="left" colspan="2">+55%</td> </tr> <tr> <td width="200">Hibernate Ltd</td> <td width="25"></td> <td width="70" align="right">-23%</td> <td width="30" ><table bgcolor="black" align="right"><tr><th width="30" height="20" bgcolor="yellow"></th></tr></table></td> <td width="80"></td> <td width="120"></td> </tr> <tr> <td width="200">Shutdown Ltd</td> <td width="25" align="right">-75%</td> <td width="100" colspan="2"><table bgcolor="black"><tr><th width="100" height="20" colspan="2" bgcolor="red"></th></tr></table></td> <td width="80"></td> <td width="120"></td> </tr> </table> </td> </tr> </table> </body> </html> <code>

kalau dah slesai nich liat tampilannya kayak gini nich,,,

Selanjutnya yuk coba bikin desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan. Source codenay kayak gini,,

</code><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/frameset.dtd"> <html lang="en"> <head> <title>Tabel 2</title> </head> <body> <table border="2" cellspacing=0 frame="hsides" rules="groups"> <caption>PERBANDINGAN FITUR</caption> <colgroup align="center"> <colgroup align="center"> <colgroup align="center"> <colgroup align="center" span="2"> <thead valign="middle"> <tr> <th width="35">No <th width="200">Fitur <th width="100">Enterprise <th width="50">Pro <th width="50">Free </tr> <tbody> <tr><td>1<td>Garansi seumur hidup<td align="center">X<td align="center">-<td align="center">-</tr> <tr><td>2<td>Multiuser<td align="center">X<td align="center">-<td align="center">-</tr> <tr><td>3<td>Update otomatis<td align="center">X<td align="center">X<td align="center">-</tr> <tr><td>4<td>Cetak laporan<td align="center">X<td align="center">X<td align="center">-</tr> <tr><td>5<td>Notifikasi error<td align="center">X<td align="center">X<td align="center">X</tr> <tbody> <tr><td>6<td>Ubah tema<td align="center">X<td align="center">X<td align="center">X</tr> <tr><td>7<td>Try ikon<td align="center">X<td align="center">X<td align="center">X</tr> </table> </body> </html> <code>

Hasilnya begini!!!!

Selamat mencoba kalau salah JANGAN MARAH ZAW,,,,hehehehe

Pr!!Nc33$$.WuL@n

Rabu, 24 Februari 2010

Labels

Blog Archive