|
4.2
คุณสมบัติการนำเสนอรูปภาพ
สำหรับการใส่รูปภาพ ในเอกสาร
HTML ยังสามารถกำหนดคุณสมบัติการนำเสนอรูปภาพได้
ซึ่งในการกำหนดคุณสมบัติ (attribute)
ที่จะใช้กำหนดคุณสมบัติในคำสั่ง <img src> เพื่อที่จะทำให้รูปภาพที่นำเสนอน่าสนใจ
และสามารถบอกวัตถุประสงค์ของเว็บเพจได้ดียิ่งขึ้น ดังนี้
-
การใส่รูปภาพ
ถ้าไฟล์รูปภาพมีขนาดใหญ่ การแสดงผลอาจทำได้ช้า ดังนั้นควรใส่คำอธิบายภาพไว้ด้วย
โดยการเติมคำ alt= "ชื่อภาพ"
หรือคำอธิบายรูปภาพ
ไว้ต่อจากชื่อภาพใน <img src> ซึ่งเว็บบราวเซอร์จะแสดงคำอธิบายภาพก่อนที่จะโหลดภาพจริงเสร็จสิ้น
-
การใส่รูปภาพ สามารถกำหนดขนาดของภาพที่ต้องการให้แสดงผล
ได้ด้วยการกำหนดตัวเลขบอกความกว้าง
x ยาว ในหน่วย pixels เช่น
<img src="images/flowers.gif "
alt="Flowers" width="100" hight="70">
-
ระบุตำแหน่งการวางรูปภาพในเว็บเพจ โดยสามรถวาง
ด้านซ้าย (left) ด้านขวา (right)
และ กึ่งกลาง (center) โดยใช้
attribute align="ตำแหน่ง"
เช่น
<img src="images/flowers.gif "
alt="Flowers" align="center">
-
สามารถกำหนดเส้นขอบของรูปภาพ
โดยใช้ attribute
border="ค่าตัวเลข"
เช่น
<img src="flowers.gif "
alt="Flowers" align="center" border="2">
สำหรับการใส่เส้นขอบให้กับรูปภาพหากไม่กำหนดค่า
แสดงว่าไม่มีเส้นขอบ
หรือ border="0"
 <img src="itgreat.gif"
alt="สวัสดครับ (ภาพขนาด 100X180)" align="center"
border="2" width="100" height="180">
ทดสอบการกำหนดคุณสมบัติรูปภาพ
สรุปคำสั่งกำหนดคุณสมบัติของรูปภาพ
-
alt
= เป็นการกำหนดข้อความอธิบาย จะปรากฏเมื่อนำเมาส์ชี้ที่รูปภาพ
-
align
= "center" เป็นการกำหนดรูปภาพให้อยู่ตรงกลาง
-
align
= "left" เป็นการกำหนดรูปภาพให้อยู่ด้านขวา
-
align
= "right" เป็นการกำหนดรูปภาพให้อยู่ด้านซ้าย
-
width
= การกำหนดขนาดความกว้างของรูปภาพ
-
height
= การกำหนดขนาดความสูงของรูปภาพ
-
border = เป็นการกำหนดเส้นกรอบของรูปภาพ
|
[..กลับไปหน้าหลัก..]
