บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

2. การใส่รูปภาพลงในเว็บเพจด้วยแท็กคำสั่ง <img>

<img>เป็นแท็กคำสั่งที่ใช้ในการกำหนดรูปภาพที่ต้องการใส่ลงในเว็บเพจ

โดยที่
    - ชื่อไฟล์รูปภาพจะต้องระบุชนิดของไฟล์ด้วย เช่น logo.png
    - หากไฟล์รูปภาพดังกล่าวอยู่ในโฟลเดอร์เดียวกันกับเอกสารHTMLให้ระบุชื่อไฟล์ได้เลยโดยไม่ต้องใส่ตำแหน่งที่อยู่       ของไฟล์ (path) เช่น

          <img src ="logo.png">

   - หากเราแยกไฟล์เอาไว้ในโฟลเดอร์ ย่อยโฟลเดอร์เอกสารHTMLนั้น (เช่นโฟลเดอร์ Images) ให้ระบุโฟลเดอร์ย่อยด้วย
     เช่น

          <img src ="images/logo.png">

   - หากไฟล์รูปภาพนั้นอยู่ในโฟลเดอร์เหนือโฟลเดอร์เอกสาร     HTML ขณะนั้นขึ้นไป1ระดับให้ใช้เครื่องหมายจุด 2 จุด      ตามด้วยขีดทับ (../) เช่น

          <img src="../logo.png">

   - หากต้องการอ้างถึงไฟล์รูปภาพที่อยู่ที่อื่นเช่นในเว็บใดเว็บหนึ่ง ให้ระบุตำแหน่ง URL ที่อยู่ของไฟล์ในเว็บนั้น เช่น

          <img src="http://www.kruitti.com/combook.jpg">

การนำรูปปกหนังสือจากไฟล์ comp.jpg มาใส่ลงในเอกสาร HTML

<!DOCTYPE html>
<html>
<head>
<title>Image Tag</title>
</head>
<body>

หนังสือ คอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ <br>
<img src="comp.jpg">

</body>
</html>

ผลที่ได้บนเว็บเบราว์เซอร์

การใช้รูปปกหนังสือจากไฟล์ combook.jpg จากเว็บไซต์ www.kruitti.com/

<!DOCTPE html>
<html>
<head>
<title>Image Tag</title>
</head>
<body>

หนังสือ การใช้โปรแกรมประมวณผลคำ <br>
<img src="http://www.kruitti.com/combook.jpg">

</body>
</html>