Dokumen ini adalah terjemahan dari More advanced features dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/MarkUp/Guide/Advanced.html

Penerjemah: Edwin Rene

Dave Raggett   Fitur - Fitur Lanjutan

Dave Raggett.

Setelah menguasai dasarnya, kini saatnya beranjak ke fitur yang tingkat lanjutan. Hal berikut akan mengajarkan anda bagaimana:

p.s. Saya menyarankan anda menggunakan HTML Tidy untuk menjaga kebersihan markup dan menjaminnya bersih dari kesalahan.

Bagaimana menggunakan line break

Terkadang, anda ingin menggunakan pemisah baris (line break). Anda melakukan hal ini dengan menggunakan elemen br, sebagai contoh bila anda ingin menuliskan alamat surat:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

Elemen br tidak membutuhkan tag penutup. Pada umumnya elemen yang tidak membutuhkan tag penutup dikenal sebagai empty elements.

Bagaimana menyisipkan non-breaking spaces

Browser secara otomatis memotong kalimat dan memulai baris baru agar dapat tetap berada dalam batas (margin). Line break bisa disisipkan dimanapun spasi muncul dalam markup. Terkadang anda ingin mencegah browser memotong kalimat di antara dua kata tertentu. Sebagai contoh antara dua kata dari sebuah merek seperti "Coca Cola". Caranya adalah dengan menggunakan &nbsp; sebagai pengganti karakter spasi, sebagai contoh:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.

Adalah kebiasaan yang tidak baik menggunakan non-breaking spaces untuk melakukan indentasi. Daripada melakukan hal tersebut, anda disarankan untuk menggunakan indentasi melalui aturan style.

Bagaimana menggunakan entiti untuk karakter spesial

Untuk peringatan hak cipta (copyright), atau merek dagang (trademarks) pada umumnya orang menambahkan tanda yang sesuai:

Simbol Entiti Contoh
Tanda Copyright &copy; Copyright © 1999 W3C
Registered trademark &reg; MagiCo ®
Trademark &#8482; Webfarer™

Catatan HTML 4.0 mendefinisikan &trade; untuk tanda trademark tetapi hal ini masih kurang  mendapat dukungan seperti halnya &#8482;

Ada beberapa entiti lain yang mungkin berguna bagi anda:

Simbol Entiti Contoh
Kurang dari &lt; <
Lebih dari &gt; >
Dan / Ampersand &amp; &
nonbreaking space &nbsp;  
em dash &#8212;
tanda kutip &quot; "

Lalu, ada beberapa entiti untuk huruf-huruf dan simbol lainnya dalam karakter set Latin-1:

  &nbsp; &#160; Ð &ETH; &#208;
¡ &iexcl; &#161; Ñ &Ntilde; &#209;
¢ &cent; &#162; Ò &Ograve; &#210;
£ &pound; &#163; Ó &Oacute; &#211;
¤ &curren; &#164; Ô &Ocirc; &#212;
¥ &yen; &#165; Õ &Otilde; &#213;
¦ &brvbar; &#166; Ö &Ouml; &#214;
§ &sect; &#167; × &times; &#215;
¨ &uml; &#168; Ø &Oslash; &#216;
© &copy; &#169; Ù &Ugrave; &#217;
ª &ordf; &#170; Ú &Uacute; &#218;
« &laquo; &#171; Û &Ucirc; &#219;
¬ &not; &#172; Ü &Uuml; &#220;
­ &shy; &#173; Ý &Yacute; &#221;
® &reg; &#174; Þ &THORN; &#222;
¯ &macr; &#175; ß &szlig; &#223;
° &deg; &#176; à &agrave; &#224;
± &plusmn; &#177; á &aacute; &#225;
² &sup2; &#178; â &acirc; &#226;
³ &sup3; &#179; ã &atilde; &#227;
´ &acute; &#180; ä &auml; &#228;
µ &micro; &#181; å &aring; &#229;
&para; &#182; æ &aelig; &#230;
· &middot; &#183; ç &ccedil; &#231;
¸ &cedil; &#184; è &egrave; &#232;
¹ &sup1; &#185; é &eacute; &#233;
º &ordm; &#186; ê &ecirc; &#234;
» &raquo; &#187; ë &euml; &#235;
¼ &frac14; &#188; ì &igrave; &#236;
½ &frac12; &#189; í &iacute; &#237;
¾ &frac34; &#190; î &icirc; &#238;
¿ &iquest; &#191; ï &iuml; &#239;
À &Agrave; &#192; ð &eth; &#240;
Á &Aacute; &#193; ñ &ntilde; &#241;
 &Acirc; &#194; ò &ograve; &#242;
