ประเภทของไฟล์รูปภาพ |
การแทรกรูปภาพ |
การจัดวางตำแหน่งของรูปภาพ |
การกำหนดเส้นขอบรูปภาพ |
คำอธิบายรูปภาพ
 การจัดวางตำแหน่งของรูปภาพ
|
คำสั่ง <IMG SRC = "ชื่อรูปภาพ" ALIGN="ตำแหน่ง" >
- align=left หรือ center หรือ Right หรือ top หรือ bottom : เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น จัดรูปให้อยู่ด้านขวา <img src="sura.jpg" align=right>
ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ
|
การแสดงผล
|
คำสั่งที่ใช้กำหนดตำแหน่งข้อความ
|
ตำแหน่งที่แสดงผลข้อความ
|
| 1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ |
ALIGN = "LEFT" |
ตำแหน่งซ้ายของจอภาพ |
| ALIGN = "RIGHT" |
ตำแหน่งขวาของจอภาพ |
| 2. แบบแนวนอนเป็นคำสั่งที่ใช้กับข้อความ |
ALIGN = "TOP" |
ตำแหน่งบนสุดของรูปภาพ |
| ALIGN = "MIDDLE","ABSMIDDLE" |
ตำแหน่งกึ่งกลางของรูปภาพ |
| ALIGN = "BOTTOM","BASELINE","ABSBOTTOM" |
ตำแหน่งล่างสุดของรูปภาพ |
|
border size for images : เส้นขอบรูปภาพในเว็บเพจ
|
การจัดวางตำแหน่งรูปภาพจะใช้คำสั่งเดียวกันกับการวางตำแหน่งตัวอักษร และยังสามารถกำหนดเส้นขอบรอบรูปภาพด้วยการเพิ่มคำสั่งคุณสมบัติเส้นขอบ border ต่อจากชื่อรูปภาพได้ดังตัวอย่าง
<html>
<head>
<title>
Insert Images : เส้นขอบรูปภาพ
</title>
</head>
<body>
<div align="center">
ตำแหน่งและเส้นขอบรูปภาพ<br>
<img src="images/babydance01.gif" border="3">
</div>
</body>
</html> |
|
|
คำอธิบายรูปภาพ
|
นอกจากนี้แล้วเรายังสามารถกำหนดให้มีการแสดงชื่อรูปภาพ หรือคำบรรยาย หรือรายละเอียดของรูปภาพได้เมื่อนำเมาท์ไปชี้บนรูปนั้น หรือในกรณีที่ผู้ชมบางคนกำหนดให้บราวเซอร์ไม่ต้องแสดงผลรูปภาพเพื่อความรวดเร็วในการชมเว็บ รูปจะถูกแทนที่ด้วยชื่อ ที่เรียกว่า Alternative text โดยใช้วิธีการเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพดังตัวอย่าง
<img src="images/babydance01.gif" border="3"
alt="เด็กเต้น">
ทดสอบนำเมาส์มาวางเหนือรูปภาพ
| END : สรุปคำสั่งที่ใช้ในบทนี้ |
| TAGS |
รายละเอียด |
| <img src="name" border="n" alt =" text"> |
คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือ ชื่อและสถานที่รูปนั้นอยู่ โดยรูปภาพชนิด JPG, GIF, PNG |
| border คือ แสดงเส้น (n คือ ขนาดของเว้น) | alt ใช้แสดงข้อความกำกับรูปภาพ (text คือ ข้อความ) |
