สัปดาห์ที่ 2: HTML โครงสร้างเอกสารและมาร์คอัพ

เป้าหมายของสัปดาห์

สัปดาห์นี้เรียนรู้ HTML ตั้งแต่โครงสร้างเอกสารพื้นฐาน tag ที่ใช้บ่อย semantic HTML ฟอร์ม ตาราง multimedia และ attribute สำคัญที่ช่วยให้เว็บอ่านง่าย ใช้งานง่าย และเข้าถึงได้มากขึ้น

ผลลัพธ์การเรียนรู้

เมื่อเรียนจบสัปดาห์นี้ ผู้เรียนสามารถ

  1. สร้างเอกสาร HTML5 ที่มีโครงสร้างถูกต้องได้
  2. ใช้ tag พื้นฐาน เช่น heading, paragraph, list, link และ image ได้เหมาะสม
  3. ใช้ semantic HTML เพื่อเพิ่มความหมายให้โครงสร้างหน้าเว็บได้
  4. สร้างฟอร์มและใช้ HTML5 validation attribute ได้
  5. สร้างตารางและฝัง multimedia ในหน้าเว็บได้
  6. ใช้ id, class, data-*, aria-* และ tabindex ได้ถูกบริบท

หัวข้อย่อย

ลำดับ หัวข้อ ไฟล์บทเรียน สไลด์
1 โครงสร้างเอกสาร HTML5 webprogram-02-html-markup-01-html5-document-structure.md webprogram-02-html-markup-01-html5-document-structure-slides.mdx
2 Tag พื้นฐาน webprogram-02-html-markup-02-basic-tags.md webprogram-02-html-markup-02-basic-tags-slides.mdx
3 Semantic HTML webprogram-02-html-markup-03-semantic-html.md webprogram-02-html-markup-03-semantic-html-slides.mdx
4 ฟอร์มและ Input webprogram-02-html-markup-04-forms-input.md webprogram-02-html-markup-04-forms-input-slides.mdx
5 ตารางและ Multimedia webprogram-02-html-markup-05-table-multimedia.md webprogram-02-html-markup-05-table-multimedia-slides.mdx
6 Attribute พิเศษ webprogram-02-html-markup-06-special-attributes.md webprogram-02-html-markup-06-special-attributes-slides.mdx

กิจกรรมประจำสัปดาห์

สร้างหน้าเว็บ “แนะนำรายวิชา” โดยใช้ HTML เท่านั้น ให้มีส่วนหัว เมนูนำทาง เนื้อหาหลัก รายการหัวข้อเรียน รูปภาพ ตารางเวลาเรียน ฟอร์มติดต่อ และ footer

แบบทดสอบหลังเรียนประจำสัปดาห์

  1. <!DOCTYPE html> ใช้เพื่ออะไร
  2. alt ของรูปภาพสำคัญอย่างไร
  3. เพราะเหตุใด main ควรมีเพียง 1 อันต่อหน้า
  4. label ช่วยเรื่อง accessibility อย่างไร
  5. colspan และ rowspan ต่างกันอย่างไร
  6. id และ class ใช้ต่างกันอย่างไร
  7. aria-expanded เหมาะกับ UI ประเภทใด

กลับรายวิชา