ทำแบบทดสอบก่อนเรียน
การออกแบบเว็บไซต์
ภาษา html
การจัดรูปแบบเอกสาร
การจัดรูปแบบตัวอักษร
การใส่รูปภาพลงในเว็บเพจ
การสร้างตาราง
การเชื่อมโยงเว็บเพจ
การใส่ไฟล์มัลติมีเดีย
แบบทดสอบหลังเรียน

9. เทคนิดการจัดการข้อความกับรูปภาพ

         ในการแสดงผลข้อความร่วมกับรูปภาพนั้นในบางครั้งก็ยากแก่การจัดตำแหน่งควบคุมการแสดงผล
เนื่องจากข้อความ ที่จะพิมพ์นั้นโดยปกติจะพิมพ์ต่อเนื่องกันลงมาอยู่ด้านข้างของรูปภาพแต่ถ้าเราต้องการ
ให้ข้อความนั้นถูกพิมพ์ลงมาใต้รูปภาพก็ต้องใช้แท็ก <br> เพื่อเว้นบรรทัดว่าง ลงมาหลาย ๆ บรรทัดชึ่ง
ก็จะมีผลให้ข้อความถูกพิมพ์อยู่ใต้รูปภาพไต้แต่ก็ไม่ค่อยสะดวกนัก ซึ่งมีวิธีที่จะช่วยให้ง่ายขึ้นด้วยการกำจัด
พื้นที่ว่างหน้าข้อความออก โดยระบุคำสั่ง clear ลงในแท็ก <br> ซึ่งจะทำให้ข้อความถูกยกไปแสดง
ชิดขอบซ้ายใต้รูปภาพทันที

<br clear = "ตัวเลือก"

      โดยที่

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

ตัวอย่างการจัดข้อความกับรูปภาพให้ได้ลักษณะดังรูป



     เราอาจจัดโดยการใช้แทีก <br> หลายๆ ครั้งเพื่อเว้นบรรทัดลงมาเรื่อย ๆจนพ้นขอบเขต ของรูปภาพ

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

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

</body>
</html>

     หรือ ใช้แท็ก <br clear = "left"> เพื่อตัดพื้นว่างด้านซ้ายของข้อความออกทีเดียว



<body>

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

</body>