Tutorial Intel XDK - HTML 5 - Workshop 3

กิจกรรม Workshop 3 : ความรู้เกี่ยวกับ HTML5

ภาษาที่ใช้ในโปรแกรม Intel@ XDK เป็นส่วนใหญ่คือภาษา HTML ซึ่งสามารถใชได้ทุกรุ่น แต่ที่อานวยความสะดวกและมีฟังก์ชันต่าง ๆ ให้แก่ผู้สร้าง App คือ HTML5

โครงสร้างภาษา HTML5

            (เป็นส่วนที่แตกต่างจาก HTML รุ่นก่อน ๆ)

…………………………..

 แท็กใน HTML5

ก่อนที่จะกล่าวถึงแท็กใน HTML5 ขอกล่าวถึง Semantic Markup เป็นคุณสมบัติที่ช่วยในการจัดหมวดหมู่ต่าง ๆ ในหน้าเว็บเพจให้เหมาะสมถูกตำแหน่งอย่างเป็นระเบียบ โดยนา Semantic Element ที่เป็นแท็กใหม่ที่เพิ่มขึ้นใน HTML5 มาช่วยในการจัดหมวดหมู่ โดย Semantic Element จะมีความหมายและจุดประสงค์ในการใช้ที่แตกต่างกัน เช่น ถ้าต้องการกำหนดชื่อเว็บไซต์ก็เลือกใช้แท็ก

สาหรับส่วนที่แสดงชื่อ หรือลิขสิทธิ์ที่นามาไว้ด้านล่างของเว็บเพจก็เลือกใช้แท็ก

การใช้งานแท็กในการจัดรูปแบบเว็บเพจใน HTML รุ่นก่อนจะใช้แท็ก

ในการจัดรูปแบบว่าแต่ละตัวแสดงเนื้อหาในส่วนใด เช่น

เพื่อระบุส่วนหัวของเว็บ เป็นต้น ซึ่งเว็บบราวเซอร์ไม่ทราบว่าชื่อของ ID ที่ระบุสื่อถึงเนื้อหาอะไรในเว็บเพจเพราะไม่มีมาตรฐานไว้ แต่สาหรับ HTML5 จะมีแท็กที่สามารถสื่อความหมายว่าหมายถึงเนื้อหาใด

-ลักษณะการใช้แท็ก DIV ใน HTML รุ่นก่อนหน้า HTML5

 

(แท็กใหม่ใน HTML5)

 

ความหมายของแท็กต่าง ๆ

1. แท็ก

เป็นเอลิเมนต์ใช้เก็บข้อมูลหลัก เช่น รูปภาพโลโกต่าง ๆ ลิงค์หลักของเว็บไซต์ หรือกล่องค้นหาข้อมูลบนเว็บไซต์ เป็นต้น สาหรับแท็ก

สามารถกำหนดได้หลายแห่งในเว็บเพจเดียวกัน และสามารถกำหนดให้ไปอยู่ในแท็กอื่น ๆ ได้อีกด้วย

2. แท็ก

ใช้เป็นแท็กสาหรับรวมกลุ่ม heading เช่น

ถึง

รวมถึงหัวข้อย่อย ๆ (1,1.1,1.2) เป็นต้น

3. แท็ก

ใช้แสดงข้อมูลในส่วนที่ไม่ใช่ประเด็นหลักของเว็บเพจ โดยอาจวางไว้ด้านซ้ายหรือขวาของเว็บเพจ เช่น โฆษณา หรือข้อแนะนาต่าง ๆ เป็นต้น

4. แท็ก

ใช้แสดงข้อมูลหลักของเว็บเพจเพื่อให้ผู้เข้าชมสนใจ สามารถใช้แสดงข้อมูลที่ไม่เกี่ยวข้องกับส่วนอื่น ๆ

5. แท็ก

ใช้เพื่อแบ่งเพจออกเป็นส่วน ๆ เช่น แบ่งประเภทรายวิชา,กลุ่มสาระเป็นต้น โดยใช้แท็ก

เพื่อเก็บข้อมูลแต่ละรายวิชา แล้วนาไปไว้ในแท็ก

6. แท็ก

ใช้สาหรับเก็บลิงค์บนเว็บเพจ สาหรับลิงค์แบ่งเป็น 2 ลักษณะ คือเป็นลิงค์ภายในเว็บเพจและลิงค์ไปเว็บเพจอื่น ๆ โดยจะอยู่ในส่วนของแท็ก

แต่ในบางครั้งอาจนาไปไว้ในส่วนท้ายของเว็บเพจ (แท็ก

)

7. แท็ก

ใช้สาหรับแสดงข้อมูลด้านล่างของเว็บเพจเป็นข้อมูลเพิ่มเติม เช่น ข้อมูลเว็บไซต์ อีเมล์ หรือข้อมูลที่เกี่ยวข้อง เป็นต้น

กิจกรรมที่ 1 การใช้แท็ก HTML5

1. สร้าง New Project แบบ Blank Project ชื่อ taghtml5

2. ลบ Code ทั้งหมด พิมพ์ Code ต่อไปนี้

3. ทดสอบโดยคลิกที่ Emulate จะได้ผลลัพธ์ดังนี้