Saturday, 3 March 2012

Pengertian dan Contoh XHTML

                No comments   
eXtensible HyperText Markup Language (XHTML) adalah sebuah bahasa markap yang merupakan gabungan antara HyperText Markup Language(HTML) dengan eXtnsible Markup Language(XML). HTML sendiri merupakan markup language yang merupakan pondasi dari World Wide Web(www) yang digunakan untuk membuat halaman web.  Sedangkan XML adalah markup language untuk keperluan umum yang disarankan oleh World Wide Web Consorcium(W3C) untuk membuat dokumen markup keperluan pertukaran data antara sistem yang beraneka ragam. XML juga merupakan kelanjutan dari HTML . Sehinggga dapat disimpulkan bahwa XHTML merupakan standar penulisan terbaru untuk membuat halaman web. Hal ini merupaka rekomendasi dari W3C sejak tahun 2000.

Secara umum, bentuk dari sintak XHTML ini hampir mirip dengan HTML, karena merupakan keturunannya. Namun pada XHTML ini aturan penulisan sintaksny lebih ketat dibandingkan dengan HTML. Selain itu ada beberapa perbedaan antara XHTML dan HTML. Diantaranya, pada XHTML harus memiiki Document Type Definition (DTD) yang dituliskan di paling atas sintaks. Sedangkan pada HTML hal ini tidak ada. DTD pada XHTML ada tiga, yaitu :
  1. Strict, XHTML strict digunakan jika Anda benar-benar menggunakan markup yang bersih, dan tidak memiliki kesalahan ketik dan grammar.
    Cara penulisannya:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  2. Transitional, Anda dapat menggunakan metode transisional jika ingin memanfaatkan fitur presentasi dari HTML dan juga jika halaman web hendak ditampilkan di browser yang tidak dapat mem-parsing CSS (cascading styel sheet).
    Cara penulisannya:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  3. Frameset, Ini digunakan jika Anda ingin menampilkan frame HTML untuk membagi browser menjadi lebih dari satu grame
    Cara penulisannya:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Perbedaan yang lain Semua elemen XHTML harus memiliki penutup
Contoh:
<p>ini salah           
<p>Ini benar</p>  
perhatikan tag  <p>, karena telah dubuka, maka tag <p> harus ditutup dengan </p>

Penulisan atribut harus dalam quote (“”)
Contoh:
<table width=100%>     ← salah
<table width=”100%”>    ← benar

Untuk lebih jelasnya, lihat contoh perbedaan antara sintaks HTML dengan XHTML dibawah iniContoh sintaks HTML:
<HTML>
<head>
<title>Membuat radio Button</title>
</head>
<body>
<h1>Pilih Jurusan</h1>
<form method="post" action="">
<input type="radio" name="jurusan" value=Teknik Elektro/>Teknik Elektro<br/>
<input type="radio" name="jurusan" value="Teknik Kimia"/>Teknik Kimia<br/>
<input type="radio" name="jurusan" value="Teknik Informatika"/>Teknik Informatika<br/>
<input type="radio" name="jurusan" value="Teknik Industri"/>Teknik Industri<br/>
<input type="radio" name="jurusan" value="Teknik Informatika"/>Teknik Informatika<br/>
<input type="radio" name="jurusan" value="Teknik Mesin"/>Teknik Mesin<br/>
<input type="submit" name="submit" value="Kirim Data"/>
</HTML>

Screenshoot hasil sintaks:


Contoh sintaks XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Membuat radio Button</title>
</head>
<body>
<h1>Pilih Jurusan</h1>
<form method="post" action="">
<input type="radio" name="jurusan" value="Teknik Elektro"/>Teknik Elektro<br/>
<input type="radio" name="jurusan" value="Teknik Kimia"/>Teknik Kimia<br/>
<input type="radio" name="jurusan" value="Teknik Informatika"/>Teknik Informatika<br/>
<input type="radio" name="jurusan" value="Teknik Industri"/>Teknik Industri<br/>
<input type="radio" name="jurusan" value="Teknik Informatika"/>Teknik Informatika<br/>
<input type="radio" name="jurusan" value="Teknik Mesin"/>Teknik Mesin<br/>
<br/>
<input type="submit" name="submit" value="Kirim Data"/>
</form>
</body>
</html>

Screenshoot hasil sintaks:

Jika kita perhatikan contoh diatas, walaupun dapat menampilkan output tampilan yang sama, namun pada sintaksnya ada perbedaan, yaitu pada contoh HTML baris ke 8, disitu saya sengaja tidak memberi tanda double quote(“) diantara variabel  Teknik Elektro, yang hal ini tidak berlaku pada XHTML.
Kemudian pada baris 14 di contoh sintak HTML, saya tidak menyertakan penutup </br>, namun sintaks masih tetap bisa di compile.

0 commen:

Post a Comment