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


บทเรียนก่อนหน้า
บทเรียนถัดไป

HTML Tutorial HTML คืออะไร (Introduction) Lesson 1 HTML Headings Lesson 2 HTML Spaces (การเว้นวรรค) Lesson 3 HTML Images Lesson 4 HTML Comments Lesson 5 HTML Table Lesson 6

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