Chapter 5 TABEL & LINK
MEMBUAT TABEL Tabel merupakan cara untuk Menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen HTML. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table>..... </table>. Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut: <table> <tr> <td> data baris 1 kolom 1 </td> <td> data baris 1 kolom 2 </td> </tr> <td> data baris 2 kolom 1 </td> <td> data baris 2 kolom 2 </td> </table>
FILE GAMBAR 2.JPG
FILE GAMBAR GUGEL.PNG
FILE GAMBAR HEADER.JPG
CONTOH SKRIP INDEX.HTML <head> <title>Halaman Saya</title> </head> <body> <table width="800"> <tr> <td height="80"><img src="header.jpg"></td> </tr> <tr bgcolor="#EFEFEF"> <td> <a href="index.html">home</a> | <a href="profil.html">profil</a> | <a href="link.html">link</a> </td> <td height="258" align="center"> <h3>Welcome</h3> <img src="2.jpg"><br> <small><i>this is a dragonfly</i></small> <td align="center"><small>copyright 2009</small></td> </table> </body> </html>
CONTOH SKRIP PROFIL.HTML <head> <title>Halaman Saya</title> </head> <body> <table width="800"> <tr> <td height="80"><img src="header.jpg"></td> </tr> <tr bgcolor="#EFEFEF"> <td> <a href="index.html">home</a> | <a href="profil.html">profil</a> | <a href="link.html">link</a> </td> <td height="258" align="center"> <h3>Profil Saya</h3> <p>Profil saya disini</p> <td><div align="center">copyright 2009</div></td> </table> </body> </html>
CONTOH SKRIP LINK.HTML <html> <head> <title>Halaman Saya</title> </head> <body> <table width="800"> <tr> <td height="80"><img src="header.jpg"></td> </tr> <tr bgcolor="#EFEFEF"> <td> <a href="index.html">home</a> | <a href="profil.html">profil</a> | <a href="link.html">link</a> </td> <td height="258" align="center"> <h3>Link ke Situs Lain</h3> <ul> <li><a href="http://www.google.co.id"><img src="gugel.png" border="0"></a></li> <li><a href="http://www.yahoo.co.id">Yahoo</a></li> </ul> <td><div align="center">copyright 2009</div></td> </table> </body> </html>
FONT Digunakan untuk mengatur jenis, ukuran dan warna font. Atribut untuk tag <font> yaitu Size , untuk mengatur ukuran font . Color, untuk mengatur warna font yang diinginkan. Face, untuk mengatur jenis huruf yang diinginkan.
CONTOH <html> <head> <title>Formating Karakter</title> </head> <body> <p><font color="#FF0066" size="7">Font</font></p> <p> <font face="Verdana"> Teks ini menggunakan atribut FACE</font><br> <font size="+3">Teks ini menggunakan atribut SIZE</font><br> <font color="#990000">Teks ini menggunakan atribut COLOR</font> </p> </body> </html>
KARAKTER KHUSUS Tanda lebih kecil (<) dan lebih besar (>) merupakan tag HTML, lalu bagaimana cara untuk menuliskan tanda tersebut ke dalam dokumen web kita ? Caranya adalah dengan menuliskan entitas karakter yang mempunyai 3 bagian: sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor entitas, dan sebuah titik koma. Contoh : Untuk menampilkan tanda lebih kecil kita harus menuliskan : < atau <
KARAKTER KHUSUS (2) © ® ± Copyright © © ® ® x Hasil Keterangan Nama Entitas Nomor Entitas © Copyright © © ® Registered Trademark ® ® x Tanda kali × × ± Plus minus ± ± Karakter-karakter diatas hanya sebagian kecil dan sering digunakan.
CONTOH <HTML> <HEAD> <TITLE> Memformat Karakter </TITLE> </HEAD> <BODY> copyright ©<BR> registered trademark ® <BR> trademark ™<BR> non-breaking space<BR> ampersand & <BR> lebih kecil <<BR> lebih besar ><BR> tanda kali × <BR> </BODY> </HTML>
TEKS PREFORMAT Preformatted text <PRE> digunakan untuk menampilakan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang ditampilkan oleh aplikasi berbasiskan teks.
CONTOH <html> <head> <title>Preformatted Text</title> </head> <body> <font color="#9966FF" size="5"> Moncoba PreFormatted Text </font> <p> <pre> ======================================= Ahlihi Masruro & Diah Aprilina Kartini </pre> </p> </body> </html>
SINGKATAN Tag <ABBR> dan tag <ACRONYM> digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut, dengan menggunakan atribut title.
Contoh <html> <head> <title>Formating Teks</title> </head> <body> <ABBR title="dan lain-lain">dll</ABBR><BR> <ACRONYM title="World Wide Web">WWW</ACRONYM><BR> <p> Pada beberapa Browser atribut title dapat digunakan untuk menampilkan kepanjangan dari teks singkatan tersebut apabila mouse berada di atasnya </p> </body> </html>