|
|
<!--
|
|
|
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |
