Magdagdag ng Web Caption na Nananatili sa Imahe Nito

Magdagdag ng mga Caption ng HTML sa Mga Larawan sa Web sa 9 Madaling Mga Hakbang

Ang mga imahe ay nagdaragdag ng buhay sa iyong mga webpage at iginuhit ang atensyon ng mga manonood. Nagbibigay ang mga caption ng dagdag na impormasyon tungkol sa iyong mga larawan sa web, ngunit maaaring mahirap itong idagdag sa mga webpage na walang mga advanced na HTML at CSS na mga kasanayan. Narito ang isang maaasahang paraan para sa pagdaragdag ng isang simple, ngunit kaakit-akit, caption sa isang imahe na nananatili sa mga imahe saan ka man ilipat ito sa webpage.

9 Mga Hakbang sa isang Caption ng Imaheng HTML

Magdagdag ng isang caption sa isang imahe at ilipat ang mga ito nang magkasama saan man gusto mo:

1. Magdagdag ng isang imahe sa iyong webpage.
2. Sa HTML para sa iyong webpage, ilagay ang isang tag ng div sa paligid ng larawan:
3. Magdagdag ng estilo ng katangian sa tag ng div:
   style = "" >
4. Itakda ang lapad ng div sa parehong lapad ng imahe, kasama ang property ng estilo ng lapad :
   width: image width px; ">
5. Para sa mga caption na bahagyang mas maliit kaysa sa nakapaligid na teksto, magdagdag ng isang font-size na ari - arian sa estilo ng div:
   font-size: 80%; ">
6. Ang mga caption ay pinakamahusay na tumingin kung nakasentro sila sa ibaba ng imahe, kaya magdagdag ng isang text-align property sa estilo ng katangian:
   text-align: center; "> < img src = "URL" alt = "alternate text" width = "width" height = "height" />
7. Sa wakas, magdagdag ng isang maliit na espasyo sa pagitan ng imahe at caption, sa pamamagitan ng pagdaragdag ng isang katangian ng estilo sa imahe na may isang ari-arian ng padding-bottom style :
   style =" padding-bottom: 0.5em; " />

1. Pagkatapos ay idagdag ang caption ng teksto nang direkta sa ibaba ng imahe:
   Ito ang aking caption

I-upload ang webpage sa iyong server at subukan ito sa isang browser.

Mga Tip sa Pag-Caption

• Mga lapad : Ang mga dimensyon ng CSS ay maaaring nasa maraming iba't ibang mga sukat, kaya karaniwang dapat mong isama ang uri ng pagsukat. Halimbawa: lapad: 100 px ; Gayunpaman, ang mga sukat ng imahe ng HTML ay palaging nasa pixel, kaya iniwan mo ang pagsukat. width = "100"
• Kung ginawa mo ang lapad ng div mas malawak kaysa sa lapad ng imahe, ang caption ay maaaring lumitaw sa tabi ng imahe. Kung ito ang gusto mo, pagkatapos ay magdagdag ng direktang tag ng
  bago ang caption at pagkatapos ng tag na imahe.