Wednesday, September 2, 2009

XHTML Intro

XHTML singkatan dari Extensible HyperText Markup Language. XHTML adalah versi yang lebih ketat dan bersih dari HTML 4.01, dalam arti tidak lagi penulisan elemen, atribut, dan nilai atribut yang salah dalam membuat sebuah dokumen HTML. Sebelum memahami lebih jauh nih tentang XHTML, boz harus sudah paham dengan pembuatan dokumen HTML. Kenapa? Karena XHTML kan versi selanjutnya dari HTML. Bahkan XHTML berisi semua elemen dalam HTML 4.01.

Kenapa harus menggunakan XHTML?

Lha, masih nanya. Kalau tidak penting, tidak akan dibahas disini boz. Kalau kita browsing, banyak sekali dokumen HTML dibuat dengan HTML yang "buruk". Seperti ini misalnya:

<html>
<body>
<h1>Lorem ipsum dolor sit amet
</body>
</html>

Saat ini membuka halaman web kan tidak harus memakai PC atau laptop, bisa juga menggunakan ponsel atau perangkat kecil lainnya. Browser yang berjalan pada ponsel dan perangkat kecil lainnya tidak mempunyai kekuatan dalam menerjemahkan sebuah dokumen HTML yang buruk sehingga bisa saja dokumen yang boz buat tidak bisa ditampilkan di ponsel. Oleh karena itu migrasi dari HTML ke XHTML adalah jalan terbaik untuk menghasilkan sebuah dokumen yang "well-formed". XHTML sendiri adalah kombinasi antara HTML 4.01 dengan XML yang mempunyai aturan penulisan yang ketat.

Berikut ini adalah beberapa perbedaan antara HTML dengan XHTML sekaligus sebagai aturan dalam penulisan dokumen XHTML.

1. Semua elemen XHTML harus bersarang dengan benar

Contoh di bawah ini membuat dokumen dicetak tebal dan miring, tapi masih salah dalam penulisannya.

<b><i>Lorem ipsum dolor sit amet</b></i>

Karena contoh di atas masih salah makanya harus kita edit jadi seperti ini boz:

<b><i>Lorem ipsum dolor sit amet</i></b>

Saat kita membuat sebuah list dengan orderlist (<ol>) atau unorderlist (<ul>), karang lupa dalam menutup tag <li> saking banyaknya list yang kita buat. Apalagi kalau bersarang, misalnya di dalam tag <li> ada tag <ul> dan seterusnya. Seperti contoh di bawah ini:

<ul>
<li>Susu</li>
<li>Kopi
<ul>
<li>Kopi tubruk</li>
<li>Kopi susu</li>
</ul>
<li>Teh</li>
</ul>

Coba perhatikan boz, apanya yang salah ya. Tidak ketemu? Iya, yang berwarna merah tidak bersarang dengan benar. Elemen <li> untuk Kopi tidak ditutup dibawahnya. Harus kita edit ini boz. Contoh yang benar seperti ini:

<ul>
<li>Susu</li>
<li>Kopi
<ul>
<li>Kopi tubruk</li>
<li>Kopi susu</li>
</ul>
</li>
<li>Teh</li>
</ul>

2. Semua elemen XHTML harus selalu ditutup

Kita kadang lupa untuk menutup elemen HTML. Kita? Situ kali. Iya, iya. Siapapun deh. Kan kadang-kadang lupanya juga. Tapi lupa dalam menulis kode program bisa fatal akibatnya. Betul kan boz? Untung disini yang dibahas tentang HTML, jadi masih ada tolerasi untuk sedikit kesalahan. Tapi tidak untuk XHTML ya boz. Sedikit kesalahan, tagnya lupa ditutup misalnya, tetap saja salah. Kita lihat contoh yang salah di bawah ini:

<p>Lorem ipsum dolor sit amet


Contoh di atas sudah jelas salah ya boz. Harusnya seperti ini:

<p>Lorem ipsum dolor sit amet</p>

Lalu bagaimana dengan elemen kosong seperti <meta<, <br<, <hr<, dan <img<? Tetap harus ditutup boz. Kan tag-tag tersebut tidak ada tag penutupnya. Memang tidak ada tag penutupnya, namanya juga elemen/tag kosong. Tapi pada XHTML tetap harus ditutup. Lihat contoh di bawah ini yang belum ditambahkan penutup:

<html>
<head>
<title><title>
<meta>
<head>
<body>
Lorem ipsum dolor sit amet<br>
Sebuah Horizontal rule<hr>
Sebuah gambar <img src="gambar.gif" />
</body>
</html>

Lalu bagaimana cara menutupnya? Caranya seperti ini, tambahkan tanda "/" dan spasi sebelum tanda ">". Jadi contoh di atas kalau kita perbaiki harusnya seperti ini:

<html>
<head>
<title><title>
<meta />
<head>
<body>
Lorem ipsum dolor sit amet <br />
Sebuah Horizontal rule <hr />
Sebuah gambar <img src="gambar.gif" />
</body>
</html>

3. Penulisan elemen dan artibut XHTML harus dalam huruf kecil (lowercase)
Contoh di bawah ini masih salah. Cari tahu boz apanya yang salah.

<BODY>
<IMG SRC="gambar.gif" />
</BODY>

Yup! Betul boz. Penulisan tag <BODY> dan <IMG SRC="" /> masih salah karena tidak menggunakan huruf kecil. Contoh yang betul adalah seperti ini:

<body>
<img src="gambar.gif" />
</body>


4. Dokumen XHTML harus memiliki satu root elemen

Semua elemen XHTML harus bersarang di dalam elemen root <html> dan elemen child harus berpasangan dan bersarang dengan benar di dalam elemen root <html>.

Tags:

1 Responses to “XHTML Intro”

Mardedi Bakumpai said...
December 30, 2009 at 9:43 AM

Terima kasih banyak bos ilmunya. Sekali2 berkunjung ke gubuk saya. Tapi tentunya beri masukan (sekalian bahasa pemogramannya, hehehe), agar guguk ku di masa mendatang bisa menjadi istana, hehehehe.............


Post a Comment

Jangan ragu untuk menghubungi saya kapan saja boz memiliki pertanyaan, saran, pengumuman atau hanya ingin mengatakan "Hai!".

© 2013 CoPas Galeria. All rights reserved.
Designed by SpicyTricks