fanky: TENTANG XHTML

Pengertian XHTML

XHTML adalah sebuah kombinasi dari HTML dan XML (Extensible Markup Language) & merupakan bentuk sempurna (dalam arti, lebih ketat dan bersih dibandingkan 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.

XHTML adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. XHTML merupakan versi HTML yang memenuhi persyaratan XML dan merupakan sebuah dokumen HTML, dan XHTML menjadi standar internasional dengan spesifikasi yang ditetapkan oleh W3C (World Wide Web Consortium).

B. Deklarasi Pada XHTML

Deklarasi Doctype pada XHTML hampir sama dengan Doctype pada HTML. W3C mengharuskan agar selalu menggunakan Doctype pada XHTML. Terdapat 3 Jenis Doctype pada XHTML^[6]:

· XHTML - Strict. Digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini menggunakan tag font dan table.

<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN"

 "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

· XHTML - Transitional. Digunakan untuk membuat halaman yang
sebagian besar menggunakan tag-tag HTML.

<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Transitional//EN"

"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-traditional.dtd">

· XHTML - Frame. Digunakan jika kita memakai frame pada halaman web.

<!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Frameset//EN"

"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

C. Elemen dasar pada XHTML

XHTML masih menggunakan elemen pada HTML, meski beberapa penambahan dan penyempurnaan.Berikut beberapa elemen yang digunakan pada XHTML:

Struktur	Body, Head, Html, Title
Teks	abbr, acronym, address, blockquote, br, cite, code,dfn, div, em, h1, h2, h3, h4,h5, h6, kbd, p, pre, q, samp, spam, strong, var
Hypertext	a
List	dl, dt, dd, ol, ul, li
Form	form, input, label, select, option, textaarea
Tabel	caption, table, td, th, tr
Gambar / Image	img
Link	link

D. Perbedaan XHTML dan HTML

Secara garis besar perbedaan XHTML dan HTML adalah:

1. Elemen XHTML harus tersusun secara benar (properly nested).

2. XHTML merupakan dokumen yang “well-formed”.

3. Nama tag harus menggunakan huruf kecil.

4. Semua elemen XHTML harus memiliki penutup.

a) 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>

Keterangan : sebelum tag <i> ditutup belum boleh ada penutup untuk </b>, <i> adalahelemen anak dari elemen <b>, pembuka dan penutup <i> harus di dalam elemen <b>

Contoh :

<ul>

<li>Teh

<ul>

<li>Teh Hitam</li>

<li>Teh Hijau</li>

</ul>

</ul>

Penulisan ini yang benar:

<ul>

<li>Teh

<ul>

<li>Teh Hitam </li>

<li>Teh Hijau </li>

</ul>

</li>

</ul>

b) 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>

</html>

c) 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>

d) 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 menggunakan />.

Ini salah:

Ini adalah break<br>

Ini adalah garis mendatar:<hr>

Ini adalah image <img src="gambar.gif" alt="gambar">

Ini benar :

Ini adalah break<br />

Ini adalah garis mendatar:<hr />

Ini adalah image <img src="gambar.gif" alt="gambar" />

E. Contoh Program

   Berikut contoh program dengan 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>Grafik Berbasis Tabel</title>
</head>

<body>
<table width=”80%” cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFFFFF”>
<tr>
<th width=”144″ height=”24″ align=”center” ><hr noshade=”noshade” />
Perusahaan     <hr noshade=”noshade” /></th>
<th colspan=”8″ align=”center” ><hr noshade=”noshade” />
Pendapatan      <hr noshade=”noshade” /></th>
</tr>
<tr>
<td height=”27″ >Angin Ribut Corp.</td>
<td colspan=”3″ > </td>
<td colspan=”2″ align=”left” bgcolor=”#FFFFFF”><table width=”298″ border=”2″ cellspacing=”0″ bgcolor=”#0000CC”>
<tr>
<th width=”286″ height=”23″ > </th>
</tr>
</table></td>
<td width=”91″ align=”left” valign=”bottom” bgcolor=”#FFFFFF”>+150%</td>
<td width=”11″ colspan=”2″ align=”left” valign=”bottom” > </td>
</tr>
<tr>
<td height=”33″ >komanprom Ltd.</td>
<td colspan=”3″ > </td>
<td width=”200″ align=”left” bgcolor=”#FFFFFF”><table width=”200″ border=”2″ cellspacing=”0″ bgcolor=”#00FF00″>
<tr>
<th align=”left” > </th>
</tr>
</table></td>
<td width=”99″ align=”left” valign=”bottom” bgcolor=”#FFFFFF”>+55%</td>
<td colspan=”3″ valign=”bottom” > </td>
</tr>
<tr>
<td height=”36″ >Hibernet Corp</td>
<td width=”88″ align=”right” valign=”bottom” > </td>
<td width=”71″ align=”right” valign=”bottom” >-25%</td>
<td width=”80″ align=”right” bgcolor=”#FFFFFF”><table width=”78″ border=”2″ cellspacing=”0″ bgcolor=”#00FFFF”>
<tr>
<th > </th>
</tr>
</table></td>
<td colspan=”5″ > </td>
</tr>
<tr>
<td height=”27″ >Sutdon corp</td>
<td align=”right” valign=”bottom” >-55%</td>
<td colspan=”2″ align=”right” valign=”bottom” bgcolor=”#FFFFFF” ><table width=”151″ border=”2″ cellspacing=”0″   bgcolor=”#FF0000″>
<tr>
<th > </th>
</tr>
</table></td>
<td colspan=”5″ > </td>
</tr>
<tr>
<td height=”27″ ><hr noshade=”noshade” />
 </td>
<td align=”right” valign=”bottom” ><hr noshade=”noshade” />
 </td>
<td colspan=”2″ align=”right” valign=”bottom” bgcolor=”#FFFFFF” ><hr noshade=”noshade” />
 </td>
<td colspan=”5″ ><hr noshade=”noshade” />
 </td>
</tr>
</table>

<em><strong>by Arief “byakuya” Yusuf</strong></em>
</body>
</html>

Berikut contoh program dengan html:

<!DOCTYPE html>

<html>

  <head>

    <title>'''Selamat Malam''' HTML</title>

  </head>

  <body>

    <p>Nama saya Adrianus!</p>

  </body>

</html>

DAFTAR PUSTAKA

http://id.wikipedia.org/wiki/Extensible_hypertext_markup_language

http://metafora.awardspace.com/down/Tutorial%20XHTML.pdf

http://ariefrahmanyusuf.wordpress.com/pti-478-pemograman-web

fanky

Selasa, 27 Maret 2012

TENTANG XHTML

B. Deklarasi Pada XHTML

C. Elemen dasar pada XHTML

Tidak ada komentar:

Posting Komentar

Mengenai Saya

Arsip Blog