รูปแบบ
< img src = "ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >
หรือ
<img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" alt= "ข้อความอธิบาย"
align="top/middle/bottom/left/right"
width="ค่าตัวเลข" height="ค่าตัวเลข"
hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >
align="top/middle/bottom/left/right"
width="ค่าตัวเลข" height="ค่าตัวเลข"
hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >
alt เป็นการกำหนดข้อความอธิบาย โดยจะปรากฏก็ต่อเมื่อนำเมาส์ลากมาที่รูปข้อความก็จะปรากฏ
align="top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ
align="middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ
align="bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ
align="left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ
align="right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
width การกำหนดขนาดความกว้างของรูปภาพ
height การกำหนดขนาดความสูงของรูปภาพ
hspace เป็นการกำหนดระยะเว้นขอบด้านซ้ายด้านขวากับรูปภาพ ในการแสดงข้อ ความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้าง ๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้น ๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <img> จึงถูกออกแบบให้มีแอตทริบิวต์ vspace และ hspace เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
vspace เป็นการกำหนดระยะเว้นขอบจากด้านบนด้านล่างกับรูปภาพ
border เป็นการกำหนดเส้นกรอบของรูปภาพ สำหรับการใส่เส้นขอบให้กับรูปใด ๆ นั้น ให้ใช้แอตทริบิวต์ border แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง
ตัวอย่าง
align="top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ
align="middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ
align="bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ
align="left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ
align="right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
width การกำหนดขนาดความกว้างของรูปภาพ
height การกำหนดขนาดความสูงของรูปภาพ
hspace เป็นการกำหนดระยะเว้นขอบด้านซ้ายด้านขวากับรูปภาพ ในการแสดงข้อ ความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้าง ๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้น ๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <img> จึงถูกออกแบบให้มีแอตทริบิวต์ vspace และ hspace เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
vspace เป็นการกำหนดระยะเว้นขอบจากด้านบนด้านล่างกับรูปภาพ
border เป็นการกำหนดเส้นกรอบของรูปภาพ สำหรับการใส่เส้นขอบให้กับรูปใด ๆ นั้น ให้ใช้แอตทริบิวต์ border แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง
ตัวอย่าง
<html>
<head>
<title>นำเสนอรูปภาพ</title>
</head>
<body>
<img src="pict1.gif">
</body>
</html>
<head>
<title>นำเสนอรูปภาพ</title>
</head>
<body>
<img src="pict1.gif">
</body>
</html>
การใส่ Border หรือ ขอบหนา
<html>
<head><title>Insert Border</title></head>
<body>
<img width="400" height="300" border="3" src="pict1.jpg" alt = "รูปภาพ">
</body>
</html>
<head><title>Insert Border</title></head>
<body>
<img width="400" height="300" border="3" src="pict1.jpg" alt = "รูปภาพ">
</body>
</html>
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments