plaumkamon

ผมมีเหตุต้องศึกษา HTML 5 เพื่อนำมันมาใช้ใน project ใหม่ วันนี้เลยมาจด log สิ่งที่ได้เรียนรู้ไป (ทำความรู้จักกับ HTML 5 มากกว่า) ซึ่งอาจจะดูล้าหลังไปหน่อย เพราะเป็นเรื่องที่คนอื่นเค้าพูดกันมาตั้งแต่ปีมะโว้แล้ว แต่ผมเพิ่งรู้จักกับมัน เพราะก่อนหน้านั้นพยายามทำตัว "ยินดีที่ไม่รู้จัก" ไม่อยากจะยุ่งกับส่วน design ซึ่งมันเป็นหน้าที่ของ designer เราเขียน web application ก็เขียนไป แต่วันนี้เลี่ยงไม่ได้ ก็เลยเกิดมี content นี้เกิดขึ้น HTML 5 มันประมาณว่าเอา HTML + CSS + JS(javascript) APIs ดังรูปด้านบนนั้นแหละครับ มันดูเหมือนไม่ใช่สิ่งใหม่เลย เป็นสิ่งที่เรารู้ๆกันหมดแล้วอย่าง HTML, CSS หรือ javascript เพียงแต่ W3C นำเอาสิ่งที่เรารู้จักอยู่แล้วมาเพิ่มความสามารถลงไป แล้วมา pack ใหม่จนกลายเป็น HTML5 นั่นเอง เรามาดูกันดีกว่าแต่ละส่วนที่เพิ่มเข้ามามีอะไรบ้าง HTML Semantics (New tags, Link Relations, Microdata) มันถูกออกแบบมาใหม่ให้จัดวาง layout ได้ง่ายขึ้น ซึ่งแต่ก่อนเราใช้ <div> หรือไม่ก็ <span> (ตัวนี้ไม่ค่อยมีคนใช้หรอก) แล้วเราก็กำหนด id เอาว่ามันจะชื่ออะไร มันเป็

Tableless design เป็นการออกแบบ layout ของ HTML โดยไม่ใช้ table มาช่วยเลย โดยการที่ไม่ใช้ table ไม่ได้หมายความว่าจะตัด table ออกจาก html ไปเลย เพียงแต่ไม่ใช้ table ในการ design layout ส่วน table ก็ไปทำหน้าที่ในตอนแสดงข้อมูลออกมาในตารางเท่านั้น ถ้าไม่ใช้ตารางจะใช้อะไรแทนหละ คำตอบตือใช้ <div> และ <span> ช่วยในการวาง Layout แทน โดย <div> ใช้ในออกแบบเกี่ยวกับ layout ในส่วนที่ไม่มีตัวอักษร เช่นการแบ่งโครงสร้างต่างๆของ web เช่นส่วนของเมนู ส่วนของ Banner ส่วนของ content ส่วนของ footer เป็นต้น ส่วน <span> จะเอามาใช้ในการจัดโครงสร้างของข้อความต่างๆ ไปดูเหตุผลพวกนี้ที่ http://www.divland.com/blog/2007/03/23/div-or-span/ แล้วเราจะออกแบบยังไง เราก็ออกแบบโดยมองว่า 1 <div> แทนโครงสร้างในส่วนหนึ่ง อย่างเช่น <div id="banner">Banner</div> อาจจะยังไม่เห็นภาพรวมของมันเราลองดูกันเต็มๆว่าถ้าใช้ <div>เต็มๆแล้วจะเป็นยังไง

Sans-serif: เป็น Font ที่ไม่มีลวดลายตามรูปด้านบน ทื่อๆ แข็ง Serif: เป็น Font ที่มีองค์ประกอบมากกว่า Sans-serif อย่างรูปด้านบน Monospace: เป็น Font ที่มีความกว้างของแต่ละตัวอักษรเท่ากันแปะๆ ทำให้สามารถเอามาเปรียบเทียบจำนวนตัวอักษรได้ง่าย รายะเอียดเพิ่มเติม: http://www.w3schools.com/css/css_font.asp