Afbeeldingen voegen leven toe aan uw webpagina's en trekken de aandacht van kijkers. Bijschriften geven extra informatie over uw webafbeeldingen, maar kunnen moeilijk aan webpagina's worden toegevoegd zonder geavanceerde HTML- en CSS-vaardigheden. Hier is een betrouwbare methode voor het toevoegen van een eenvoudige, maar toch aantrekkelijke, bijschrift aan een afbeelding die bij de afbeelding blijft waar u hem ook op de webpagina verplaatst.
Stappen naar een HTML-afbeeldingsbijschrift
-
Voeg een afbeelding toe aan uw webpagina.
-
Plaats in de HTML-code voor uw webpagina een div-tag rond de afbeelding:
-
Voeg een stijlkenmerk toe aan de div-tag:
style = ""> -
Stel de breedte van de div in op dezelfde breedte als de afbeelding, met de eigenschap width style:
-
Voor bijschriften die iets kleiner zijn dan de omringende tekst, voegt u een eigenschap van lettertype aan de div-stijl toe:
-
Bijschriften zien er het beste uit als ze gecentreerd zijn onder de afbeelding, dus voeg een text-align-eigenschap toe aan het stijlkenmerk:
-
Voeg ten slotte een beetje extra ruimte toe tussen de afbeelding en het bijschrift, door een stijlkenmerk aan de afbeelding toe te voegen met een opvullingbodem stijleigenschap:
style = "padding-bottom: 0.5em;" />
-
Voeg vervolgens de tekstbijschrift direct onder de afbeelding toe:
Upload de webpagina naar uw server en test deze in een browser.
Captioning Tips
- CSS-dimensies kunnen in veel verschillende metingen voorkomen, dus u moet meestal het meettype opnemen. Bijvoorbeeld:
breedte: 100px; HTML-afbeeldingsdimensies zijn echter altijd in pixels, dus u laat de meting uitstellen.
width = "100"
- Als u de breedte van de div breder maakt dan de breedte van de afbeelding, kan het bijschrift naast de afbeelding verschijnen. Als dit is wat u zoekt, voeg dan een toe
label direct vóór het bijschrift en na de afbeeldingstag.