à &Atilde; &#195; ó &oacute; &#243;
Ä &Auml; &#196; ô &ocirc; &#244;
Å &Aring; &#197; õ &otilde; &#245;
Æ &AElig; &#198; ö &ouml; &#246;
Ç &Ccedil; &#199; ÷ &divide; &#247;
È &Egrave; &#200; ø &oslash; &#248;
É &Eacute; &#201; ù &ugrave; &#249;
Ê &Ecirc; &#202; ú &uacute; &#250;
Ë &Euml; &#203; û &ucirc; &#251;
Ì &Igrave; &#204; ü &uuml; &#252;
Í &Iacute; &#205; ý &yacute; &#253;
Î &Icirc; &#206; þ &thorn; &#254;
Ï &Iuml; &#207; ÿ &yuml; &#255;

Anda juga dapat menggunakan entiti karakter numerik untuk huruf Yunani dan simbol matematika yang didefinisikan dalam Unicode. Untuk keterangan lebih lanjut, lihat daftar yang tertulis dalam spesifikasi HTML 4. Sebagai catatan bahwa nama entiti untuk karakter tersebut tidak dikenali oleh Navigator 4, jadi anda disarankan untuk tetap menggunakan entiti numerik sebagai gantinya.

Melink ke tengah halaman Web

Bayangkan anda menulis sebuhah halaman Web yang panjang dengan sebuah tabel daftar isi dekat awal. Bagaimana anda membuat daftar isi tersebut kedalam hyperteks link ke untuk bagian-bagian yang sesuai?

Mari asumsikan bahwa setiap bagian diawali dengan sebuah heading, misalnya:

<h2>Local Night Spots</h2>

Anda membuat heading tersebut menjadi sasaran yang cocok untuk sebuah link hyperteks dengan menaruh isinya diantara <a name=identifier> .... </a>

<h2><a name="night-spots">Local Night Spots</a></h2>

Atribut name menspesifikasikan nama yang anda akan gunakan untuk mengidentifikasi link sasaran, dalam hal ini: "night-spots". Daftar isi sekarang dapat memuat sebuah link hyperteks menggunakan nama ini, misalnya:

<ul>
...
<li><a href="#night-spots">Local Night Spots</a></li>
...
</ul>

Karakter  # perlu berada sebelum nama sasaran. Bila sasaran berada dalam dokumen lain maka anda perlu menempatkan alamat web dari dokumen tersebut sebelum karakter #. Misalnya bila sasaran berada dalam dokumen "http://www.bath.co.uk/", maka link tersebut menjadi:

<a href="http://www.bath.co.uk/#night-spots">Local Night Spots</a>

Nantinya, anda akan dapat mendefinisikan sasaran link tanpa memerlukan elemen <a>. Metode yang baru lebih murah, karena pada yang anda perlukan adalah menambahkan atribut id pada heading, sebagai contoh:

<h2 id="night-spots">Local Night Spots</h2>

Metode ini tidak berlaku untuk browser generasi keempat atau sebelumnya, jadi harus digunakan dengan hati hati selama browser tersebut masih digunakan!

Teks Preformatted

Salah satu keunggulan dari Web adalah bahwa teks secara otomatis di atur agar membuat baris baru untuk menyesuaikan dengan ukuran jendela (window). Tapi terkadang, anda ingin mematikan fungsi tersebut. Sebagai contoh pada saat menampilkan contoh kode dari sebuah program. Anda membuat hal ini dengan menggunakan elemen pre. Sebagai contoh:

