1. ใบงาน
เรื่อง การจัดตําแหน่งและการกําหนดเส้นขอบรูปภาพ
วัตถุประสงค์
1. เขียนโค้ด HTML ในการจัดตําแหน่งรูปภาพ ร่วมกับข้อความ
2. เขียนโค้ด HTML ในการกําหนดเส้นขอบรูปภาพ และคําอธิบายรูปภาพ
ขั้นตอนปฏิบัติ
ให้นักเรียนเขียน โค้ด HTML ตามคําสั่งต่อไปนี้ ปฏิบัติลงเครื่องคอมพิวเตอร์ โดยบันทึกชื่อ
JOB2.html
1. ที่ Title ให้พิมพ์ให้ใส่คําว่า การจัดตําแหน่งและการกําหนดเส้นขอบรูปภาพ
2. ที่พื้นหลังให้ใช้รูปภาพเป็นพื้นหลังเว็บเพจ
3. พิมพ์คําว่า การจัดตําแหน่งและการกําหนดเส้นขอบรูปภาพ ตัวใหญ่ H1 สีตัวอักษร สี
แดง แล้วสั่งให้อยู่กึ่งกลางหน้าจอเว็บเพจ
4. แทรกคําสั่งเส้นคั่นแนวนอน หนา 5 สีเส้น สีนํ้าเงิน ความยาวของเส้นคั่น 100%
5. แทรกรูป จํานวน 3 รูป โดยค้นหามาจาก Internet แล้วสั่งให้ความกว้างรูปภาพ 100% ความสูง
เท่ากับ 100% รูปภาพสามารถซํ้ากันได้ และกําหนดเส้นขอบของรูปภาพ หนาเท่ากับ 5 และจัด
กึ่งกลางรูปภาพ
6. แทรกคําสั่งเส้นคั่นแนวนอน หนา 5 สีเส้น สีม่วง ความยาวของเส้นคั่น 100%
7. จัดรูปภาพและข้อความดังตัวอย่างข้างล่าง
รูป
ดิฉันชื่อนางสาวเรียนเก่ง เพราะขยัน
รูป
ดิฉันชื่อนางสาวเตรียมพร้อม สอบได้
ดิฉันชื่อนางสาวขยัน เรียนเก่ง
รูป

2. 8. ขีดเส้นคั่นแนวนอน ความยาวของเส้นคั่นเท่ากับ 85% สีนํ้าเงิน
9. พิมพ์คําว่า จบการจัดตําแหน่งและกําหนดเส้นขอบรูปภาพ จัดกึ่งกลาง ตัวอักษรสี แดง ตัวขนาด
7 ตัวหนาแล้วสั่งให้ตัวอักษรวิ่งไปข้างหน้าแล้ววิ่งย้อนกลับ
10. ขีดเส้นคั่นแนวนอน ความยาวของเส้นคั่นเท่ากับ 85% สีนํ้าเงิน