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