<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T09:53:29+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "th"
}
-->
# การบ้านฝึก HTML: สร้างต้นแบบบล็อก

## วัตถุประสงค์

ออกแบบและเขียนโครงสร้าง HTML สำหรับหน้าแรกของบล็อกส่วนตัวด้วยมือ การฝึกนี้จะช่วยให้คุณฝึกการใช้ HTML แบบมีความหมาย การวางแผนเลย์เอาต์ และการจัดระเบียบโค้ด

## คำแนะนำ

1. **ออกแบบต้นแบบบล็อกของคุณ**
   - วาดภาพต้นแบบของหน้าแรกบล็อกของคุณ รวมส่วนสำคัญ เช่น ส่วนหัว, การนำทาง, เนื้อหาหลัก, แถบด้านข้าง และส่วนท้าย
   - คุณสามารถใช้กระดาษและสแกนภาพวาด หรือใช้เครื่องมือดิจิทัล (เช่น Figma, Adobe XD, Canva หรือแม้แต่ PowerPoint)

2. **ระบุองค์ประกอบ HTML**
   - ลิสต์องค์ประกอบ HTML ที่คุณวางแผนจะใช้ในแต่ละส่วน (เช่น `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` เป็นต้น)

3. **เขียนโค้ด HTML**
   - เขียนโค้ด HTML สำหรับต้นแบบของคุณด้วยมือ โดยเน้นโครงสร้างที่มีความหมายและปฏิบัติตามแนวทางที่ดีที่สุด
   - ใช้องค์ประกอบ HTML อย่างน้อย 10 ชนิดที่แตกต่างกัน
   - เพิ่มคอมเมนต์เพื่ออธิบายการเลือกและโครงสร้างของคุณ

4. **ส่งงานของคุณ**
   - อัปโหลดภาพวาด/ต้นแบบและไฟล์ HTML ของคุณ
   - หากต้องการ คุณสามารถเขียนการสะท้อนความคิดสั้น ๆ (2–3 ประโยค) เกี่ยวกับการตัดสินใจออกแบบของคุณ

## เกณฑ์การประเมิน

| เกณฑ์            | ดีเยี่ยม                                                                                   | พอใช้                                                                          | ต้องปรับปรุง                                                                   |
|------------------|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| ต้นแบบภาพ        | ต้นแบบที่ชัดเจนและละเอียด พร้อมส่วนที่มีการระบุชื่อและเลย์เอาต์ที่คิดมาอย่างดี            | ต้นแบบพื้นฐานที่มีการระบุชื่อบางส่วน                                          | ต้นแบบที่ไม่ชัดเจนหรือมีการระบุชื่อส่วนไม่ครบ                                 |
| องค์ประกอบ HTML  | ใช้ HTML แบบมีความหมาย 10+ องค์ประกอบ; แสดงความเข้าใจในโครงสร้างและแนวทางที่ดีที่สุด     | ใช้ HTML 5–9 องค์ประกอบ; มีโครงสร้างแบบมีความหมายบางส่วน                     | ใช้ HTML น้อยกว่า 5 องค์ประกอบ; ขาดโครงสร้างแบบมีความหมาย                     |
| คุณภาพโค้ด       | โค้ดที่จัดระเบียบดี อ่านง่าย พร้อมคอมเมนต์; ปฏิบัติตามมาตรฐาน HTML                       | โค้ดที่จัดระเบียบพอสมควร; มีคอมเมนต์เล็กน้อย                                   | โค้ดที่ไม่จัดระเบียบ; ขาดคอมเมนต์                                              |
| การสะท้อนความคิด | การสะท้อนความคิดที่ลึกซึ้งเกี่ยวกับการตัดสินใจออกแบบและความท้าทาย                        | การสะท้อนความคิดพื้นฐาน                                                       | ไม่มีการสะท้อนความคิดหรือขาดความเกี่ยวข้อง                                    |

## เคล็ดลับ

- ใช้แท็ก HTML แบบมีความหมายเพื่อการเข้าถึงและ SEO ที่ดีขึ้น
- จัดระเบียบโค้ดของคุณด้วยการเว้นวรรคและคอมเมนต์
- อ้างอิง [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) เพื่อขอคำแนะนำ
- คิดถึงวิธีที่เลย์เอาต์ของคุณสามารถขยายหรือปรับแต่งในงานครั้งต่อไป

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้