Saturday, December 3, 2016

Extensible Hypertext Merkup Laguage (XHTML)

Tags

xhtml



XHTML adalah sebuah kombinasi dari HTML dan XML (EXtensible Markup Language). XHTML (EXtensible HyperText Markup Language) merupakan bentuk sempurna (dalam arti, lebih ketat dan bersih dibanding HTML). Tujuan XHTML adalah menggantikan HTML. XHTML adalah bentuk HTML yang didefinisikan sebagai aplikasi XML yang berarti XHTML berisi semua elemen dalam HTML 4.01 dikombinasikan dengan sintaks XML.

Dalam situs-situs WWW banyak halaman web ditulis dengan HTML yang "jelek". Artinya, penulisan tidak sesuai dengan aturan, melaikan hanya memikirkan apakah skrip dapat dilihat dibrowser atau tidak. Berikut contoh skrip yang "jelek", karena <h1> tidak ditutup dengan </h1>.

<html>
 <head>
  <title>Contoh HTML kurang bagus</title>
 <body>
  <h1>Ini contoh skrip jelek
 </body>


XML adalah markup laguage dimana semua harus dibuat secara benar sehingga dapat menghasilkan dokumen yang "well-formed". XML didesain untuk mendeskripsikan data, sedangkan HTML didesain untuk menampilkan data. Perkembangan teknologi browser, dimana browser tidak hanya berada dikomputer, tetapi juga dalam telepon seluler dan PDA, memunculkan kebutuhan skan sebuah skrip yang standar dan bebas dari kesalahan.

Kombinasi HTML dan XML yang dikenal dengan XHTML menggunakan aturan yang ketat dalam hal penulisan. Halaman XHTML dapat dibaca pada peralatan yang men-support XML. XML membawa keberuntungan karena dapat menyajikan dokumen "well-formed" dan dapat di-support dibanyak browser.


PENULISAN XHTML

XHTML tidak terlalu berbeda dengan HTML 4.01 standar. JIka sudah mempunyai kemampuan HTML 4.01 maka akan sangat membantu untuk memulai XHTML. XHTML mengharuskan penulisan tag dengan huruf kecil dan selalu menutup menggunakan penutup tag (seperti </p> ). Yang membedakan secara pokok antara HTML dan XHTML adalah :
  • Semua elemen sebaiknya saling tersarang,
  • Elemen XHTML harus selalu ditutup,
  • Elemen XHTML harus ditulis dalam huruf kecil (lowercase),
  • Dokumen XHTML harus mempunyai satu root elemen.

Contoh Elemen saling tersarang 

Contoh skrip salah:
<b>
<i>Teks ini tercetak tebal dan miring</b>
</i>

Contoh skrip benar :
<b>
<i>Teks ini tercetak tebal dan miring </i>
</b>

Contoh skrip salah:
<ul>
 <li>Kopi</li>
 <li>Teh
   <ul>
     <li>Teh hitam</li>
     <li>Teh hijau</li>
   </ul>
 <li>Susu</li>
</ul>

Contoh skrip benar:
<ul>
 <li>Kopi</li>
 <li>Teh
   <ul>
     <li>Teh hitam</li>
     <li>Teh hijau</li>
   </ul>
 </li>
 <li>Susu</li>
</ul>

Elemen XHTML Harus Ditutup

XHTML mempunyai aturan yang ketat dalam aturan penggunaan tag pembuka dan tag penutup. Padahal tidak semua tag HTML mempunyai pasangan tag penutup. Untuk mengatur hal demikian, dapat dilihat pada keterangan berikut:
  1.  Elemen yang mempunyai pasangan tag penutup harus ditutup dengan tag penutupnya.   
           Contoh skrip salah :
<p>Ini adalah sebuah paragraf
<p>Ini adalah paragraf lain

           Contoh skrip benar :
 <p>Ini adalah sebuah paragraf</p>
 <p>Ini adalah paragraf lain</p>

  1. Elemen yang tidak mempunyai tag penutup ditutup dengan />

          Contoh skrip salah:
break: <br>
horizontal rules: <hr>
image: <img src="abc.gif" alt="Foto">

          Contoh skrip benar:
break: <br/>
horizontal rules: <hr/>
image: <img src="abc.gif" alt="Foto"/>

