msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd5ed4703d8'
${ noResults }
Web-Dev-For-Beginners/translations/th/3-terrarium/1-intro-to-html/assignment.md

7.6 KiB
Raw Blame History Escape

การบ้านฝึก 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 เพื่อขอคำแนะนำ
  • คิดถึงวิธีที่เลย์เอาต์ของคุณสามารถขยายหรือปรับแต่งในงานครั้งต่อไป

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้