<pre>
void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);

if (next)
next->prev = prev;

parent = null;
}
</pre>

Yang jadinya:

    void Node::Remove()
{
if (prev)
prev->next = next;
else if (parent)
parent->SetContent(null);

if (next)
next->prev = prev;

parent = null;
}

Teks dan latar belakang di bentuk dengan style sheet. Sebuah catatan adalah bahwa semua line break dan spasi dibentuk persis sama dengan tampilan mereka pada HTML. Pengecualiannya adalah sebuah baris baru setelah tag awal <pre> dan sebelum tag penutup </pre>, yang dibuang. Ini berarti kedua contoh dibawah ini akan ditampilkan sama persis:

<pre>preformatted text</pre>

<pre>
preformatted text
</pre>

Teks Preformatted biasanya di render dengan menggunakan fonta monospace dimana setiap fonta memiliki lebar yang sama. Bila anda menetapkan sebuah aturan style dengan elemen pre, beberapa browser lupa menggunakan fonta monospace, sehingga membutuhkan penggunakan property font-family. Sebagai contoh bila anda ingin merender seluruh elemen pre dengan warna hijau anda dapat mendefinisikan aturan style tersebut:

<style type="text/css">
pre { color: green; background: white; font-family: monospace; }
</style>

Ketika menetapkan warna latar depan untuk teks, anda dianjurkan untuk menetapkan warna latar belakangnya juga. Hal ini akan mencegah bencana dimana wana latar belakang susah dibedakan dengan warna latar depan. Daripada menetapkan warna latar belakang dengan elemen pre, anda akan merasa lebih mudah bila menetapkannya pada elemen body, sebagai contoh:

<style type="text/css">
body { color: black; background: white; }
pre { color: green; font-family: monospace; }
</style>

Mengelilingi gambar dengan teks

Dengan HTML, anda dapat memilih apakah sebuah gambar merupakan bagian dari barisan kalimat atau di ambangkan ke margin kiri atau kanan. Anda mengontrol hal ini dengan menggunakan atribut align. Bila atribut align di tetapkan menjadi left maka gambar tersebut akan diposisikan di sebelah  margin kiri. Bila ditetapkan right maka gambar tersebut diambangkan ke margin kanan.. Sebagai contoh:

<p><img src="http://www.w3.org/MarkUp/Guide/sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> This text will be
flowed around the right side of the graphic.</p>

yang menghasilkan:

sunburst graphic Teks ini akan di berada di sisi sebelah kanan gambar.

Berikut ini menggunakan align="right"

<p><img src="http://www.w3.org/MarkUp/Guide/sun.jpg" alt="sunburst graphic"
width="32" height="21" align="right"> This text will be
flowed around the left side of the graphic.</p>

yang menghasilkan:

sunburst graphic Teks ini akan berada di sebelah kiri gambar.

Untuk memaksakan teks berada disebelah bawah gambar anda dapat menggunakan elemen <br clear=all>, sebagai contoh:

<p><img src="http://www.w3.org/MarkUp/Guide/sun.jpg" alt="sunburst graphic"
width="32" height="21" align="left"> This text will be
flowed around the right side of the graphic.<br clear="all">
This starts a new line below the floated image.</p>

yang menghasilkan:

sunburst graphic This text will be flowed around the right side of the graphic.
This starts a new line below the floated image.

Daerah yang dapat di klik dalam gambar

Gambar berikut berfungsi sebagai map dari sekelompok halaman Web. Anda dapat mengklik pada lingkarannya untuk pergi ke halaman yang terkait.

site map Getting Started A Touch of Style Web Page Design Advanced HTML

Hal ini menggunakan markup sebagai berikut:

<p align="center">
<img src="pages.gif" width="384" height="245"
alt="site map" usemap="#sitemap" border="0">
<map name="sitemap">
<area shape="circle" coords="186,44,45"
href="Overview.html" alt="Getting Started">
<area shape="circle" coords="42,171,45"
href="Style.html" alt="A Touch of Style">
<area shape="circle" coords="186,171,45"
alt="Web Page Design">
<area shape="circle" coords="318,173,45"
href="Advanced.html" alt="Advanced HTML">
</map>
</p>