Elemen XHTML Ditulis Huruf Kecil

Aturan ketat juga diterapkan dalam XHTML dalam penulisan sintak. Untuk mendefinisikan nama tag dan atribut, harus digunakan hufuf kecil.

Contoh skrip salah :

<BODY>
 <p> Ini adalah sebuah paragraf </p>
</BODY>

Contoh skrip benar :

<body>
 <p>Ini adalah sebuah paragraf </p>
</body>

Dokumen XHTML Hanya Memiliki Satu Elemen ROOT

Semua elemen XHTML harus bersarang diantara elemen root <html>. Elemen lain dapat mempunyai sub elemen (children). Sub elemen harus berpasangan dan bersarang diantara elemen parent-nya.

<html>
 <head>....</head>
 <body>....</body
</html>  

Menuliskan XHTML memerlukan penulisan HTML yang bersih. Berikut beberapa aturan dalam penulisan sintak XHTML.
  1. Nama atribut harus dalam lower case.
  2. Nilai atribut harus dalam quote (").
  3. Atribut tidak dapat disederhanakan.
  4. Atribut "name" diganti dengan atribut "id".
  5. DTD XHTML harus didefinisikan.

Nama Atribut Lower Case

Semua nama atribut di XHTML harus ditulis dengan huruf kecil. Berikut perbandingan skrip yang benar dan yang salah.

Contoh skrip salah :
<table WIDTH="100%">

Contoh skrip benar :
<table width="100%">

Kesalahan pada skrip diatas adalah penulisan atribut WIDTH yang ditulis dengan huruf besar (harusnya ditulis dengan huruf kecil). 


Nilai Atribut Harus Menggunakan Tanda Petik

Nilai atribut pada XHTML harus diapit tanda petik ("...").

Contoh skrip salah :
<table width=100%>

Contoh skrip benar :
<table width="100%">

Kesalahan pada nilai 100% harus diapit tanda petik dua (width="100%").


Atribut Tidak Dapat Disederhanakan

Atribut tidak boleh disederhanakan dengan menghilangkan nilai atributnya. Contoh berikut menunjukan perbandingan antara skrip salah dan benar.

Contoh skrip salah :
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

Contoh skrip benar :
<<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
<frame noresize="noresize">

Berikut adalah tabel daftar penyederhanaan atribut dalam HTML dan bagaimana seharusnya penulisan dalam XHTML.
HTML XHTML
Compact compact="compact"
Checked checked="checked"
Declare declare="declare"
Readonly readonly="readonly"
Disabled disabled="disabled"
Selected selected="selected"
Defer defer="deref"
Ismop ismop="ismop"
Nohref nohref="nohref"
Noshede noshade="noshade"
Nowrap nowrap="nowrap"
Multiple multiple="multiple"
Noresize noresize="noresize"


Element Wajib XHTML

Semua dokumen XHTML harus mempunyai sebuah deklarasi DOCTYPE. Dalam dokumen XHTML elemen <html>, <head> dan <body> harus ada, sedangkan elemen <title> harus diletakan didalam elemen <head>.

Syarat minimal sebuah dokumen XHTML adalah harus mengandung :
  • DOCTYPE
  • Head
  • Body
Contoh minimal sebuah dokumen XHTML :
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Judul Website</title>
 </head>
 <body>
  ...
 </body>
</html>

Ada tiga DOCTYPE yang dapat digunakan :
  • STRICT
  • TRANSITIONAL
  • FRAMESET


Konersi HTML ke XHTML

Sekarang permasalahannya adalah bagaimana jika kita sudah mempunyai dokumen HTML dan akan mengkonversinya kedalam bentuk XHTML. Sebelum dimulai, tentunya harus lebih dahulu familiar dengan XHTML.

Langkah-langkah untuk konversi dari HTML ke XHTML adalah :

  1. Penanambahan DOCTYPE
  2. Tag dan nama atribut lowercase
  3. Nilai atribut si dalam tanda petik
  4. Hilangkan tag : <hr>, <br> and <img>
  5. Cek validasi web

Sumber : Ajax Membangun Web dengan Teknologi Asynchronous JavaScript & XML penerbit Andi Yogyakarta  


EmoticonEmoticon