In html, บทความทั้งหมด

รู้จักกับ DOCTYPE

จากที่ผ่านมา เราได้ทราบกันไปแล้ว การเขียนโค๊ต HTML 5 ในบรรทัดแรกจะต้องเริ่มต้นด้วย <!DOCTYPE HTML> ซึ่ง DOCTYPE เป็นการประกาศว่า ไฟล์เอกสารนี้เป็นรูปแบบใด เพื่อบอกให้บราวเซอร์ทราบว่า จะให้อ่านโค๊ตและตีความโค๊ตด้วยวิธีใด

ที่มาของ DOCTYPE เริ่มจาก Internet Explorer 5 เวอร์ชันบนเครื่องแมคอินทอช เกิดปัญหาที่ว่าไม่สามารถเปิดเว็บเพจรุ่นเก่าๆ ได้ ทางออก ณ เวลานั้น คือ การใส่ DOCTYPE ไว้ที่บรรทัดแรก กล่าวคือ หากเป็นเว็บเพจรุ่นเก่าๆ ก็ไม่ต้องใส่คำว่า DOCTYPE แต่หากเป็นเว็บเพจรุ่นใหม่ก็ให้ใส่ DOCTYPE ลงไป

ด้วยข้อกำหนดดังกล่าว บราวเซอร์ทั้งหลาย ก็จะทราบทันทีว่า หากมี DOCTYPE จะอ่านและตีความเว็บเพจนั้นด้วยวิธีใด และหลังจากนั้น ก็ DOCTYPE ตามมาหลายประเภท ซึ่งปัจจุบันมีมากกว่า 70 ประเภท

สิ่งที่ต้องทราบคือ DOCTYPE จะต้องใส่ในบรรทัดแรกสุดของไฟล์ HTML และรูปแบบการเขียนจะต้องถูกต้อง เช่น ในกรณีของ HTML 5 เราต้องใส่โค๊ต <!DOCTYPE html> หรือ <!DOCTYPE HTML> เป็นต้น

หากต้องการทราบรายละเอียดว่า HTML 5 ต่างจาก HTML 4 รุ่นเก่าอย่างไร เราสามารถเข้าไปดูในรายละเอียดได้จากเว็บ http://www.w3.org/TR?html5-diff/ ส่วนถ้าต้องการทราบรายละเอียดเกี่ยวกับการใช้งานแท็กต่างๆ ของ HTML 5 ก็สามารถศึกษาเพิ่มเติมได้ที่ http://dev.w3.org/html5/markup/ หรือไปที่ http://www.whatwg.org/ แล้วคลิกที่ลิงค์ HTML เราก็จะพบรายละเอียดและการอัพเดทล่าสุดเช่นเดียวกัน

เกี่ยวกับ Browser Mode

Browser Mode จะมี 2 แบบ คือ Quirks mode กับ Standard mode ซึ่งหมายถึง โหมดที่ไม่มาตรฐาน กับโหมดมาตรฐาน ตามลำดับ

Quirks mode คือ หากบราวเซอร์ไม่สามารถตรวจสอบได้ว่า เว็บเพจที่กำลังเปิดอยู่นี้เป็น DOCTYPE ประเภทไหน ก็ไม่รู้ว่าจะเอาจะเอารูปแบบใดมาใช้ในการตีความโค๊ตต่างๆ บนเว็บเพจ จึง กลับไปใช้การอ่านและตีความตามแบบเว็บเพจรุ่นเก่า ซึ่งผลที่ตามมา คือ รูปแบบการอ่านโค๊ต และการตีความของแต่ละบราวเซอร์จะไม่เหมือนกัน เช่น Internet Explorer จะตีความแต่ละแท็กต่างจาก Firefox หรือมีวิธีการตีความหมาย CSS ที่แตกต่างกัน ในทางตรงข้าม

Standard mode คือ เป็นโหมดการทำงานที่บราวเซอร์ทราบรูปแบบของเว็บเพจนี้ว่าอยู่ในมาตรฐานใด เป็น DOCTYPE แบบไหน จึงสามารถอ่านและตีความโค๊ตในเว็บเพจนี้ได้ ซึ่งหากอยู่ในโหมดนนี้ การตีความก็จะเป็นตามมาตรฐานเดียวกันในทุกๆ บราวเซอร์

