
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>