Atribut src pada elemen img menetapkan gambar sebagai "pages.gif". Atribut usemap mereferensikan sebuah elemen map. Hal tersebut menggunakan sebuah alamat Web untuk hal tersebut, itulah sebab adanya karakter #. Atribut border border diberi nilai "0" untuk menghilangkan batasan biru disekeliling gambar.

Elemen map menetapkan bagian mana dari gambar tersebut yang berfungsi sebagai link hyperteks. Atribut name sama dengan atribut  usemap pada elemen img dan berfungsi sama dengan atribut name pada elemen <a>. Dalam prakteknya, elemen map perlu berada di file yang sama dengan elemen img.

Elemen area digunakan untuk mendefinisikan daerah dalam gambar tersebut dan untuk mengikatnya ke alamat Web. Atribut shape menentukan  "rect", "circle" atau "poly". Atribut coords menspesifikasikan koordinat untuk daerah tergantung pada bentuknya.

Pixel paling kiri atas dianggap sebagai awal dari gambar dengan x dan y keduanya bernilai nol, x membuat gambar bertambah ke kanan dan y membuatnya ke bawah. Kebanyakan alat manipulasi gambar memungkinkan anda mencari koordinat pixel dalam sebuah gambar.

Bila dua atau lebih daerah saling melewati, elemen yang mendifinisikan daerah yang muncul pertama akan didahulukan (dalam hal ini, merespon pada input yang diberikan pengguna). Untuk bentuk yang kompleks seperti sebuah bentuk lingkaran dengan lubang ditengah (anular ring), anda dapat memakai bagian yang tidak aktif dengan manaruhnya diatas bagian lain dengan menggunakan atribut nohref, sebagai contoh:

      <area shape="circle" coords="186,44,50" nohref>
<area shape="circle" coords="186,44,100"
href="Overview.html" alt="Getting Started">

Dimana lingkaran pertama membentuk sebuah daerah yang tidak aktif didalam lingkaran yang lebih besar yang dibuat oleh elemen kedua. Untuk mendapatkan efek tersebut, bentuk yang tidak aktif tersebut harus diletakkan terlebih dulu bila tidak maka akan tertutup oleh bentuk yang aktif.

Mengapa anda perlu menuliskan atribut alt

Atribut alt pada elemen area digunakan untuk memberikan sebuah label teks untuk link tersebut. Tanpanya map gambar tersebut tidak dapat diakses oleh orang orang yang tidak dapat membaca gambar tersebut.

Tabel

Tabel berfungsi sebagai informasi juga untuk tata letak. Anda dapat merentangkan tabel untuk memenuhi margin, menentukkan ukuran lebih yang tetap atau membiarkan browser menentukan ukurannya secara otomatis agar sesuai dengan isinya.

Tabel terdiri dari satu atau lebih baris cell. Berikut sebuah contoh yang sederhana:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Markup untuk ini adalah:

<table border="1">
<tr><th>Tahun</th><th>Penjualan</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Elemen tabel berfungsi sebagai tempat untuk tabel tersebut. Atribut border menentukan lebar pinggiran tabel tersebut dalam pixel. Elemen tr berfungsi sebagai sebuah tempat untuk tiap baris tabel (table row). Elemen th dan td berfungsi sebagai tempat untuk heading dan data dari masing masing cell.

Bantalan untuk Cell

Anda dapat menambah jumlah bantalan untuk seluruh cell dengan menggunakan atribut cellpadding pada elemen table. Sebagai contoh untuk menentukan padding menjadi 10 pixel:

<table border="1" cellpadding="10">

ini mempunyai efek:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Jarak Cell

Sebagai perbandingan atribut cellspacing menetapkan jarak diantara cell. Menetapkan jarak cell menjadi10:

<table border="1" cellpadding="10" cellspacing="10">

memiliki efek:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Lebar Tabel

