HTML — โครงสร้างและเนื้อหา
ลองนึกถึงทุกหน้าเว็บที่คุณเคยเปิดใน browser ภายใต้สีสัน ฟอนต์ และแอนิเมชันเหล่านั้น มีไฟล์ข้อความธรรมดาที่สร้างจาก HTML อยู่ HTML คือ โครงกระดูก ที่ยึดเนื้อหาเอาไว้และให้ความหมายกับเนื้อหานั้น ส่วน CSS เพิ่มดีไซน์เชิงภาพทับลงไป ขณะที่ JavaScript เพิ่มความสามารถในการโต้ตอบ แต่ทุกอย่างเริ่มต้นที่นี่
ถ้าคุณเคยสร้างดีไซน์ใน Figma คุณก็เข้าใจเรื่องโครงสร้างอยู่แล้ว Frame, layer, component และ text box ทั้งหมดมีลำดับเชิงตรรกะของตัวเอง HTML ก็ทำงานแบบเดียวกัน — เป็นรายการของบล็อกเนื้อหาที่มีชื่อ ซ้อนอยู่ภายในกันและกัน ที่ browser อ่านจากบนลงล่าง ไม่มีอะไรต้องคอมไพล์ ไม่มีอะไรต้องติดตั้ง แค่เปิดไฟล์ข้อความ บันทึกเป็น .html แล้วลากเข้าไปใน browser
หน้าเว็บแรกของคุณ
หัวข้อที่มีชื่อว่า “หน้าเว็บแรกของคุณ”โค้ดด้านล่างนี้คือหน้าเว็บที่สมบูรณ์และใช้งานได้จริง ตัวอย่างนี้เล็กมาก — แต่ทุกเว็บไซต์จริงก็เริ่มต้นเล็กแบบนี้ทั้งนั้น ลองคลิกเข้าไปในตัวแก้ไขแล้วเปลี่ยนข้อความดู ส่วนพรีวิวทางขวาจะอัปเดตทันที
สิ่งที่คุณจะได้เรียนในโมดูลนี้
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียนในโมดูลนี้”| บทเรียน | สิ่งที่คุณจะทำได้ |
|---|---|
| Elements & Tags | เขียน HTML element ใดก็ได้อย่างถูกต้อง |
| Text & Headings | จัดโครงสร้างหน้าเว็บเหมือนเอกสาร |
| Links | เชื่อมต่อหน้าเว็บและเปิดเว็บไซต์ภายนอก |
| Images | เพิ่มรูปภาพพร้อมคำอธิบายที่เหมาะสม |
| Lists | สร้างลิสต์แบบมีลำดับและไม่มีลำดับ |
| Semantic Structure | จับคู่ region ของดีไซน์กับ HTML container ที่ถูกต้อง |
| Forms | สร้างฟอร์มติดต่อหรือสมัครสมาชิกที่ใช้งานได้จริง |
เมื่อจบโมดูลนี้ คุณจะสามารถนำ mockup ดีไซน์ใดก็ได้มาแปลงโครงสร้างเนื้อหาของตัวเองให้กลายเป็น HTML ที่ถูกต้อง พร้อมสำหรับการจัดสไตล์