บทที่ 1 XHTML คืออะไร?
XHTML (ย่อมาจาก Extensible Hyper Text Markup Language)
XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวมกัน กลายเป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป
จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านเบราเซอร์์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ ได้ผลที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox
องค์กร W3C จึงได้นำ HTML 4.0 มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น ซึ่งจะเป็นแนวทางให้เบราเซอร์์ค่ายต่างๆ พัฒนาโปรแกรมเว็เบราเซอร์์โดยใช้มาตรฐานเดียวกัน รวมไปถึงเว็บเบราเซอร์์ที่ติดตั้งบน Platforms ต่างๆ เช่น PDA โทรศัพท์มือถือ ด้วย
ดังนั้น ต่อไปไม่ว่าจะแสดงเว็บเพจของเราในเบราเซอร์์ค่ายใด ก็สามารถแสดงผลได้เหมือนกัน อย่างถูกต้อง และการใช้งานอินเตอร์เน็ต จะไม่จำกัดอยู่แค่บนเครื่องคอมพิวเตอร์ แต่สามารถขยายการใช้งานออกไปได้กว้างขึ้น ไม่ว่าจะเป็น โทรศัพท์มือถือ หรืออุปกรณ์ต่างๆ
XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวมกัน กลายเป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป
จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านเบราเซอร์์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ ได้ผลที่แตกต่างกัน เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox
องค์กร W3C จึงได้นำ HTML 4.0 มาปรับปรุงใหม่ โดยยึดหลักการของ XML และได้เพิ่มกฎเกณฑ์บางอย่าง เพื่อให้การใช้งานมีความเข้มงวด และเป็นมาตรฐานยิ่งขึ้น ซึ่งจะเป็นแนวทางให้เบราเซอร์์ค่ายต่างๆ พัฒนาโปรแกรมเว็เบราเซอร์์โดยใช้มาตรฐานเดียวกัน รวมไปถึงเว็บเบราเซอร์์ที่ติดตั้งบน Platforms ต่างๆ เช่น PDA โทรศัพท์มือถือ ด้วย
ดังนั้น ต่อไปไม่ว่าจะแสดงเว็บเพจของเราในเบราเซอร์์ค่ายใด ก็สามารถแสดงผลได้เหมือนกัน อย่างถูกต้อง และการใช้งานอินเตอร์เน็ต จะไม่จำกัดอยู่แค่บนเครื่องคอมพิวเตอร์ แต่สามารถขยายการใช้งานออกไปได้กว้างขึ้น ไม่ว่าจะเป็น โทรศัพท์มือถือ หรืออุปกรณ์ต่างๆ
XHTML ต่างจาก HTML อย่างไร ?
XHTML ไม่ได้ต่างจาก HTML มากมายอะไรนัก เพียงแต่ว่าเข้มงวดเรื่องความถูกต้องของ syntax มากขึ้น
สำหรับ HTML แม้ว่าเราเขียน code ผิดพลาดไปบ้าง เช่น ลืม tag ปิด เว็บเบราเซอร์์ ก็ยังสามารถตีความและแสดงผลได้อย่างถูกต้องเป็นส่วนมาก
ตัวอย่างการเขียน HTML ที่ไม่ดี
<html>
<head>
<title>ตัวอย่างการเขียน HTML ที่ไม่ดี <title>
<body>
<h1>มี tag เปิด แต่ไม่มี tag ปิดให้ครบ
<body>
<div>
สิ่งแตกต่างที่สำคัญระหว่าง XHTML กับ HTML ได้แก่
1. ทุก XHTML element ที่ซ้อนกันต้องเรียงลำดับให้ถูก แต่ละ element ต้องไม่เปิด ปิด ข้ามกัน
ใน HTML เราสามารถเขียนสลับ tag ปิดกันได้
<b><i>ข้อความนี้เป็นตัวหนา และตัวเอียง</b></i>
แต่สำหรับ XHTML แล้ว จะต้องทำการปิดให้เรียบร้อยทุก element
<p>ข้อความที่ 1</p>
<p>
ข้อความที่ 2 <br/>
ข้อความที่ 3 <hr/>
<img src="pic.gif" />
</p>
2. ทุก XHTML element ต้องเขียน tag, attribute และค่าของ attribute ด้วยตัวพิมพ์เล็ก
ใน HTML เราจะใช้์ตัวพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้
<BODY>
<P Align="CENTER">ข้อความจัดวางกึ่งกลาง</P>
</body>
แต่สำหรับ XHTML แล้ว ให้ใช้ตัวพิมพ์เล็กทั้งหมด
<body>
<p align="center">ข้อความจัดวางกึ่งกลาง</p>
</body>
3. เอกสาร XHTML จะมี root element เดียว ทุก XHTML element จะต้องอยู่ภายใน element <html>...</html>
<html>
<head> ... </head>
<body> ... </body>
</html>
Syntax XHTML
1. ค่าของ attribute ต้องอยู่ในเครื่องหมาย ".." เสมอ
ใน HTML เราอาจจะไม่ใส่เครื่องหมาย ".." ครอบค่าของ attribute ก็ได้
<table width=100%>
แต่สำหรับ XHTML แล้ว เราจะต้องใส่เครื่องหมาย ".." ให้ ค่าของ attribute
<table width="100%">
2. ใช้ attribute id แทน attribute name
ใน HTML จะใช้ attribute name
<img src="picture.gif" name="pic1">
แต่สำหรับ XHTML จะใช้ attribute id แทน
<img src="picture.gif" id="pic1" />
3. เราไม่สามารถใช้รูปย่อของ attribute ได้
ใน HTML สามารถทำได้ เช่น
<input type="text" readonly>
<input type="text" disabled>
<input type="checkbox" checked>
<input type="radio" name="sex" value="M" checked> Male
<input type="radio" name="sex" value="F"> Female
<select name="list">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected>option 3</option>
</select>
แต่สำหรับ XHTML แล้วจะต้องเขียนเต็มแบบนี้
<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />
<input type="checkbox" checked="checked" />
<input type="radio" name="sex" value="M" checked="checked" /> Male
<input type="radio" name="sex" value="F" /> Female
<select name="list">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
</select>
4. เอกสาร XHTML จะต้องประกาศ DOCTYPE และจะต้องมี element html, head, title และ body อย่างครบถ้วนเสมอ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML คืออะไร</title>
</head>
<body>
<p>XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวมกัน กลายเป็นมาตรฐานใหม่ของ HTML </p>
</body>
</html>
Document Type Definitions (DTD)
Document Type Definition (DTD) คือ ตัวกำหนดโครงสร้างของเอกสาร ไม่ว่าจะเป็นเอกสาร HTML หรือ XHTML หรือ XML ก็ต้องมี DTD ด้วยกันทั้งนั้น แต่ใน HTML นั้นไม่ได้บังคับว่าต้องประกาศ Doctype
การประกาศ <!DOCTYPE> ก็เพื่อบอกให้เว็บเบราเซอร์์ทราบว่า เว็บเพจของเราใช้ภาษา HTML หรือ XHTML และคำสั่ง HTML/XHTML ที่ใช้เป็นรุ่นใด และบอกชนิดของเอกสาร (Document Type Definition : DTD) ที่ใช้ ซึ่งจะช่วยให้เว็บเบราเซอร์แปลเอกสารได้อย่างถูกต้อง
1. XHTML 1.0 Strict
การเลือก doctype ชนิดนี้ จะต้องเขียนคำสั่งทุกจุดให้ถูกต้องตามมาตรฐานของ XHTML ไม่สามารถใช้ Tag และ Attribute เก่า ที่ W3C ย้ายไปไว้ในส่วน Style Sheet ได้ (เช่น tag <font>) และการตกแต่งเอกสารจะใช้ CSS เท่านั้น ไม่สามารถใส่ Attribute ใน Element ได้ เช่น ไม่สามารถเขียน <body bgcolor="white">...</body> ได้
ที่บรรทัด tag เปิดของ html ให้กำหนดดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. XHTML 1.0 Transitional
การเลือก doctype ชนิดนี้ จะค่อนข้างยืดหยุ่น เรายังสามารถใช้ Tag และ Attribute เก่า ที่ W3C ย้ายไปไว้ในส่วน Style Sheet ได้้้ การตกแต่งเอกสารเราสามารถเขียนเป็น <bgcolor="white">...</body> หรือ เขียนแบบใช้ CSS ก็ได้
ที่บรรทัด tag เปิดของ html ให้กำหนดดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ไม่มีความคิดเห็น:
แสดงความคิดเห็น