การจัดวางรูปภาพขางซ้ายของข้อความและให้ข้อความอยู่ระดับกึ่งกลางของภาพ
<img src = "comp.jpg" width = "15%" align = "middle">
ผลที่ได้บนเว็บเบราว์เซอร์
การจัดวางรูปภาพขางซ้ายของข้อความและให้ข้อความเสมอขอบล่างของภาพ
<img src = "comp.jpg" width = "15%" align = "bottom">
ผลที่ได้
การกำหนดพื้นที่ว่างให้กับขอบของรูปภาพ
เราสามารถกำหนดพี้นที่ว่างให้กับขอบของรูปภาพเพื่อใช้ในการจัดระยะห่างระหว่างรูปภาพกับข้อความหรือกับ รูปภาพอื่นโดยสามารถกำหนดได้ทั้งแนวนอนและแนวตั้ง
<img src = "ชื่อไฟล์รูปภาพ" hspace = "ตัวเลข" vspace = "ตัวเลข">
โดยที่
hspace ใช้กำหนดพื้นที่ว่างแนวนอนซ้ายกับขวาของรูปภาพ โดยกำหนดเป็นตัวเลข จำนวนพิกเซล
vspace ใช้กำหนดพื้นที่ว่างแนวตั้งบนกับล่างฃองรูปภาพ โดยกำหนดเป็นตัวเลข จำนวนพิกเซล
ตัวอย่างการกำหนดพื้นที่ว่างซ้ายและขวาของรูปภาพ เพื่อจัดระยะห่างระหว่างรูปภาพ และข้อความในแนวนอน
<!DOCTYPE html> <html> <head> <title>Image Tag </title > </head> <body> <img src = "comp.jpg" width = "15%" align = "left" hspace = "20"> <b>แบบเรียนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ<br> (Microsoft windows7&office2010)</b><br> เป็นแบบเรียนที่เขียนขึ้นเพื่อใช้ในการเรียนการสอนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ ตรงตามจุดประสงค์รายวิชา สมรรถนะรายวิชาและคำอธิบายรายวิชาในหลักสูตรของกระทรวงศึกษาธิการ พร้อมแบบทดสอบและแบบฝึกทักษะ </body> </html>
ผลที่ได้บนเบราว์เชอร์
<!DOCTYPE html> <html> <head> <title>Image Tag </title > </head> <body> <img src ="comp.jpg" width = "15%" align = "middle" vspace = "20"> <b> <b>แบบเรียนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ<br> (Microsoft windows7&office2010)</b><br> เป็นแบบเรียนที่เขียนขึ้นเพื่อใช้ในการเรียนการสอนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ ตรงตามจุดประสงค์รายวิชา สมรรถนะรายวิชาและคำอธิบายรายวิชาในหลักสูตรของกระทรวงศึกษาธิการ พร้อมแบบทดสอบและแบบฝึกทักษะ </body> </html>
