ภาษา 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