รูปภาพ HTML
รูปภาพสามารถปรับปรุงการออกแบบและรูปลักษณ์ของหน้าเว็บได้
ตัวอย่าง
<img src="pic_trulli.jpg"
alt="Italian Trulli">
ตัวอย่าง
<img src="img_girl.jpg"
alt="Girl in a jacket">
ตัวอย่าง
<img src="img_chania.jpg"
alt="Flowers in Chania">
ไวยากรณ์รูปภาพ HTML
แท็ก HTML <img>ใช้เพื่อฝังรูปภาพในหน้าเว็บ
ในทางเทคนิคแล้วรูปภาพจะไม่ถูกแทรกลงในหน้าเว็บ รูปภาพเชื่อมโยงกับหน้าเว็บ แท็ ก<img>สร้างช่องว่างสำหรับภาพอ้างอิง
แท็ กว่า<img>งเปล่า มีเฉพาะแอตทริบิวต์ และไม่มีแท็กปิด
แท็ ก<img>มีแอตทริบิวต์ที่จำเป็นสองประการ:
- src - ระบุเส้นทางไปยังรูปภาพ
- alt - ระบุข้อความสำรองสำหรับรูปภาพ
ไวยากรณ์
<img src="url" alt="alternatetext">
แอตทริบิวต์ src
แอตทริบิวต์ที่ จำเป็นsrcระบุเส้นทาง (URL) ไปยังรูปภาพ
หมายเหตุ:เมื่อหน้าเว็บโหลดขึ้น ในขณะนั้นเบราว์เซอร์จะดึงรูปภาพจากเว็บเซิร์ฟเวอร์และแทรกลงในหน้า ดังนั้น ตรวจสอบให้แน่ใจว่ารูปภาพอยู่ในจุดเดิมที่สัมพันธ์กับหน้าเว็บ มิฉะนั้นผู้เยี่ยมชมของคุณจะได้รับไอคอนลิงก์ที่ใช้งานไม่ได้ ไอคอนลิงก์เสียและaltข้อความจะปรากฏขึ้นหากเบราว์เซอร์ไม่พบรูปภาพ
ตัวอย่าง
<img src="img_chania.jpg" alt="Flowers
in Chania">
แอตทริบิวต์ alt
แอตทริบิวต์ ที่จำเป็นaltจะแสดงข้อความสำรองสำหรับรูปภาพ หากผู้ใช้ไม่สามารถดูรูปภาพได้ด้วยเหตุผลบางประการ (เนื่องจากการเชื่อมต่อช้า ข้อผิดพลาดในแอตทริบิวต์ src หรือหากผู้ใช้ใช้โปรแกรมอ่านหน้าจอ)
ค่าของaltแอตทริบิวต์ควรอธิบายรูปภาพ:
ตัวอย่าง
<img src="img_chania.jpg" alt="Flowers
in Chania">
หากเบราว์เซอร์ไม่พบรูปภาพ จะแสดงค่าของalt
แอตทริบิวต์:
ตัวอย่าง
<img src="wrongname.gif" alt="Flowers
in Chania">
เคล็ดลับ:โปรแกรมอ่านหน้าจอคือโปรแกรมซอฟต์แวร์ที่อ่านโค้ด HTML และอนุญาตให้ผู้ใช้ "ฟัง" เนื้อหาได้ โปรแกรมอ่านหน้าจอมีประโยชน์สำหรับผู้ที่มีความบกพร่องทางสายตาหรือพิการทางการเรียนรู้
ขนาดภาพ - กว้างและสูง
คุณสามารถใช้styleแอตทริบิวต์เพื่อระบุความกว้างและความสูงของรูปภาพ
ตัวอย่าง
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
หรือคุณสามารถใช้แอตทริบิวต์widthและ :height
ตัวอย่าง
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
widthและแอตทริบิวต์heightจะกำหนดความกว้างและความสูงของภาพเป็นพิกเซลเสมอ
หมายเหตุ:ระบุความกว้างและความสูงของรูปภาพเสมอ หากไม่ระบุความกว้างและความสูง หน้าเว็บอาจกะพริบขณะโหลดรูปภาพ
ความกว้างและความสูงหรือรูปแบบ?
แอตทริบิวต์width, height, และstyleทั้งหมดถูกต้องใน HTML
อย่างไรก็ตาม เราขอแนะนำให้ใช้styleแอตทริบิวต์ ป้องกันไม่ให้สไตล์ชีตเปลี่ยนขนาดของรูปภาพ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
รูปภาพในโฟลเดอร์อื่น
หากคุณมีรูปภาพในโฟลเดอร์ย่อย คุณต้องรวมชื่อโฟลเดอร์ในsrcแอตทริบิวต์:
ตัวอย่าง
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
รูปภาพบนเซิร์ฟเวอร์/เว็บไซต์อื่น
บางเว็บไซต์ชี้ไปที่รูปภาพบนเซิร์ฟเวอร์อื่น
หากต้องการชี้ไปที่รูปภาพบนเซิร์ฟเวอร์อื่น คุณต้องระบุ URL แบบสัมบูรณ์ (เต็ม) ในsrcแอตทริบิวต์:
ตัวอย่าง
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
หมายเหตุเกี่ยวกับรูปภาพภายนอก: รูปภาพภายนอกอาจอยู่ภายใต้ลิขสิทธิ์ หากคุณไม่ได้รับอนุญาตให้ใช้ คุณอาจกำลังละเมิดกฎหมายลิขสิทธิ์ นอกจากนี้ คุณไม่สามารถควบคุมภาพภายนอกได้ มันสามารถลบออกหรือเปลี่ยนแปลงได้ทันที
ภาพเคลื่อนไหว
HTML อนุญาต GIF แบบเคลื่อนไหว:
ตัวอย่าง
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
รูปภาพเป็นลิงค์
หากต้องการใช้รูปภาพเป็นลิงก์ ให้ใส่<img>แท็กใน<a>
แท็ก:
ตัวอย่าง
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
ภาพลอยน้ำ
ใช้คุณสมบัติ CSS floatเพื่อให้รูปภาพลอยไปทางขวาหรือทางซ้ายของข้อความ:
ตัวอย่าง
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
เคล็ดลับ: หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS Float โปรดอ่านCSS Float Tutorial
รูปแบบรูปภาพทั่วไป
ต่อไปนี้คือประเภทไฟล์รูปภาพที่พบบ่อยที่สุด ซึ่งรองรับในทุกเบราว์เซอร์ (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
สรุปบท
- ใช้องค์ประกอบ HTML
<img>เพื่อกำหนดรูปภาพ - ใช้แอตทริบิวต์ HTML
srcเพื่อกำหนด URL ของรูปภาพ - ใช้แอตทริบิวต์ HTML
altเพื่อกำหนดข้อความสำรองสำหรับรูปภาพ หากไม่สามารถแสดงได้ - ใช้ HTML
widthและheightแอตทริบิวต์หรือ CSSwidthและheightคุณสมบัติเพื่อกำหนดขนาดของรูปภาพ - ใช้คุณสมบัติ CSS
floatเพื่อให้รูปภาพลอยไปทางซ้ายหรือทางขวา
หมายเหตุ:การโหลดรูปภาพขนาดใหญ่ต้องใช้เวลา และอาจทำให้หน้าเว็บของคุณช้าลง ใช้ภาพอย่างระมัดระวัง
แบบฝึกหัด HTML
แท็กรูปภาพ HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา