Bilder lägger till livet på dina webbsidor och uppmärksammar tittarna. Bildtext ger extra information om dina webbbilder, men de kan vara svåra att lägga till på webbsidor utan avancerade HTML- och CSS-färdigheter. Här är en tillförlitlig metod för att lägga till en enkel men ändå attraktiv bildtext till en bild som stannar med bilden, var du än flyttar den på webbsidan.
Steg till en HTML-bildtextning
-
Lägg till en bild på din webbsida.
-
I HTML-koden för din webbsida, placera en div-tagg runt bilden:
-
Lägg till ett stilattribut till div-taggen:
style = ""> -
Ställ in bredden på diven i samma bredd som bilden med egenskapen breddstyp:
-
För textning som är något mindre än den omgivande texten, lägg till en typsnittstypegenskap till div-stilen:
-
Bildtext ser bäst ut om de är centrerade under bilden, så lägg till en textjusteringsegenskap till stilattributet:
-
Till sist lägger du till lite extra utrymme mellan bilden och bildtexten, genom att lägga till ett stilattribut till bilden med en typ av padding-bottom-stil:
style = "padding-bottom: 0.5em;" />
-
Lägg sedan till texttexten direkt under bilden:
Ladda upp webbsidan till din server och testa den i en webbläsare.
Captioning Tips
- CSS-dimensioner kan vara i många olika mätningar, så du måste vanligtvis inkludera mättypen. Till exempel:
bredd: 100px; Imidlertid är HTML bilddimensioner alltid i pixlar, så du släpper mätningen av.
width = "100"
- Om du gör bredden på div bredare än bildbredden kan bildtexten visas bredvid bilden. Om det här är vad du vill, lägg till en
tagga direkt före bildtexten och efter bildtaggen.
