บทที่ 7 [HTML] คำสั่ง <img>
หน้า 1 จาก 1
บทที่ 7 [HTML] คำสั่ง <img>
หลังจากที่เราๆได้ศึกษาการตกแต่งอักษร และการสร้างลำดับรายการไปเรียบร้อยแล้ว คราวนี้ เราจะมาศึกษาการใส่ภาพ และคำสั่งเพิ่มเติมของการมใส่ภาพ
คำสั่งที่ใช้ใส่รูปภาพลงในเว็บเพจ คือคำสั่ง <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="ตัวอย่างการแทรกรูปภาพ">
คำสั่งที่ใช้ใส่รูปภาพลงในเว็บเพจ คือคำสั่ง <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="ตัวอย่างการแทรกรูปภาพ">
Similar topics
» บทที่ 5 [HTML] คำสั่ง <ul> <ol>
» บทที่ 4 [HTML] คำสั่ง <body>
» บทที่ 6 [HTML] คำสั่ง <dl> <dir> <menu>
» บทที่ 8 [HTML]คำสั่ง <marquee>
» บทที่ 9 [HTML]คำสั่ง <table>
» บทที่ 4 [HTML] คำสั่ง <body>
» บทที่ 6 [HTML] คำสั่ง <dl> <dir> <menu>
» บทที่ 8 [HTML]คำสั่ง <marquee>
» บทที่ 9 [HTML]คำสั่ง <table>
หน้า 1 จาก 1
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ
|
|