บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

6. การจัดวางตำแหน่งของรูปภาพ

เป็นการจัดวางตำแหน่งรูปภาพ เมื่ออยู่ร่วมกับข้อความ

โดยที่

           ตำแหน่ง    เป็นการกำหนดตำแหน่งให้กับรูปภาพ ได้แก่
              Left       จัดวางรูปภาพให้อยู่ทางซ้ายของข้อความ
              Right     จัดวางรูปภาพให้อยู่ทางขวาของข้อความ
              Top        จัดวางรุปภาพทางซ้ายของข้อความและให้จัดข้อความเสมอขอบบนของภาพ
              Middle    จัดวางรูปภาพทางซ้ายของข้อความและให้ข้อความ อยู่ระดับกึ่งกลางของภาพ
              Bottom  จัดวางรูปภาพทางซ้ายของข้อความและให้ข้อความเสมอขอบล่างของภาพ

ตัวอย่างเมื่อมีการใส่รูปภาพ ร่วมกับข้อความ

<!DOCTYPE html>
<html>
<head>
<title> Image tag </title>
</head>
<body>

         <img src="comp.jpg" width="15%">
         <b>แบบเรียนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ<br>
         (Microsoft windows7&office2010)</b><br>
         เป็นแบบเรียนที่เขียนขึ้นเพื่อใช้ในการเรียนการสอนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ
         ตรงตามจุดประสงค์รายวิชา สมรรถนะรายวิชาและคำอธิบายรายวิชาในหลักสูตรของกระทรวงศึกษาธิการ
         พร้อมแบบทดสอบและแบบฝึกทักษะ

</body>
</html>

เมื่อยังไม่มีการกำหนดการจัดการรูปภาพ จะแสดงผลที่ได้บนเบราว์เซอร์ ดังรูป

การจัดรูปภาพให้อยู่ข้างซ้ายของข้อความ

จากตัวอย่างเดิมให้ใส่คำสั่ง align = "left" ลงในแทร็ก <img src> ดังนี้

ผลที่ได้บนเว็บเบราว์เซอร์

การจัดให้อยู่ทางขวาของข้อความ

จากตัวอย่างเดิมให้ใส่คำสั่ง align = "right" ลงในแทร็ก <img src> ดังนี้

ผลที่ได้บนเว็บเบราว์เซอร์

การจัดวางรูปภาพขางซ้ายของข้อความและให้ข้อความเสมอขอบบนของภาพ

จากตัวอย่างเดิมให้ใส่คำสั่ง align = "top" ลงในแทร็ก <img src> ดังนี้

ผลที่ได้บนเว็บเบราว์เซอร์