Ang mga imahe ay nagdaragdag ng buhay sa iyong mga web page at iginuhit ang atensyon ng mga manonood. Ang mga caption ay nagbibigay ng dagdag na impormasyon tungkol sa iyong mga larawan sa web, ngunit maaaring mahirap itong idagdag sa mga web page na walang mga advanced na HTML at CSS na 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.
Mga Hakbang sa isang Caption ng Imaheng HTML
-
Magdagdag ng isang imahe sa iyong webpage.
-
Sa HTML para sa iyong webpage, ilagay ang isang tag ng div sa paligid ng larawan:
-
Magdagdag ng estilo ng katangian sa tag ng div:
style = ""> -
Itakda ang lapad ng div sa parehong lapad ng imahe, na may estilo ng lapad ng ari-arian:
-
Para sa mga caption na bahagyang mas maliit kaysa sa nakapaligid na teksto, magdagdag ng isang font-size na ari-arian sa div estilo:
-
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:
-
Panghuli, magdagdag ng isang maliit na espasyo sa pagitan ng imahe at caption, sa pamamagitan ng pagdaragdag ng estilo ng katangian sa imahe na may isang ari-arian ng padding-bottom style:
style = "padding-bottom: 0.5em;" />
-
Pagkatapos ay idagdag ang caption ng teksto nang direkta sa ibaba ng larawan:
I-upload ang webpage sa iyong server at subukan ito sa isang browser.
Mga Tip sa Pag-Caption
- Ang mga dimensyon ng CSS ay maaaring nasa maraming iba't ibang mga sukat, kaya karaniwan mong dapat isama ang uri ng pagsukat. Halimbawa:
lapad: 100px; 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 isang
tag nang direkta bago ang caption at pagkatapos ng tag na imahe.
