Basic Content Tags

1. หัวข้อนี้คืออะไร

แท็ก img ใช้แสดงรูปภาพ (Image) บนหน้าเว็บ img เป็นองค์ประกอบที่ต้องพึ่งแอตทริบิวต์ (Attribute) เอสอาร์ซี (src) เพื่อบอกว่าไฟล์รูปอยู่ที่ไหน ถ้าไม่มี src เบราว์เซอร์ (Browser) จะไม่รู้ว่าจะโหลดรูปจากที่ใด

2. ทำไมหัวข้อนี้สำคัญ

• รูปภาพช่วยสื่อสารข้อมูลได้เร็วและทำให้เนื้อหาเข้าใจง่ายขึ้น
• รูปที่เลือกดีและขนาดเหมาะสมช่วยให้หน้าเว็บอ่านง่ายและดูเป็นมืออาชีพ
• ถ้าใช้รูปผิด เช่น รูปใหญ่เกินพื้นที่ อาจทำให้ layout พังและใช้งานยาก
• การกำหนด alt ที่ดีช่วยเรื่องการเข้าถึง (Accessibility) และช่วยเมื่อรูปโหลดไม่สำเร็จ

3. ตัวอย่างจากชีวิตจริง

ลองนึกถึงการแทรกรูปประกอบในหนังสือหรือบทความ ถ้ารูปไม่มีคำอธิบาย ผู้อ่านบางกลุ่มจะไม่เข้าใจว่ารูปสื่ออะไร ถ้ารูปใหญ่เกินหน้า เนื้อหาอื่นจะถูกเบียดและอ่านยาก บนเว็บก็เหมือนกัน: - src คือที่อยู่ไฟล์รูป - alt คือคำอธิบายรูปเมื่อมองไม่เห็นภาพหรือใช้ตัวช่วยอ่านหน้าจอ

4. แนวคิดหลักที่ต้องเข้าใจ

• src ใช้ระบุที่อยู่ไฟล์รูปภาพ
• alt คือข้อความทางเลือก (Alternative Text) สำหรับอธิบายรูป
• รูปที่ดีควรพอดีกับพื้นที่แสดงผล ไม่ล้น container หรือหน้าจอ
• การทำรูปให้ยืดหยุ่นเบื้องต้นบนเว็บนิยมใช้ max-width: 100% และ height: auto
• ควรเลือกรูปขนาดเล็กหรือกลางตามบริบทของหน้าเรียน เพื่อไม่ให้กินพื้นที่มากเกินไป

5. การทำงานทีละขั้นตอน

• 1) เขียนแท็ก img
• 2) กำหนด src ให้ถูกต้อง
• 3) กำหนด alt ที่สื่อความหมายของรูป
• 4) เบราว์เซอร์โหลดรูปตาม src และแสดงผลบนหน้า
• 5) ถ้ารูปโหลดไม่ได้หรือผู้ใช้ใช้ตัวช่วยอ่านหน้าจอ alt จะช่วยอธิบายเนื้อหารูป

6. ตัวอย่างเชิงเทคนิค / โค้ด

ตัวอย่างพื้นฐานที่ต้องรู้: การแสดงรูป, การใส่ alt, และการกันรูปล้น container ด้วย CSS

7. จุดที่ผู้เริ่มต้นมักสับสน

• ลืมใส่ alt ทำให้รูปขาดข้อมูลทางเลือกที่สำคัญ
• ใส่ alt กว้างเกินไปหรือไม่สื่อความหมาย เช่น "รูปภาพ" อย่างเดียว
• ใช้รูปใหญ่เกิน layout จนล้นกล่องหรือดันเนื้อหาอื่น
• สับสนระหว่างขนาดไฟล์รูปต้นฉบับกับขนาดที่แสดงบนหน้าจอ
• คิดว่าเขียน HTML อย่างเดียวพอ โดยไม่คุมการแสดงผลด้วย CSS

8. เปรียบเทียบกับสิ่งที่ใกล้เคียง

9. สรุปท้ายบทแบบจำง่าย

• แท็ก img ใช้แสดงรูปภาพบนหน้าเว็บ
• img ต้องมี src และควรมี alt ที่สื่อความหมาย
• รูปควรพอดีกับ layout ไม่ล้นหน้าจอหรือ container
• พื้นฐาน responsive image ที่ควรจำ: max-width: 100% และ height: auto
• เลือกใช้รูปขนาดเล็กหรือกลางให้เหมาะกับบทเรียนและพื้นที่แสดงผล

10. Lab 1: เพิ่มรูปภาพพื้นฐาน

ชื่อ Lab: รูปแรกของหน้าเรียน เป้าหมาย: สร้าง img พื้นฐานที่มี src และ alt ครบ โจทย์: ภายใน main ให้เพิ่มรูป 1 รูป โดยใช้ id="hero-image", src="https://picsum.photos/seed/course-cover/640/360", alt="ภาพหน้าปกคอร์ส HTML" เงื่อนไข: ต้องมี img#hero-image และค่า src/alt ต้องตรงตามโจทย์ สิ่งที่ระบบควรตรวจ: selector exists + source text + attribute value แนวทางการคิด: สร้าง img ก่อน จากนั้นตรวจ src และ alt ให้ตรงคำสั่ง เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 2: กำหนดขนาดรูปแบบพื้นฐานด้วย HTML