การกำหนด DOCTYPE ที่บรรทัดแรก หากเรากำหนดถูกต้อง บราวเซอร์รู้จักประเภทของ DOCTYPE ก็จะอยู่ใน Standard mode แต่หากไม่ได้กำหนด หรือโค๊ตผิด ก็จะเข้าสู่ Quirks โดยทันที ต่อไปนี้เป็นตัวอย่างโค๊ตสำหรับตรวจสอบว่า บราวเซอร์ใช้โหมดใดทำงานอยู่ โดยอาศัย JavaScript มาช่วยในการตรวจสอบ

ทดลองดับเบิ้ลคลิกไฟล์ ก็จะพบหน้าต่าง บอกให้เราทราบว่า การทำงานของบราวเซอร์ในปัจจุบันทำงานในโหมดใด ซึ่งในตัวอย่างคือ Standard Mode จากนั้นให้ผู้อ่านทดลองลบโค๊ตในบรรทัดแรกออกแล้วให้เซฟไฟล์ เมื่อดับเบิ้ลคลิกไฟล์นี้อีกครั้งผลลัพธ์จะมีหน้าต่างบอกว่าทำงานใน Quirks Mode ทันที

รูปแสดงผลลัพธ์การแสดง Browser mode

ในกรณีของ Firefox หากกำลังเปิดเว็บเพจใดอยู่นั้น เราสามารถตรวจสอบโหมดการทำงานของ Firefox ได้ ด้วยการเลือกคำสั่ง Tools>Page Info ก็จะพบหน้าต่างบอกให้ทราบว่าตอนนี้บราวเซอร์กำลังทำงานอยู่ในโหมดใด

Character Encoding สำคัญอย่างไร

เมื่อเรากดคีย์บอร์ดปุ่ม A บนแป้นพิมพ์ ก็จะพบอักษร A บนหน้าจอ ซึ่งในความเป็นจริงแล้วคอมพิวเตอร์จะไม่ทราบว่าเรากดแป้นตัว A แต่จะทราบว่าเพียงว่ามีการกดแป้นคีย์บอร์ด พร้อมกับมีเลข 0 หรือ 1 อยู่ชุดหนึ่ง ถูกส่งไปให้คอมพิวเตอร์ จากนั้น Character Encoding ก็จะทำการแปลรหัสดังกล่าวแล้วนำไปแสดงผลบนหน้าจอว่าควรจะแสดงเป็นอักษรตัวใด

สรุปได้ว่า Character Encoding คือ วิธีเข้ารหัสตัวอักษรให้อยู่ในรูปของตัวเลข 0 หรือ 1 ซึ่งคอมพิวเตอร์จะทำการแปลรหัสตัวเลขนี้เพื่อนำไปใช้ นั่นหมายความว่า หากมีการใช้ Character Encoding ที่ต่างกัน ผลลัพธ์การแปลความหมายของชุดตัวเลขให้กลายเป็นตัวอักษรก็จะต่างกันออกไป

Character Encoding ที่ใช้งานในปัจจุบันมีหลายแบบ เช่น ASCII เป็นการเข้ารหัสตัวอักษรแบบ 7 บิต ซึ่งสามารถเก็บรหัสตัวอักษรได้สูงสุด 128 รหัส (0-127) สามารถเพียงพอสำหรับการเก็บตัวเลข และอักษรภาษาอังกฤษได้ทั้งหมด

เนื่องจาก ASCII ไม่สามารถใช้กับบางภาษาที่มีอักขระมากกว่า 128 ตัว จึงได้มีการนำ Extended ASCII มาใช้ (บางทีก็เรียกว่า high ASCII) โดยเป็นการเข้ารหัสด้วยจำนวน 8 บิต จึงสามารถเข้ารหัสอักขระได้สูงสุดถึง 256 รหัส ซึ่งเพียงพอกับการใช้งานในภาษาทั่วๆ ไป ตัวอย่างมาตรฐาน Extended ASCII ที่หลายท่านคุ้นเคย คือ TIS-620  ซึ่งก็คือชุดอักษรภาษาไทยนั่นเอง

และเพื่อความสะดวกในการใช้งาน จึงมีแนวคิดที่ว่า ควรมี Character Encoding ที่สามารถเข้ารหัสตัวอักษรทุกๆ ภาษาในโลกนี้เอาไว้ได้ จึงได้สร้างชุดอักษรในแบบ Unicode ขึ้นมา เช่น UTF-8 และ UTF-16

