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

10. การเพิ่มคำบรรยายภาพ (Caption)

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

<figure>
       <img src="images/diagram.gif">
</figure>

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


<figure>
                   <img src="ชื่อไฟล์รูปภาพ1">
                   <img src="ชื่อไฟล์รูปภาพ2">
                             :
                   <figurecaption> คำบรรยายภาพ </figcaption>
</figure>


ตัวอย่างการใส่คำบรรยายภาพ


<!DOCTYPE html>
<html>
<head>
<title> Image tag </title>
</head>
<body>
      <figure>
                   <img src="comp.jpg" width ="100">
                   <img src="wdbook.jpg" width="100"> <br>
                   <figurecaption>รูปแบบเรียนสำหรับหลักสูตรใหม่</figcaption>
      </figure>
       

</body>
</html>

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