ชื่อ Lab: รูปพอดีพื้นที่ด้วย width เป้าหมาย: ฝึกกำหนดขนาดแสดงผลรูปแบบพื้นฐานโดยไม่ใช้ CSS โจทย์: ใน section#thumbs ให้เพิ่มรูป 2 รูปตามนี้ - รูปที่ 1 id="thumb-a" src="https://picsum.photos/seed/poster-a/480/320" alt="โปสเตอร์คอร์ส HTML พื้นฐาน" width="240" - รูปที่ 2 id="thumb-b" src="https://picsum.photos/seed/poster-b/480/320" alt="โปสเตอร์คอร์ส HTML ระดับถัดไป" width="240" เงื่อนไข: ต้องมีรูปทั้งหมด 2 รูป และทั้งสองรูปต้องมี width="240" สิ่งที่ระบบควรตรวจ: selector exists + source text + browser runtime แนวทางการคิด: วาง src และ alt ให้ถูกก่อน แล้วค่อยกำหนด width ให้เท่ากัน เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 3: แก้รูปที่ขาด alt และขนาดไม่เหมาะ

ชื่อ Lab: ซ่อมรูปภาพที่เขียนผิด เป้าหมาย: แก้ alt และขนาดรูปด้วย HTML ให้เหมาะกับหน้าเว็บ โจทย์: ในโค้ดเริ่มต้น รูปขาด alt และ width ใหญ่เกินไป ให้แก้ดังนี้: - alt ต้องเป็น "ภาพแสดงแผนผังโครงสร้างหน้าเว็บ" - width ต้องเป็น "320" เงื่อนไข: ต้องมี alt ที่ไม่ว่างและ width ไม่เกิน 320 สิ่งที่ระบบควรตรวจ: source text + attribute value + browser runtime แนวทางการคิด: แก้ alt ให้สื่อความหมายก่อน แล้วค่อยปรับ width ให้พอดีกล่อง เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 4: เพิ่มรูปภาพพื้นฐานให้บทความ

ชื่อ Lab: แทรกรูปภาพพร้อมข้อความอธิบาย เป้าหมาย: ใช้ img แสดงรูปภาพพร้อม src และ alt ที่เหมาะสม โจทย์: ใน figure ให้เพิ่มรูปภาพ 1 รูป โดยต้องเป็น img.hero-image ที่มี: - src="https://picsum.photos/seed/html-lesson/640/360" - alt="ภาพตัวอย่างบทเรียน HTML บนหน้าจอ" เงื่อนไข: ต้องมี img 1 ตัวภายใน figure และ alt ต้องไม่ว่าง สิ่งที่ระบบควรตรวจ: selector exists + source text + attribute value + browser runtime แนวทางการคิด: เริ่มจากสร้าง img ก่อน แล้วค่อยเติม src และ alt ให้ครบตามโจทย์ เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 5: เพิ่มขนาดรูปและข้อความกำกับให้เหมาะสม

ชื่อ Lab: กำหนดขนาดรูปให้พอดีกับคอนเทนต์ เป้าหมาย: ใช้ img พร้อม alt, width และ height ให้เหมาะสม โจทย์: ใน div.gallery-card ให้เพิ่มรูป img.card-image ที่มี: - src="https://picsum.photos/seed/html-card/800/600" - alt="ภาพตัวอย่างการ์ดเนื้อหาบนเว็บ" - width="280" - height="210" เงื่อนไข: ต้องมี img 1 ตัว และ width/height ต้องตรงตามโจทย์ สิ่งที่ระบบควรตรวจ: selector exists + source text + attribute value + browser runtime แนวทางการคิด: ใส่ alt ก่อน แล้วค่อยกำหนด width กับ height เพื่อควบคุมพื้นที่ของรูป เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 6: ซ่อมรูปที่ใช้ alt ผิดความหมายและขนาดไม่สมดุล

ชื่อ Lab: แก้รูปภาพให้เหมาะกับการใช้งานจริง เป้าหมาย: ซ่อม img ที่มี alt ไม่สื่อความหมายและขนาดกว้างเกินไป โจทย์: จากโค้ดเริ่มต้น ให้แก้รูปใน section.banner ดังนี้: - alt ต้องเป็น "ภาพแบนเนอร์สรุปเนื้อหา HTML" - width ต้องเป็น "300" - height ต้องเป็น "180" เงื่อนไข: ต้องมี img.banner-image 1 ตัว, alt ต้องไม่ว่าง, และต้องไม่มี width="900" เหลืออยู่ สิ่งที่ระบบควรตรวจ: source text + attribute value + browser runtime แนวทางการคิด: เปลี่ยน alt ให้บอกว่ารูปคืออะไร แล้วค่อยลดขนาดรูปให้เหมาะกับพื้นที่แสดงผล เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check