HOMEArtikel XHTML (Web Standards)
- Home
- » XHTML (Web Standards)
- » Belajar XHTML dan Web Standards serta mengenali seluk beluknya
- » XHTML (Web Standards)
Belajar XHTML dan Web Standards serta mengenali seluk beluknya
Ditulis oleh Dhimas Ronggobramantyo
Kategori: XHTML (Web Standards)
Dibaca 5919 kali
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?
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 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.
Komentar [24]
Dikirim oleh triakoso pada 07 November 2007 04:27:39 WIB
Terima kasih, penjelasan anda sangat baik, runtut dan jelas. Saya yakin informasi tersebut sangat berguna bagi para pemerhati dan pengembang website. Termasuk saya yang masih sangat pemula.
Dikirim oleh james pada 15 Januari 2008 11:12:48 WIB
sangat menarik sekali. apalagi bagi pemula seperti saya, dari penjelasan anda saya cukup mengerti walaupun masih sedikit. yang pasti pengetahuan saya jadi bertambah. thaks.
Dikirim oleh fonihadi pada 15 Mei 2008 04:11:05 WIB
thank atas penjelasan anda. Simple, Padat, Jelas. saya sudah kebanyakan tutorial ebook xhtml tapi malah bikin tambah bingung. yah maklum masih pemula
Dikirim oleh zaid pada 16 Mei 2008 10:56:52 WIB
makasih ya infonya.. 
http://www.klikdynasis.net/?id=ZA958
Dikirim oleh yudhie pada 27 Mei 2008 04:03:13 WIB
Trims, penjelasan anda sangat mudah saya dimengerti, sekalian mau nanya nih.....
bagaimana cara membuat kolom komentar pada web seperti komentar web ini dan langsung tampil, trims ya....
Dikirim oleh Max pada 06 Juli 2008 05:46:52 WIB
Makasaih bos, baru belajar XHTML nih, heuhee http://mahavikri.com
Dikirim oleh vianika pada 01 Agustus 2008 09:44:13 WIB
wah terimakasih jadi terbantu.. bagi pemula seperti saya untung belum terlanjur...
Dikirim oleh yusuf abd pada 29 Agustus 2008 02:29:50 WIB
mas, makasih banyak karena bisa mengetahui dasar web server. Sama mau tanya gimana cara membuat link dari kode html ya...? bisa apa gak anda beri tahu saya
Dikirim oleh FINADE OZA pada 03 September 2008 12:00:26 WIB
Terima kasih anda hebat !!!!!!!!!!!!
Dikirim oleh mazzbadai pada 12 Desember 2008 02:03:36 WIB
padahal sudah keluar yang versi 5.0. Dan perbedaan antara versi 1.1 sama 5.0 amat sangat jauuuuuuuuuuuhhhhhhhh............
Sedangkan di page inipun mulai komentar sudah di kalian gak valid.
Jadi menurutku untuk membuat website valid sama w3.org duperlukan suatu keteletian, keulutan dan kekuatan mental, hehehhe....
Jujur, Demi Tuhan saya Salut buat anda mas...
Tapi kalau bisa tolong buatlah tutorial mengenai hal ini lebih dalam, yang anda kupas baru dasar yang paling dasar...
Dan di w3.org sudah ada translate bahasa indonesia...
jadi jika anda yang sudah berpengalaman ini menyusun menjadi tutorial lengkap, saya duluan yang baca...hehehhe 
Dikirim oleh mazzbadai pada 25 Januari 2009 01:04:30 WIB
Alhamdulillah, sekarang saya memahami dan bisa membuat website yang standar walaupun masih transisi 1.0. tapi itu merupakan perkembangan besar bagi saya.
Thanks atas ilmunya bos....
http://www.dba-bali.com dan banyak dba lainnya...
Dikirim oleh ben pada 16 Februari 2009 02:44:49 WIB
menarik sekali bang, artikelnya.
ternyata aku baru tau klo standarisasi web itu penting banget
Dikirim oleh noerapuccino pada 18 Maret 2009 04:45:58 WIB
pinter juga luw,
thanks za......
Dikirim oleh Hijrah Saputra (AMB) pada 06 April 2009 11:44:44 WIB
wah makasih banget nih atas pencerahannya, bagus naget penjelasannya, jelas dan sistematis...maju terus
Dikirim oleh Arief pada 29 April 2009 08:57:52 WIB
Wah ini benar2 sangat bagus. I LOVE THIS WEBSITE.....
Saya jadi tahu STANDARD WEB
Dikirim oleh Ridwan pada 24 Juni 2009 06:12:44 WIB
saya sudah mengecek blog saya dan ternyata banyak sekali kesalahan, namun saya tidak tahu apa yang salah maklum masih baru masalah blog.
mohon advicenya untuk mengecek error blog saya dengan http://validator.w3.org
blog saya: http://maininternetonline.blogspot.com/
Dikirim oleh hendri pada 03 September 2009 01:26:47 WIB
informasinya bagus banget dan bahasanya sangat mudah untuk dimengerti...
Dikirim oleh andru skipinside pada 06 September 2009 01:13:04 WIB
makasih mas ilmunya
Dikirim oleh Adry.m pada 26 September 2009 07:22:56 WIB
Wah jd semangat nih bwt trus mengembangkan ilmu web yg udh didapet di perkuliahan,,,,maju terus Teknologi Informasi Indonesia !!! Bravo,salut bwt gaya penjelasnny yg simple tp ckp padat..
Dikirim oleh Mooeldy pada 29 Oktober 2009 06:18:05 WIB
Thanks buat penjelasannya...
smoga makin berguna..
Dikirim oleh xxxxxxx pada 13 November 2009 05:31:31 WIB
Mister
Master
Hacker
Dikirim oleh xxxxxxx pada 13 November 2009 05:31:54 WIB
Mister
Master
Hacker
Dikirim oleh tunggul pada 20 November 2009 07:30:38 WIB
ada info, artikel untuk aplikasi berbasis wml??
Dikirim oleh bangunbi pada 02 Januari 2010 01:35:40 WIB
tx bro
RSS Feeds
Valid XHTML Strict