Dette innlegget forklarer hvordan du skriver en bildetekst under et bilde.
Hvordan skrive en bildetekst under et bilde?
For å skrive en bildetekst under et bilde, vil vi tilby forskjellige metoder nevnt nedenfor:
- Metode 1: Hvordan legge til bildetekst ved hjelp av HTML '
'Element? - Metode 2: Slik legger du til bildetekst ved å bruke ' 'Element?
Metode 1: Hvordan legge til bildetekst ved å bruke HTML-elementet «
»? For å legge til en bildetekst, gå gjennom følgende instruksjoner:
- Først legger du til '
”-element, som brukes for å representere selvstendig innhold, potensielt med en valgfri bildetekst. - Deretter setter du inn en '
' tag inne i avsnittet ' ' stikkord. Legg til bildet ved å bruke ' src ' Egenskap. « alt ”-egenskapen viser det tilførte innholdet hvis bildet ikke ble vist av en eller annen grunn.
- Sett bildebredden som ' 200 piksler '.
- Og så '
”-taggen brukes til å legge til bildeteksten for bildet. Legg dessuten til bildeteksten mellom « »-taggene:
= 'TSL.png' alt = 'TSL-innholdsskapere' bredde = '200' >
Du kan se at bildet med den angitte bildeteksten har blitt vist:
Gå nå mot den andre metoden for å legge til bildeteksten ved hjelp av CSS.
Metode 2: Hvordan legge til bildetekst ved å bruke «
»-elementet?For å legge til bildeteksten ved å bruke '
element, prøv ut de gitte instruksjonene:
- Lage en ' '-beholder og legg til et klasseattributt med navnet ' bildeholder '.
- Legg til overskriftstag ' ” for å sette inn overskriften og style overskriften etter eget valg.
- Legg til et annet «
»-element og sett inn et «' tag sammen med ' src ', ' alt ' og ' bredde ”-attributter mellom div-beholderen.
- Legg til en tredje «
» med klassenavnet « img-bildetekst '. Angi deretter bildeteksten mellom «»-taggene. Dessuten, '
'-elementet brukes til å legge til ett linjeskift:= 'bildeholder' >
= 'color:rgb(95, 31, 245)' > HTML-bilde >
= 'TSL.png' alt = 'TSL-innholdsskapere' bredde = '200' >
= 'img-caption' >
>
>Det kan observeres at bildeteksten for bildet er lagt til:
La oss nå gå mot CSS-delen for å bruke egenskapene.
Stil '.image-holder' i CSS
Først får du tilgang til '
'element som har en klasse' .image-holder '. Bruk deretter følgende CSS-egenskaper: .image-holder {
stilling : slektning ;
høyde : 100 piksler ;
bredde : 200 piksler ;
margin : auto ;
}Detaljene til egenskapene ovenfor er beskrevet nedenfor:
- « stilling ' er satt som ' slektning ” for å spesifisere et elements opprinnelige posisjon som forblir i flyten av dokumentet, akkurat som den statiske verdien.
- Deretter, ' høyde ” brukes til å definere elementhøyden.
- « bredde egenskapen spesifiserer størrelsen på elementet i bredden.
- « margin ' er satt som ' auto ” for å angi plassen automatisk rundt elementet.
Stiltekst i CSS
I dette trinnet vil vi få tilgang til de to klassene med navnet ' bildeholder ' og ' img-bildetekst ' og bruk følgende CSS-egenskaper:
.image-holder .img-caption {
stilling : absolutt ;
tekstjustering : senter ;
font-vekt : modig ;
bredde : 200 piksler ;
høyde : 50 piksler ;
venstre : 0px ;
farge : #f80909 ;
bakgrunn : rgb ( 140 , 166 , 253 ) ;
}Beskrivelsen av de ovennevnte egenskapene er som følger:
- « tekstjustering egenskapen er satt som senter ” for å justere tekstposisjonen i midten.
- Neste, ' font-vekt ' er tildelt som ' modig ' for å angi fonten for bildeteksten.
- Og så ' farge ”-egenskapen brukes til å angi fargen på elementet du får tilgang til.
- « bakgrunn ”-egenskapen setter fargen på elementbakgrunnen.
- Andre eiendommer, inkludert ' stilling ', ' høyde ', og ' bredde ' brukes også til å bruke de respektive funksjonene.
Produksjon
Vi har diskutert metodene for å skrive bildeteksten under et bilde.
Konklusjon
For å skrive en bildetekst under et bilde, kan brukere enten bruke '
' element eller et enkelt ' ' container. For å bruke «», legg først til « ' element for å bygge inn bildet i '
'-elementet, bruk deretter ' '-elementet og legg til en bildetekst mellom kodene. I den andre tilnærmingen kan brukerne ganske enkelt bruke ' ”-elementet og bruk forskjellige CSS-egenskaper for å forskjønne bildeteksten. Dette innlegget har demonstrert metodene for å skrive bildeteksten under et bilde.
- Først legger du til '