17 KiB

Raw Blame History Unescape Escape

การบ้านฝึก 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

เขียนโค้ดหน้าแรกบล็อกของคุณตามมาตรฐานเหล่านี้:

โครงสร้างเอกสาร: รวม DOCTYPE, html, head และ body อย่างถูกต้อง
มาร์กอัปเชิงความหมาย: ใช้องค์ประกอบ HTML ตามวัตถุประสงค์ที่ตั้งใจไว้
การเข้าถึง: ใส่ข้อความ alt ที่เหมาะสมสำหรับภาพและข้อความลิงก์ที่มีความหมาย
คุณภาพโค้ด: ใช้การเยื้องโค้ดที่สม่ำเสมอและคอมเมนต์ที่มีความหมาย
เนื้อหา: รวมเนื้อหาบล็อกที่สมจริง (คุณสามารถใช้ข้อความตัวอย่างได้)

ตัวอย่างโครงสร้าง 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 - คู่มือองค์ประกอบ HTML ทั้งหมด
HTML5 Semantic Elements - ความเข้าใจในมาร์กอัปเชิงความหมาย
Web Accessibility Guidelines - การสร้างเนื้อหาเว็บที่เข้าถึงได้
HTML Validator - ตรวจสอบไวยากรณ์ HTML ของคุณ

เคล็ดลับสำหรับความสำเร็จ:

เริ่มต้นด้วยโครงร่างภาพก่อนเขียนโค้ด
ใช้เครื่องมือพัฒนาในเบราว์เซอร์เพื่อตรวจสอบโครงสร้าง HTML ของคุณ
ทดสอบหน้าเว็บของคุณในขนาดหน้าจอที่แตกต่างกัน (แม้ไม่มี CSS)
อ่าน HTML ของคุณออกเสียงเพื่อดูว่าโครงสร้างมีความสมเหตุสมผลหรือไม่
พิจารณาว่าผู้อ่านหน้าจอจะตีความโครงสร้างหน้าเว็บของคุณอย่างไร

💡 จำไว้ว่า: การบ้านนี้เน้นที่โครงสร้างและความหมายของ HTML ไม่ต้องกังวลเรื่องการตกแต่งด้วย CSS – หน้าของคุณอาจดูเรียบง่าย แต่ควรมีโครงสร้างที่ดีและมีความหมาย

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

17 KiB Raw Blame History Unescape Escape