Anda bisa menentukan lebar tabel dengan menggunakan atribut width. Nilainya adalah lebar dalam pixel atau sebuah persentase yang mewakili persentase dari jarak yang tersedia antara margin  kiri dan kanan. Sebagai contoh untuk menentukan lebar menjadi 80% dari margin:

<table border="1" cellpadding="10" width="80%">

yang memiliki  efek:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Penempatan Teks dalam Cell

Browser pada umumnya akan memposisikan heading pada cell (th) di tengah, dan merapat kirikan data pada cell (td). Anda dapat merubah penempatan tersebut menggunakan atribut align, yang bisa ditambahkan ke tiap cell atau baris (tr element). Hal tersebut menggunakan nilai "left", "center" atau "right":

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Tahun</th><th>Penjualan</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

dengan hasil sebagai berikut:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Atribut valign memainkan peranan yang mirip untuk penempatan vertikal dari isi sebuah cell. Hal tersebut menggunakan nilai "top", "middle" atau  "bottom", dan dapat ditambahkan pada tiap cell atau baris. Pada umumnya, heading cell (th) memposisikan isi mereka di tengah cell sementara data cell di posisikan pada bagian atas tiap cell.

Cell Kosong

Browser mempunyai sebuah cara unik untuk berurusan dengan cell yang kosong, bandingkan:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M
2003

dengan

Tahun Penjualan
2000 $18M
2001 $25M
2002  

yang pertama terjadi karena cellnya kosong:

<td></td>

Untuk mencegah hal ini gunakan sebuah non-breaking space:

<td>&nbsp;</td>

Cell yang rentangnya lebih dari satu baris atau kolom

Mari menlanjutkan contoh di atas untuk membagi penjualan menjadi daerah penjualan utara dan selatan:

Tahun Penjualan
Utara Selatan Total
2000 $10M $8M $18M
2001 $14M $11M $25M

Heading "Tahun" sekarang tingginya dua baris, sementara heading "Penjualan" merentang selebar tiga kolom. Hal ini dilakukan dengan dengan menggunakan atribut rowspan dan colspan secara berturutan. Markup untuk tabel diatas adalah sebagai berikut:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Tahun</th><th colspan="3">Penjualan</th></tr>
<tr align="center"><th>Utara</th><th>Selatan</th><th>Total</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

Anda dapat menyederhanakannya dengan memanfaatkan fakta bahwa kebanyakan browser tidak membutuhkan tag penutup untuk cell tabel dan baris:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Tahun<th colspan="3">Penjualan
<tr align="center"><th>Utara<th>Selatan<th>Total
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>

Perhatikan bahwa sementara heading  "Tahun" memiliki tinggi dua baris, elemen th yang pertama pada baris kedua muncul pada kolom kedua dan bukan yang pertama.

Tabel tanpa garis pinggir

Hal ini umumnya digunakan untuk membuat layout dari sebuah dalam bentuk kotak-kotak. Apa yang anda perlu lakukan adalah dengan menambahkan  border="0" dan cellspacing="0" pada elemen tabel:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Hal ini dihasilkan dengan menggunakan markup berikut:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Tahun</th><th>Penjualan</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Bila anda tidak mengikutkan atribut cellspacing maka anda akan mendapatkan sedikit jarak antara cell, seperti terlihat di bawah:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Mewarnai tabel anda

Halaman ini menggunakan sebuah style sheet untuk menentukan warna latar belakang untuk tabel, dengan warna yang berbeda untuk heading dan cell data. Aturan style yang saya gunakan adalah sebagai berikut:

