Tekst weergeven als bijschrift van een foto in CSS

Webmasters kunnen tekst op webpagina's weergeven en vormgeven door CSS - Cascading Style Sheet - code te gebruiken om verschillende soorten tekst op te maken. Als u tekst als bijschrift voor een foto wilt weergeven, maakt u een CSS-codeklasse voor de ondertitelingstekst en tikt u vervolgens elk bijschrift met de klassen-ID om de tekst automatisch in de ondertitelstijl op te maken.

1.

Start uw gebruikelijke webontwerpprogramma, HTML-editor of de Microsoft Notepad-tool voor platte tekst. Open de webpagina met het bijschrift dat u wilt opmaken.

2.

Blader naar het koptekstgedeelte bovenaan de pagina. De header sectie begint met de "" tag en eindigt met de "" tag.

3.

Typ of plak het volgende codefragment direct voor de tag "":

4.

Markeer en bewerk elk attribuut tussen de accolades om uw ondertitelingstekst te stylen en op te maken. Wijzig bijvoorbeeld het element 'Lettergrootte' in de gewenste tekstgrootte voor het bijschrift. Bewerk de "lettertypefamilie" naar het lettertype van uw voorkeur. U kunt een lettertype kiezen dat zich onderscheidt van de rest van de tekst op de webpagina of overeenkomt met het lettertype dat op andere delen van de pagina wordt gebruikt. Verander de kleur van "# 000000" - standaard zwarte tekst - in de gewenste kleurcode. Wijzig bij "font-weight" het attribuut van "normal" in "bold" als u de titel vetgedrukt wilt weergeven.

5.

Ga naar de positie van elk fotobijschrift waarop u de stijl wilt toepassen in het hoofdgedeelte van de webpagina, tussen de tags "" en "".

6.

Plak of typ "" direct voor de ondertitelingstekst. Voeg "" in na de ondertitelingstekst. De code zou er als volgt uit moeten zien:

Voorbeeld van bijschrifttekst, waarin de inhoud van de afbeelding wordt uitgelegd.

7.

Sla de webpagina op en upload deze naar de hostserver van uw website op de gebruikelijke manier via het configuratiescherm van het contentbeheersysteem van uw host of met een toepassing voor File Transfer Protocol.

Tips

  • Gebruik een online kleurenkiezer om in stap 4 de juiste hexadecimale kleurcode te vinden voor de kleur van het lettertype van uw voorkeurstekst.
  • Herhaal deze procedure voor elke webpagina waarvoor u de CSS-ondertitelingstekststijl wilt toepassen.

Populaire Berichten