RSS Artikel
- SEO Submiter (3155)
- Tips Mempercepat Koneksi Modem IM2 (771)
- Mengetahui Log dan Quota Bandwidth Indosat M2 (627)
- Tutorial: Membuat Menu Navigasi Memakai CSS (493)
- Photoshop: Membuat Tombol Web 2.0 (391)
- Validasi di PHP untuk data yg sama atau duplicate (303)
- Mendaftarkan Website ke Google (236)
- Belajar XHTML dan Web Standards (235)
- HASIL TRY OUT UM UGM 2010 DI BANYUWANGI (621)
- My First Blog (309)
- TRY OUT UM UGM 2010 DI BANYUWANGI (297)
- Doa Yang Membawa Keberuntungan (170)
- Jawaban Dari Segala Kegelisahan yang Melanda Perutku... (158)
- Ngenet Seharian Bersama Baim Wong (149)
- Apakah Singkatan Dari Indowebster? (141)
- IM2 My Presents Conection Profider (115)
Belajar XHTML dan Web Standards
Diposting oleh : Andang Charisma Perdana
Kategori: HTML/XHTML - Dibaca: 236 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 </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>Paragraf 2
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
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.
sumber: http://www.dhimasronggobramantyo.com/
Simpan Artikel ini:
1 Komentar :
Maman Firmasnyah
Salam hormat saya haturkan..
saya lagi belajar XHTML sangat terbantu sekali dengan postingan materi Anda... trimsk banget.. semoga ilmu anda tambah berkembang dan membawa keberkahan..
Isi Komentar :