table {
margin-left: -4%;
font-family: sans-serif;
background: white;
border-width: 2;
border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

Dua baris terakhir menetapkan warna latar belakang untuk cell th dan td dengan nilai red/green/blue. Nomor nomornya berada dalam kisaran 0 hingga 255 (nilai paling tinggi).

Cara lain untuk menetapkan latar belakang adalah dengan menggunakan atribut bgcolor. Ini bekerja untuk hampir semua browser dan tidak tergantung pada bantuan style sheet. Langkah pertama ialah menentukan nilai hexadesimal dari komponen merah, hijau dan biru dari warna yang anda inginkan. Sebuah alat pengubah disetakan dalam halaman style.

<table border="0" cellspacing="0" cellpadding="10">
<tr>
<th bgcolor="#CCCC99">Tahun</th>
<th bgcolor="#CCCC99">Penjualan</th>
</tr>
<tr>
<td bgcolor="#FFFF66">2000</td>
<td bgcolor="#FFFF66">$18M</td>
</tr>
<tr>
<td bgcolor="#FFFF66">2001</td>
<td bgcolor="#FFFF66">$25M</td>
</tr>
<tr>
<td bgcolor="#FFFF66">2002</td>
<td bgcolor="#FFFF66">$36M</td>
</tr>
</table>

Menengahkan tabel anda

Anda dapat menenghkan posisi tabel ditengah antara margin kiri dan kanan dengan menggunakan CSS. Bila style sheet mengandung aturan berikut, maka tabel akan di tengahkan:

table {
margin-left: auto;
margin-right: auto;
}

Anda dapat membuat hal ini spesifik pada sebuah tabel dengan memberikannya sebuah nilai id, atau dengan membuat sebuah class. Contoh berikut berlaku pada tabel dengan sebuah atribut class dengan nilai centered:

Pertama aturan stylenya:

table.centered {
margin-left: auto;
margin-right: auto;
}

dan ini adalah markup tabelnya:

<table class="centered" border="1">
<tr><th>Tahun</th><th>Penjualan</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

dan ini adalah bagaimana tabel anda akan ditampilkan pada browser:

Tahun Penjualan
2000 $18M
2001 $25M
2002 $36M

Perlu dicatat bahwa anda dapat mengganti atribut border dengan aturan CSS rules untuk kontrol yang lebih baik pada tampilan table dan garis pembatas cell. Lihat petunjuk style untuk contoh bagaimana menentukan batasan dengan styles.

Membuat tabel anda lebih mudah dibaca

Bila anda tidak dapat melihat tabel tersebut maka akan sulit mengerti apa yang maksud dari tabel tersebut. Langkah pertama adalah menambahkan informasi menjelaskan tujuan dari struktur dari tabel tabel tersebut. Elemen caption memungkin anda membuat sebuah tulisan, dan memposisikannya di atas atau dibawah tabel tersebut. Elemen caption harus muncul sebelum elemen tr dari baris pertama.

Proyeksi keuntungan penjualan per tahun
Tahun Penjualan
2000 $18M
2001 $25M

yang memiliki markup sebagai berikut:

<table border="1" cellpadding="10" width="80%">
<caption>Proyeksi keuntungan penjualan per tahun</caption>
<tr align="center">
<th>Tahun</th><th>Penjualan</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Berikut tabel yang sama dengan align="bottom" ditambahkan pada elemen caption:

Proyeksi keuntungan penjualan pe tahun
Tahun Penjualan
2000 $18M
2001 $25M

Attribut summary yang merupakan salah satu elemen tabel seharusnya digunakan untuk mendeskripsikan struktur dari tabel untuk orang yang tidak dapat membaca table tersebut. Sebagai contoh: "kolom pertama adalah Tahun dan yang kedua adalah pendapatan untuk tahun tersebut".

<table summary="the first column gives the Tahun
and the second, the revenue for that Tahun">

Menunjukkan hubungan antara header dan cell data

Ketika sebuah tabel di ubah menjadi suara atau Braille, sangatlah berguna untuk dapat mengidentifikasi header apa yang mendeskripsikan tiap cell. Sebagai contoh, sebuah browser suara memungkinkan anda untuk bergerak keatas dan kebawah atau ke kiri dan kenan dari cell ke cell yang lain, yang cocok dengan header yang sesuai diucapkan sebelum tiap cell.

Untuk mendukung hal ini anda harus membubuhi keterangan pada header tersebut dan atau cell data. Cara termudah untuk hal ini adalah dengan menambahkan atribut scope pada cell header. Hal tersebut dapat digunakan dengan nilai nilai berikut:

Melakukan hal tersebut pada tabel contoh akan menghasilkan:

<table border="1" cellpadding="10" width="80%">
<caption>Proyeksi Keuntungan Penjualan per Tahun</caption>
<tr align="center">
<th scope="col">Tahun</th>
<th scope="col">Penjualan</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Untuk tabel yang lebih kompleks, anda dapat menggunakan atribut headers pada tiap cell data untuk membuat tempat daftar terpisah dari pengidentifikasi cell header. Tiap header cell harus memiliki sebuah atribut id dengan pengidentifikasi yang sesuai.

Sebagai catatan akhir, anda sebaiknya mempertimbangkan atribut abbr yang menyatakan sebuah singkatan untuk header-header yang panjang. Hal ini  membuatnya lebih dapat di tolerir untuk mendengar daftar dari daftar header tiap cell, sebagai contoh:

<th abbr="W3C">World Wide Web Consortium</th>

Roll-Over dan trik trik lainnya

Sebuah JavaScript kecil dapat memeriahkan halaman anda secara jauh. Anda akan diperlihatkan bagaimana membuat "rollovers" dimana tampilan dari link berubah bila mouse diarahkan keatasnya. Anda juga akan belajar bagaimana membuat sebuah banner iklan yang beputar yang akan menolong mengrahkan pengunjung pada website sponsor anda

Roll-Over

Pada bentuk yang paling umum, sebuah roll-over terdiri dari sebuah gambar yang berfungsi sebagai link hyperteks. Bila pointer mouse diarahkan keatas gambar tersebut, tampilannya akan berubah untuk mengalihkan perhatian pada link tersebut. Sebagai contoh, anda dapat menambahkan efek berpendar,  sebuah drop shadow atau hanya dengan mengubah warna latar belakang. Berikut sebuah contoh:

<script type="text/javascript">
if (document.images)
{
image1 = new Image;
image2 = new Image;
image1.src = "enter1.gif";
image2.src = "enter2.gif";
}

function chgImg(name, image)
{
if (document.images)
{
document[name].src = eval(image+".src");
}
}
</script>

...

<a href="/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Enter if you dare!"></a>

dan berikut hasilnya...

Enter if you dare!

Saya membuat gambar-gambar berikut dengan menggunakan sebuah perangkat lunak yang gratis dengan menambahkan efek lilin panas pada teks tersebut. Anda dapat mencari banyak nasihat dan gambar gambar yang bebas royalti di Web melalui kebanyakan search engine.

Banner Iklan

Bila website anda miliki beberapa sponsor, maka anda dapat menggunakan sebuah link berupa gambar yang secara bergantian berputar untuk menampilkan para sponsor. Langkah pertama untuk menciptakan hal ini adalah untuk menciptakan sebuah gambar untuk tiap sponsor anda. Semua gambar harus memiliki ukuran yang sama. URL yang bersangkutan untuk gambar-gambar tersebut dan untuk situsnya ditempatkan pada sebuay larik (array) bernama adImages dan adURLs di definisikan pada awal script. Elemen img untuk link harus di awali dengan gambar pertama dalam array. Perputaran diawali dengan menggunakan event onload pada elemen body.

<html>
<head>
<title>cycling banner ads</title>
<script type="text/javascript">
if (document.images)
{
adImages = new Array("hosts/csail.gif",
"hosts/ercim.gif", "hosts/keio.gif");
adURLs = new Array("www.csail.mit.edu",
"www.ercim.org", "www.keio.ac.jp");
thisAd = 0;
}

function cycleAds()
{
if (document.images)
{
if (document.adBanner.complete)
{
if (++thisAd == adImages.length)
thisAd = 0;

document.adBanner.src = adImages[thisAd];
}
}

// change to next sponsor every 3 seconds
setTimeout("cycleAds()", 3000);
}

function gotoAd()
{
document.location.href = "http://" + adURLs[thisAd];
}
</script>
</head>
<body onload="cycleAds()">
...

<a href="javascript:gotoAd()"><img name="adBanner"
src="hosts/csail.gif" border="0" alt="Our sponsors"></a>

Sponsor kami: Our sponsors

Catatan: anda disarankan untuk memastikan bahwa semua gambar sama lebar dan tingginya. Sebuah cara lain adalah dengan menambahkan lebar dan tinggi dengan elemen  img untuk memastikan gambar gambar sama ukurannya.

Bagaimana dengan browser yang tidak mendukung scripting?

Isi dari sebuah elemen noscript hanya di tampilkan bila browser tidak mendukung scripting. Hal tersebut sebaiknya digunakan bila anda ingin memberikan akses pada informasi ke orang dengan browser yang tidak mendukung scripting. Mari asumsikan bahwa anda ingin membuat link untuk sponsor anda tersedia dalam bentuk teks:

<noscript>
Our sponsors: <a href="http://www.lcs.mit.edu/">MIT</a>,
<a href="http://www.inria.fr/">INRIA</a>, and
<a href="http://www.keio.ac.jp/">Keio University</a>.
</noscript>

Ada banyak informasi gratis mengenai scripting, yang dapat dengan mudah ditemukan melalui kebanyakan search engines.

Memungkinkan pengguna mendengarkan file suara

Mari asumsikan bahwa anda dan teman anda berkumpil untuk melakukan rekaman sebuah musik di garasi anda, dan anda juga ingin mengeluarkannya pada para khalayak ramai. Langkat pertama ialah mengkompresi rekaman suara, contohnya sebagai file mp3 dan menguploadnya ke website anda. Sebagai contoh, mari asumsikan bahwa ini kemudian tersedia di: http://example.com/music/myband.mp3. Dalam contoh dibawah anda harus mengganti ini dengan lokasi yang benar dari website anda.

Langkah berikutnya adalah dengan menciptakan sebuah file playlist dengan akhiran .m3u. Hal ini menghindari waktu panjang yang dibutuhkan sebelum pendengar mulai mendengar musik yang pada umumnya timbil bila anda menghubungkannya langsung ke file mp3 tersebut. Anda dapat menciptakan playlist tersebut dengan sebuah editor teks dan hal tersebut hanya membutuhkan URL dari file mp3 tersebut. Untuk file contoh tersebut, hal ini akan menjadi:

http://example.com/music/myband.mp3

Upload file playlist m3u tersebut ke web server anda. Dan sekarang anda bisa menambahkan sebuah link pada halaman web dari band anda seperti berikut:

<a href="http://example.com/music/myband.m3u"
type="audio/x-mpegurl">listen to our band</a>

Anda juga mungkin harus menanyakan administrator web server bahwa tipe MIME yang benar digunakan untuk file mp3 dan m3u..

CATATAN pendekatan diatas bekerja dengan baik untuk orang orang dengan koneksi broadband. Anda sebaiknya mempertimbangkan penyedian versi dengan qualitas mp3 yang lebih rendah untuk orang orang dengan koneksi yang pelan (dalam hal ini jauh lebih pelan dari128K).

Sebuah pendekatan yang serupa juga dapat digunakan untuk file suara Ogg Vorbis (MIME berjenis "application/ogg" dan akhiran file ".ogg"). Hal ini dapat digunakanbersama   dengan file playlist m3u atau pls, tetapi tidak semua pemain musik dapat di konfigurasi untuk mendunkung hal ini. Konsultasikan terlebih dulu di search engine untuk keterangan lebih lanjut mengenai hal ini dan bentuk file suara yang lain.

Mendapatkan Informasi Lebih Lanjut

Rekomendasi W3C tentang HTML 4.0 adalah spesifikasi yang sifatnya mutlak untuk HTML. Tetapi, hal tersebut adalah sebuah spesifikasi teknis. Untuk informasi yang bersifat lebih kurang teknis mungkin anda ingin membeli salah satu dari sekian banyak buku mengenai HTML, sebagai contoh "Raggett on HTML 4", yang diterbitkan 1998 oleh Addison Wesley. Sekarang XHTML 1.0 adalah Rekomendasi W3C.

Semoga berungtung dan mulailah menulis!

Dave Raggett <dsr@w3.org>

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.