Images

รูปภาพใน HTML เราจะใช้ tag <img> ซึ่งเป็น element เปล่าๆ เพราะฉะนั้น มันจะมีแค่ตัวแปรและไม่ต้องมี tag ปิด เราจะใช้ตัวแปร src ย่อมาจาก source ค่าของตัวแปร src จะเป็น url (ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต) ของรูปภาพที่เราจะแสดง

url ที่เก็บของไฟล์รูปภาพ ปกติจะเก็บใน server ของเรา

<img src="my-picture.jpg">

นอกจากตัวแปร src เรายังมีตัวแปร alt ย่อมาจาก alternative text เป็นตัวแปรเผื่อเลือก เช่น เบราเซอร์ไม่สามารถแสดงรูปภาพได้ เนื่องจากความผิดพลาดใดๆก็ตาม เบราเซอร์จะใช้ค่าในตัวแปร alt แทนดังในตัวอย่างด้านล่างที่ ไม่สามรถแสดงรูปของ Angelina Jolie ได้ จึงแสดงเป็นข้อความแทน

<img src="my-picture.jpg" alt="Portrait of Angelina Jolie">

ตัวอย่างเช่น เราต้องการโชว์รูปของ Picasso เราสามารถตั้งค่าตัวแปร เป็นคำบรรยายของรูปภาพได้ เช่น Portrait of Angel Fernandez de Soto

ตัวแปรสุดท้ายที่เกี่ยวข้องกับการแสดงรูปภาพคือ ตัวแปร title ถ้าเราเลื่อนเมาส์ไปบนภาพ เราจะเห็นข้อความแสดงขึ้นมา นั่นคือค่าของตัวแปร title ซึ่งเราคุ้นเคยกันในชื่อ tooltip เราจะใช้ตัวแปรนี้ถ้ามันไม่ขัดแย้งกับการใช้ตัวแปรตัวอื่น เช่น เราไม่ควรไปใช้ซ้ำกับระบบนำทางที่จะนำผู้ใช้ไปยังหน้าต่างๆ ของเว็บไซต์

สรุป

• เราจะใช้ตัวแปร src ในการแสดงรูปภาพ
• เราจะใช้ตัวแปร alt เผื่อเลือกเมื่อเบราเซอร์ไม่สามารถแสดงรูปภาพได้ เนื่องจากความผิดพลาดใดๆก็ตาม
• ตัวแปร alt จะมีความสำคัญในการแสดงผลและการค้นหาเวบ เราไม่ควรไปใช้ซ้ำกับระบบนำทางที่จะนำผู้ใช้ไปยังหน้าต่างๆ ของเว็บไซต์ webcrawler (ทำหน้าที่เก็บข้อมูลของเว็บนั้นมาทำการวิเคราะห์)