Beza Antara HTML Dan XHTML |Tutorial Blogger Blogspot

Jun 18, 2008

Beza Antara HTML Dan XHTML

Beza Antara HTML dan XHTML

Bila kita menulis kod dalam "Blogger template", dalam "page element", atau dalam "blog post", kita sering melihat mesej "error" yang keluar seperti mesej "code could not be parsed", "was not well-formed", "was broken" atau "the elements were not closed properly". Mesej-mesej kesilapan ini sebenarnya boleh diperbetulkan sekiranya kita mengetahui peraturan yang sepatutnya dipatuhi dalam menulis dokumen kod XHTML "Blogger template" menggunakan kod XHTML versi "1.0 Strict Document Type". Dalam tulisan ini kita cuba menerangkan sebahagian dari peraturan atau "syntax" yang digunakan dalam XHTML dengan harapan supaya kita dapat menentukan di mana punca silapnya jika terdapat mesej "error" seperti dinyatakan, seterusnya melakukan pembetulan.

XML, HTML dan XHTML

Kalau kita melihat mana-mana satu kod yang tersedia dalam "page source" atau "source of your blogger blog" kita dapati kod seperti di bawah di tulis di bahagian teratas sekali sebagai permulaan pada kod berkenaan:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Istilah XML, HTML dan XHTML adalah sebenarnya ringkasan kepada "Hypertext Markup Language" atau bahasa komputer yang digunakan untuk menghasilkan lembaran-lembaran yang dipapar dalam laman web. Asal mulanya dicipta oleh Tim Berners-Lee dan digunakan sejak peringkat permulaan internet diperkenalkan. XML (Extensible Markup Language) adalah satu "meta-language" yang digunakan untuk menghasilkan satu "markup language" yang lain. Tradisi kod HTML kemudiannya menggunakan peraturan yang digunakan dalam XML lalu menghasilkan aplikasi baru yang dipanggil XHTML (Extensible Hypertext Markup Language). Untuk mengelakkan dari sebarang mesej "error" dalam menulis kod XHTML, peraturan yang ditentukan mestilah dipatuhi dengan tepat.

Peraturan Asas XHTML

Kod mesti ditulis dengan huruf kecil (lowercase). Sebagai contoh "tempalate code" tidak boleh ditulis seperti ini:-

 <TITLE>Panduan Untuk Blogger Baru <TITLE>

ditulis begini:-

 <title>Panduan Untuk Blogger Baru <title>

Kita perhatikan "elements" dan "attribute names" diatas iaitu "title" mesti ditulis dengan huruf kecil menggunakan simbol (< >), tetapi nilai 'Panduan Untuk Blogger Baru' boleh ditulis dalam apa pun bentuk huruf, huruf kecil atau besar atau sebarang simbol lain.

Nilai "attribute" mesti ditulis dalam " " (quotation mark)

Kesemua "attribute values" mestilah diapit oleh dua tanda ini " ". Contoh seperti di bawah adalah salah dan tidak dibenarkan:-

<div id="header-wrapper">

<a href="http://panduanblogger.blogspot.com">
Text Link</a>

<img src="photo.jpg/">

<table width="200" border="0" cellpadding="2">

Yang betul mesti ditulis seperti berikut:-


<div id="'header-wrapper'">

<a href="http://panduanblogger.blogspot.com">
Text Link</a>

<img src="photo.jpg" />

<table width="200" border="0" cellpadding="2">

Kandungan "elements" mesti ada penutup "tags"

Cara ini salah:-

<p> A paragraph.

Dalam XHTML penutup "tag" mesti guna palang (/) diakhirnya:-

<p> A paragraph.</p>

Contoh kebanyakkan pembuka dan penutup "elements":-

<ul> ... </ul>
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a> ... </a>

Penutup "elements" yang berdiri sendiri:-

Sebahagian dari "elements" adalah kosong dan berdiri sendiri tidak mempunyai penutup "tags". Contoh-contoh biasa seperti:-

<br />
<img>
<input>
<frame>
<hr />
<meta>
<link>

Ada dua (2) cara menutup atau menamatkan "elements" dalam XHTML Satu cara dengan menggunkan palang (/) diakhirnya seperti berikut:-

<br/>
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>

Cara yang kedua adalah seperti berikut:-

<br /> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr /> ... </hr>
<meta> ... </meta>
<link> ... </link>

"Elements" dalam susunan yang betul:-

Jaringan "elements" dalam XHTML mestilah disusun dengan betul dan tepat. Susunan seperti di bawah adalah salah:-

<form><table> ... </form></table>

Susunan yang betul adalah seperti berikut:-

<form><table> ... </table></form>

Dokumen yang hanya mempunya satu "root element::-

Dalam dokumen XHTML kesemua kod yang ditulis mesti dikandung dalam lingkungan kecuali deklarasi dokumen seperti dinyatakan di atas. Ini adalah sebagai "root element" dan kesemua "element" dan "sub element" yang lain mesti ditulis didalam "root element" ini.

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

"Attribute minimization" tidak debenarkan.

Dalam XHTML semua "attribut" mestilah ditulis dalam bentuk name="nilai". Tidak dibenarkan cara pengguaan berikut:-

<textarea>Hyperlink Code</textarea>

mesti ditulis seperti berikut:-

<textarea readonly="readonly">Hyperlink Code</textarea>

XHTML Entiti Aksara.

Banyak yang bertanya mengapa tidak ada paparan kod HTML yang ditulis dalam "blog post" atau mengapa kod HTML dalam "blog post" tidak dilaksanakan oleh Blogger. Sebabnya adalah kerana dalam "blog post" simbol-simbol (" < > &) tidak dikenal sebagaimana ia berfungsi sebenar dalam kod XHTML. Untuk mengatasi masalah ini sila gantikan penggunaan (" < > &) dengan cara di bawah:-


 "    gantikan dengan  & amp 
 &    gantikan dengan  & amp 
 <    gantikan dengan  & amp
 >    gantikan dengan  & amp

Jadi sekirannya kita masih menerima "error message" seperti "code is not well formed", "not well parsed", "not properly closed" dan lainnya sila semak kembali struktur kod HTML yang dibuat seperti yang dinyatakan dalam artikel ini seterusnya buat perbetulan sewajarnya.

Semoga membantu.