Billeder tilføjer livet til dine websider og gør opmærksom på seerne. Undertekster giver ekstra information om dine webbilleder, men de kan være vanskelige at tilføje til websider uden avancerede HTML- og CSS-færdigheder. Her er en pålidelig metode til at tilføje en simpel, men attraktiv billedtekst til et billede, der forbliver med billedet, uanset hvor du bevæger det på websiden.
Trin til en HTML-billedtekst
-
Tilføj et billede til din webside.
-
I HTML'en til din webside skal du placere en div-tag rundt om billedet:
-
Tilføj en stilattribut til div-taggen:
style = ""> -
Indstil bredden af div'en til samme bredde som billedet med bredden stilegenskab:
-
For billedtekster, der er lidt mindre end den omgivende tekst, skal du tilføje en skrifttypestørrelse til div-stilen:
-
Billedtekster ser bedst ud, hvis de er centreret under billedet, så tilføj en tekstjusteringsegenskab til stilattributten:
-
Endelig tilføj lidt ekstra mellemrum mellem billedet og billedteksten ved at tilføje en stilattribut til billedet med en egenskab til polstringstype:
style = "padding-bottom: 0.5em;" />
-
Tilføj så tekstteksten direkte under billedet:
Upload websiden til din server og test den i en browser.
Captioning Tips
- CSS dimensioner kan være i mange forskellige målinger, så du skal normalt indbefatte målingstypen. For eksempel:
bredde: 100px; Imidlertid er HTML-billeddimensioner altid i pixel, så du forlader målingen.
width = "100"
- Hvis du gør bredden af div bredere end billedbredden, kan billedteksten vises ved siden af billedet. Hvis dette er det, du vil have, så tilføj en
tag direkte før billedteksten og efter billedtaggen.
