|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "20c72cf2e5b0050d38ca3cb14a75a9df",
|
|
|
"translation_date": "2025-10-23T21:05:35+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/README.md",
|
|
|
"language_code": "th"
|
|
|
}
|
|
|
-->
|
|
|
# โครงการ Terrarium ตอนที่ 1: แนะนำ HTML
|
|
|
|
|
|
|
|
|
> ภาพวาดโดย [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
HTML หรือ HyperText Markup Language เป็นพื้นฐานของทุกเว็บไซต์ที่คุณเคยเยี่ยมชม ลองนึกถึง HTML ว่าเป็นโครงกระดูกที่ให้โครงสร้างแก่หน้าเว็บ – มันกำหนดว่าคอนเทนต์จะอยู่ที่ไหน จัดระเบียบอย่างไร และแต่ละส่วนมีความหมายอย่างไร ในขณะที่ CSS จะช่วยตกแต่ง HTML ด้วยสีและการจัดวาง และ JavaScript จะเพิ่มความมีชีวิตชีวาด้วยการโต้ตอบ HTML เป็นโครงสร้างสำคัญที่ทำให้ทุกอย่างเป็นไปได้
|
|
|
|
|
|
ในบทเรียนนี้ คุณจะสร้างโครงสร้าง HTML สำหรับอินเทอร์เฟซ terrarium เสมือนจริง โครงการที่ลงมือทำนี้จะช่วยให้คุณเรียนรู้แนวคิดพื้นฐานของ HTML ในขณะที่สร้างสิ่งที่น่าสนใจทางสายตา คุณจะได้เรียนรู้วิธีจัดระเบียบคอนเทนต์โดยใช้องค์ประกอบเชิงความหมาย ทำงานกับภาพ และสร้างพื้นฐานสำหรับแอปพลิเคชันเว็บที่มีการโต้ตอบ
|
|
|
|
|
|
เมื่อจบบทเรียนนี้ คุณจะมีหน้า HTML ที่แสดงภาพต้นไม้ในคอลัมน์ที่จัดระเบียบ พร้อมสำหรับการตกแต่งในบทเรียนถัดไป ไม่ต้องกังวลหากมันดูเรียบง่ายในตอนแรก – นั่นคือสิ่งที่ HTML ควรทำก่อนที่ CSS จะเพิ่มความสวยงาม
|
|
|
|
|
|
## แบบทดสอบก่อนเรียน
|
|
|
|
|
|
[แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/15)
|
|
|
|
|
|
> 📺 **ดูและเรียนรู้**: ดูวิดีโอแนะนำที่มีประโยชน์นี้
|
|
|
>
|
|
|
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
|
|
|
|
|
|
## การตั้งค่าโครงการของคุณ
|
|
|
|
|
|
ก่อนที่เราจะเริ่มเขียนโค้ด HTML มาเตรียมพื้นที่ทำงานสำหรับโครงการ terrarium ของคุณ การสร้างโครงสร้างไฟล์ที่จัดระเบียบตั้งแต่เริ่มต้นเป็นนิสัยที่สำคัญที่จะช่วยคุณได้ตลอดการเดินทางในสายงานพัฒนาเว็บ
|
|
|
|
|
|
### งาน: สร้างโครงสร้างโครงการของคุณ
|
|
|
|
|
|
คุณจะสร้างโฟลเดอร์เฉพาะสำหรับโครงการ terrarium และเพิ่มไฟล์ HTML แรกของคุณ มีสองวิธีที่คุณสามารถใช้ได้:
|
|
|
|
|
|
**ตัวเลือกที่ 1: ใช้ Visual Studio Code**
|
|
|
1. เปิด Visual Studio Code
|
|
|
2. คลิก "File" → "Open Folder" หรือใช้ `Ctrl+K, Ctrl+O` (Windows/Linux) หรือ `Cmd+K, Cmd+O` (Mac)
|
|
|
3. สร้างโฟลเดอร์ใหม่ชื่อ `terrarium` และเลือกมัน
|
|
|
4. ในแถบ Explorer คลิกไอคอน "New File"
|
|
|
5. ตั้งชื่อไฟล์ของคุณว่า `index.html`
|
|
|
|
|
|
|
|
|
|
|
|
**ตัวเลือกที่ 2: ใช้คำสั่ง Terminal**
|
|
|
```bash
|
|
|
mkdir terrarium
|
|
|
cd terrarium
|
|
|
touch index.html
|
|
|
code index.html
|
|
|
```
|
|
|
|
|
|
**สิ่งที่คำสั่งเหล่านี้ทำ:**
|
|
|
- **สร้าง** ไดเรกทอรีใหม่ชื่อ `terrarium` สำหรับโครงการของคุณ
|
|
|
- **เข้าสู่**ไดเรกทอรี terrarium
|
|
|
- **สร้าง**ไฟล์ `index.html` ว่างเปล่า
|
|
|
- **เปิด**ไฟล์ใน Visual Studio Code เพื่อแก้ไข
|
|
|
|
|
|
> 💡 **เคล็ดลับมือโปร**: ชื่อไฟล์ `index.html` มีความพิเศษในงานพัฒนาเว็บ เมื่อมีคนเยี่ยมชมเว็บไซต์ เบราว์เซอร์จะค้นหา `index.html` โดยอัตโนมัติเป็นหน้าเริ่มต้นที่จะแสดง ซึ่งหมายความว่า URL เช่น `https://mysite.com/projects/` จะให้บริการไฟล์ `index.html` จากโฟลเดอร์ `projects` โดยไม่จำเป็นต้องระบุชื่อไฟล์ใน URL
|
|
|
|
|
|
## ทำความเข้าใจโครงสร้างเอกสาร HTML
|
|
|
|
|
|
เอกสาร HTML ทุกฉบับมีโครงสร้างเฉพาะที่เบราว์เซอร์ต้องการเพื่อแสดงผลอย่างถูกต้อง ลองนึกถึงโครงสร้างนี้เหมือนจดหมายทางการ – มันมีองค์ประกอบที่จำเป็นในลำดับที่เฉพาะเจาะจงที่ช่วยให้ผู้รับ (ในกรณีนี้คือเบราว์เซอร์) ประมวลผลคอนเทนต์ได้อย่างเหมาะสม
|
|
|
|
|
|
มาเริ่มต้นด้วยการเพิ่มพื้นฐานที่จำเป็นที่เอกสาร HTML ทุกฉบับต้องมี
|
|
|
|
|
|
### การประกาศ DOCTYPE และองค์ประกอบราก
|
|
|
|
|
|
สองบรรทัดแรกของไฟล์ HTML ใด ๆ ทำหน้าที่เป็น "การแนะนำ" เอกสารให้กับเบราว์เซอร์:
|
|
|
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html></html>
|
|
|
```
|
|
|
|
|
|
**ทำความเข้าใจว่ารหัสนี้ทำอะไร:**
|
|
|
- **ประกาศ**ประเภทเอกสารเป็น HTML5 โดยใช้ `<!DOCTYPE html>`
|
|
|
- **สร้าง**องค์ประกอบราก `<html>` ที่จะมีคอนเทนต์ทั้งหมดของหน้า
|
|
|
- **กำหนด**มาตรฐานเว็บสมัยใหม่สำหรับการแสดงผลเบราว์เซอร์ที่เหมาะสม
|
|
|
- **รับรอง**การแสดงผลที่สม่ำเสมอในเบราว์เซอร์และอุปกรณ์ต่าง ๆ
|
|
|
|
|
|
> 💡 **เคล็ดลับ VS Code**: วางเมาส์เหนือแท็ก HTML ใด ๆ ใน VS Code เพื่อดูข้อมูลที่เป็นประโยชน์จาก MDN Web Docs รวมถึงตัวอย่างการใช้งานและรายละเอียดความเข้ากันได้ของเบราว์เซอร์
|
|
|
|
|
|
> 📚 **เรียนรู้เพิ่มเติม**: การประกาศ DOCTYPE ป้องกันเบราว์เซอร์จากการเข้าสู่ "quirks mode" ซึ่งเคยใช้เพื่อสนับสนุนเว็บไซต์เก่ามาก ๆ การพัฒนาเว็บสมัยใหม่ใช้การประกาศ `<!DOCTYPE html>` ที่เรียบง่ายเพื่อรับรอง [การแสดงผลที่สอดคล้องกับมาตรฐาน](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)
|
|
|
|
|
|
## การเพิ่มข้อมูลเมตาที่จำเป็นของเอกสาร
|
|
|
|
|
|
ส่วน `<head>` ของเอกสาร HTML มีข้อมูลสำคัญที่เบราว์เซอร์และเครื่องมือค้นหาต้องการ แต่ผู้เยี่ยมชมจะไม่เห็นโดยตรงบนหน้า ลองนึกถึงมันว่าเป็นข้อมูล "เบื้องหลัง" ที่ช่วยให้หน้าเว็บของคุณทำงานได้อย่างถูกต้องและปรากฏอย่างเหมาะสมในอุปกรณ์และแพลตฟอร์มต่าง ๆ
|
|
|
|
|
|
ข้อมูลเมตานี้บอกเบราว์เซอร์ว่าจะแสดงผลหน้าเว็บของคุณอย่างไร ใช้การเข้ารหัสตัวอักษรแบบใด และจัดการกับขนาดหน้าจออย่างไร – ทั้งหมดนี้จำเป็นสำหรับการสร้างหน้าเว็บที่เป็นมืออาชีพและเข้าถึงได้
|
|
|
|
|
|
### งาน: เพิ่มส่วนหัวของเอกสาร
|
|
|
|
|
|
แทรกส่วน `<head>` นี้ระหว่างแท็ก `<html>` เปิดและปิดของคุณ:
|
|
|
|
|
|
```html
|
|
|
<head>
|
|
|
<title>Welcome to my Virtual Terrarium</title>
|
|
|
<meta charset="utf-8" />
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
</head>
|
|
|
```
|
|
|
|
|
|
**แยกย่อยสิ่งที่แต่ละองค์ประกอบทำ:**
|
|
|
- **ตั้งค่า**ชื่อหน้าที่ปรากฏในแท็บเบราว์เซอร์และผลการค้นหา
|
|
|
- **ระบุ**การเข้ารหัสตัวอักษร UTF-8 เพื่อแสดงข้อความอย่างถูกต้องทั่วโลก
|
|
|
- **รับรอง**ความเข้ากันได้กับเวอร์ชันสมัยใหม่ของ Internet Explorer
|
|
|
- **กำหนดค่า**การออกแบบที่ตอบสนองโดยตั้งค่ามุมมองให้ตรงกับความกว้างของอุปกรณ์
|
|
|
- **ควบคุม**ระดับการซูมเริ่มต้นเพื่อแสดงคอนเทนต์ในขนาดธรรมชาติ
|
|
|
|
|
|
> 🤔 **ลองคิดดู**: จะเกิดอะไรขึ้นหากคุณตั้งค่าแท็กเมตา viewport แบบนี้: `<meta name="viewport" content="width=600">`? สิ่งนี้จะบังคับให้หน้าเว็บมีความกว้าง 600 พิกเซลเสมอ ซึ่งจะทำลายการออกแบบที่ตอบสนอง! เรียนรู้เพิ่มเติมเกี่ยวกับ [การกำหนดค่ามุมมองที่เหมาะสม](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)
|
|
|
|
|
|
## การสร้างเนื้อหาเอกสาร
|
|
|
|
|
|
องค์ประกอบ `<body>` มีคอนเทนต์ที่มองเห็นได้ทั้งหมดของหน้าเว็บของคุณ – ทุกสิ่งที่ผู้ใช้จะเห็นและโต้ตอบ ในขณะที่ส่วน `<head>` ให้คำแนะนำแก่เบราว์เซอร์ ส่วน `<body>` มีคอนเทนต์จริง: ข้อความ รูปภาพ ปุ่ม และองค์ประกอบอื่น ๆ ที่สร้างอินเทอร์เฟซผู้ใช้ของคุณ
|
|
|
|
|
|
มาเพิ่มโครงสร้างของส่วน body และทำความเข้าใจว่าแท็ก HTML ทำงานร่วมกันอย่างไรเพื่อสร้างคอนเทนต์ที่มีความหมาย
|
|
|
|
|
|
### ทำความเข้าใจโครงสร้างแท็ก HTML
|
|
|
|
|
|
HTML ใช้แท็กคู่เพื่อกำหนดองค์ประกอบ แท็กส่วนใหญ่มีแท็กเปิด เช่น `<p>` และแท็กปิด เช่น `</p>` โดยมีคอนเทนต์อยู่ระหว่าง: `<p>Hello, world!</p>` สิ่งนี้สร้างองค์ประกอบย่อหน้าที่มีข้อความ "Hello, world!"
|
|
|
|
|
|
### งาน: เพิ่มองค์ประกอบ Body
|
|
|
|
|
|
อัปเดตไฟล์ HTML ของคุณเพื่อรวมองค์ประกอบ `<body>`:
|
|
|
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>Welcome to my Virtual Terrarium</title>
|
|
|
<meta charset="utf-8" />
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
</head>
|
|
|
<body></body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
**นี่คือสิ่งที่โครงสร้างทั้งหมดนี้ให้:**
|
|
|
- **กำหนด**กรอบเอกสาร HTML5 พื้นฐาน
|
|
|
- **รวม**ข้อมูลเมตาที่จำเป็นสำหรับการแสดงผลเบราว์เซอร์ที่เหมาะสม
|
|
|
- **สร้าง** body ว่างเปล่าพร้อมสำหรับคอนเทนต์ที่มองเห็นได้ของคุณ
|
|
|
- **ปฏิบัติตาม**แนวทางปฏิบัติที่ดีที่สุดในการพัฒนาเว็บสมัยใหม่
|
|
|
|
|
|
ตอนนี้คุณพร้อมที่จะเพิ่มองค์ประกอบที่มองเห็นได้ของ terrarium แล้ว เราจะใช้องค์ประกอบ `<div>` เป็นตัวจัดระเบียบส่วนต่าง ๆ ของคอนเทนต์ และองค์ประกอบ `<img>` เพื่อแสดงภาพต้นไม้
|
|
|
|
|
|
### การทำงานกับภาพและตัวจัดระเบียบเลย์เอาต์
|
|
|
|
|
|
ภาพมีความพิเศษใน HTML เพราะใช้แท็ก "ปิดตัวเอง" ต่างจากองค์ประกอบ เช่น `<p></p>` ที่ครอบคลุมคอนเทนต์ แท็ก `<img>` มีข้อมูลทั้งหมดที่ต้องการภายในแท็กเองโดยใช้แอตทริบิวต์ เช่น `src` สำหรับเส้นทางไฟล์ภาพ และ `alt` สำหรับการเข้าถึง
|
|
|
|
|
|
ก่อนเพิ่มภาพลงใน HTML ของคุณ คุณจะต้องจัดระเบียบไฟล์โครงการของคุณอย่างเหมาะสมโดยการสร้างโฟลเดอร์ภาพและเพิ่มกราฟิกต้นไม้
|
|
|
|
|
|
**ขั้นแรก ตั้งค่าไฟล์ภาพของคุณ:**
|
|
|
1. สร้างโฟลเดอร์ชื่อ `images` ภายในโฟลเดอร์โครงการ terrarium ของคุณ
|
|
|
2. ดาวน์โหลดภาพต้นไม้จาก [โฟลเดอร์โซลูชัน](../../../../3-terrarium/solution/images) (รวมทั้งหมด 14 ภาพ)
|
|
|
3. คัดลอกภาพต้นไม้ทั้งหมดลงในโฟลเดอร์ `images` ใหม่ของคุณ
|
|
|
|
|
|
### งาน: สร้างเลย์เอาต์การแสดงผลต้นไม้
|
|
|
|
|
|
ตอนนี้เพิ่มภาพต้นไม้ที่จัดระเบียบในสองคอลัมน์ระหว่างแท็ก `<body></body>` ของคุณ:
|
|
|
|
|
|
```html
|
|
|
<div id="page">
|
|
|
<div id="left-container" class="container">
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.th.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="right-container" class="container">
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.th.png" />
|
|
|
</div>
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.th.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
**ทีละขั้นตอน นี่คือสิ่งที่เกิดขึ้นในโค้ดนี้:**
|
|
|
- **สร้าง**ตัวจัดระเบียบหน้าเว็บหลักด้วย `id="page"` เพื่อเก็บคอนเทนต์ทั้งหมด
|
|
|
- **กำหนด**ตัวจัดระเบียบคอลัมน์สองคอลัมน์: `left-container` และ `right-container`
|
|
|
- **จัดระเบียบ**ต้นไม้ 7 ต้นในคอลัมน์ซ้ายและ 7 ต้นในคอลัมน์ขวา
|
|
|
- **ครอบคลุม**ภาพต้นไม้แต่ละภาพใน div `plant-holder` เพื่อการจัดตำแหน่งเฉพาะ
|
|
|
- **ใช้**ชื่อคลาสที่สม่ำเสมอสำหรับการตกแต่ง CSS ในบทเรียนถัดไป
|
|
|
- **กำหนด** ID เฉพาะให้กับภาพต้นไม้แต่ละภาพสำหรับการโต้ตอบ JavaScript ในภายหลัง
|
|
|
- **รวม**เส้นทางไฟล์ที่เหมาะสมที่ชี้ไปยังโฟลเดอร์ภาพ
|
|
|
|
|
|
> 🤔 **ลองพิจารณา**: สังเกตว่าภาพทั้งหมดในปัจจุบันมีข้อความ alt เดียวกันว่า "plant" ซึ่งไม่เหมาะสำหรับการเข้าถึง ผู้ใช้เครื่องอ่านหน้าจอจะได้ยินคำว่า "plant" ซ้ำ ๆ 14 ครั้งโดยไม่รู้ว่าภาพแต่ละภาพแสดงต้นไม้ชนิดใด คุณคิดว่าข้อความ alt ที่อธิบายได้ดีกว่าสำหรับแต่ละภาพคืออะไร?
|
|
|
|
|
|
> 📝 **ประเภทองค์ประกอบ HTML**: องค์ประกอบ `<div>` เป็น "block-level" และใช้ความกว้างเต็ม ในขณะที่องค์ประกอบ `<span>` เป็น "inline" และใช้ความกว้างที่จำเป็นเท่านั้น คุณคิดว่าจะเกิดอะไรขึ้นหากคุณเปลี่ยนแท็ก `<div>` ทั้งหมดเป็นแท็ก `<span>`?
|
|
|
|
|
|
เมื่อเพิ่มมาร์กอัปนี้แล้ว ต้นไม้จะปรากฏบนหน้าจอ แม้ว่ามันจะยังดูไม่สวยงาม – นั่นคือสิ่งที่ CSS จะช่วยในบทเรียนถัดไป! ตอนนี้คุณมีพื้นฐาน HTML ที่มั่นคงที่จัดระเบียบคอนเทนต์ของคุณอย่างเหมาะสมและปฏิบัติตามแนวทางการเข้าถึงที่ดีที่สุด
|
|
|
|
|
|
## การใช้ HTML เชิงความหมายเพื่อการเข้าถึง
|
|
|
|
|
|
HTML เชิงความหมายหมายถึงการเลือกใช้องค์ประกอบ HTML ตามความหมายและวัตถุประสงค์ ไม่ใช่แค่ลักษณะการแสดงผล เมื่อคุณใช้มาร์กอัปเชิงความหมาย คุณกำลังสื่อสารโครงสร้างและความหมายของคอนเทนต์ของคุณไปยังเบราว์เซอร์ เครื่องมือค้นหา และเทคโนโลยีช่วยเหลือ เช่น เครื่องอ่านหน้าจอ
|
|
|
|
|
|
วิธีนี้ทำให้เว็บไซต์ของคุณเข้าถึงได้มากขึ้นสำหรับผู้ใช้ที่มีความบกพร่อง และช่วยให้เครื่องมือค้นหาเข้าใจคอนเทนต์ของคุณได้ดีขึ้น เป็นหลักการพื้นฐานของการพัฒนาเว็บสมัยใหม่ที่สร้างประสบการณ์ที่ดีขึ้นสำหรับทุกคน
|
|
|
|
|
|
### การเพิ่มชื่อหน้าเชิงความหมาย
|
|
|
|
|
|
มาเพิ่มหัวข้อที่เหมาะสมให้กับหน้า terrarium ของคุณ แทรกบรรทัดนี้หลังแท็ก `<body>` เปิดของคุณ:
|
|
|
|
|
|
```html
|
|
|
<h1>My Terrarium</h1>
|
|
|
```
|
|
|
|
|
|
**ทำไมมาร์กอัปเชิงความหมายถึงสำคัญ:**
|
|
|
- **ช่วย**เครื่องอ่านหน้าจอในการนำทางและเข้าใจโครงสร้างหน้า
|
|
|
- **ปรับปรุง**การเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO) โดยการชี้แจงลำดับชั้นของคอนเทนต์
|
|
|
- **เพิ่ม**การเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางสายตาหรือความแตกต่างทางปัญญา
|
|
|
- **สร้าง**ประสบการณ์ผู้ใช้ที่ดีขึ้นในทุกอุปกรณ์และแพลตฟอร์ม
|
|
|
- **ปฏิบัติตาม**มาตรฐานเว็บและแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนามืออาชีพ
|
|
|
|
|
|
**ตัวอย่างการเลือกเชิงความหมาย vs. ไม่เชิงความหมาย:**
|
|
|
|
|
|
| วัตถุประสงค์ | ✅ ตัวเลือกเชิงความหมาย | ❌ ตัวเลือกไม่เชิงความหมาย |
|
|
|
|---------|-------------------|------------------------|
|
|
|
| หัวข้อหลัก | `<h1>Title</h1>` | `<div class="big-text">Title</div>` |
|
|
|
| การนำทาง | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` |
|
|
|
| ปุ่ม | `<button>Click me</button>` | `<span onclick="...">Click me</span>` |
|
|
|
| คอนเทนต์บทความ | `<article><p></p></article>` | `<div class="content"><div></div></div>` |
|
|
|
|
|
|
> 🎥 **ดูการทำงาน**: ดู [วิธีที่เครื่องอ่านหน้าจอโต้ตอบกับหน้าเว็บ](https://www.youtube.com/watch?v=OUDV1gqs9GA) เพื่อเข้าใจว่าทำไมมาร์กอัปเชิงความหมายถึงสำคัญสำหรับการเข้าถึง สังเกตว่าโครงสร้าง HTML ที่เหมาะสมช่วยให้ผู้ใช้นำทางได้อย่างมีประสิทธิภาพ
|
|
|
|
|
|
## การสร้างตัวจัดระเบียบ Terrarium
|
|
|
|
|
|
ตอนนี้มาเพิ่มโครงสร้าง HTML สำหรับ terrarium เอง – ภาชนะแก้วที่ต้นไม้จะถูกวางในที่สุด ส่วนนี้แสดงให้เห็นถึงแนวคิดสำคัญ: HTML ให้โครงสร้าง แต่หากไม่มีการตกแต่ง CSS องค์ประกอบเหล่านี้จะยังไม่ปรากฏให้เห็น
|
|
|
|
|
|
มาร์กอัป terrarium ใช้ชื่อคลาสที่อธิบายได้ซึ่งจะทำให้การตกแต่ง CSS เป็นเรื่องง่ายและดูแลรักษาได้ในบทเรียนถัดไป
|
|
|
|
|
|
### งาน: เพิ่มโครงสร้าง Terrarium
|
|
|
|
|
|
แทรกมาร์กอัปนี้เหนือแท็ก `</div>` สุดท้าย (ก่อนแท็กปิดของตัวจัดระเบียบหน้า):
|
|
|
|
|
|
```html
|
|
|
<div id="terrarium">
|
|
|
<div class="jar-top"></div>
|
|
|
<div class="jar-walls">
|
|
|
<div class="jar-glossy-long"></div>
|
|
|
<div class="jar-glossy-short"></div>
|
|
|
</div>
|
|
|
<div class="dirt"></div>
|
|
|
<div class="jar-bottom"></div>
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
**ทำความเข้าใจโครงสร้าง terrarium นี้:**
|
|
|
- **สร้าง**ตัวจัดระเบียบ terrarium หลักพร้อม ID เฉพาะสำหรับการตกแต่ง
|
|
|
- **กำหนด**องค์ประกอบแยกสำหรับแต่ละส่วนประกอบภาพ (ด้านบน ผนัง ดิน ด้านล่าง)
|
|
|
- **รวม**องค์ประกอบที่ซ้อนกันสำหรับเอฟเฟกต์การสะท้อนแก้ว (องค์ประกอบ glossy)
|
|
|
- **ใช้**ชื่อคลาสที่อธิบายได้ชัดเจนที่ระบุว
|
|
|
**คำสั่ง:** สร้างส่วน HTML แบบ semantic ที่มีหัวข้อหลัก "คู่มือการดูแลพืช" และมีสามหัวข้อย่อยคือ "การรดน้ำ", "ความต้องการแสง", และ "การดูแลดิน" โดยแต่ละหัวข้อย่อยมีย่อหน้าที่ให้ข้อมูลเกี่ยวกับการดูแลพืช ใช้แท็ก HTML แบบ semantic เช่น `<section>`, `<h2>`, `<h3>`, และ `<p>` เพื่อจัดโครงสร้างเนื้อหาให้เหมาะสม
|
|
|
|
|
|
เรียนรู้เพิ่มเติมเกี่ยวกับ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่
|
|
|
|
|
|
## ท้าทายประวัติศาสตร์ HTML
|
|
|
|
|
|
**เรียนรู้เกี่ยวกับวิวัฒนาการของเว็บ**
|
|
|
|
|
|
HTML ได้พัฒนาไปอย่างมากตั้งแต่ Tim Berners-Lee สร้างเว็บเบราว์เซอร์ตัวแรกที่ CERN ในปี 1990 แท็กเก่าบางตัว เช่น `<marquee>` ถูกยกเลิกไปแล้วเนื่องจากไม่เหมาะสมกับมาตรฐานการเข้าถึงและหลักการออกแบบที่ตอบสนองในยุคปัจจุบัน
|
|
|
|
|
|
**ลองทำการทดลองนี้:**
|
|
|
1. ลองใส่หัวข้อ `<h1>` ของคุณในแท็ก `<marquee>` ชั่วคราว: `<marquee><h1>My Terrarium</h1></marquee>`
|
|
|
2. เปิดหน้าเว็บของคุณในเบราว์เซอร์และสังเกตผลการเลื่อน
|
|
|
3. พิจารณาว่าทำไมแท็กนี้ถึงถูกยกเลิก (คำใบ้: คิดถึงประสบการณ์ผู้ใช้และการเข้าถึง)
|
|
|
4. ลบแท็ก `<marquee>` และกลับไปใช้การมาร์กอัปแบบ semantic
|
|
|
|
|
|
**คำถามสะท้อนความคิด:**
|
|
|
- หัวข้อที่เลื่อนอาจส่งผลต่อผู้ใช้ที่มีความบกพร่องทางสายตาหรือความไวต่อการเคลื่อนไหวอย่างไร?
|
|
|
- เทคนิค CSS สมัยใหม่ใดที่สามารถสร้างเอฟเฟกต์ภาพที่คล้ายกันได้โดยเข้าถึงได้มากกว่า?
|
|
|
- ทำไมการใช้มาตรฐานเว็บปัจจุบันแทนองค์ประกอบที่ถูกยกเลิกจึงสำคัญ?
|
|
|
|
|
|
สำรวจเพิ่มเติมเกี่ยวกับ [องค์ประกอบ HTML ที่ล้าสมัยและถูกยกเลิก](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) เพื่อทำความเข้าใจว่ามาตรฐานเว็บพัฒนาไปอย่างไรเพื่อปรับปรุงประสบการณ์ผู้ใช้
|
|
|
|
|
|
|
|
|
## แบบทดสอบหลังการบรรยาย
|
|
|
|
|
|
[แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/16)
|
|
|
|
|
|
## ทบทวนและศึกษาด้วยตนเอง
|
|
|
|
|
|
**เพิ่มพูนความรู้เกี่ยวกับ HTML ของคุณ**
|
|
|
|
|
|
HTML เป็นพื้นฐานของเว็บมานานกว่า 30 ปี โดยพัฒนาจากภาษามาร์กอัปเอกสารธรรมดาไปสู่แพลตฟอร์มที่ซับซ้อนสำหรับการสร้างแอปพลิเคชันแบบโต้ตอบ การเข้าใจวิวัฒนาการนี้ช่วยให้คุณชื่นชมมาตรฐานเว็บสมัยใหม่และตัดสินใจพัฒนาได้ดีขึ้น
|
|
|
|
|
|
**เส้นทางการเรียนรู้ที่แนะนำ:**
|
|
|
|
|
|
1. **ประวัติและวิวัฒนาการของ HTML**
|
|
|
- ศึกษาไทม์ไลน์ตั้งแต่ HTML 1.0 ถึง HTML5
|
|
|
- สำรวจว่าทำไมแท็กบางตัวถึงถูกยกเลิก (การเข้าถึง, ความเหมาะสมกับมือถือ, การบำรุงรักษา)
|
|
|
- ตรวจสอบคุณสมบัติ HTML ใหม่และข้อเสนอที่กำลังเกิดขึ้น
|
|
|
|
|
|
2. **เจาะลึก HTML แบบ semantic**
|
|
|
- ศึกษารายการองค์ประกอบ semantic ของ [HTML5](https://developer.mozilla.org/docs/Web/HTML/Element)
|
|
|
- ฝึกการระบุว่าเมื่อใดควรใช้ `<article>`, `<section>`, `<aside>`, และ `<main>`
|
|
|
- เรียนรู้เกี่ยวกับแอตทริบิวต์ ARIA เพื่อเพิ่มการเข้าถึง
|
|
|
|
|
|
3. **การพัฒนาเว็บสมัยใหม่**
|
|
|
- สำรวจ [การสร้างเว็บไซต์ที่ตอบสนอง](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn
|
|
|
- ทำความเข้าใจว่า HTML ผสานรวมกับ CSS และ JavaScript อย่างไร
|
|
|
- เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและแนวทางปฏิบัติที่ดีที่สุดสำหรับ SEO
|
|
|
|
|
|
**คำถามสะท้อนความคิด:**
|
|
|
- คุณค้นพบแท็ก HTML ที่ถูกยกเลิกอะไรบ้าง และทำไมถึงถูกลบออก?
|
|
|
- คุณสมบัติ HTML ใหม่ใดที่กำลังถูกเสนอสำหรับเวอร์ชันในอนาคต?
|
|
|
- HTML แบบ semantic มีส่วนช่วยในการเข้าถึงเว็บและ SEO อย่างไร?
|
|
|
|
|
|
|
|
|
## งานที่ได้รับมอบหมาย
|
|
|
|
|
|
[ฝึกฝน HTML ของคุณ: สร้างแบบจำลองบล็อก](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |
