# การบ้านฝึก HTML: สร้างโครงร่างบล็อก ## วัตถุประสงค์การเรียนรู้ นำความรู้ HTML ของคุณมาประยุกต์ใช้โดยการออกแบบและเขียนโครงสร้างหน้าแรกของบล็อกให้สมบูรณ์ การบ้านนี้จะช่วยเสริมสร้างความเข้าใจใน HTML เชิงความหมาย (Semantic HTML) แนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึง (Accessibility) และทักษะการจัดระเบียบโค้ดอย่างมืออาชีพที่คุณจะใช้ตลอดเส้นทางการพัฒนาเว็บไซต์ **เมื่อทำการบ้านนี้เสร็จ คุณจะสามารถ:** - ฝึกวางแผนการจัดวางเว็บไซต์ก่อนเริ่มเขียนโค้ด - ใช้ HTML เชิงความหมายได้อย่างเหมาะสม - สร้างโครงสร้างมาร์กอัปที่เข้าถึงได้และมีการจัดระเบียบที่ดี - พัฒนานิสัยการเขียนโค้ดอย่างมืออาชีพด้วยการใส่คอมเมนต์และการจัดระเบียบ ## ข้อกำหนดของโปรเจกต์ ### ส่วนที่ 1: การวางแผนการออกแบบ (โครงร่างภาพ) **สร้างโครงร่างภาพของหน้าแรกบล็อกของคุณที่ประกอบด้วย:** - ส่วนหัวที่มีชื่อเว็บไซต์และเมนูนำทาง - พื้นที่เนื้อหาหลักที่มีตัวอย่างโพสต์บล็อกอย่างน้อย 2-3 โพสต์ - แถบด้านข้างที่มีข้อมูลเพิ่มเติม (ส่วนเกี่ยวกับเรา, โพสต์ล่าสุด, หมวดหมู่) - ส่วนท้ายที่มีข้อมูลติดต่อหรือลิงก์ **ตัวเลือกในการสร้างโครงร่างภาพ:** - **ร่างด้วยมือ**: ใช้กระดาษและดินสอ แล้วถ่ายภาพหรือสแกนการออกแบบของคุณ - **เครื่องมือดิจิทัล**: Figma, Adobe XD, Canva, PowerPoint หรือแอปพลิเคชันวาดภาพอื่น ๆ - **เครื่องมือสร้าง Wireframe**: Balsamiq, MockFlow หรือซอฟต์แวร์สร้าง Wireframe ที่คล้ายกัน **ติดป้ายกำกับส่วนต่าง ๆ ในโครงร่างของคุณ** ด้วยองค์ประกอบ HTML ที่คุณวางแผนจะใช้ (เช่น "ส่วนหัว - `

`", "โพสต์บล็อก - `

`") ### ส่วนที่ 2: การวางแผนองค์ประกอบ HTML **สร้างรายการที่จับคู่แต่ละส่วนของโครงร่างภาพกับองค์ประกอบ HTML เฉพาะ:** ``` Example: - Site Header →

- Main Navigation →