รูปภาพ HTML

ด้วยการใช้ HTML คุณสามารถแสดงภาพในเอกสาร

ตัวอย่าง

ใส่ภาพ
ตัวอย่างนี้แสดงวิธีการแสดงภาพบนเว็บไซต์
ใส่ภาพจากตำแหน่งต่างๆ
ตัวอย่างนี้แสดงวิธีการแสดงภาพในแฟ้มหรือเซิร์ฟเวอร์อื่นๆ ในเว็บไซต์

（คุณสามารถหาตัวอย่างเพิ่มเติมที่ด้านล่างของหน้านี้)

แท็กภาพ (<img>) และคุณสมบัติแหล่ง (Src)

ใน HTML ภาพถูกกำหนดด้วยแท็ก <img>

<img> เป็นแท็กว่าง หมายความว่ามันมีคุณสมบัติเท่านั้น และไม่มีแท็กปิด

เพื่อแสดงภาพบนหน้าเว็บ คุณต้องใช้คุณสมบัติแหล่ง (src) ค่าของคุณสมบัติแหล่งคือ URL ของภาพ

บทเขียนที่ใช้ในการกำหนดภาพคือ：

<img src="url" />

URL หมายถึงสถานที่เก็บภาพ。ถ้าภาพที่มีชื่อ "boat.gif" ตั้งอยู่ในไดเรกทอรี images ของ www.codew3c.com แล้ว รายการ URL ของมันคือ http://www.codew3c.com/images/boat.gif

เบราเซอร์จะแสดงภาพในบทความที่มีแท็กภาพอยู่ ถ้าคุณจะใส่แท็กภาพระหว่างสองย่อหน้า แบราเซอร์จะแสดงย่อหน้าแรกก่อน ตามด้วยภาพ แล้วแสดงย่อหน้าที่สอง

แทนค่าคุณสมบัติ (Alt)

ข้อความทดแทนสามารถกำหนดให้แก่ภาพด้วยตัวเลขนี้ ข้อความทดแทนนี้เป็นของผู้ใช้กำหนด

<img src="boat.gif" alt="Big Boat">

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

ความระมัดระวังพื้นฐาน - คำแนะนำที่มีประโยชน์:

หากไฟล์ HTML มีภาพสิบราย ในการแสดงหน้านี้ จะต้องโหลดไฟล์สิบเอ็ดราย เนื่องจากการโหลดภาพต้องใช้เวลา ดังนั้นคำแนะนำของเราคือ ใช้ภาพอย่างเหมาะสม

ตัวอย่างเพิ่มเติม

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

แท็กภาพ

แท็ก รายละเอียด
<img> กำหนดภาพ
<map> กำหนดแผนภาพแสดงแนวทาง
<area> กำหนดพื้นที่ที่สามารถคลิกได้ในแผนภาพแสดงแนวทาง