HTML Images

   อัปเดตล่าสุด March 5, 2024

ในยุคสมัยแรกเริ่มนั้น เว็บแสดงผลได้เพียงแค่ตัวหนังสือ (Text) แต่แล้วเมื่อเวลาผ่านไป วิวัฒนาการของเว็บก็สมบูรณ์แบบขึ้นเรื่อย ๆ จนสามารถแสดงผลแบบ media ได้หลากหลายมากขึ้น ซึ่งรูปภาพก็เป็นหนึ่งในนั้น โดย HTML Image จะมีแท็กที่มีชื่อว่า <img>   


ตัวอย่างการใช้งาน HTML Image

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<h1>Hello, HTML Images</h1>
<img
src="images/my_cat.jpeg"
alt="This is my cute cat, and his name is เจ้านาย"
width="380"
height="300" />
</body>
</html>


จะได้


โดย Attributes ของ <img>  แท็กจะประกอบไปด้วย

Attributes

คำอธิบาย

<src>   

แหล่งที่เก็บไฟล์ภาพ (source)

<alt>  

Alt (Alternate Text) เป็น attribute ที่ใช้แสดงข้อความ ในกรณีที่ภาพไม่แสดงผล

<width>   

ความกว้างของภาพ มีหน่วยเป็น pixel

<height>   

ความสูงของภาพ มีหน่วยเป็น pixel




คอร์สเรียนแนะนำ