ปัญหาน่าปวดหัวอีกอย่างของการเขียน HTML หรือ XHTML นั่นก็คือ “การจัดการ เลือกใช้ header ของ HTML” เพราะว่าทั้งสองภาษานั้นมี Header มาให้ถึง 6 ตัว (h1-h6) ก่อนหน้านี้ผมก็เคยเขียนออกมาให้ตาเห็นบ้างแล้วว่าการใช้ h1-h6 นั้น ชื่อมันก็บอกว่าหนึ่งถึงหก แต่ลืมเขียนเรื่องง่ายๆ อีกเรื่องนั่นคือการตีความการทำ sectioning ของ heading
section อาจจะเป็น Element ที่คนทำเว็บนำมาใช้แบบผิดๆ ได้อย่างง่าย ถ้าหากทำความเข้าใจแค่ผิวเผินหรือ ดูจากชื่อของ Element เท่านั้น
หลายคนนำ section มาใช้แบ่ง แยก ส่วนหน้าของเว็บออกจากกัน ซึ่งเป็นสิ่งที่ไม่ถูกต้อง แล้วการใช้งานที่ถูกต้องหละ คืออะไร
<section></section> มีไว้เพื่อ แยก ส่วนที่แตกต่างกันของเนื้อหาที่อยู่ใน บทความ ออกจากกัน ไม่ได้มีไว้เพื่อแบ่งหน้า เช่น
HTML5 Text-level semantics คือการเอากลุ่มของภาษา html4 ผสมกับ xhtml2 แล้วเอาสิ่งที่มีมาตีความใหม่ ใส่ความหมายเข้าไปให้กับ Element ที่มีอยู่ก่อนแล้วเพื่อให้ Elements ต่างๆ มีความหมายในตัวของมัน
ก่อนหน้านี้ใน HTML4 Elements บางส่วนที่ถือกำเนิดขึ้นนั้น มีอยู่เพื่อการแสดงผลด้าน Screen โดยไม่ได้คำนึงถึงความหมายที่แฝงอยู่ เช่น b เอาไว้ทำตัวหนา i เอาไว้ทำตัวเอียง u เอาไว้ขีดเส้นใต้
ส่วน XHTML ที่สร้าง Element อย่างเช่น strong หรือ em เข้ามาใหม่ ได้ลบ b และ i ออกไป
การเริ่มต้นอย่างถูกวิธีและมีแนวทาง ถือเป็นก้าวสำคัญที่สามารถส่งผลให้การเรียนรู้ ศึกษาเรื่องราวใดๆ ก็ตามเป็นไปอย่างมีแบบแผนและพัฒนาก้าวหน้าได้อย่างรวดเร็ว ไม่ต้องไปเสียเวลาทดลองหรือซุ่มเสี่ยงในสิ่งที่ยังไม่รู้ว่าถูก หรือผิด เพียงแค่เอาเวลาที่เหลือนั้นไปพัฒนา ต่อยอดสิ่งที่มีอยู่นั้นให้ดียิ่งขึ้นไป
แต่ถ้าหากว่า สิ่งที่มันมีอยู่นั้น มันอยู่ตรงไหนกัน “คำถามนี้ ถือเป็นปัญหาหลัก” ในแวดวงการทำงานในส่วนของ CSS และ HTML ของเมืองไทยเรามาหลายปี หรือจะบอกได้ว่าตั้งแต่เริ่มมีคำว่า Tableless หรือ CSS ไหลเข้ามาในหัวของนักพัฒนาเว็บชาวไทยโน่นเลยก็ว่าได้
เพราะมันเพิ่งเริ่ม เพิ่งเกิด จึงไม่มี หรือมีน้อย ส่วนที่มีน้อยนั้นก็ใช่ว่าจะเปี่ยมไปด้วยคุณภาพ หรือที่มีอยู่ดันเปี่ยมไปด้วยความด้อยคุณภาพ จึงทำให้ส่วนงานที่กล่าวมานั้น ยังไม่มีแนวทางหรือต้นแบบในการเรียนรู้ ปฏิบัติอย่างชัดเจน
สวัสดีครับ หลบเรื่องยุ่งๆ มาแอบเขียนบทความใหม่นิดนึง บทความนี้ได้แรงบันดาลใจมาจากบันทึกของน้องมุก (@fatidea) และ ความสงสัยของเจ้าตัวที่มาถามผมน่ะนะครับ ว่าเราจะใช้เจ้า element <header> และ <hgroup> ในกรณีใดบ้าง
ขออนุญาตเท้าความกันก่อนนิดนึงก่อนว่า HTML5 นั้นมี element ใหม่หลายตัวที่เข้ามาทำหน้าที่ครอบเนื้อหาเพื่อบ่งบอกความหมายของตัวเนื้อหานั้นๆ ให้ชัดเจนมากขึ้นครับ ย้อนกลับที่ผมได้เกริ่นนำไว้ข้างต้นครับวันนี้ผมขออนุญาตพูดถึง element ที่เกี่ยวข้องกับ ต้นขั้วเอกสาร (header) และ ตัวครอบกลุ่มหัวข้อเรื่องหลัก และ ย่อย (hgroup) ครับ
เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที
คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว
อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่
เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก
ปฏิเสธไม่ได้ว่า สิ่งที่ยากที่สุดสิ่งหนึ่งในการเขียน HTML และ CSS คือ การตั้งชื่อ Class และ ID ถึงแม้ว่า ในตอนนี้จะหมดยุคของการตั้งชื่อ Class เพื่อเขียน CSS แล้วก็ตาม เราสามารถเขียน Combinator selectors หรือ Simple selectors แบบ Type Selector ผสมกับ Child Selector กันไปได้ใน CSS2.1 ถึงกระนั้น เราก็ยังจำเป็นต้องสร้าง Class เพราะว่า การตั้งชื่อ Class และ ID ไม่ได้เกี่ยวอะไรโดยตรงกับ CSS
Class และ ID เป็นสิ่งจำเป็นอย่างยิ่ง ในยุคของ Web 4.0 (อย่างช้า ก็ 5.0) เป็นต้นไป เพราะ หน้าเว็บนั้นๆ หรือเอกสารนั้นๆ จะถือตนเป็นฐานข้อมูล HTML ด้วยตัวของมันเอง กฎของเว็บยุคใหม่ สามารถอนุญาตให้เข้าถึง และ Share ข้อมูลกันได้จากหน้าเว็บโดยตรง เช่น นาย ก ไก่ ทำเว็บเกี่ยวกับ "การปลูกผักสวนครัว" นาย ข ไข่ ทำเว็บเกี่ยวกับการเลี้ยงปลา นาย ค "ทำเว็บเกี่ยวกับการ ทำอาหาร" ทั้งสามคนนี้ สามารถที่จะ เขียนชุดภาษาคอมพิวเตอร์ใดๆ เพื่อที่จะไป เก็บข้อมูลจากหน้าเว็บ ตามที่เว็บนั้นๆ "ได้ Markup เอาไว้อย่างถูกวิธี และแยก Class และ ID ของข้อมูลอย่างเป็นระเบียบ" ทั้งนี้ สามคนข้างต้น ต้องมีการตกลงเรื่องการเสนอข้อมูลทางกฎหมายต่อไป ว่าจะเอาไปแสดงยังไง อ้างอิงยังไง แต่เรื่องความปลอดภัยในการเข้าถึงข้อมูลก็เป็นอีกเรื่องหนึ่ง ซึ่งเมื่อไม่นานมานี้ "เซอร์ ทิม เบอร์นเนอส ลี" ก็ได้กล่าวเอาไว้ว่า เรื่องความเสี่ยงของการเข้าไปนำข้อมูลจากหน้าเว็บของคนอื่น แล้วเอาออกมาใช้นั้น จะทำอย่างไร หรือมีมาตรการใด เพื่อเป็นรับรองได้ว่า ไม่ได้เป็นการทำเพื่อการโกง แฮ๊ก ล่วงเกินข้อมูลของผู้อื่น
เชื่อว่าเพื่อน ๆ พี่ ๆ น้อง ๆ เห็นชื่อเรื่องที่เกริ่นไว้คงทราบกันทันทีว่าคราวนี้ผมจะพูดถึงหนึ่งในสมาชิกหน้าใหม่ของ HTML5 ซึ่งก็คือเจ้า dialog นั่นเองครับ เนื่องจาก HTML5 นั้นมีการปรับโครงสร้างภาษา ไปค่อนข้างมากครับ เหตุผลก็คงหลีกไม่พ้นประโยชน์เหล่านี้ครับ เช่น เพื่อให้ง่ายต่อการใช้งานในการออกแบบโครงสร้าง HTML/CSS และ มีความหมายมากขึ้น (semantics) เพราะฉะนั้นเจ้า dialog จึงถูกสร้างมาเพื่อที่จะเข้ามาทำหน้าที่ในการควบคุมโครงสร้างเนื้อหาที่เกี่ยวข้องกับกรณีต่อไปนี้ครับผม
ใน HTML5 นั้น dialog จัดอยู่ในหมวดของ Flow Content ชนิด Grouping Content (@pornAntha จะอธิบายเกี่ยวกับหมวด และ ชนิดของ elements ใน HTML5 เร็ว ๆ นี้ครับ) ซึ่งรูปแบบโครงสร้างของ code จะเป็นอย่างตัวอย่างนี้ครับ:
คำเตือน บทความนี้เป็นบทความเฉพาะกลุ่มเป้าหมาย เนื้อหาส่วนใหญ่ไม่ได้อยู่ในโลกปัจจุบัน ไม่ค่อยเหมาะสำหรับคนที่มองอนาคตระยะ 15 เมตร
คำเตือนที่สอง เนื้อหานี้ ไม่เหมาะสำหรับผู้ใช้ทั่วไป และ ตัวอย่างทั้งหมด ไม่สามารถใช้ User Agent ที่เป็น Browsers อย่าง IE ทั้ง 6-7-8 เรียกดูได้ เพราะฉะนั้น กรุณาใช้ Firefox, Opera, Safari, หรือ Chrome เข้าชม
คำเตือนที่สาม ผมเกรียน…
ผมขอพูดไปเรื่อยๆ ทีละขั้น จนไปถึงขั้นสุดท้าย คือการทำตัวอย่างหน้าเว็บด้วย HTML5 โดยใช้ CSS3 เข้ามาจัดการหน้าเว็บ
-1-
คำถามชุดที่หนึ่ง ราคา สี่ร้อยเก้าสิบเก้าบาท
ถามว่า HTML5 จะใช้ได้ในเร็ววันนี้หรือไม่
คำตอบคือ ทั้งใช่ และไม่ใช่ อย่างไรบ้างหละ
เป็นที่ทราบกันอยู่แล้วว่าขนาด default ของ font ในแต่ละ browser เวลาที่เรากด small, smaller, medium, larger และ largest นั้นอยู่ในหน่วย % คือ 90%, 100%, 110% และ 120% แต่ขนาด zoom นั้นจะเป็นเอกลักษณ์ของแต่ละ browser