เพิ่มคำอธิบายภาพที่คงค้างกับรูปภาพไปยังรูปภาพของคุณ

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

ขั้นตอนการใส่คำอธิบายภาพ HTML

1. เพิ่มรูปภาพลงในเว็บเพจของคุณ

2. ใน HTML สำหรับหน้าเว็บของคุณให้วางแท็ก div ไว้รอบรูปภาพ

   

3. เพิ่มแอตทริบิวต์ style ลงในแท็ก div:

   style = "">

   

4. กำหนดความกว้างของ div ให้มีความกว้างเท่ากับภาพโดยใช้คุณสมบัติ width style:

   

5. สำหรับคำอธิบายภาพที่เล็กกว่าข้อความโดยรอบให้เพิ่มคุณสมบัติแบบอักษรขนาดเป็นสไตล์ div:

   

6. คำอธิบายภาพดูดีที่สุดหากอยู่กึ่งกลางด้านล่างภาพดังนั้นให้เพิ่มคุณสมบัติ text-align กับแอตทริบิวต์ style:

   

7. สุดท้ายเพิ่มช่องว่างเล็กน้อยระหว่างภาพกับคำอธิบายภาพโดยการเพิ่มแอตทริบิวต์ style ลงในภาพโดยใช้สไตล์แบบ padding-bottom:

   style = "padding ล่าง: 0.5em;" />

8. จากนั้นเพิ่มคำอธิบายภาพใต้ภาพโดยตรง:

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

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

• ขนาด CSS สามารถวัดได้หลายวิธีดังนั้นคุณจึงต้องรวมประเภทการวัด ตัวอย่างเช่น:

  ความกว้าง: 100px; อย่างไรก็ตามขนาดภาพ HTML จะเป็นพิกเซลเสมอดังนั้นคุณจึงไม่ต้องวัดค่า

  width = "100"

• หากคุณกำหนดความกว้างของ div กว้างกว่าความกว้างของภาพคำอธิบายภาพอาจปรากฏขึ้นข้างภาพ ถ้าเป็นสิ่งที่คุณต้องการแล้วเพิ่ม a
  แท็กโดยตรงก่อนคำอธิบายภาพและหลังแท็กรูปภาพ