belajar xhtml dan web standard serta pernak perniknya

Belajar XHTML dan Web Standards serta mengenali seluk beluknya

Ditulis oleh Dhimas Ronggobramantyo


Web Standards Web Standards merupakan sebuah standard dalam menyusun kode-kode HTML yang baik dan terstruktur. Kebanyakan website yang ada saat ini disusun dengan kode HTML yang tidak terstruktur, hancur dan berantakan. Karena itu World Wide Web Consortium (W3C) dengan semangat membara ingin menyuruh para pembuat website diseluruh dunia untuk menstandardkan websitenya.

XML

Anda tentu sudah tau tentang XML, yang merupakan bahasa markup seperti halnya HTML. Hanya saja XML lebih terstruktur penggunaannya, salah sedikit saja maka aplikasi-aplikasi yang dapat membaca XML akan gagal membaca file XML anda. Perbedaan antara XML dan HTML adalah: HTML didesain untuk menampilkan data sedangkan XML didesain untuk mendeskripsikan data.

Karena itu W3C mengeluarkan standard baru yang menggabungkan kekuatan HTML dan XML menjadi satu yaitu XHTML. Karena XHTML merupakan XML, maka XHTML bisa dibaca oleh semua alat yang mampu membaca XML. Dan karena XHTML juga merupakan HTML maka browser-browser kuno juga mampu membacanya.

Kenapa sih harus standard?

Negara-negara di Eropa telah memerintahkan agar website-website pemerintah disana distandardkan. Ditambah sebuah fakta yang mengerikan bahwa di Jepang 65% orang Jepang mengakses internet melalui Handphone/PDA tidak melalui komputer. Bagaimana jika orang Jepang tersebut mengakses website anda?

Ini pertanyaan yang sering ditanyakan oleh orang-orang, kenapa website kita harus standard? Oke, jika kita menggunakan browser seperti IE, Firefox dan browser lainnya dikomputer tidak akan masalah walaupun kode HTML kita berantakan karena browser-browser tersebut cukup canggih dan mampu membaca kode HTML sekacau apapun. Tapi bagaimana dengan orang-orang yang masih menggunakan browser text seperti Linx? atau orang buta yang menggunakan browser Webbie atau screen reader untuk membaca website anda? Atau bagaimana dengan orang-orang yang mengakses website anda melalui Handphone, PDA atau gadget-gadget kecil lainnya. Dengan membuat website anda menjadi standard maka website anda dapat dibaca oleh semua media

Dengan bantuan CSS (Cascading Stylesheet) maka tampilan XHTML anda bisa dipercantik tanpa harus mengubah kode XHTML anda. Jadi gabungan XHTML dan CSS akan menghasilkan website maut yang kompatibel disemua media.

Satu lagi keunggulan web standard. Karena kode XHTML anda terstruktur dan tidak terlalu banyak kode (karena layout dan tampilan diatur oleh CSS) maka Search Engine dapat lebih mudah mengindeks website anda. Website anda akan lebih mudah masuk Search Engine.

Jadi? jika anda ingin beralih ke XHTML teruskan membaca, tetapi jika anda pikir ini hanya omong kosong silahkan saja klik tanda silang dikanan atas browser anda. Pilihan ada ditangan Anda :)

Deklarasikan bahwa file anda XHTML

Mungkin anda akan bertanya-tanya, berarti saya simpan filenya dengan nama index.xhtml? tidak perlu, anda gunakan saja index.html atau index.php atau lainnya. Yang penting disini adalah kita mendeklarasikan bahwa dokumen kita adalah dokumen XHTML. XHTML sendiri saat ini sudah ada 3 versi, yaitu XHTML 1.0, XHTML 1.1 dan XHTML 2.0 (dalam pengembangan). Apabila anda masih beralih dari HTML ke XHTML gunakan saja XHTML 1.0, karena XHTML 1.1 sudah banyak perubahan apalagi yang XHTML 2.0.

XHTML 1.0 sendiri dibagi menjadi 3 tipe dokumen yaitu:

  • STRICT. Puncaknya standard, gunakan ini apabila anda benar-benar menginginkan kode yang benar-benar terstruktur. Beberapa tag sudah dihilangkan disini seperti <iframe>. Anda harus mengkombinasikan antara XHTML dan CSS
  • TRANSITIONAL. Gunakan ini apabila anda ingin tampilan ditampilkan didalam file XHTML tidak di CSS
  • FRAMESET. Gunakan yang ini, jika anda ngotot ingin menggunakan frames

