dialog เพื่อนใหม่ใน HTML5

เชื่อว่าเพื่อน ๆ พี่ ๆ น้อง ๆ เห็นชื่อเรื่องที่เกริ่นไว้คงทราบกันทันทีว่าคราวนี้ผมจะพูดถึงหนึ่งในสมาชิกหน้าใหม่ของ HTML5 ซึ่งก็คือเจ้า dialog นั่นเองครับ เนื่องจาก HTML5 นั้นมีการปรับโครงสร้างภาษา ไปค่อนข้างมากครับ เหตุผลก็คงหลีกไม่พ้นประโยชน์เหล่านี้ครับ เช่น เพื่อให้ง่ายต่อการใช้งานในการออกแบบโครงสร้าง HTML/CSS และ มีความหมายมากขึ้น (semantics) เพราะฉะนั้นเจ้า dialog จึงถูกสร้างมาเพื่อที่จะเข้ามาทำหน้าที่ในการควบคุมโครงสร้างเนื้อหาที่เกี่ยวข้องกับกรณีต่อไปนี้ครับผม

  • บทสนทนาระหว่าง คนสองคน หรือ หลาย ๆ คน
  • บทสัมภาษณ์
  • บทละคร ที่เป็นการสนทนากันระหว่างตัวละคร
  • และ อื่น ๆ ที่เกี่ยวข้องกับการสนทนา ปฏิสัมพันธ์ระหว่างคนสองคนขึ้นไป

ใน HTML5 นั้น dialog จัดอยู่ในหมวดของ Flow Content ชนิด Grouping Content (@pornAntha จะอธิบายเกี่ยวกับหมวด และ ชนิดของ elements ใน HTML5 เร็ว ๆ นี้ครับ) ซึ่งรูปแบบโครงสร้างของ code จะเป็นอย่างตัวอย่างนี้ครับ:

หรือ

คุณจะเห็นว่า HTML5 อนุญาติให้เขียนแบบมีความหมายอย่าง XHTML ได้ และ สามารถเขียนแบบย่อในแบบ HTML5 ได้ ในกรณีนี้คุณจะเห็นว่า dt และ dd นั้นไม่จำเป็นต้องเขียน tag ปิดแต่ว่าตัวที่เป็นตัวกำหนด Grouping Content นั้นจำเป็นต้องปิดเสมอ จากตัวอย่างซึ่งก็คือ dialog ครับ ตรงนี้ก็พิจารณาเลือกใช้กันตามวาระโอกาสที่เหมาะสมครับ
ต่อไปผมจะยกตัวอย่าง การเขียนโครงสร้างด้วย dialog ให้กับเนื้อหาที่เป็นบทสนทนาให้ดูครับ เป็นตัวอย่างง่าย ๆ ก่อนนะครับ รอบหน้าจะยกตัวอย่างเมื่อเรานำไปใช้กับ CSS 2 และ CSS 3 ครับ

เนื้อหา:

จะเห็นได้ว่าเนื้อหาที่ผมยกมานั้นเป็นเนื้อหาจากนิยายนะครับ ซึ่งเป็นการสนทนาระหว่างตัวละครสองคนที่กำลังสนทนากันอยู่ซึ่งเมื่อเรานำมาเขียนเป็นโครงสร้าง HTML5 เพื่อที่จะเอาไปแสดงผลเป็นหน้าเว็บเพจ เราก็จะต้องเขียนกันออกมาแบบนี้ครับ

ตัวอย่างที่ 1:

ตัวอย่างที่ 2:

จากตัวย่าง ผมเขียนให้ดูทั้งสองแบบทั้งแบบเปิด tag และ ปิด tag นะครับซึ่งจะเห็นว่าการใช้ dt และ dd ใน dialog นั้นจะเป็นไปตามเงื่อนไขนี้ครับ dt นั้นจะใช้กับเนื้อหาที่เป็นตัวบ่งชี้ความชัดเจน เป็นตัวบ่งชี้ความเป็นเจ้าของของเนื้อหาที่อยู่ใน dd

ซึ่งตามตัวอย่าง dt นั้นจะใช้ครอบเจ้าของคำพูดนั้น ๆ dd ก็ใช้ครอบคำพูดของเจ้าของคำพูดนั้นครับ (ตรงนี้ถ้าอ่านแล้วมันกำกวมไม่เข้าใจ ถามกันไว้ได้นะครับ ผมจะกลับมาอธิบายใหม่ให้จนกว่าจะเข้าใจตรงกันครับ)

ครับหวังว่าคงจะรู้จักกับ dialog กันมากขึ้นครับ ครั้งหน้าเราจะอธิบายกันในส่วนการตกแต่งโครงสร้างของ dialog ในแต่ละกรณีศึกษาครับ สำหรับครั้งนี้ผมขออนุญาติชิ่งไปก่อนครับ พบกันใหม่ครับผม

Back to Top

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top