ดีครับดอทคอม
HTML

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

13/04/2020
ดีครับดอทคอม
HTML Image จัดการกับรูปภาพใน HTML

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>
คู่มือใช้งาน Excel 365 ฉบับสมบูรณ์

คู่มือใช้งาน Excel 365 ฉบับสมบูรณ์

คู่มือใช้งาน Excel 365 ฉบับสมบูรณ์

ช้อปเลย
Suikone เสื้อแจ็คเก็ตผู้ชายกันลม สำหรับเดินป่า น้ำหนักเบา ระบายอากาศดีเยี่ยม Men Jacket

Suikone เสื้อแจ็คเก็ตผู้ชายกันลม สำหรับเดินป่า

Suikone เสื้อแจ็คเก็ตผู้ชายกันลม สำหรับเดินป่า น้ำหนักเบา ระบายอากาศดีเยี่ยม Men Jacket

ช้อปเลย
Nike Women's Air Max SC Shoes - White ไนกี้ รองเท้าผู้หญิง Air Max SC - สีขาว

White ไนกี้ รองเท้าผู้หญิง Air Max SC - สีขาว

Nike Women's Air Max SC Shoes - White ไนกี้ รองเท้าผู้หญิง Air Max SC - สีขาว

ช้อปเลย
adidas เทรนนิง เสื้อยืด AEROREADY Designed To Move Sport 3-Stripes ผู้ชาย สีดำ GM2105

adidas เทรนนิง เสื้อยืด ผู้ชาย สีดำ GM2105

adidas เทรนนิง เสื้อยืด AEROREADY Designed To Move Sport 3-Stripes ผู้ชาย สีดำ GM2105

ช้อปเลย
MENSPE เข็มขัดชาย เข็มขัดแฟชั่นชาย เข็มขัดหนังแท้ผู้ชาย เข็มขัดลายเสือดาว เข็มขัดหัวเข็มขัดอัตโนมัติหนังวัวสองชั้น สายธุรกิจคุณภาพสูงแบรนด์หรู สำหรับผู้ชาย

MENSPE เข็มขัดหนังแท้ผู้ชาย หัวเข็มขัดอัตโนมัติ

MENSPE เข็มขัดหนังแท้ผู้ชาย หัวเข็มขัดอัตโนมัติหนังวัวสองชั้น

ช้อปเลย
CASIO นาฬิกาข้อมือ CASIO รุ่น MTP-VD01L-1BVUDF สายหนัง สีดำ

นาฬิกาข้อมือ CASIO รุ่น MTP-VD01L-1BVUDF สายหนัง

CASIO นาฬิกาข้อมือ CASIO รุ่น MTP-VD01L-1BVUDF สายหนัง สีดำ

ช้อปเลย