ก่อนจะทำการแทรกภาพเราควรเตรียมรูปภาพและกำหนดขนาดภาพให้เหมาะสมเสียก่อน และถ้าภาพที่ใช้ไม่ใช่ภาพที่เราสร้างเองแต่เป็นการไป หามาเราจะต้องระบุแหล่งที่มาของภาพด้วยทุกครั้ง แล้วค่อยทำการแทรกภาพลงบนหน้าเว็บโดยสามารถทำได้ดังนี้
คำสั่ง (Tag)
ชื่อแท็ก | img |
ตำแหน่งแท็ก | <body>...</body> |
รูปแบบการใช้แท็ก | <img src="url"> |
แอตทริบิวต์ | src |
ค่า value | url ตำแหน่งของรูปภาพ - ตำแหน่งที่อยู่ภายในเว็บไซต์ (src="image.gif") - ตำแหน่งรูปภาพที่อยู่เว็บไซต์อื่น (src="http://www.example.com/image.gif") |
<img src="smile.png">
จากตัวอย่างในการกำหนดตำแหน่งของรูปภาพ จะเป็นการกำหนดตำแ่หน่งของภาพที่อยู่ภายในเว็บไซต์ และซึ่งไฟล์เว็บเพจกับไฟล์รูปภาพอยู่ในไดเร็กทอรี่ี่เดียวกัน ซึ่งจะกำหนดด้วย (ชื่อภาพ.นามสกุลภาพ)
URL ย่อมาจากคำว่า Uniform Resource Locator คือ ที่อยู่ (Address) ของข้อมูลต่างๆในInternet เช่น ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต
กรณีไฟล์เว็บเพจกับไฟล์รูปภาพไม่อยู่ในไดเร็กทอรี่ เดียวกัน
การสร้างเว็บไซต์จำเป็นต้องมีการแยกโฟล์เดอร์สำหรัีบเก็บข้อมูลต่าง ๆ ออกจากกันเพื่อความสะดวกในการเรียกใช้งานข้อมูลได้ง่าย และก็จะมีโฟล์เดอร์สำหรับเก็บรูปภาพและเว็บเพจออกจากกันในตัวอย่างต่อไปนี้จะเป็นการแทรกภาพบนเว็บที่ไฟล์เว็บเพจและไฟล์รูปภาพไม่ได้อยู่ในโฟล์เดอร์เดียวกัน
<p>การแทรกรูปภาพที่ไฟล์เว็บเพจและไฟล์รูปภาพอยู่ ไม่ได้อยู่ในไดเร็กทรอรี่เดียวกัน</p>
<img src="images/smile.png">
การแยกโฟล์เดอร์สำหรับเก็บไฟล์เว็บเพจกับไฟล์รูปภาพ ก็จะช่วยให้เราสามารถสร้างเว็บเพจได้ง่ายขึ้น เพราะในการสร้างเว็บไซต์จะมีจำนวนรูปภาพเยอะ รวมถึงไฟล์เว็บเพจด้วย