ภาพ JPG
ภาพ gif
PNG รูปภาพ
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> ลองตัวเอง» มักจะระบุความกว้างและความสูงของภาพ ถ้ากว้างและความสูงไม่ได้ระบุไว้หน้าจะสั่นไหวขณะโหลดภาพ
HTML แสดงไวยากรณ์
ใน HTML, ภาพจะถูกกำหนดด้วย <img> แท็ก
<img> tag เป็นที่ว่างเปล่ามันมีคุณลักษณะเฉพาะและไม่ได้มีแท็กปิด
src แอตทริบิวต์ระบุ URL (web address) ของภาพ:
<img src=" url " alt=" some_text ">alt Attribute
alt แอตทริบิวต์ระบุข้อความสำรองสำหรับภาพหากภาพไม่สามารถแสดงได้
alt แอตทริบิวต์ให้ข้อมูลทางเลือกสำหรับภาพหากผู้ใช้ด้วยเหตุผลบางอย่างไม่สามารถดูได้ (เพราะการเชื่อมต่อช้าข้อผิดพลาดใน src แอตทริบิวต์หรือถ้าผู้ใช้ใช้โปรแกรมอ่านหน้าจอ)
หากเบราว์เซอร์ไม่สามารถหาภาพก็จะแสดงข้อความ ALT นี้:
alt แอตทริบิวต์ที่ถูกต้อง หน้าเว็บจะไม่ตรวจสอบอย่างถูกต้องโดยไม่ได้
HTML โปรแกรมอ่านหน้าจอ
อ่านหน้าจอเป็นโปรแกรมซอฟต์แวร์ที่สามารถอ่านสิ่งที่จะปรากฏบนหน้าจอ
โปรแกรมอ่านหน้าจอจะมีประโยชน์กับคนที่ตาบอดพิการทางสายตาหรือการเรียนรู้คนพิการ
โปรแกรมอ่านหน้าจอสามารถอ่าน alt แอตทริบิวต์
ขนาดภาพ - ความกว้างและความสูง
คุณสามารถใช้ style แอตทริบิวต์ที่จะระบุความกว้างและความสูงของภาพ
ค่าที่ระบุไว้ในพิกเซล (use px after the value) :
หรือคุณสามารถใช้ width และ height แอตทริบิวต์ นี่คือค่าที่ระบุไว้ในพิกเซลโดยค่าเริ่มต้น:
ความกว้างและความสูงหรือรูปแบบ?
ทั้งความกว้างความสูงและคุณลักษณะรูปแบบที่ถูกต้องใน HTML5 มาตรฐานล่าสุด
เราขอแนะนำให้คุณใช้ style แอตทริบิวต์ จะป้องกันไม่ให้แผ่นรูปแบบจากการเปลี่ยนขนาดเดิมของภาพ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> ลองตัวเอง» ภาพในโฟลเดอร์อื่น
ถ้าไม่ได้ระบุเบราว์เซอร์คาดว่าจะพบภาพในโฟลเดอร์เดียวกันกับหน้าเว็บ
แต่ก็เป็นเรื่องธรรมดาที่จะเก็บภาพในโฟลเดอร์ย่อย จากนั้นคุณจะต้องมีชื่อโฟลเดอร์ใน src แอตทริบิวต์:
ตัวอย่าง
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> ลองตัวเอง» ภาพบนเซิร์ฟเวอร์อื่น
บางเว็บไซต์เก็บภาพของพวกเขาบนเซิร์ฟเวอร์ภาพ
ที่จริงแล้วคุณสามารถเข้าถึงภาพจากที่อยู่เว็บใด ๆ ในโลก:
ภาพเคลื่อนไหว
มาตรฐาน GIF ช่วยให้ภาพเคลื่อนไหว:
โปรดทราบว่าไวยากรณ์ของการใส่ภาพเคลื่อนไหวไม่แตกต่างจากภาพไม่ใช่ภาพเคลื่อนไหว
การใช้ภาพเป็นลิงค์
การใช้ภาพเป็นลิงค์เพียงรัง <img> แท็กภายใน <a> แท็ก:
ตัวอย่าง
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> ลองตัวเอง» เพิ่ม "border:0;" เพื่อป้องกันไม่ให้ IE9 (and earlier) จากการแสดงเส้นขอบรอบ ๆ ภาพ
Floating ภาพ
ใช้คุณสมบัติ CSS ลอยที่จะปล่อยให้ลอยภาพ
ภาพที่สามารถลอยไปทางขวาหรือทางซ้ายของข้อความนี้:
ตัวอย่าง
<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> ลองตัวเอง» ภาพแผนที่
ใช้ <map> แท็กเพื่อกำหนดภาพแผนที่ ภาพแผนที่เป็นภาพที่มีพื้นที่ที่สามารถคลิก
name แอตทริบิวต์ของ <map> แท็กที่เกี่ยวข้องกับ <img> 's แอตทริบิวต์ usemap และสร้างความสัมพันธ์ระหว่างภาพและแผนที่
<map> แท็กมีจำนวนของ <area> แท็กที่กำหนดพื้นที่ที่สามารถคลิกได้ในภาพแผนที่:
ตัวอย่าง
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> ลองตัวเอง» บทสรุป
- ใช้ HTML <img> องค์ประกอบในการกำหนดภาพ
- ใช้ HTML จะ src แอตทริบิวต์การกำหนด URL ของภาพ
- ใช้แบบ HTML alt แอตทริบิวต์การกำหนดข้อความอื่นสำหรับภาพถ้ามันไม่สามารถแสดงได้
- ใช้ HTML โดย width และ height แอตทริบิวต์การกำหนดขนาดของภาพ
- ใช้ CSS width และ height คุณสมบัติเพื่อกำหนดขนาดของภาพ (alternatively)
- ใช้แบบ CSS float คุณสมบัติที่จะปล่อยให้ลอยภาพ
- ใช้แบบ HTML <map> องค์ประกอบในการกำหนดภาพแผนที่
- ใช้ HTML <area> องค์ประกอบในการกำหนดพื้นที่ที่สามารถคลิกได้ในภาพแผนที่
- ใช้ HTML <img> องค์ประกอบของ usemap แอตทริบิวต์ให้ชี้ไปที่ภาพแผนที่
โหลดภาพต้องใช้เวลา รูปภาพขนาดใหญ่สามารถชะลอหน้าเว็บของคุณ ใช้ภาพอย่างระมัดระวัง
ทดสอบตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ใช้สิทธิ 5 » ออกกำลังกาย 6 »
HTML แท็กรูปภาพ
| แท็ก | ลักษณะ |
|---|---|
| <img> | กำหนดภาพ |
| <map> | กำหนดภาพแผนที่ |
| <area> | กำหนดพื้นที่ที่สามารถคลิกภายในภาพแผนที่ |