การแทรกและจัดการรูปภาพ

            การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพ เพื่อเพิ่มความน่าสนใจ ให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร 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">

            สำหรับแท็ก (Tag) การใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ไม่ว่าจะเป็นขนาดความกว้าง ความสูง ของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูงเท่าไร ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของ ภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)"
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"
ตัวอย่าง <img src = "001.gif" width="200" height="150" border="1">

จากตัวอย่าง จะแสดงภาพขนาด 200x150 pix. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการให้ขอบมีความหนามาก ระบุตัวเลขให้มาก)

การวางตำแหน่ง

           การนำภาพมาแสดงในเวปเพจนั้นเป็นเพียงขั้นตอนแรก ๆ ต่อไปนี้เราต้องจัดภาพให้เข้ากับเนื้อหาที่มีอยู่ ใน HTML โดยมีรูปแบบคำสั่งดังนี้

           รูปแบบการใช้คำสั่ง

<Img src=”002.jpg” align=” Left / Right / Top / Bottom / Center”>…ข้อความ…

การเพิ่มระยะห่างระหว่างรูป

            ภาพที่แสดงนั้นโดยปกติจะถูกวางชิดติดกับข้อความหรือภาพที่อยู่ใกล้กัน เราสามารถเพิ่มระยะห่างของภาพ ได้โดยใช้คำสั่งต่อไปนี้

           รูปแบบการใช้คำสั่ง

<Img src=”002.jpg” align=”center” hspace=”50”>…ข้อความ…