ใบความรู้ที่ 4
การใส่รูปภาพ
การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพ เพื่อเพิ่มความน่าสนใจ ให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร HTML นั้นจะต้องเตรียมรูปภาพไว้ก่อน โดยใช้แท็ก (Tag) สำหรับแสดงผลรูปภาพดังนี้
รูปแบบแท็ก (Tag) การใส่รูปภาพ สำหรับแฟ้มรูปภาพที่จัดเก็บใน Folder เดียวกับแฟ้ม Html
<img src = "ชื่อภาพ.ส่วนขยาย">
<img src = "001.gif">
หรือหากมีการจัดเก็บรูปภาพไว้ต่าง Folder กับ แฟ้ม Html เช่น ถ้าแฟ้มรูปภาพถูกจัดเก็บในไดร์ว D: ชื่อ Folder ต่อไปนี้ M3 , Web site , Picture จะต้องแสดงที่อยู่ของแฟ้มข้อมูลให้ชัดเจน ถูกต้องตามตัวอย่าง
<img src = "ชื่อเส้นทาง (Path)\ชื่อภาพ.ส่วนขยาย">
<img src = "D:\M3\Web site\Picture\001.gif">
ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)"
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"
ตัวอย่าง <img src = "001.gif" width="200" height="150" border="1">
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"
ตัวอย่าง <img src = "001.gif" width="200" height="150" border="1">
จากตัวอย่าง จะแสดงภาพขนาด 200x150 pix. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการให้ขอบมีความหนามาก ระบุตัวเลขให้มาก)
การวางตำแหน่ง
การนำภาพมาแสดงในเวปเพจนั้นเป็นเพียงขั้นตอนแรก ๆ ต่อไปนี้เราต้องจัดภาพให้เข้ากับเนื้อหาที่มีอยู่ ใน HTML โดยมีรูปแบบคำสั่งดังนี้
Align ="รูปแบบการวางตำแหน่งของภาพ"
|
รูปแบบตัวอักษร
|
คำสั่งที่ใช้
|
Left
|
ภาพแสดงทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา
|
Right
|
ภาพแสดงทางขวาโดยมีข้อความล้อมอยู่ทางซ้าย
|
Top
|
ขอบบนของภาพตรงกับส่วนบนข้อความ
|
Bottom
|
ขอบล่างของภาพตรงกับส่วนล่างสุดของข้อความ
|
Center
|
ตรงกลางของภาพตรงกับกึ่งกลางของข้อความ
|
<Img src=”002.jpg” align=” Left / Right / Top / Bottom / Center”>…ข้อความ…
ภาพที่แสดงนั้นโดยปกติจะถูกวางชิดติดกับข้อความหรือภาพที่อยู่ใกล้กัน เราสามารถเพิ่มระยะห่างของภาพ ได้โดยใช้คำสั่งต่อไปนี้
HSPACE="ระยะห่างที่ขอบซ้ายและขวาของภาพ"
VSPACE="ระยะห่างที่ขอบบนและล่างของภาพ" |
โดยคำสั่งนี้จะถูกแทรกอยู่ในคำสั่ง <Img src...>
<Img src=”002.jpg” align=”center” hspace=”50”>…ข้อความ…
ALT="ข้อความกำกับภาพ"
|
รูปแบบการใช้คำสั่ง
<Img src="002.jpg” alt=”…ข้อความ…” align=”center” hspace=”50">…ข้อความ…
ไม่มีความคิดเห็น:
แสดงความคิดเห็น