HTML Image จัดการกับรูปภาพใน HTML

ในการทำเว็บไซต์ คงหลีกเลี่ยงไม่ได้แน่ที่จะต้องใช้รูปภาพมาประกอบ ไม่ว่าจะเป็นรูปภาพส่วนหัว รูปภาพพื้นหลัง รูปภาพในเนื้อหา เป็นต้น รูปภาพทำให้เว็บไซต์ของเราสวยงามน่าเข้าชมมากขึ้น

ใน HTML เราสามารถใช้งานรูปภาพได้โดยใช้แท็ก <img> ซึ่งแท็กนี้เป็นแท็กที่ไม่ต้องมีแท็กปิด และจะใช้แอททริบิวต์ src สำหรับการระบุ url หรือตำแหน่งที่อยู่ของรูปภาพที่จะนำมาใช้ ในรูปแบบดังนี้ <img src="ตำแหน่งของรูปภาพ">

<img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="">

แอททริบิวต์ alt

แอททริบิวต์ alt ใช้สำหรับกำหนด alternate text ให้กับรูปภาพ ซึ่งเป็นข้อความอธิบายรูปภาพว่าเกี่ยวกับอะไร จะแสดงผลในกรณีที่รูปภาพนั้นไม่สามารถแสดงผลได้ ข้อความนี้จะแสดงผลออกมาแทน

<img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="excel test format">

เราจำเป็นต้องใส่แอททริบิวต์ alt ทุกครั้งที่ใช้งานแท็ก <img>

ขนาด ความกว้างและความสูงของรูปภาพ

เมื่อต้องการกำหนดขนาดการแสดงผลของรูปภาพ เราสามารถใช้แอททริบิวต์ style เพื่อกำหนดของรูปภาพได้ตามที่ต้องการ เช่น

<img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="excel test format" style="width:600px;height:400px;">

หรือจะใช้แอททริบิวต์ width และ height สำหรับกำหนดความกว้างและความสูงให้กับรูปภาพก็ได้เช่นกัน

<img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="excel test format" width="600" height="400">

การอ้างอิงที่อยู่ของรูปภาพ ถ้ารูปภาพที่ใช้อยู่ในเว็บไซต์เดียวกันและอยู่ในโฟลเดอร์เดียวกันกับหน้าเว็บนั้น เราสามารถอ้างอิงเป็นชื่อรูปภาพได้เลย เช่น

 <img src="myimage.jpg" alt="รูปภาพในโฟลเดอร์เดียวกัน">

ถ้ารูปภาพที่ใช้อยู่ในเว็บเดียวกันและอยู่คนละโฟลเดอร์ เราต้องอ้างอิงโฟลเดอร์ที่เก็บรูปภาพนั้นด้วย เช่น

 <img src="images/myimage.jpg" alt="รูปภาพที่เก็บอยู่คนละโฟลเดอร์">

แต่ถ้ารูปภาพที่ใช้อยู่ในเซิร์ฟเวอร์อื่นหรือเว็บไซต์อื่น เราต้องอ้างอิงที่อยู่ของรูปภาพแบบเต็ม เช่น

<img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="">

ใช้รูปภาพเป็นลิงค์

เราสามารถใช้รูปภาพเป็นลิงค์ได้ โดยการวางแท็ก <a></a> ครอบแท็ก <img>

 <a href="https://www.dcrub.com/excel-font-format">
  <img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="excel format" style="width:250px;height:100px;border:0;">
</a>

Image Floating จัดรูปภาพอยู่ด้านขวาหรือซ้ายของข้อความ

ถ้าต้องการให้รูปภาพอยู่ด้านขวาหรือด้านซ้ายของข้อความเสมอ เราสามารถใช้ float กำหนดสไตล์ให้กับรูปภาพได้ ดังนี้

 <p><img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="" style="float:right;width:42px;height:42px;">
รูปภาพจะลอยอยู่ด้านขวาของข้อความเสมอ</p>

<p><img src="https://www.dcrub.com/wp-content/uploads/2020/03/excel-text-format.jpg" alt="" style="float:left;width:42px;height:42px;">
รูปภาพจะลอยอยู่ด้านซ้ายของข้อความเสมอ</p>