เพิ่มคำอธิบายเว็บที่คงอยู่กับภาพ

เพิ่มคำอธิบายภาพ HTML ลงในเว็บใน 9 ขั้นตอนง่ายๆ

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

9 ขั้นตอนในคำอธิบายภาพ HTML

เพิ่มคำอธิบายภาพลงในรูปภาพและย้ายคำอธิบายภาพไปยังทุกที่ที่ต้องการ:

1. เพิ่มรูปภาพ ลงในเว็บเพจของคุณ
2. ใน HTML สำหรับหน้าเว็บของคุณวางแท็ก div ไว้รอบรูปภาพ:
3. เพิ่มแอตทริบิวต์ style ลงในแท็ก div:
   style = "" >
4. กำหนดความกว้างของ div ให้มีความกว้างเช่นเดียวกับภาพโดยใช้ คุณสมบัติ width style :
   width: width =" height ">
5. สำหรับคำอธิบายภาพที่เล็กกว่าข้อความโดยรอบให้เพิ่มคุณสมบัติ แบบอักษรขนาดใหญ่ ลงในสไตล์ div:
   font-size: 80%; ">
6. คำอธิบายภาพจะดูดีที่สุดหากอยู่กึ่งกลางด้านล่างภาพดังนั้นให้เพิ่มคุณสมบัติ text-align ในแอตทริบิวต์ style:
   text-align: center; "> < img src = "URL" alt = "ข้อความอื่น" width = "width" height = "height" />
7. สุดท้ายเพิ่มเนื้อที่เพิ่มเล็กน้อยระหว่างภาพและคำอธิบายภาพโดยการเพิ่มแอตทริบิวต์ style ลงในภาพโดยใช้คุณสมบัติ สไตล์ padding-bottom :
   style =" padding-bottom: 0.5em; " />

1. จากนั้นเพิ่มคำอธิบายภาพใต้รูปภาพโดยตรง:
   นี่คือคำอธิบายภาพของฉัน

อัปโหลดหน้าเว็บไปยังเซิร์ฟเวอร์ของคุณและทดสอบในเบราว์เซอร์

เคล็ดลับคำอธิบายภาพ

• ความกว้าง : ขนาด CSS สามารถวัดได้หลายวิธีดังนั้นคุณจึงต้องรวมประเภทการวัดด้วย ตัวอย่างเช่นความกว้าง: 100 px ; อย่างไรก็ตามขนาดภาพ HTML จะเป็นพิกเซลเสมอดังนั้นคุณจึงไม่ต้องวัดค่า width = "100"
• หากคุณกำหนดความกว้างของ div กว้างกว่าความกว้างของภาพคำอธิบายภาพอาจปรากฏขึ้นข้างภาพ หากเป็นสิ่งที่คุณต้องการจากนั้นเพิ่มแท็ก
  ก่อนคำอธิบายภาพและหลังแท็กรูปภาพ