perbedaan XHTML dngan HTML

Document Sample
perbedaan XHTML dngan HTML Powered By Docstoc
					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-
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-
Nama Tag harus huruf kecil
Hal ini dikarenakan XHTML merupakan dokumen XML. XML bersifat case-sensitive. Tag
seperti <br> dan <BR> dianggap berbeda.

Ini salah :

<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

Ini salah :

<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-
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
Ini salah :

<table WIDTH="100%">

Ini benar:

<table width="100%">




Nilai atribut harus diapit tanda petik
Ini salah :

<table width=100%>
Ini benar:

<table width="100%">




                                         -4-
Penulisan atribut berisi nama dan nilainya
Ini salah :

<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                      XHTML
compact                   compact="compact"
checked                   checked="checked"
declare                   declare="declare"
readonly                  readonly="readonly"
disabled                  disabled="disabled"
selected                  selected="selected"
defer                     defer="defer"
ismap                     ismap="ismap"
nohref                    nohref="nohref"
noshade                   noshade="noshade"
nowrap                    nowrap="nowrap"
multiple                  multiple="multiple"
noresize                  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.


                                        -5-
Ini salah :

<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="http://www.w3.org/1999/xhtml">
<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.




                                          -6-
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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.




                                           -7-
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-
     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 h1.




                                                  -9-

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:264
posted:2/4/2010
language:Indonesian
pages:9
Iphon P Iphon P iTech www.devendier.com
About Deep inside