4.1 การใส่รูปภาพ
จากข้อมูลเบื้องต้นเกี่ยวกับรูปภาพที่จะใส่ในเอกสาร
HTML ในขั้นตอนต่อไป
จะนำรูปภาพมาใส่ในเอกสาร โดยจะใช้คำสั่งในการใส่รูปภาพ คือ
<img src="ชื่อไฟล์รูปภาพ"
หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์"
หรือ "image URL">
การใส่รูปภาพ นั้น การระบุตำแหน่งที่เก็บรูปภาพ (folder)
นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ
(path)ผิด รูปภาพจำไม่ปรากฎขึ้น จะแสดงผลเป็นกรอบรูปภาพเล็ก ๆ แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ
(ดูตัวอย่าง)
สังเกตที่ path
จะใช้เครื่องหมาย สแลช (/) ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง
ดังตัวอย่าง
ถ้าต้องการใส่รูปภาพชื่อไฟล์
flowers.gif"
ซึ่งเก็บอยู่ใน folder
images จะกำหนดได้ ดังนี้
<img src="flowers.gif">
อ้าง path ผิด |
<img src="images/flowers.gif ">
อ้าง path ถูกต้อง
|
ทดสอบการใส่รูปภาพ
ข้อควรระวัง
คือ เรื่องของที่เก็บภาพ (path)
ตรวจสอบได้ดังนี้
-
ถ้าที่เก็บรูปภาพอยู่ใน folder
เดียวกับไฟล์ HTML
ที่ต้องการใส่รูปภาพนั้น ไม่ต้องระบุ path
ก็ได้
-
ถ้าไฟล์ HTML อยู่ใน folder
ชื่อ homepage ที่มีภาพอยู่ใน folder ชื่อ image เมื่อจะใช้คำสั่งใส่ภาพออกมา ต้องใส่ path ให้ถูกต้อง คือ <img src="image/ชื่อภาพ">
|