|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "650e63282e1dfa032890fcf5c1c4119d",
|
|
|
"translation_date": "2025-10-23T21:06:13+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "th"
|
|
|
}
|
|
|
-->
|
|
|
# การบ้านฝึก HTML: สร้างโครงร่างบล็อก
|
|
|
|
|
|
## วัตถุประสงค์การเรียนรู้
|
|
|
|
|
|
นำความรู้ HTML ของคุณมาประยุกต์ใช้โดยการออกแบบและเขียนโครงสร้างหน้าแรกของบล็อกให้สมบูรณ์ การบ้านนี้จะช่วยเสริมสร้างความเข้าใจใน HTML เชิงความหมาย (Semantic HTML) แนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึง (Accessibility) และทักษะการจัดระเบียบโค้ดอย่างมืออาชีพที่คุณจะใช้ตลอดเส้นทางการพัฒนาเว็บไซต์
|
|
|
|
|
|
**เมื่อทำการบ้านนี้เสร็จ คุณจะสามารถ:**
|
|
|
- ฝึกวางแผนการจัดวางเว็บไซต์ก่อนเริ่มเขียนโค้ด
|
|
|
- ใช้ HTML เชิงความหมายได้อย่างเหมาะสม
|
|
|
- สร้างโครงสร้างมาร์กอัปที่เข้าถึงได้และมีการจัดระเบียบที่ดี
|
|
|
- พัฒนานิสัยการเขียนโค้ดอย่างมืออาชีพด้วยการใส่คอมเมนต์และการจัดระเบียบ
|
|
|
|
|
|
## ข้อกำหนดของโปรเจกต์
|
|
|
|
|
|
### ส่วนที่ 1: การวางแผนการออกแบบ (โครงร่างภาพ)
|
|
|
|
|
|
**สร้างโครงร่างภาพของหน้าแรกบล็อกของคุณที่ประกอบด้วย:**
|
|
|
- ส่วนหัวที่มีชื่อเว็บไซต์และเมนูนำทาง
|
|
|
- พื้นที่เนื้อหาหลักที่มีตัวอย่างโพสต์บล็อกอย่างน้อย 2-3 โพสต์
|
|
|
- แถบด้านข้างที่มีข้อมูลเพิ่มเติม (ส่วนเกี่ยวกับเรา, โพสต์ล่าสุด, หมวดหมู่)
|
|
|
- ส่วนท้ายที่มีข้อมูลติดต่อหรือลิงก์
|
|
|
|
|
|
**ตัวเลือกในการสร้างโครงร่างภาพ:**
|
|
|
- **ร่างด้วยมือ**: ใช้กระดาษและดินสอ แล้วถ่ายภาพหรือสแกนการออกแบบของคุณ
|
|
|
- **เครื่องมือดิจิทัล**: Figma, Adobe XD, Canva, PowerPoint หรือแอปพลิเคชันวาดภาพอื่น ๆ
|
|
|
- **เครื่องมือสร้าง Wireframe**: Balsamiq, MockFlow หรือซอฟต์แวร์สร้าง Wireframe ที่คล้ายกัน
|
|
|
|
|
|
**ติดป้ายกำกับส่วนต่าง ๆ ในโครงร่างของคุณ** ด้วยองค์ประกอบ HTML ที่คุณวางแผนจะใช้ (เช่น "ส่วนหัว - `<header>`", "โพสต์บล็อก - `<article>`")
|
|
|
|
|
|
### ส่วนที่ 2: การวางแผนองค์ประกอบ HTML
|
|
|
|
|
|
**สร้างรายการที่จับคู่แต่ละส่วนของโครงร่างภาพกับองค์ประกอบ HTML เฉพาะ:**
|
|
|
|
|
|
```
|
|
|
Example:
|
|
|
- Site Header → <header>
|
|
|
- Main Navigation → <nav> with <ul> and <li>
|
|
|
- Blog Post → <article> with <h2>, <p>, <time>
|
|
|
- Sidebar → <aside> with <section> elements
|
|
|
- Page Footer → <footer>
|
|
|
```
|
|
|
|
|
|
**องค์ประกอบที่จำเป็นต้องมี:**
|
|
|
HTML ของคุณต้องมีองค์ประกอบเชิงความหมายอย่างน้อย 10 รายการจากรายการนี้:
|
|
|
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
|
|
|
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
|
|
|
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
|
|
|
|
|
|
### ส่วนที่ 3: การเขียน HTML
|
|
|
|
|
|
**เขียนโค้ดหน้าแรกบล็อกของคุณตามมาตรฐานเหล่านี้:**
|
|
|
|
|
|
1. **โครงสร้างเอกสาร**: รวม DOCTYPE, html, head และ body อย่างถูกต้อง
|
|
|
2. **มาร์กอัปเชิงความหมาย**: ใช้องค์ประกอบ HTML ตามวัตถุประสงค์ที่ตั้งใจไว้
|
|
|
3. **การเข้าถึง**: ใส่ข้อความ alt ที่เหมาะสมสำหรับภาพและข้อความลิงก์ที่มีความหมาย
|
|
|
4. **คุณภาพโค้ด**: ใช้การเยื้องโค้ดที่สม่ำเสมอและคอมเมนต์ที่มีความหมาย
|
|
|
5. **เนื้อหา**: รวมเนื้อหาบล็อกที่สมจริง (คุณสามารถใช้ข้อความตัวอย่างได้)
|
|
|
|
|
|
**ตัวอย่างโครงสร้าง HTML:**
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>My Personal Blog</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- Main site header -->
|
|
|
<header>
|
|
|
<h1>My Blog Title</h1>
|
|
|
<nav>
|
|
|
<!-- Navigation menu -->
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<!-- Main content area -->
|
|
|
<main>
|
|
|
<!-- Blog posts go here -->
|
|
|
</main>
|
|
|
|
|
|
<!-- Sidebar content -->
|
|
|
<aside>
|
|
|
<!-- Additional information -->
|
|
|
</aside>
|
|
|
|
|
|
<!-- Site footer -->
|
|
|
<footer>
|
|
|
<!-- Footer content -->
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
### ส่วนที่ 4: การสะท้อนความคิด
|
|
|
|
|
|
**เขียนการสะท้อนความคิดสั้น ๆ (3-5 ประโยค) โดยตอบคำถามต่อไปนี้:**
|
|
|
- องค์ประกอบ HTML ใดที่คุณมั่นใจในการใช้งานมากที่สุด?
|
|
|
- คุณพบความท้าทายอะไรบ้างในระหว่างการวางแผนหรือการเขียนโค้ด?
|
|
|
- HTML เชิงความหมายช่วยจัดระเบียบเนื้อหาของคุณอย่างไร?
|
|
|
- คุณจะทำอะไรแตกต่างออกไปในโปรเจกต์ HTML ครั้งต่อไป?
|
|
|
|
|
|
## เช็คลิสต์การส่งงาน
|
|
|
|
|
|
**ก่อนส่งงาน ตรวจสอบให้แน่ใจว่าคุณมี:**
|
|
|
- [ ] โครงร่างภาพที่มีการติดป้ายกำกับองค์ประกอบ HTML
|
|
|
- [ ] ไฟล์ HTML ที่สมบูรณ์พร้อมโครงสร้างเอกสารที่ถูกต้อง
|
|
|
- [ ] ใช้องค์ประกอบ HTML เชิงความหมายอย่างน้อย 10 รายการอย่างเหมาะสม
|
|
|
- [ ] คอมเมนต์ที่มีความหมายอธิบายโครงสร้างโค้ดของคุณ
|
|
|
- [ ] ไวยากรณ์ HTML ที่ถูกต้อง (ทดสอบในเบราว์เซอร์)
|
|
|
- [ ] การสะท้อนความคิดที่เขียนตอบคำถามตามหัวข้อที่กำหนด
|
|
|
|
|
|
## เกณฑ์การประเมิน
|
|
|
|
|
|
| เกณฑ์ | ดีเยี่ยม (4) | ดี (3) | พัฒนา (2) | เริ่มต้น (1) |
|
|
|
|-------|--------------|--------|-----------|--------------|
|
|
|
| **การวางแผนและการออกแบบ** | โครงร่างที่ละเอียดและติดป้ายกำกับชัดเจน แสดงความเข้าใจในโครงร่างและ HTML เชิงความหมาย | โครงร่างชัดเจนพร้อมการติดป้ายกำกับส่วนใหญ่เหมาะสม | โครงร่างพื้นฐานพร้อมการติดป้ายกำกับบางส่วน แสดงความเข้าใจทั่วไป | โครงร่างไม่ชัดเจนหรือมีการติดป้ายกำกับน้อย ไม่ระบุส่วนที่เหมาะสม |
|
|
|
| **การใช้งาน HTML เชิงความหมาย** | ใช้องค์ประกอบเชิงความหมาย 10+ รายการอย่างเหมาะสม แสดงความเข้าใจลึกซึ้งในโครงสร้าง HTML และการเข้าถึง | ใช้องค์ประกอบเชิงความหมาย 8-9 รายการอย่างถูกต้อง แสดงความเข้าใจที่ดี | ใช้องค์ประกอบเชิงความหมาย 6-7 รายการ มีความสับสนบางส่วนเกี่ยวกับการใช้งานที่เหมาะสม | ใช้องค์ประกอบน้อยกว่า 6 รายการหรือใช้งานผิดวัตถุประสงค์ |
|
|
|
| **คุณภาพและการจัดระเบียบโค้ด** | โค้ดที่จัดระเบียบอย่างดีเยี่ยม มีการเยื้องที่เหมาะสม คอมเมนต์ที่ครอบคลุม และไวยากรณ์ HTML ที่สมบูรณ์แบบ | โค้ดที่จัดระเบียบดี มีการเยื้องที่ดี คอมเมนต์ที่เป็นประโยชน์ และไวยากรณ์ที่ถูกต้อง | โค้ดที่จัดระเบียบส่วนใหญ่ มีคอมเมนต์บางส่วน และมีปัญหาไวยากรณ์เล็กน้อย | โค้ดที่จัดระเบียบไม่ดี มีคอมเมนต์น้อย และมีข้อผิดพลาดไวยากรณ์หลายจุด |
|
|
|
| **การเข้าถึงและแนวทางปฏิบัติที่ดีที่สุด** | การพิจารณาด้านการเข้าถึงที่ยอดเยี่ยม ข้อความ alt ที่มีความหมาย ลำดับหัวข้อที่เหมาะสม และปฏิบัติตามแนวทาง HTML สมัยใหม่ทั้งหมด | คุณสมบัติการเข้าถึงที่ดี การใช้หัวข้อและข้อความ alt อย่างเหมาะสม และปฏิบัติตามแนวทางส่วนใหญ่ | การพิจารณาด้านการเข้าถึงบางส่วน ข้อความ alt และโครงสร้างหัวข้อพื้นฐาน | คุณสมบัติการเข้าถึงที่จำกัด โครงสร้างหัวข้อที่ไม่ดี และไม่ปฏิบัติตามแนวทางที่ดีที่สุด |
|
|
|
| **การสะท้อนความคิดและการเรียนรู้** | การสะท้อนความคิดที่ลึกซึ้ง แสดงความเข้าใจในแนวคิด HTML และการวิเคราะห์กระบวนการเรียนรู้อย่างรอบคอบ | การสะท้อนความคิดที่ดี แสดงความเข้าใจในแนวคิดสำคัญและการตระหนักรู้ในกระบวนการเรียนรู้ | การสะท้อนความคิดพื้นฐานที่มีข้อมูลเชิงลึกจำกัดเกี่ยวกับแนวคิด HTML หรือกระบวนการเรียนรู้ | การสะท้อนความคิดที่น้อยหรือขาดหาย แสดงความเข้าใจในแนวคิดที่เรียนรู้เพียงเล็กน้อย |
|
|
|
|
|
|
## แหล่งข้อมูลการเรียนรู้
|
|
|
|
|
|
**แหล่งข้อมูลสำคัญ:**
|
|
|
- [MDN HTML Elements Reference](https://developer.mozilla.org/docs/Web/HTML/Element) - คู่มือองค์ประกอบ HTML ทั้งหมด
|
|
|
- [HTML5 Semantic Elements](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - ความเข้าใจในมาร์กอัปเชิงความหมาย
|
|
|
- [Web Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - การสร้างเนื้อหาเว็บที่เข้าถึงได้
|
|
|
- [HTML Validator](https://validator.w3.org/) - ตรวจสอบไวยากรณ์ HTML ของคุณ
|
|
|
|
|
|
**เคล็ดลับสำหรับความสำเร็จ:**
|
|
|
- เริ่มต้นด้วยโครงร่างภาพก่อนเขียนโค้ด
|
|
|
- ใช้เครื่องมือพัฒนาในเบราว์เซอร์เพื่อตรวจสอบโครงสร้าง HTML ของคุณ
|
|
|
- ทดสอบหน้าเว็บของคุณในขนาดหน้าจอที่แตกต่างกัน (แม้ไม่มี CSS)
|
|
|
- อ่าน HTML ของคุณออกเสียงเพื่อดูว่าโครงสร้างมีความสมเหตุสมผลหรือไม่
|
|
|
- พิจารณาว่าผู้อ่านหน้าจอจะตีความโครงสร้างหน้าเว็บของคุณอย่างไร
|
|
|
|
|
|
> 💡 **จำไว้ว่า**: การบ้านนี้เน้นที่โครงสร้างและความหมายของ HTML ไม่ต้องกังวลเรื่องการตกแต่งด้วย CSS – หน้าของคุณอาจดูเรียบง่าย แต่ควรมีโครงสร้างที่ดีและมีความหมาย
|
|
|
|
|
|
---
|
|
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |
