Post on 11-Apr-2017
ภาษา HTML5 Webpage Design and Programming Workshop (7152306)
อาจารยสธารตน ชาวนาฟาง
สาขาวศวกรรมซอฟตแวร มหาวทยาลยราชภฏนครปฐม
ภาษา HTML5
• ภาษา HTML5 คอภาษา HTML เวอรชนใหมลาสด แตยงไมเปน Final Version • มคณสมบตทท าใหเขยนภาษา HTML งายข น • สนบสนนการแสดงผลบนอปกรณตางๆ ไดเชน PC, Mac, iPhone, iPad, Android Phone หรอ
Tablet เปนตน เพมลกเลนในการท างาน เชน ท างานกบระบบแผนท, สรางภาพกราฟกโดยไมตองม Flash เปนตน
• เนนการใชงานรวมกบ CSS (Cascading Style Sheets) และ JavaScript ท างานกบภาษาทใชในการพฒนา Web Application เชน PHP หรอ ASP ไดอยางมประสทธภาพเพมข น
ขอดภาษา HTML5
• รองรบอปกรณหลากหลายทง Desktop PC, Mac และ Mobile เชน Smart Phone, Tablet
• แสดงภาพ เสยง หรอกราฟกอนเมชนตางๆ โดยไมตองตดตงซอฟทแวรเพมเตม • สามารถพฒนาโปรแกรมไดเหมอนกบโปรแกรมทใชงานทวไป ไมใชเพยงแคสราง
หนาเวบเพจแสดงขอมลอยางเดยว • เขยนโปรแกรมงายยงข น โดยเฉพาะบน Mobile ไมตองพฒนาในลกษณะ Native
Apps และไมตองน าโปรแกรมข น App Store หรอ Google Play • เขยนโปรแกรมไดอยางมประสทธภาพ เพราะรองรบการตดตอเพอเรยกใชงาน
คณสมบตตาง ๆ ของอปกรณโดยเฉพาะ Mobile ได เชนเรยกใชงานระบบ GPS (แผนท)
ความสามารถของ HTML5 ในสวนของ Semantics
• แทกใหม แทกกลมนจะชวยบงบอกความหมายของวตถในเวบเพจไดดข น เชน จากเดมใช <div id="header"> เปลยนมาเปน <header> ท าใหเบราวเซอรสามารถ
รบทราบความหมายของวตถแตละช นไดดข น
ความสามารถของ HTML5 ในสวนของ Semantics
ตวอยาง
• section - บงบอกเซคชนของเนอหา • article - ก าหนดขอบเขตของตวเนอบทความ
• aside - ก าหนดขอบเขตของเนอหาเสรม (ลอมกรอบ) • Header - ก าหนดขอบเขตของสวนเรมตนหรอสวนหวของเวบไซต • footer - ก าหนดขอบเขตของสวนทายของเวบไซต เชนขอความก าหนด
สทธตางๆ
• nav - ก าหนดเปนสวนน าทางของเวบไซต
การท างานของ HTML5
8
การท างานของ HTML5 กบ Css3
9