บทที่ 7 [HTML] คำสั่ง <img>

**Admin** Mon 16 May 2011, 6:21 am

หลังจากที่เราๆได้ศึกษาการตกแต่งอักษร และการสร้างลำดับรายการไปเรียบร้อยแล้ว คราวนี้ เราจะมาศึกษาการใส่ภาพ และคำสั่งเพิ่มเติมของการมใส่ภาพ

คำสั่งที่ใช้ใส่รูปภาพลงในเว็บเพจ คือคำสั่ง <img> ซึ่งคำสั่งนี้ เป็นแท็กเดี่ยว กล่าวคือ คำสั่ง <img> นี้ ไม่ต้องปิดแท็ก โดยมีคำสั่งเพิ่มเติมดังนี้

src = "url" ให้แทรกรูปภาพที่ url ที่เรากำหนดลงไป สามารถอ่านวิธีการอ้างอิงได้ จาก บทที่ 4 [HTML] คำสั่ง <body>

width = "n" กำหนดความกว้างของภาพ เป็น n พิกเซล สามารถกำหนดเป็น เปอร์เซนต์ก็ได้ เช่น 50%

height = "n" กำหนดความสูงของภาพ เป็น n พิกเซล สามารถกำหนดเป็น เปอร์เซนต์ก็ได้ เช่น 50%

border = "n" กำหนดความหนาของขอบรูปภาพ เป็น n พิกเซล (ค่าเริ่มต้นคือ 0 และ 1 กรณีแทรกลิงค์)

hspace = "n" กำหนดระยะห่าง ระหว่างรูปภาพและข้อความ แนวซ้าย - ขวา ของรูปภาพ ให้เป็น n พิกเซล

vspace = "n" กำหนดระยะห่าง ระหว่างรูปภาพและข้อความ แนวบน - ล่าง ของรูปภาพ ให้เป็น n พิกเซล

alt = "n" กำหนดคำอธิบายรูปภาพ เมื่อนำเมาส์ไปวางบนรูปภาพ โดยกำหนดให้ข้อความนั้น เป็น n

ตัวอย่างการใช้คำสั่ง
<img src="http://www.istockphoto.com/file_thumbview_approve/4870220/2/istockphoto_4870220-cartoon-animals.jpg" width = "370" height="380" alt="ตัวอย่างการแทรกรูปภาพ">

บทที่ 7 [HTML] คำสั่ง <img> Ex_img