top of page
บทที่ 5
การใส่รูปภาพลงในเว็บ
5.2 การใส่รูปภาพในเว็บเพจด้วยเเท็กคำสั่ง <img>
<img>เป็นเเท็กคำสั่งที่ใช่ในการกำหนดรูปภาพที่ต้องการใส่ลงในเว็บเพจ
รูปแบบ
<img src ="ชื่อไฟล์รูปภาพ">
โดยที่
- ชื่อไฟล์รูปภาพจะต้องระบุชนิดของไฟล์ด้วย เช่น logo.png
- หากไฟล์รูปภาพดังกล่าวอยู่ในโฟลเดอร์เดียวกันกับเอกสาร HTML ให้ระบุชื่อไฟล์ได้เลยโดยไม่ต้องใส่ตำเเหน่งที่อยู่ของไฟล์ (path) เช่น
<img src ="logo.png">
- หากเราเเยกเก็บไฟล์รูปภาพไว้ในโฟลเดอร์ย่อยของโฟลเดอร์เอกสาร HTML นั้น (เช่นโฟลเดอร์ lmages) ให้ระบุโฟเดอร์ย่อยด้วย เช่น
<img src ="lmages/logo.png">
- หากไฟล์รูปภาพนั้นอยู๋ในโฟลเดอร์เหนือโฟลเดอร์เอกสาร HTML ขณะนั้นขั้นไประดับให้ใช้เครื่องหมาย จุด 2 จุดตามด้วยขีดทั(../) เช่น
<img src ="../ logo.png">
- หากต้องการอ้างถึงไฟล์รูปภาพที่อยู๋ที่อื่นเช่นในเว็บใดเว็บหนึ่ง ให้ระบุตำเเหน่ง URL ที่อยู่ของไฟล์ในเว็บนั้น เช่น
<img src="http://www.softpressbook.com/wdbook.jpg">
เพื่อให้ทำตามตัวอย่างได้ ให้ไปยังเว็บไซต์ http://www.softpressbook.com เเล้วบันทึกรูปปกลงหนังสือ "คอมพิวเตอร์เเละสารสนเทศเพื่องานอาชีพ" (comp.jpg) มาเก็บไว้ในโฟลเดอร์เดียวกับเอกสาร HTML
การนำรูปปกหนังสือจากไฟล์ comp.jpg มาใส่ลงในเอกสาร
<!Doctype html>
<html>
<head>
<title>Image Tay </title>
</head>
<body>
หนังสือ คอมพิวเตอร์เเละสารสนเทศเพื่องานอาชีพ <br>
<img src ="comp.jpg">
</body>
</html>
การใช้รูปปกหนังสือจากไฟล์ wdbook.jpg จากเว็บไซต์ www.softpressbook.com
<!Doctype html>
<html>
<head>
<title>Image Tag </title>
</head>
<body>
หนังสือ การใช้โปรเเกรมประมวลผลคำ <br>
<img src ="comp.jpg">
</body>
</html>
bottom of page