หน่วยการเรียนรู้ การเขียน โปรแกรมภาษาขั้นพื้นฐาน เรื่อง คำสั่ง HTML 5 การแทรก รูปภาพและการเชื่อมโยง รหัส รายวิชา ง การงาน อาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและ เทคโนโลยี ชั้น มัธยมศึกษาปีที่ 3 เวลา 4 คาบ โรงเรียน เตรียมอุดมศึกษา พัฒนาการ
คำสั่ง แทรกรูปภาพ figure ตามหลักการของภาษา HTML หมายถึง การแสดงให้เห็นเป็นภาพ
<img src=" ชื่อโฟลเดอร์เก็บรูปภาพ / ชื่อไฟล์ รูปภาพ. นามสกุลภาพ " คำสั่ง การกำหนด ขนาดรูปภาพ นักเรียนสามารถกำหนดค่าด้านใดด้าน หนึ่งได้ โดยอีกด้านจะกำหนดให้สมดุลเองโดยอัติ โนมัติ > width="20" height="20"
คำสั่ง nav ( Navigation ) คือ จะใช้ mark up ส่วนที่ link เชื่อมโยงไปยังหน้าอื่นๆ หรือ link ไปยัง ส่วนต่างๆ ภายในหน้านั้นๆ ส่วน แสดงผล ส่วนเมนู สำหรับคลิก เชื่อมโยง
คำสั่ง การเชื่อมโยง 4 แบบ 1. การเชื่อมโยง ระหว่างเว็บเพจ 2. การเชื่อมโยง ภายนอกเว็บไซต์ 3. การเชื่อมโยง โดย ใช้รูปภาพ 4. การเชื่อมโยง Download ไฟล์
1. คำสั่ง การเชื่อมโยง ระหว่างเว็บเพจ ข้อความที่ จะเชื่อมโยง ตัวอย่าง รูป ประจำตัว ส่วนแสดงผล ส่วนเมนู สำหรับคลิกเชื่อมโยง
2. คำสั่ง การเชื่อมโยง ภายนอกเว็บไซต์ ข้อความที่จะ เชื่อมโยง ตัวอย่าง ค้นหาข้อมูล ส่วนแสดงผล ส่วนเมนู สำหรับคลิกเชื่อมโยง
3. คำสั่ง การเชื่อมโยง โดยใช้รูปภาพ ตัวอย่าง ส่วนแสดงผล ส่วนเมนู รูปภาพสำหรับคลิกเชื่อมโยง หมายเหตุ ชื่อปลายทาง อาจจะเป็น ชื่อเว็บไซต์ หรือ ไฟล์เว็บเพจ ก็ได้ อยู่ที่ความต้องการ
เมนูสำหรับคลิก ตัวอย่าง ส่วนแสดงผล ส่วนเมนู รูปภาพสำหรับคลิก Download 4. การเชื่อมโยง Download ไฟล์ หมายเหตุ ส่วนเมนูสำหรับคลิก Download อาจจะเป็น รูปภาพ หรือ ข้อความ ก็ได้ อยู่ที่ความต้องการ
(1) การเชื่อมโยง ระหว่างเว็บเพจ นักเรียนจะต้องสร้างเว็บเพจเพิ่มมา 1 เว็บเพจ เช่น เว็บเพจรูปนักเรียน (2) การเชื่อมโยง ภายนอกเว็บไซต์ นักเรียนเชื่อมโยงไปยัง เว็บไซต์ ที่นักเรียน ชอบ (3) การเชื่อมโยง โดยใช้รูปภาพ นักเรียนเชื่อมโยงไปยัง Facebook ของ นักเรียน โดยคลิกที่รูปโลโก้ facebook (4) การเชื่อมโยง Download ไฟล์ ( ใช้เมนู รูปภาพ หรือ ข้อความ ก็ได้ ) นักเรียนจะต้องหาไฟล์อะไรก็ได้ เช่น รูปภาพ เอกสารจาก word ลองทำดู รู้ปฏิบัติ ให้นักเรียนเปิดไฟล์งาน เว็บไซต์ประวัติ ส่วนตัวนักเรียน ( ที่ทำสัปดาห์ที่แล้ว ) พิมพ์คำสั่งสร้างเมนูเชื่อมโยง แสดงเมนู เชื่อมโยง 4 แบบ ดังนี้