ในแต่ละเว็บเพจ การกำหนดว่าจะใช้ Character Encoding ในแบบใดนั้น เราจะใส่ไว้ในแท็ก <meta> ซึ่งอยู่ภายในแท็ก <head> โดยข้อมูลในส่วนนี้จะถูกส่งไปจาก Web Server ไปกับ HTTP header ไปยังเว็บบราวเซอร์ปลายทาง ซึ่งบราวเซอร์ก็จะทำการแปลรหัสตัวอักษรออกมา นั่นหมายความว่า ในแท็ก <meta> หากเราเลือก Character Encoding ไม่ถูกต้อง บนเว็บเพจก็จะอาจพบอักษรต่างดาว ที่อ่านไม่รู้เรื่องได้

หากคุณใช้ Firefox สามารถตรวจสอบดูได้ว่า ในเว็บเพจปัจจุบันที่กำลังเปิดใช้งานอยู่นั้นใช้ Character Encoding ในแบบใด หรือใช้งานมาตรฐานใดอยู่ ดังนี้

  1. เลือกคำสั่ง Tools>Page Info
  2. จะพบหน้าต่างบอกให้ทราบว่าตอนนี้ใช้ Character Encoding ตามมาตรฐานใด

ในกรณีที่เราไม่ได้ใส่แท็ก <meta> หรือไม่ได้กำหนด Character Encoding ไปในเว็บเพจ บราวเซอร์ก็จะไปใช้ Character Encoding ในแบบมาตรฐาน เช่น ISO-8859-1 ซึ่งใช้สำหรับการแสดงภาษาอังกฤษ แต่ในกรณีนี้ หากบนเว็บเพจมีอักษรภาษาไทยอยู่ Character Encoding ก็อาจแปลความหมายผิด และจะแสดงอักษรประหลาดบนหน้าจอเว็บเพจ ดังรูป

เกี่ยวกับ Mime Types

Mime Types ย่อมาจากคำว่า Multipurpose Internet Mail Extensions ซึ่ง Mime Types มีต้นกำเนิดมาจาก  RFC 2046 ซึ่งเป็นข้อตกลงมาตรฐานที่ใช้สำหรับอีเมล ในแบบ SMTP ต่อมาก็ได้พัฒนามาใช้งานกับเว็บ (HTTP protocol)

Mime Types ใช้เป็นตัวบอกให้บราวเซอร์ทราบว่า ไฟล์ที่ส่งมาจาก Web Server เป็นไฟล์หรือข้อมูลประเภทไหน โดยบราวเซอร์ก็จะเตรียมสถาพแวดล้อมสำหรับไฟล์นั้นๆ ไว้ให้ เช่น ถ้าเป็นไฟล์ HTML ก็จะเตรียมการแปลโค๊ตแท็กต่างๆ ตามปกติ แต่ในกรณีทีเป็นไฟล์ประเภทอื่นๆ เช่น CSS บราวเซอร์ก็จะเตรียมสภาพแวดล้อมที่ต่างออกไป เป็นต้น

บนเว็บเพจ เราจะกำหนด Mime Type ไว้ที่แท็ก  <meta> โดยใส่โค๊ตว่า http-equiv=”Content-Type” ตามด้วยชื่อประเภทของ Mime Types เช่น content=”text/html” เป็นต้น สำหรับเป็นโค๊ต HTML ปกติ เราก็ไม่จำเป็นต้องกำหนด Mime Types บราวเซอร์ก็จะทราบทันทีว่าเป็นไฟล์ HTML ไม่ใช้ไฟล์ประเภทอื่นๆ

Mime Type เป็นตัวบอกให้เว็บเพจทราบว่า ข้อความที่ปรากฏในไฟล์เป็นรูปแบบใด เช่น ถ้ากำหนดเป็น content=”text/html” บราวเซอร์ก็จะทราบทันทีว่านี่คือไฟล์ HTML ก็จะเตรียมสภาพแวดล้อมสำหรับไฟล์ HTML มาให้ หรือถ้า content=”text/css” ก็จะทราบทันทีว่า โค๊ตต่อไปนี้เป็น Cascading Style Sheet ที่ใช้สำหรับปรับแต่งหน้าตาของเว็บไม่ใช่โค๊ต HTML

ต่อไปนี้ คือ ตัวอย่างของ Mime Types ที่ใช้กันโดยทั่วไป

ชื่อ Mime Types ประเภทไฟล์
Atom feeds application/atom+xml
XHTML application/xhtml+xml
DTD application/xml-dtd
Jpg image image/jpeg
Cascading Style Sheet text/css
HTML text/html
XML text/xml
ติดต่อเรา

หากสมาชิกท่านใดพบปัญหา หรือมีข้อสงสัยประการใด สามารถติชม หรือเสนอแนะ มายังเว็บมาสเตอร์ได้ตลอดเวลานะครับ

Not readable? Change text. captcha txt
0

Start typing and press Enter to search