Ipinapaliwanag ng post na ito ang tungkol sa pagsulat ng caption sa ilalim ng isang larawan.
Paano Sumulat ng Caption sa Ilalim ng Larawan?
Upang magsulat ng caption sa ilalim ng isang larawan, magbibigay kami ng iba't ibang paraan na binanggit sa ibaba:
- Paraan 1: Paano Magdagdag ng Caption ng Larawan Gamit ang HTML “
' Elemento? - Paraan 2: Paano Magdagdag ng Caption ng Larawan Gamit ang “ ' Elemento?
Paraan 1: Paano Magdagdag ng Caption ng Larawan Gamit ang HTML na '
' Element? Upang magdagdag ng caption ng larawan, dumaan sa mga sumusunod na tagubilin:
- Una, idagdag ang '
” element, na ginagamit para kumatawan sa self-contained na content, na posibleng may opsyonal na caption. - Susunod, maglagay ng '
'tag sa loob ng talata' ” tag. Idagdag ang larawan sa pamamagitan ng paggamit ng “ src ” katangian. Ang ' lahat ” property ay nagpapakita ng idinagdag na nilalaman kung ang larawan ay hindi ipinakita dahil sa ilang kadahilanan.
- Itakda ang lapad ng larawan bilang “ 200px ”.
- Pagkatapos, ang '
Ang tag na ” ay ginagamit upang magdagdag ng caption para sa larawan. Bukod dito, idagdag ang caption sa pagitan ng mga tag na “ ”:
= 'TSL.png' lahat = 'Mga Tagalikha ng Nilalaman ng TSL' lapad = '200' >
Maaari mong makita na ang larawan na may tinukoy na caption ay ipinakita:
Ngayon, lumipat patungo sa pangalawang paraan para sa pagdaragdag ng caption gamit ang CSS.
Paraan 2: Paano Magdagdag ng Caption ng Imahe Gamit ang Elementong '
'?Upang idagdag ang caption ng larawan gamit ang “
” elemento, subukan ang ibinigay na mga tagubilin:
- Gumawa ng ' ” container at magdagdag ng class attribute na may pangalang “ may hawak ng imahe ”.
- Magdagdag ng heading tag na “ ” para sa pagpasok ng heading at istilo ng heading ayon sa iyong pinili.
- Magdagdag ng isa pang elementong “
” at maglagay ng “'tag kasama ng ' src ”, “ lahat 'at' lapad ” attribute sa pagitan ng div container.
- Magdagdag ng pangatlong “
” na may pangalan ng klase na “ img-caption ”. Pagkatapos, ibigay ang caption sa pagitan ng mga tag na “”. Bukod dito, ang '
'Ang elemento ay ginagamit upang magdagdag ng isang line break:= 'may hawak ng imahe' >
= 'kulay:rgb(95, 31, 245)' > HTML na Larawan >
= 'TSL.png' lahat = 'Mga Tagalikha ng Nilalaman ng TSL' lapad = '200' >
= 'img-caption' >
>
>Mapapansing matagumpay na naidagdag ang caption para sa larawan:
Ngayon, lumipat tayo sa seksyon ng CSS para sa paglalapat ng mga katangian.
Istilo ang '.image-holder' sa CSS
Una, i-access ang '
'elemento na may klase' .may hawak ng imahe ”. Pagkatapos, ilapat ang mga sumusunod na katangian ng CSS: .may hawak ng imahe {
posisyon : kamag-anak ;
taas : 100px ;
lapad : 200px ;
margin : sasakyan ;
}Ang mga detalye ng nabanggit na katangian ay inilarawan sa ibaba:
- Ang ' posisyon ' ay nakatakda bilang ' kamag-anak ” upang tukuyin ang orihinal na posisyon ng isang elemento na nananatili sa daloy ng dokumento, tulad ng static na halaga.
- Pagkatapos, ' taas ” ay ginagamit upang tukuyin ang taas ng elemento.
- Ang ' lapad ” property ay tumutukoy sa laki ng elemento sa lapad.
- Ang ' margin ' ay nakatakda bilang ' sasakyan ” upang awtomatikong itakda ang espasyo sa paligid ng elemento.
Style Caption sa CSS
Sa hakbang na ito, maa-access natin ang dalawang klase na may pangalang ' may hawak ng imahe 'at' img-caption ” at ilapat ang mga sumusunod na katangian ng CSS:
.may hawak ng imahe .img-caption {
posisyon : ganap ;
text-align : gitna ;
bigat ng font : matapang ;
lapad : 200px ;
taas : 50px ;
umalis : 0px ;
kulay : #f80909 ;
background : rgb ( 140 , 166 , 253 ) ;
}Ang paglalarawan ng mga nabanggit na katangian ay ang mga sumusunod:
- Ang ' text-align 'Ang ari-arian ay itinakda bilang ' gitna ” para sa pag-align ng posisyon ng text sa gitna.
- Susunod, ' bigat ng font ' ay inilalaan bilang ' matapang ” para itakda ang font ng caption ng larawan.
- Pagkatapos, ang ' kulay Ang ” property ay ginagamit para sa pagtatakda ng kulay ng na-access na elemento.
- Ang ' background Itinatakda ng ” property ang kulay ng background ng elemento.
- Iba pang mga pag-aari, kabilang ang ' posisyon ”, “ taas ”, at “ lapad ” ay ginagamit din upang ilapat ang mga kaukulang pag-andar.
Output
Napag-usapan na namin ang mga pamamaraan para sa pagsulat ng caption sa ilalim ng isang larawan.
Konklusyon
Upang magsulat ng caption sa ilalim ng isang larawan, maaaring gamitin ng mga user ang '
'elemento o isang simpleng' ” lalagyan. Upang gamitin ang “”, idagdag muna ang “ ” elemento upang i-embed ang larawan sa loob ng “
” element, pagkatapos, gamitin ang elementong “ ” at magdagdag ng caption sa pagitan ng mga tag nito. Sa pangalawang diskarte, magagamit lang ng mga user ang ' ” elemento at ilapat ang iba't ibang mga katangian ng CSS upang pagandahin ang caption. Ang post na ito ay nagpakita ng mga pamamaraan para sa pagsulat ng caption sa ilalim ng isang larawan.
- Una, idagdag ang '