Perbedaan antara XHTML dan HTML

Transkripsi

1 Ditulis oleh Yasin Setiawan Perbedaan antara XHTML dan HTML Anda dapat mengamati sendiri pembuatan XHTML dengan mulai menyusun HTML yang diberi ketentuan XHTML sebagai aturan tambahan. Memulai XHTML XHTML merupakan generasi berikutnya setelah HTML, tetapi dia menuntut kemampuan lebih tinggi untuk mengoperasikannya. Selain itu juga perlu kesiapan berbagai perangkat untuk dapat menanganinya. Sebagai landasan pemahaman dalam tutorial ini, XHTML tidaklah berbeda jauh dengan HTML 4.01, oleh karena itu alangkah lebih baiknya anda menguasai dulu penulisan kode 4.01 standard. Anda dapat melihat referensi penulisan HTML 4.01 pada bab tentang HTML. Sebagai tambahan, anda lebih baik sejak dini menuliskan kode HTML menggunakan huruf kecil, dan jangan pernah lupa membuat tag penutup setiap elemen misalnya </p>. Silahkan pelajari terus! Perbedaan utama antara HTML dan XHTML: Elemen XHTML harus tersusun secara benar (properly nested) XHTML merupakan dokumen yang well-formed Nama tag harus menggunakan huruf kecil Semua elemen XHTML harus memiliki penutup Elemen harus tersusun dengan benar Dalam HTML elemen tidak harus tersusun dengan tata letak struktur yang benar: Misalnya : <b><i>ini adalah tulisan yang berformat bold dan italik</b></i> Pada XHTML semua elemen harus tersusun dengan benar seperti ini : <b><i> Ini adalah tulisan yang berformat bold dan italik</i></b> - 1 -

2 Keterangan : sebelum tag <i> ditutup belum boleh ada penutup untuk </b>, <i> adalah elemen anak dari elemen <b>, pembuka dan penutup <i> harus di dalam elemen <b> Contoh : <ul> <li>kopi</li> <li>teh <ul> <li>teh Hitam</li> <li>teh Hijau</li> </ul> <li>susu</li> </ul> Penulisan ini yang benar: <ul> <li>kopi</li> <li>teh <ul> <li>teh Hitam </li> <li>teh Hijau </li> </ul> </li> <li>susu</li> </ul> Silahkan anda perhatikan sendiri! Dokumen harus Well-formed Semua elemen XHTML harus tersusun dalam elemen <html> sebagai root element. Setiap elemen dapat memiliki sub (child) element. Setiap sub elemen harus tersusun dengan benar di dalam parent element. Struktur dasarnya adalah sebagai berikut: <html> <head>... </head> <body>... </body> </html> - 2 -

3 Nama Tag harus huruf kecil Hal ini dikarenakan XHTML merupakan dokumen XML. XML bersifat case-sensitive. Tag seperti <br> dan <BR> dianggap berbeda. <BODY> <P>Ini adalah paragraf</p> </BODY> Ini benar: <body> <p> Ini adalah paragraf </p> </body> Semua elemen XHTML harus ditutup Elemen terbuka harus ditutup dengan tag penutup <p> Ini adalah paragraf <p> Ini adalah paragraph yang lain Ini benar : <p> Ini adalah paragraf </p> <p> Ini adalah paragraf yang lain </p> Elemen kosong harus ditutup Elemen kosong harus ditutup menggunakan />. Ini salah: Ini adalah break<br> Ini adalah garis mendatar:<hr> Ini adalah image <img src="gambar.gif" alt="gambar"> - 3 -

4 Ini benar : Ini adalah break<br /> Ini adalah garis mendatar:<hr /> Ini adalah image <img src="gambar.gif" alt="gambar" /> XHTML Sintak XHTML merupakan HTML yang bersih dan benar cara penulisannya. Aturan penulisan XHTML: Nama atribut harus dengan huruf kecil Nilai Atribut harus diapit tanda petik id atribut menggantikan nama atribut Atribut harus berisi nama atribut dan nilainya XHTML DTD mendefinisikan legalisasi elemen Nama Atribut harus dengan huruf kecil <table WIDTH="100%"> Ini benar: <table width="100%"> Nilai atribut harus diapit tanda petik <table width=100%> Ini benar: <table width="100%"> - 4 -