Saya akan menerangkan perbedaan ketiganya di artikel lainnya. Sekarang seperti apa deklarasi ketiganya? lihat contoh dibawah:

XHTML 1.0 STRICT

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 TRANSITIONAL

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 FRAMESET

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Kode XHTML selengkapnya adalah:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
<p>Isi halaman Web</p>
</body>
</html>

Seperti apa sih kode XHTML?

Banyak sekali perbedaan antara kode HTML dan XHTML, yang pertama tentu saja diatas kode anda harus dideklarasikan apakah kode anda XHTML Frameset, Transitional atau Strict. Anda sudah melihat contohnya diatas. Kemudian apa lagi? masih banyak yang harus diingat. Mari kita bahas satu persatu.

Gunakan selalu huruf kecil (lowercase)

Ahh, kebiasaan kita dalam membuat HTML, hurufnya gede-gede bahkan kadang-kadang campur aduk nggak karuan. Perhatikan contoh HTML yang keliru dibawah ini:

<table WIDTH="100%">
<TR><TD>Contoh Teks</TD></TR>
</table>
Jika anda tidak mengerti apa itu tag, apa itu atribut, berarti anda salah membaca artikel. Seilahkan baca artikel mengenai dasar HTML terlebih dahulu, baru kemudian meneruskan membaca yang ini.

Jika anda perhatikan pada dicontoh diatas, tag ataupun atribut ada yang menggunakan huruf kapital (uppercase). Didalam XHTML kode seperti itu salah, anda harus selalu menggunakan huruf kecil. Karena itu biasakan menggunakan huruf kecil dalam membuat tag html. Walaupun toh hasilnya dibrowser sama saja, tetapi web anda menjadi tidak standard. Ini contoh XHTML yang benar:

<table width="100%">
<tr><td>Contoh Teks</td></tr>
</table>

Semua tag harus terstruktur dengan baik

Setiap tag yang dibuka harus ditutup dan harus terstruktur dengan baik dan benar. Perhatikan contoh yang salah ini:

<p><b>Ini Contoh Text</p></b>

Oke anda tau kesalahannya? ya <b> yang dibuka didalam <p> tetapi malah yang ditutup </p> duluan. Yang benar adalah:

<p><b>Ini Contoh Text</b></p>

Contoh lagi yang salah:

<p>Paragraf 1
<p>Paragraf 2

Apa kesalahannya? ya, <p> tidak ditutup. Ini yang benar:

<p>Paragraf 1</p>
<p>Paragraf 2</p>

Standalone Tag yang benar

Jika kita biasanya menulis <br> maka didalam XHTML yang benar adalah <br />. Demikian juga dengan <hr> yang benar <hr />. Ada lagi tag yaitu <img>, <input> yang benar adalah <img />, <input />

Jangan lupa tanda petik untuk atribut

Kebiasaan buruk lainnya adalah tidak memberikan tanda petik untuk atribut. Perhatikan contoh berikut ini:

<table width=100% cellpadding=2 cellspacing=3>
<tr><td>Contoh Teks</td></tr>
</table>

Seharusnya yang benar adalah:

<table width="100%" cellpadding="2" cellspacing="3">
<tr><td>Contoh Teks</td></tr>
</table>

Menyingkat atribut = Salah!!

Anda pernah menyingkat atribut? mungkin anda tidak menyadarinya, coba perhatikan contoh berikut:

<input type="radio" checked>
<input type="text" readonly>

Jadi bagaimana yang benar? mudah, perhatikan contoh yang benar:

<input type="radio" checked="checked">
<input type="text" readonly="readonly">

Valid kah kode XHTML anda?

Jika anda sudah mengubah semua kode HTML menjadi XHTML, sekarang saatnya anda untuk mengetes apakah kode XHTML anda valid, bagaimana caranya? Kunjungi saja http://validator.w3.org yang merupakan validator resmi dari W3C. Jika tidak terdapat error dalam website anda, selamat website anda sudah standard, dan anda benar-benar memperhatikan website anda dan pengunjung website anda.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: