บทที 6 รูปภาพในเว็บเพจ
Download
Report
Transcript บทที 6 รูปภาพในเว็บเพจ
รู ปภาพในเว็บเพจ
การแทรกรู ปภาพในเว็บเพจ
รู ปแบบ
<IMG SRC="ชื่อรู ปภาพ">
จะสังเกตได้วา่ คาสัง่ IMG นี้เป็ นคาสัง่ ที่ไม่ตอ้ งมีคาสัง่ ปิ ด เมื่อมีการเก็บรู ปภาพไว้ในโฟลเดอร์ใดเป็ นการเฉพาะ
จะต้องกาหนดเส้นทางชี้ไปยังรู ปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรู ปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้าง
ในคาสัง่ เป็ น
<IMG SRC="โฟลเดอร์ที่เก็บรู ป/ชื่อรู ป.นามสกุล"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดง เพราะไม่มีรูปนี้อยู่
จริ ง
ex Insert_img.html
<body>
ข้อความที่แสดงในส่ วนเนื้อหา<br>
<img src="images/chicklittle.gif">
</body>
การกาหนดขนาดภาพ
รู ปแบบ
<img src="ไฟล์รูปภาพ" width="ความกว้าง" height="สูง">
ex Size_img.html
<body>
<div align="center">
<b>ตัวอย่างการแสดงผลจากคาสั่ง</b><br><br>
<img src="images/cl_breakdance.gif">
<img src="images/cl_breakdance.gif" width="80" height="66">
<img src="images/cl_breakdance.gif" width="160" height="133">
</div>
</body>
การจัดวางตาแหน่ งของรู ปภาพ
รู ปแบบ
<IMG SRC = "ชื่อรู ปภาพ" ALIGN="ตาแหน่ ง" >
ตาแหน่งการวางภาพ มีรายละเอียด ดังนี้
-
top วางข้อความระดับบนรู ปภาพ
middle วางข้อความระดับกลางรู ปภาพ
bottom วางข้อความระดับล่างรู ปภาพ (ค่ ามาตรฐาน)
left วางรู ปภาพทางซ้ายของข้อความ (ค่ ามาตรฐาน)
right วางรู ปภาพทางขวาของข้อความ
Ex align_img.html
<BODY>
<p> <img src = "images/cl_breakdance.gif" align = "TOP"> ข้อความนี้อยูส่ ่ วนบนของรู ปภาพ
(align = top) </p><hr>
<p> <img src = "images/cl_breakdance.gif" align = "MIDDLE">
ข้อความนี้อยูส่ ่ วนกลางของรู ปภาพ (align = middle) </p><hr>
<p> <img src = "images/cl_breakdance.gif" align = "BOTTOM">
ข้อความนี้อยูส่ ่ วนล่างของรู ปภาพ (align = bottom) </p><hr>
<p> <img src = "images/cl_breakdance.gif" align = "LEFT">
<BR><BR><BR><BR><BR></p><hr>
<p><img src = "images/cl_breakdance.gif" align =
"RIGHT"> <BR><BR><BR><BR><BR></p><hr>
</BODY>
เส้ นขอบรู ปภาพในเว็บเพจ
รู ปแบบ
<img src="รู ปภาพ" border="ขนาดเส้นขอบ">
ex border_img.html
<body>
<div align="center">
ตาแหน่งและเส้นขอบรู ปภาพ<br>
<img src="images/babydance01.gif" border="3">
</div>
</body>
คาอธิบายรู ปภาพ
รู ปแบบ
<img src="รู ปภาพ" alt="คาอธิบาย">
ex border_img.html
<body>
<div align="center">
ตาแหน่งและเส้นขอบรู ปภาพ<br>
<img img src="images/babydance01.gif" alt="เด็กเต้น">
</div>
</body>
การกาหนดระยะห่างระหว่างรู ปภาพ
รู ปแบบ
<img src="รู ปภาพ" vspace/hspace="ระยะห่าง">>
vspace = การกาหนดระยะห่างระหว่างรู ปภาพกับข้อความในแนวตั้ง (Vertical space)
hspace = การกาหนดระยะห่างระหว่างรู ปภาพกับข้อความในแนวนอน (Horizontal space)