5 Penulisan atribut berisi nama dan nilainya <input checked> <input readonly> <input disabled> <option selected> <frame noresize> Ini benar : <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" /> Berikut daftar atribut HTML dan penulisannya dalam XHTML: HTML compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize" id Atribut menggantikan namanya HTML 4.01 mendefinisikan sebuah nama atribut untuk elemen a, applet, frame, iframe, img, dan map. Dalam XHTML tidak dikenal lagi nama atribut, karena telah digantikan dengan id

6 <img src="picture.gif" name="picture1" /> Ini benar : <img src="picture.gif" id="picture1" /> Catatan : untuk dapat didukung oleh browser versi lama, anda harus menggunakan baik nama maupun id, seperti penulisan berikut ini : <img src="picture.gif" id="picture1" name="picture1" /> Atribut Lang Atribut lang dapat digunakan dalam berbagai elemen XHTML. Ia mendefinisikan bahasa yang digunakan untuk isi dalam elemen tersebut. Jika anda menggunakan atribut lang dalam sebuah elemen, anda harus menambahkan atribut xml:lang, seperti berikut ini: <div lang="no" xml:lang="no">isi elemen</div> Deklarasi XHTML Semua dokumen XHTML harus memiliki deklarasi DOCTYPE. Elemen html, head dan body harus ada, dan elemen title arus berada dalam elemen head. Berikut ini adalah dokumen XHTML minimum: <!DOCTYPE Doctype ditulis di sini> <html xmlns=" <head> <title>judul dituliskan di sini</title> </head> <body> Isi dokumen ditulis di sini </body> </html> Catatan : deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri. Dia bukanlah elemen XHTML, sehingga tidak harus menggunakan tag penutup

7 Penulisan XHTML Cara mengkonversi ke XHTML Untuk mengkonversi Web site dari HTML ke XHTML, anda harus sudah akrab dengan tata penulisan XHTML. Cara mendasarnya adalah sebagai berikut: 1. Definisi DOCTYPE ditambahkan Deklarasi DOCTYPE berikut telah ditambahkan pada awal setiap halaman: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 2. Catatan tentang DOCTYPE Halaman anda harus memiliki deklarasi DOCTYPE jika anda ingin melakukan validasi yang benar terhadap susunan XHTML. Tetapi perlu diingat, bahwa browser yang lebih baru lagi (seperti Internet Explorer 6) mungkin menangani dokumen anda berbeda tergantung pada deklarasi <!DOCTYPE>. jika browser membaca suatu dokumen yang menggunakan sebuah DOCTYPE, ia mungkin menangani dokumen secara "benar". Bentuk penulisan XHTML yang salah mungkin akan menampilkan dokumen berbeda jika dibandingkan dengan dokumen yang menggunakan DOCTYPE. 3. Tag dan atribut menggunakan huruf kecil Sejak XHTML bersifat case sensitive, dan sejak XHTML hanya memberlakukan penggunaan huruf kecil maka tag HTML dan nama atribut harus diganti secara keseluruhan dengan huruf kecil. Hal serupa juga diberlakukan pada atribut. 4. Semua nilai atribut diberi tanda petik Sejak W3C XHTML 1.0 direkomendasikan maka semua nilai atribut harus diapit tanda petik, semua halaman harus dicek dan diganti, setiap atribut yang ada didalamnya nilainya diberi tanda petik. Hal seperti ini tentunya akan menyita banyak waktu, untuk itu anda harus memastikan setiap penulisan atribut diberi tanda petik

