About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

เรื่องของ !DOCTYPE ในเว็บเพจ [Article ID : 188]


เรื่อง : DOCTYPE ในโค้ดเว็บเพจคืออะไร ?

มีใครใช้โปรแกรม Dreamweaver หรือโปรแกรมสร้างเว็บเพจใด ๆ แล้วสังเกตกันบ้างไหมว่า โปรแกรมเหล่านี้จะเปิดหัวเอกสารของเว็บเพจในส่วนของ CODE ให้เราที่บรรทัดแรกสุดเป็นข้อความประมาณว่า

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
มีใครสงสัยไหมครับว่า ทำไมโปรแกรมต้องสร้างโค้ดนี้ให้เราเสมอเมื่อทำการสร้างไฟล์ใหม่ขึ้นมา (ถ้าใครยังไม่เคยเปิดดูโค้ดเลยลองเปิดดูครับ) เราเรียกกันว่า DOCTYPE ครั้งนี้ในบทความนี้เราจะมาว่าถึงเรื่องนี้กัน

DOCTYPE คือ การประกาศว่าเอกสารเว็บเพจนั้นสร้างขึ้นมาโดยยึดหลักตามมาตราฐานใด ซึ่งมาตราฐานที่เราใช้กันทุกวันนี้กับการแสดงผลเว็บเพจ จะมีที่ใช้กันอยู่ 3 มาตราฐาน คือ
- HTML
- XHTML
- HTML 5
ทั้ง 3 มาตราฐาน จะมีการแบ่งกฎในการพัฒนาแตกต่างกันออกไปอีก 3 ประเภท คือ
- Transitional
- Strict
- Frameset
ในบทความนี้ผมจะขอกล่าวถึง และยกตัวอย่างเพียงในส่วนของ XHTML เท่านั้นครับ (ไว้ผมจะพูดถึงเรื่อง HTML5 อีกครั้งเร็ว ๆ นี้)

กฏ 3 ประเภทของ DOCTYPE

- Transitional

สำหรับ Transitional นี้จะมีรูปแบบการประกาศที่บรรทัดแรกของเอกสาร ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

กฏในแบบ Transitional ผู้พัฒนา XHTML ยังคงสามารถใช่งาน TAG หรือ Attribute ของ HTML แทรกลงไปในโค้ดได้

- Strict

สำหรับ Strict จะมีรูปแบบการประกาศที่บรรทัดแรกของเอกสาร ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

กฏในแบบ Strict จะเข้มงวดกับไวยากรณ์ของภาษา ถ้าเราใช้ Strict กับเอกสารเว็บเพจเรา เราจะไม่สามารถแทรก Attribute ใด ๆ ได้เลยกับเว็บเพจของเรา เนื่องจาก Strict จะมองในส่วนของ TAG ที่ใช้กำกับ กับ ส่วนโค้ดที่ใช้ในการแสดงผลแยกออกจากกัน นั้นคือ TAG ของ XHTML เป็นเพียงตัวบอกว่าเอกสารนั้นเมื่อมี TAG นี้กำกับอยู่จะให้ทำอะไร เช่น ขึ้นบรรทัดใหม่ Paragraph ใหม่ เป็นต้น แต่ถ้าต้องการระบุคุณสมบัติ เช่น ทำข้อความไว้กึ่งกลางหน้าเว็บเพจ หรือใส่สีสันให้ข้อความ ต้องกระทำผ่าน CSS เท่านั้น
สรุปง่าย ๆ ถ้าเราใช้ Strict กับเว็บเพจ เราต้องใช้ XHTML กับ CSS อย่างแท้จริงเท่านั้น !

- Frameset

สำหรับ Frameset จะมีรูปแบบการประกาศที่บรรทัดแรกของเอกสาร ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ใช้ในกรณีที่เรามีการออกแบบโดยมีการใช้ Frame ในการแบ่งจอของ Browser

เปรียบเทียบความแตกต่างระหว่าง Transitional กับ Strict


ผมจะยกตัวอย่างความแตกต่างระหว่างกฎทั้ง 2 รูปแบบให้เห็นภาพกันชัด ๆ โดยผมใช้ CODE ในทั้ง 2 ตัวอย่างเหมือนกัน แต่แตกต่างกันที่ DOCTYPE เท่านั้น

ในรูปที่ 1 ผมใช้ Transitional โดยภายในโค้ดมีการใช้ TAG DwThai.Com ดังรูป เมื่อผมนำไปตรวจสอบที่เว็บของ W3C ผลสรุปออกมาโค้ดผ่านการตรวจสอบ ดังรูป


รูปที่ 2 ผมเลือกใช้ Strict แทนการใช้ Transitional แต่โค้ดต่าง ๆ ยังเหมือนเดิม ผลสรุปการตรวจสอบไวยากรณ์ ปรากฏว่าไม่ผ่านการตรวจสอบ ดังรูป


ทั้งนี้...สาเหตที่ไม่ผ่านการตรวจสอบเนื่องจากว่า TAG ได้ถูกยกเลิกไปใน XHTML อย่างที่กล่าวไปแล้วว่า TAG หรือ Attribute ต่าง ๆ ที่ใช้ในการกำหนดคุณสมบัติการแสดงผลต่าง ๆ ไม่ว่าการกำหนดค่าสี การกำหนดรูปแบบ Font การกำหนดตำแหน่งข้อความต่าง ๆ เหล่านี้ หากคุณต้องการใช้ Strict คุณต้องทำการกำหนดคุณสมบัติเหล่านี้กับ CSS เท่านั้น ไม่สามารถกำหนดลงไปที่โค้ด XHTML ได้โดยตรง หรือหากต้องการกำหนดลงไปที่ TAG คุณต้องกำหนดผ่าน CSS ในแบบ Inline เท่านั้น ดังตัวอย่าง


* ท่านสามารถตรวจสอบไวยากรณ์โค้ด HTML - XHTML ของเว็บเพจได้จากเว็บไซต์ http://validator.w3.org *

DOCTYPE กับโปรแกรม Dreamweaver


สำหรับเว็บเพจทุกวันนี้ DOCTYPE ที่เหมาะสมก็คงจะอยู่ที่ Transitional หากใครเซียนก็ค่อยก้าวไปสู่ Strict ต่อไป

ที่กล่าวมาในบทความนี้คือเรื่องของ DOCTYPE หวังว่า บางท่านที่สงสัยว่ามันคืออะไร คงจะทำให้ท่านได้เข้าใจมากยิ่งขึ้นครับ
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

ความหมายของสี อารมณ์แห่งสีสัน

เรื่อง : มารู้จักกับสี-ความหมายของสี อารมณ์แห่งสีสัน ...  

การออกแบบเว็บเพจให้แสดงกลางจอ Web Browser

เรื่อง : ออกแบบเว็บอย่างไรให้อยู่กลางหน้าจอ ? (Centering a Web Page) คำถามที่ว่า "อาจารย์ครับ/ค่ะ จะเซ็ทเว็บอย่างไ...  

โปรแกรมเว็บบอร์ดเพื่อการศึกษา (Webboard)

เรื่อง : แนะนำโปรแกรมเว็บบอร์ดเพื่อการศึกษา (Webboard) ...  

DwThai.Com ใน นสพ.ไทยรัฐ

เรื่อง : เมื่อ DwThai.Com ได้ลงในหนังสือพิมพ์ไทยรัฐ นสพ.ไทยรัฐฉบับวันที่ ๙ ธันวาคม ๒๕๔๖ ...  


Copyright ©2003-2016 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*