ภาษา html5
-
Upload
cc-nakhon-pathom-rajabhat-university -
Category
Education
-
view
1 -
download
0
Transcript of ภาษา html5
![Page 1: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/1.jpg)
ภาษา HTML5 Webpage Design and Programming Workshop (7152306)
อาจารยสธารตน ชาวนาฟาง
สาขาวศวกรรมซอฟตแวร มหาวทยาลยราชภฏนครปฐม
![Page 2: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/2.jpg)
ภาษา HTML5
• ภาษา HTML5 คอภาษา HTML เวอรชนใหมลาสด แตยงไมเปน Final Version • มคณสมบตทท าใหเขยนภาษา HTML งายข น • สนบสนนการแสดงผลบนอปกรณตางๆ ไดเชน PC, Mac, iPhone, iPad, Android Phone หรอ
Tablet เปนตน เพมลกเลนในการท างาน เชน ท างานกบระบบแผนท, สรางภาพกราฟกโดยไมตองม Flash เปนตน
• เนนการใชงานรวมกบ CSS (Cascading Style Sheets) และ JavaScript ท างานกบภาษาทใชในการพฒนา Web Application เชน PHP หรอ ASP ไดอยางมประสทธภาพเพมข น
![Page 3: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/3.jpg)
![Page 4: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/4.jpg)
ขอดภาษา HTML5
• รองรบอปกรณหลากหลายทง Desktop PC, Mac และ Mobile เชน Smart Phone, Tablet
• แสดงภาพ เสยง หรอกราฟกอนเมชนตางๆ โดยไมตองตดตงซอฟทแวรเพมเตม • สามารถพฒนาโปรแกรมไดเหมอนกบโปรแกรมทใชงานทวไป ไมใชเพยงแคสราง
หนาเวบเพจแสดงขอมลอยางเดยว • เขยนโปรแกรมงายยงข น โดยเฉพาะบน Mobile ไมตองพฒนาในลกษณะ Native
Apps และไมตองน าโปรแกรมข น App Store หรอ Google Play • เขยนโปรแกรมไดอยางมประสทธภาพ เพราะรองรบการตดตอเพอเรยกใชงาน
คณสมบตตาง ๆ ของอปกรณโดยเฉพาะ Mobile ได เชนเรยกใชงานระบบ GPS (แผนท)
![Page 5: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/5.jpg)
ความสามารถของ HTML5 ในสวนของ Semantics
• แทกใหม แทกกลมนจะชวยบงบอกความหมายของวตถในเวบเพจไดดข น เชน จากเดมใช <div id="header"> เปลยนมาเปน <header> ท าใหเบราวเซอรสามารถ
รบทราบความหมายของวตถแตละช นไดดข น
![Page 6: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/6.jpg)
ความสามารถของ HTML5 ในสวนของ Semantics
ตวอยาง
• section - บงบอกเซคชนของเนอหา • article - ก าหนดขอบเขตของตวเนอบทความ
• aside - ก าหนดขอบเขตของเนอหาเสรม (ลอมกรอบ) • Header - ก าหนดขอบเขตของสวนเรมตนหรอสวนหวของเวบไซต • footer - ก าหนดขอบเขตของสวนทายของเวบไซต เชนขอความก าหนด
สทธตางๆ
• nav - ก าหนดเปนสวนน าทางของเวบไซต
![Page 7: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/7.jpg)
![Page 8: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/8.jpg)
การท างานของ HTML5
8
![Page 9: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/9.jpg)
การท างานของ HTML5 กบ Css3
9
![Page 10: ภาษา html5](https://reader037.fdocuments.net/reader037/viewer/2022100115/58ecd8101a28ab6a118b46d1/html5/thumbnails/10.jpg)