Bilder verleihen Ihren Webseiten Leben und ziehen die Aufmerksamkeit der Zuschauer auf sich. Bildunterschriften enthalten zusätzliche Informationen zu Ihren Webbildern. Sie können jedoch ohne fortgeschrittene HTML- und CSS-Kenntnisse nur schwer zu Webseiten hinzugefügt werden. Hier ist eine zuverlässige Methode zum Hinzufügen einer einfachen, aber attraktiven Bildunterschrift zu einem Bild, das sich überall auf dem Bild befindet, wo Sie es auf der Webseite verschieben.
Schritte zu einer HTML-Bildbeschriftung
-
Fügen Sie Ihrer Webseite ein Bild hinzu.
-
Platzieren Sie im HTML-Code für Ihre Webseite ein div-Tag um das Bild:
-
Fügen Sie dem div-Tag ein Stilattribut hinzu:
style = ""> -
Legen Sie die Breite des div auf die gleiche Breite wie das Bild fest, mit der Eigenschaft width style:
-
Fügen Sie für Beschriftungen, die etwas kleiner als der umgebende Text sind, dem div-Stil eine Eigenschaft in Schriftgröße hinzu:
-
Untertitel sehen am besten aus, wenn sie unter dem Bild zentriert sind. Fügen Sie dem style-Attribut daher eine Text-Alignment-Eigenschaft hinzu:
-
Fügen Sie schließlich ein wenig zusätzliches Leerzeichen zwischen dem Bild und der Beschriftung hinzu, indem Sie dem Bild ein Stilattribut mit einer Auffüll-Stileigenschaft hinzufügen:
style = "padding-bottom: 0.5em;" />
-
Fügen Sie dann die Textbeschriftung direkt unter dem Bild hinzu:
Laden Sie die Webseite auf Ihren Server hoch und testen Sie sie in einem Browser.
Untertitel-Tipps
- CSS-Dimensionen können viele verschiedene Abmessungen haben, daher müssen Sie normalerweise den Messtyp angeben. Zum Beispiel:
Breite: 100px; Die Abmessungen von HTML-Bildern sind jedoch immer in Pixel angegeben, sodass die Messung deaktiviert bleibt.
width = "100"
- Wenn Sie die Breite des div größer als die Bildbreite machen, wird die Beschriftung möglicherweise neben dem Bild angezeigt. Wenn dies der Fall ist, fügen Sie eine hinzu
Tag direkt vor der Beschriftung und nach dem Image-Tag.