8 5. Tag kosong: <hr>, <br> dan <img> Tag kosong tidak diizinkan dalam XHTML. Tag <hr> dan <br> harus diganti dengan <hr /> dan <br />. Tetapi hal ini akan menjadi masalah manakala kita menggunakan Netscape yang mana tidak mengenal penulisan tag seperti <br/>. Kita tidak tahu mengapa, tetapi mengubah menjadi <br /> membuat tag dapat bekerja dengan baik. Setelah semua itu diatasi, pastikan semua bagian tag kosong untuk diganti bentuknya. 6. Web Site di validasi Setelah semua itu diubah maka semua halaman divalidasi menggunakan W3C DTD, yaitu pada link : XHTML Validator. Setiap ada error kita perbaiki secara manual. Error yang sering terjadi adalah lupa menambahkan tag </li> pada penutup list. XHTML - Modularisasi Modularisasi XHTML mendefinisikan modul pada XHTML. Kegunaan Modularisasi XHTML XHTML merupakan sederhana tetapi memiliki kemampuan yang luas, berisi berbagai macam kegunaan yang akan dibutuhkan oleh para web developer. Beberapa kegunaan XHTML tertentu sangat bear dan kompleks, dan untuk kegunaan tertentu sangat sederhana. Dengan membagi XHTML ke dalam modul-modul, maka W3C (World Wide web Consortium) telah membuat pengaturan elemen XHTML kecil dan didefinisikan dengan benar untuk dapat digunakan secara terpisah untuk digunakan oleh peralatan yang sederhana sehingga dapat dikombinasikan dengan XML standard menjadi aplikasi yang lebih besar dan lebih lengkap. Dengan modular XHTML, perancang aplikasi dapat: Memilih elemen-elemen yang didukung oleh perangkat dengan XHTML membangun blok-blok. Menambah ekstensi ke XHTML, menggunakan XML, tanpa merusak XHTML standard. XHTML dapat digunakan untuk peralatan yang portabel dan tanpa kabel sepertikomputer genggam, hand phone, TV, dan peralatan-peralatan rumah. Memperluas cakupan XHTML menjadikan sebuah aplikasi yang lengkap dengan menambah - 8 -

9 kemampuan XML di dalamnya (seperti MathML, SVG, Voice dan Multimedia). Mendefinisikan XHTML seperti dasar XHTML (adalah kegunaan mendasar untuk penerapannya pada peralatan yang mobile). Modul-modul XHTML W3C telah membagi definisi XHTML ke dalam 28 modul: Nama Modul Keterangan Applet Module Mendefinisikan elemen applet Base Module Mendefinisikan elemen base Basic Forms Module Mendefinisikan dasar elemen form. Basic Tables Module Mendefinisikan dasar elemen table Bi-directional Text Module Mendefinisikan elemen bdo. Client Image Map Module Mendefinisikan elemen image map di sisi browser. Edit Module Mendefinisikan editing element (del dan ins). Forms Module Mendefinisikan semua elemen yang digunakan pada form. Frames Module Mendefinisikan elemen frameset. Hypertext Module Mendefinisikan elemen a. Iframe Module Mendefinisikan elemen iframe. Image Module Mendefinisikan elemen img. Intrinsic Events Module Mendefinisikan atribut event seperti onblur dan onchange. Legacy Module Mendefinisikan deprecated element dalam atribut. Link Module Mendefinisikan elemen link. List Module Mendefinisikan elemen list ol, li, ul, dd, dt, dan dl. Metainformation Module Mendefinisikan elemen meta. Name Identification Module Mendefinisikan nama aribut Object Module Mendefinisikan elemen object dan param. Presentation Module Mendefinisikan elemen presentasi seperti b dan i. Scripting Module Mendefinisikan script dan noscript. Server Image Map Module Mendefinisikan elemen image map di sisi server Structure Module Mendefinisikan elemen html, head, title dan body. Style Attribute Module Mendefinisikan atribut style. Style Sheet Module Mendefinisikan elemen style. Tables Module Mendefinisikan elemen yang digunakan dalam table. Target Module Mendefinisikan atribut target. Text Module Mendefinisikan elemen container seperti p dan h