Fundamentals
What is HTML
อธิบายและแยกแยะว่า HTML คืออะไร ทำหน้าที่อะไรบนเว็บ และประกอบโครงสร้างพื้นฐานของหน้าเว็บร่วมกับ CSS และ JavaScript
1) The Problem: เมื่อเว็บมีแต่ข้อความดิบ
ลองนึกภาพว่าคุณส่งเอกสารข้อความธรรมดา (Plain Text) ก้อนหนึ่งให้เบราว์เซอร์ โดยมีทั้งชื่อบทความ เนื้อหาย่อหน้า และลิงก์ปุ่มกดปะปนกันอยู่ สิ่งที่เกิดขึ้นคือ คอมพิวเตอร์จะไม่รู้เลยว่าข้อความท่อนไหนคือ "หัวข้อสำคัญ" ท่อนไหนคือ "เนื้อหาทั่วไป" หรือท่อนไหนคือ "จุดที่คลิกได้" ทุกอย่างจะถูกมองเป็นเพียงตัวอักษรธรรมดาที่ไม่มีลำดับชั้น (Hierarchy) นี่คือปัญหาตั้งต้นที่นำไปสู่การคิดค้น **HTML** เพื่อนำ "Markup" เข้ามาติดป้ายกำกับบทบาทและความหมายให้กับทุกข้อความบนหน้าเว็บ
- ข้อความดิบไม่มีบริบท: คอมพิวเตอร์ไม่รู้ว่าข้อความใดคือหัวข้อ ย่อหน้า หรือลิงก์
- Screen Reader เข้าถึงไม่ได้: เครื่องมือช่วยผู้พิการไม่สามารถอ่านข้ามหัวข้อหรือบอกโครงสร้างที่ถูกต้องได้
- Search Engine จัดลำดับไม่ได้: เครื่องมือค้นหาแยกไม่ออกว่าส่วนไหนคือเนื้อหาสำคัญของหน้าเว็บ
2) Origin & Meaning: ถอดรหัส HyperText และ Markup Language
HTML ย่อมาจาก **HyperText Markup Language** เกิดขึ้นในปี 1989 โดย **Tim Berners-Lee** นักวิทยาศาสตร์ที่สถาบันวิจัย **CERN** ซึ่งประสบปัญหาว่านักวิจัยทั่วโลกแลกเปลี่ยนเอกสารกันได้ยากมาก เพราะคอมพิวเตอร์แต่ละเครื่องใช้ฟอร์แมตไฟล์คนละแบบ เขาจึงรวม 2 แนวคิดหลักเข้าด้วยกัน: 1. **HyperText (ข้อความหลายมิติ)**: ข้อความที่ไม่ได้ถูกจำกัดให้อ่านเรียงบรรทัด แต่สามารถคลิกลิงก์ (Hyperlink) เพื่อเปิดกระโดดข้ามไปยังเอกสารอื่นได้ทันทีทั่วโลก 2. **Markup Language (ภาษากำกับข้อความ)**: การใช้สัญลักษณ์หรือแท็ก (Tag) สั้นๆ ครอบข้อความ เพื่อระบุชนิดและบทบาทของข้อมูลให้คอมพิวเตอร์ทุกเครื่องเข้าใจตรงกัน
- HTML ไม่ใช่ภาษาโปรแกรมมิ่ง (Programming Language) เพราะไม่มีตรรกะคำนวณหรือเงื่อนไข if/else
- HTML เป็นภาษาโครงสร้าง (Markup Language) ที่ทำหน้าที่จัดหมวดหมู่และให้ความหมายแก่เนื้อหา
- เอกสาร HTML สามารถเปิดอ่านได้เหมือนกันบนทุกระบบปฏิบัติการและทุกเบราว์เซอร์ (Universal Standard)
3) Mental Model: การแบ่งหน้าที่ระหว่าง HTML, CSS และ JavaScript
ในการสร้างเว็บไซต์ยุคปัจจุบัน มี 3 เทคโนโลยีหลักที่ทำงานร่วมกันเป็นทีม หากเปรียบเทียบหน้าเว็บเป็น "บ้านหนึ่งหลัง": - **HTML = โครงสร้างบ้าน**: วางเสา ผนัง ประตู หน้าต่าง และกำหนดผังห้องว่าอะไรอยู่ที่ไหน - **CSS = การตกแต่งและทาสี**: เลือกสีผนัง ขนาดพื้นที่ ช่องไฟ และจัดสไตล์ให้สวยงามน่าอยู่ - **JavaScript = ระบบไฟฟ้าและกลไก**: สวิตช์ไฟ ประตูอัตโนมัติ และระบบที่ตอบสนองเมื่อมีคนกดใช้งาน ถ้าไม่มีโครงสร้าง HTML ที่แข็งแรงและชัดเจน ต่อให้ใส่ CSS สวยงามหรือเขียน JavaScript ซับซ้อนแค่ไหน เว็บไซต์ก็จะพังง่ายและดูแลยาก
| เทคโนโลยี | หน้าที่หลัก | คำถามที่ตอบ | ตัวอย่าง |
|---|---|---|---|
| HTML | โครงสร้างและความหมาย | มีข้อมูลอะไรบ้างบนหน้านี้? | <h1>, <p>, <a>, <img> |
| CSS | รูปลักษณ์และการจัดวาง | หน้าตาและสีสันเป็นอย่างไร? | color: blue, font-size: 16px |
| JavaScript | พฤติกรรมและการโต้ตอบ | ทำอะไรเมื่อผู้ใช้คลิกหรือสั่งงาน? | เปิดกล่องข้อความ, ส่งข้อมูล |
4) Core Syntax: รู้จัก Tag และการห่อหุ้มข้อความ
หัวใจของ HTML คือการใช้ **Tag** เพื่อห่อหุ้มข้อความธรรมดาให้กลายเป็น **Element** ที่มีความหมาย รูปแบบพื้นฐานประกอบด้วย: - **Opening Tag (แท็กเปิด)**: บอกจุดเริ่มต้นและชนิด เช่น `<p>` - **Content (เนื้อหา)**: ข้อความหรือข้อมูลที่ต้องการแสดงผล - **Closing Tag (แท็กปิด)**: บอกจุดสิ้นสุด โดยมีเครื่องหมาย Slash `/` เช่น `</p>` ตัวอย่างแท็กพื้นฐาน 3 ชนิดที่พบบ่อยที่สุด:
แต่ละแท็กระบุความหมายชัดเจน: <h1> คือหัวข้อหลัก, <p> คือย่อหน้า, และ <a> คือลิงก์ที่พาข้ามเอกสาร
- แท็กสื่อความหมาย (Semantics): เลือกแท็กจากบทบาทของข้อมูล ไม่ใช่เลือกเพราะหน้าตาตัวหนังสือ
- เปิดแล้วต้องปิด: แท็กคู่ส่วนใหญ่ต้องมีแท็กปิดเสมอ เพื่อกำหนดขอบเขตของเนื้อหาให้ชัดเจน
- คุณสมบัติเสริม (Attribute): แท็กสามารถมีข้อมูลเสริมได้ เช่น href ที่บอกว่าลิงก์จะพาไปที่ URL ใด
5) Demonstration: ข้อความธรรมดา vs โค้ด HTML
ลองดูตัวอย่างเปรียบเทียบระหว่างการเขียนข้อความธรรมดา กับการครอบด้วย HTML แท็กที่ถูกต้อง เพื่อดูว่าความชัดเจนของโครงสร้างเปลี่ยนไปอย่างไร
Plain Text vs Semantic HTML
เปรียบเทียบการสื่อสารข้อมูลระหว่างข้อความธรรมดาที่ไม่มีแท็ก กับโค้ด HTML ที่กำกับบทบาทชัดเจน
คอมพิวเตอร์และเบราว์เซอร์ไม่รู้ว่าบรรทัดไหนคือหัวข้อ บรรทัดไหนคือเนื้อหา หรือท่อนไหนคือลิงก์
เบราว์เซอร์เข้าใจทันทีว่า <h1> คือหัวข้อหลัก, <p> คือย่อหน้า, และ <a> คือจุดเชื่อมโยงที่คลิกได้
- เบราว์เซอร์จัดลำดับชั้นการแสดงผลเริ่มต้นได้ถูกต้องทันทีแม้ยังไม่มี CSS
- Screen Reader สามารถประกาศว่านี่คือหัวข้อและมีลิงก์ให้อ่านต่อ
- พร้อมสำหรับนำ CSS มาตกแต่งสีสันและขนาดได้ตรงจุดตามชื่อแท็ก
6) Behind the Scenes: เบราว์เซอร์แปลง HTML สู่หน้าจออย่างไร (HTML to DOM)
เมื่อคุณเปิดหน้าเว็บ เบราว์เซอร์จะดาวน์โหลดไฟล์ HTML มาในรูปแบบข้อความตัวอักษร จากนั้นจะทำกระบวนการที่เรียกว่า **Parsing** (การถอดรหัสโครงสร้างโค้ด) เบราว์เซอร์จะอ่านแท็กเปิด-ปิดทีละตัว แล้วสร้างโครงสร้างต้นไม้ในหน่วยความจำที่เรียกว่า **DOM (Document Object Model)** เพื่อให้คอมพิวเตอร์เข้าใจความสัมพันธ์ว่าแท็กใดอยู่ข้างในแท็กใด จากนั้นจึงนำ CSS มารวมร่างเพื่อวาดภาพ (Render) ออกมาเป็นหน้าเว็บจริงที่คุณมองเห็นบนหน้าจอ
- HTML Source: ข้อความโค้ดแท็กที่เขียนขึ้น
- DOM Tree: โครงสร้างข้อมูลจำลองในหน่วยความจำที่เบราว์เซอร์ใช้ประมวลผล
- Rendered Page: ผลลัพธ์หน้าเว็บสุดท้ายที่ปรากฏสู่สายตาผู้ใช้
7) Checkpoint & Next Steps: ตรวจสอบความเข้าใจและก้าวต่อไป
ทดสอบความเข้าใจเบื้องต้นเกี่ยวกับบทบาทของ HTML และความหมายของ Markup ก่อนก้าวเข้าสู่การเรียนรู้โครงสร้างเอกสารจริงในบทถัดไป
ทดสอบความเข้าใจ: พื้นฐาน HTML
ตอบคำถามเพื่อเช็กความเข้าใจบทบาทของ HTML และการทำงานของแท็ก
หากคุณต้องการทำให้ปุ่มบนหน้าเว็บ 'เปลี่ยนเป็นสีส้มเมื่อผู้ใช้เลื่อนเมาส์ไปชี้' งานนี้เป็นหน้าที่หลักของเทคโนโลยีใด?
เหตุผลสำคัญที่สุดในการใช้แท็ก <h1> ครอบข้อความหัวข้อ แทนการพิมพ์ข้อความธรรมดาคืออะไร?
แท็กปิดใน HTML แตกต่างจากแท็กเปิดตรงที่มีเครื่องหมายใดนำหน้าชื่อแท็ก?
ตอบเป็นเครื่องหมายตัวเดียว เช่น / หรือ >
- HTML คือรากฐาน: กำหนดโครงสร้างและความหมายของเนื้อหา (Structure & Semantics)
- HyperText & Markup: เชื่อมโยงเอกสารได้ทั่วโลก และใช้แท็กระบุบทบาทของข้อความ
- ก้าวต่อไป: ในบทถัดไป 'HTML Document Structure' เราจะมาเรียนรู้การประกอบร่างเอกสาร HTML ที่สมบูรณ์ (สมมติฐานความรู้ก่อนหน้า: ไม่มี — บทนี้เป็นบทเริ่มต้น)