HTML5,CSS3
HTML5 คืออะไร?
HTML5 คือ มาตราฐานนึงที่นักพัฒนากำลังพยายามผลักดันขึ้นมาแทนที่ HTML4 เดิมที่ใช้กันมากว่าสิบปีแล้ว ซึ่งค่อนข้างล้าสมัย ซึ่งความพยายามในการผลักดันมีกันมานานพอสมควร แต่ติดปัญหาใหญ่ๆอย่าง ปัญหาผู้ใช้งานไม่อัพเกรด Browser แล้ว Browser แล้วเจ้าต่างพัฒนากันไปคนละทาง ทำให้ปัจจุบันยังไม่มีวี่แววว่า HTML5 จะได้เป็นมาตราฐานที่ใช้งานได้จริงเมื่อไหร จนกระทั่งช่วงหลังมาเกิดแรงผลักดันจากหลายๆฝ่าย โดยเฉพาะที่เห็นกันอย่างชัดเจนคือ สงครามน้ำลายระหว่าง Apple และ Adobe ในปัญหาเรื่อง Flash บน iPad/iPhone ทำให้ HTML5 ถูกดึงมาเป็นประเด็นที่กล่าวถึงกันมาก จนนักพัฒนาทั้งหลายกลับมาให้ความสนใจกันมากขึ้น ซึ่งคาดว่าจะมีผลทำให้ HTML5 อาจจะได้ถูกใช้งานอย่างแพร่หลายในเร็วๆวันนี้
HTML5 ตอนนี้ ยังมีสถานะอยู่ระหว่างการพัฒนาอยู่ โดยเป็นภาษาในรุ่นถัดไป ของภาษา HTML ซึ่งที่มีการใช้งานในตอนนี้ก็คือ HTML 4.01 และ XHTML 1.0, 1.1 ซึ่ง HTML5 เป็นภาษาหลัก ที่ใช้ในการแสดงเนื้อหา หน้าตาในระบบ World Wide Web
โดยการคาดการณ์ของ บ.ก. HTML5 คาดว่า น่าจะเอามาเริ่มใช้ได้ประมาณปี 2012 และจะเข้ามาเป็น มาตรฐานของ W3C (ช่วง W3C Recommendation) ได้ประมาณ2022 หรือช้ากว่านั้น โดยตอนนี้ หลายๆ browser ก็เริ่มพัฒนาตัวเอง เพื่อให้รองรับการใช้งานของ มาตรฐาน HTML5 แล้ว โดยน่าเชื่อว่า หลายอย่าง จะไม่มีการเปลี่ยนแปลง เมื่อถูกเริ่มเอามาใช้ในช่วงปี 2012 (ซึ่งเรียกว่า W3C Candidate Recommendation stage)
HTML5 ถูกพัฒนาโดย Web Hypertext Application Technology Working Group (WHATWG) ซึ่งเริ่มกำหนดมาตรฐานของภาษา มาตั้งแต่ มิถุนายน 2547 โดยในตอนนั้นใช้ชื่อว่า Web Application 1.0 จนเมื่อ มีนาคม 2553 ได้มาถึงขั้นตอนการร่าง ข้อกำหนดมาตรฐานของ HTML5 โดยมี Ian Hickson จาก Google, Inc. เป็น บ.ก.
การร่างข้อกำหนดของ HTML5 มีมาตั้งแต่ปี 2550 โดยได้เผยแพร่ตัวร่าง ฉบับแรกเมื่อ มกราคม 2551 ซึ่งก็ได้มีการปรับปรุงมาเรื่อย และน่าเชื่อว่าจะใช้เวลาอีกหลายปี กว่าจะมีการเอา HTML5 มาใช้จริงได้ โดยมีการคาดหมายว่า จะเข้าช่วง W3C Candidate Recommendation ในช่วงปี 2012 (เริ่มเอามาใช้งาน) และจะเข้าสู่ W3C Recommendation (ช่วงประกาศเป็นมาตรฐานสากล) ในช่วงปี 2022 หรือช้ากว่านั้น แต่ในตอนนี้ ก็มีหลายส่วน ที่มีความเสถียร และถูกเอามาใช้งานจริงแล้วเช่นกัน
บางส่วนของ HTML5 นั้น เสถียรแล้ว และสามารถเอาไปใช้งานได้จริงแล้ว เช่น Canvas
รูปแบบโค้ด HTML5
HTML5 Coding
HTML5 ได้เพิ่ม element และ attribute ใหม่เข้ามา ซึ่งจะมีการใช้งานได้บ่อยใน modern website (เว็บที่ใช้เทคโนโลยีใหม่ๆ เพื่อให้มีลูกเล่น หรือการแสดงผลที่หลากหลายเพิ่มขึ้น) และหลายส่วนก็เป็นการเพิ่มความชัดเจนของตัวโค้ด(ที่ส่งผลต่อเนื้อหา)มากขึ้น (semantic) โดยมีความชัดเจนมากกว่าที่เราเคยใช้กัน เช่น แบบ block (div) หรือแบบ inline (span) ตัวอย่างเช่น nav (ลิสต์รายการเมนูของเว็บ) หรือ footer(ข้อความที่แสดงเนื้อหา ในส่วนด้านล่างของหน้าเว็บ) หรือหลาย element ก็เพิ่มความสามารถในการแสดงผล เช่น element ของ multimedia audio และ video แต่ก็มีบางส่วนที่ถูกเอาออกจากมาตรฐานเดิมคือ 4.01 เช่นพวกที่จัดการการแสดงผลโดยตรงเช่น font และ center นั่นเป็นเพราะว่าจะเป็นการซ้ำซ้อนกับการแสดงผลโดยใช้ Cascading Style Sheets หรือ CSS นั่นเอง นอกเหนือจากนี้ยังมีการเน้นในส่วนที่จัดการ DOM อีกด้วย (เช่น JavaScript)
APIs ชุดใหม่
ใน HTML5 ได้มีการอนุญาตให้เขียน API เพื่อเข้าจัดการ DOM ได้หลายส่วนเพิ่มขึ้น ตัวอย่างเช่น
- The canvas element for immediate mode 2D drawing. See Canvas 2D API Specification 1.0 specification / เป็นชุดคำสั่งเพื่อช่วยในการวาดรูป หรือ สร้างวัตถุเพื่อการแสดงผล ในรูปแบบ 2 มิติ
- Timed media playback / ตัวควบคุม timeline ของเพลง หรือ vdo
- Offline storage database (offline web applications). See Web Storage / เป็นการเก็บข้อมูลเนื้อหา ลงเครื่อง และเรียกขึ้นมาใช้งานใหม่ได้
- Document editing / การแก้ไขเนื้อหาเว็บ
- Drag-and-drop / การลากและวางของวัตถุ
- Cross-document messaging. See HTML5 Web Messaging / การแลกเปลี่ยนข้อมูลกันข้ามหน้าเว็บ (คงเหมือน AJAX)
- Browser history management / ระบบจัดการเว็บย้อนหลัง(น่าจะได้อานิสงค์มาจาก offline storage database)
- MIME type and protocol handler registration. / ทำความรู้จักชนิดของไฟล์ใหม่ๆ ได้มากขึ้น
- Microdata. See HTML Microdata / การจัดการแสดงผลของข้อมูลขนาดเล็ก เช่นพวก JSON
ข้อแตกต่างระหว่าง HTML4.01 กับ HTML5
ก่อนอื่นจะขอสรุปว่า HTML 5 มีแท็กอะไรใหม่บ้าง คงไม่อธิบายครบทุกแท็กนะครับ จะยกมาเฉพาะที่น่าสนใจเท่านั้น
การสร้าง Website โดยใช้ HTML5
โดยเราจะยกตัวอย่างโครงสร้าง จาก HTML 4 ให้เห็นภาพโดยสังเขปโครงสร้าง HTML 4.01
แท็กชุดแรกเป็นเรื่องของโครงสร้างหน้าเว็บที่อยู่ภายใต้ (body) ได้แก่ (header) (nav) (article) (section) (aside) และ (footer) ซึ่งในยุคของ HTML 4 เรามักจะใช้แท็ก (div) ในการวางโครงสร้างของหน้าเว็ป โดยกำหนดพารามิเตอร์ id และ class ซึ่งมีการตั้งชื่อตามแต่คนออกแบบเว็ป
โครงสร้าง HTML 5
แต่ในยุค HTML 5 จะมีแท็กที่ใช้แทนที่ (div) ทั้งหมดนี้ได้
