|
จากบทที่สองเราได้มีการแทรกรูปภาพลงไปเป็นพื้นหลังด้วยคำสั่ง Background="ชื่อรูปภาพ" มาแล้ว รูปภาพที่นำมาใช้ในเว็บเพจนั้นจะต้องอยู่ในสกุล JPG, GIF, PNG เท่านั้นและจะต้องมีขนาดที่เหมาะสมเพื่อให้สามารถดาวน์โหลดได้เร็ว
 Images in ypur web page : การแทรกรูปภาพในเว็บเพจ |
สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <IMG SRC="ชื่อรูปภาพ"> ดังตัวอย่างนี้จะเป็นการแทรกรูปภาพทั้งเป้นพื้นหลังและในหน้าเว็บเพจ
<html>
<head>
<title>
Insert Images : การแทรกภาพ
</title>
</head>
<body background="bgimage.gif">
ข้อความที่แสดงในส่วนเนื้อหา
<img src="kerokero.gif">
</body>
</html>
|
|
จะสังเกตได้ว่าคำสั่ง IMG นี้เป็นคำสั่งเดี่ยวไม่ต้องมีคำสั่งปิด เมื่อมีการเก็บรูปภาพไว้ในโฟลเดอร์ใดเป็นการเฉพาะ จะต้องกำหนดเส้นทางชี้ไปยังรูปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรูปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้างในคำสั่งเป็น <IMG SRC="images/name.gif"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดงดังตัวอย่างภาพนี้  เพราะไม่มีรูปนี้อยู่จริง
หากเราต้องการแสดงรูปให้มีขนาดต่างจากขนาดจริงของภาพ ก็สามารถทำได้ด้วยการกำหนดเพิ่มในส่วนของความกว้าง ความยาวของรูปภาพ ดังตัวอย่าง ภาพแรกคือภาพขนาดจริง ภาพที่สองเป็นการลดขนาดลง และภาพที่สามเป็นการเพิ่มขนาดขึ้น
| Alignment and border size for images : การวางตำแหน่งและเส้นขอบรูปภาพในเว็บเพจ |
การจัดวางตำแหน่งรูปภาพจะใช้คำสั่งเดียวกันกับการวางตำแหน่งตัวอักษร และยังสามารถกำหนดเส้นขอบรอบรูปภาพ ด้วยการเพิ่มคำสั่งคุณสมบัติเส้นขอบ border ต่อจากชื่อรูปภาพได้ดังตัวอย่าง
<html>
<head>
<title>
Insert Images : ตำแหน่งและเส้นขอบรูปภาพ
</title>
</head>
<body>
<div align="center">
ตำแหน่งและเส้นขอบรูปภาพ<br>
<img src="kerokero.gif" border="3">
</div>
</body>
</html>
|
|
นอกจากนี้แล้ว เรายังสามารถกำหนดให้มีการแสดงชื่อรูปภาพ หรือคำบรรยาย หรือรายละเอียดของรูปภาพได้เมื่อนำเมาท์ไปชี้บนรูปนั้น หรือในกรณีที่ผู้ชมบางคนกำหนดให้บราวเซอร์ไม่ต้องแสดงผลรูปภาพ เพื่อความรวดเร็วในการชมเว็บ รูปจะถูกแทนที่ด้วยชื่อ ที่เรียกว่า Alternative text โดยใช้วิธีการเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพ ดังตัวอย่าง
<img src="kerokero.gif" border="3" alt="รูปกบ kero">
| END : สรุปคำสั่งที่ใช้ในบทนี้ |
|
TAGS
|
รายละเอียด
|
<br>
<p> ... </p>
|
คำสั่งกำหนดการตัดคำขึ้นบรรทัดใหม่ ณ ตำแหน่งที่แทรกคำสั่งนี้ <br>
คำสั่งกำหนดย่อหน้าข้อความ (จะเว้นบรรทัดทั้งก่อนหน้าและหลังย่อหน้านั้น 1 บรรทัด)
|
|
|
การแทรกช่องว่างมากกว่า 1 เคาะวรรคด้วยการแทรกชุดอักขระพิเศษนี้แทน (1 ชุดแทน 1 เคาะวรรค)
|
<blockqoute> ,
<p style="text-indent:x">
|
การกำหนดการเยื้องข้อความให้ห่างจากขอบทั้งซ้ายและขวา
การเยื้องย่อหน้าในบรรทัดแรก x เป็นตัวเลขระบุหน่วยพิกเซล แสดงผลได้ดีใน IE บราวเซอร์อื่นอาจเพี้ยนได้ สามารถใช้การแทรกอักขระพิเศษ (ชุดอักษรว่าง) ตามจำนวนเคาะวรรคที่ต้องการเยื้องแทนได้
|
|
<div align="left/center/right">
|
การกำหนดการจัดวางตำแหน่งของข้อความหรือรูปภาพ ค่าปกติคือซ้าย
|
|
<img src="name">
|
คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือชื่อรูปภาพชนิด JPG, GIF, PNG
|
|
| 
