HTML Bildunterschriften zu Bildern hinzufügen
-
Verwendung der Tags
<figcaption>und<figure> - Fügen Sie Beschriftungen oben auf einem Bild hinzu
-
Fügen Sie Beschriftungen zu mehreren Bildern hinzu, indem Sie die Tags
<figur>und<figcaption>verwenden -
Fügen Sie mit dem
<div>-Tag Bildunterschriften zu mehreren Bildern hinzu - Abschluss
In diesem Artikel werden die verschiedenen Ansätze zum Schreiben einer Bildunterschrift unter oder über einem Bild oder Bildern auf einer Webseite mithilfe von HTML- und CSS-Eigenschaften erörtert.
Verwendung der Tags <figcaption> und <figure>
HTML hat ein spezielles Tag, das verwendet wird, um eine Bildunterschrift einzufügen. Das <figcaption> stellt eine Beschriftung für ein <figure>-Element dar, das als erstes oder letztes untergeordnetes Element des <figure>-Elements in HTML platziert werden kann.
<figure> und <figcaption> sind zwei neue Elemente, die als Tags in HTML5 eingeführt wurden. Hier wird das <figure>-Tag am besten verwendet, um Bilder und Grafiken anzuzeigen, während <figcaption> dem Betrachter mitteilt, was er gerade betrachtet.
Das Tag <figcaption> unterstützt auch die globalen Attribute und Ereignisattribute von HTML.
Im folgenden Beispiel verwenden wir ein <figure>-Element, um ein Bild auf einer Webseite oder einem Dokument zu markieren, und ein <figcaption>-Element, um eine Bildunterschrift zu definieren:
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
Hier können wir die Auflösung des Bildes (Höhe und Breite) mit dem Attribut style des Tags <img> in HTML anpassen.
Hier wird die Auflösung des Bildes auf Originalgröße gesetzt.
Da es sich bei <figure> und <figcaption> um neue HTML5-Tags handelt, können ältere Browserversionen den Prozess dieser beiden Tags nicht verstehen. Diese Tags werden also auf der Webseite als Inline-Tags gerendert, was bedeutet, dass diese Tags keinen automatischen Zeilenumbruch für Bildunterschriften erhalten, sondern nur Seite an Seite mit den Bildern gesetzt werden.
Als Lösung können wir also CSS-Eigenschaften verwenden, um <figure> und <figcaption> wie im folgenden Beispiel zu stylen:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
Hier können wir die Tags <figcaption> und <figure> nach Bedarf bearbeiten, indem wir verschiedene Eigenschaften von CSS und Werten verwenden.
Fügen Sie Beschriftungen oben auf einem Bild hinzu
Ohne gegenteilige CSS-Richtlinien erscheint die Beschriftung oben oder unten in der Abbildung, je nachdem, ob das Element <figcaption> das erste oder letzte Element innerhalb der Abbildung ist.
In diesem Beispiel setzen wir die Beschriftung des Bildes oben wie folgt:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<figcaption>Fig.2 - DelftStack Logo</figcaption>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
</figure>
</body>
</html>
Fügen Sie Beschriftungen zu mehreren Bildern hinzu, indem Sie die Tags <figur> und <figcaption> verwenden
Mit Hilfe von <figcaption> können wir mehreren Bildern Bildunterschriften hinzufügen:
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>Fig.2 - DelftStack Logo</figcaption>
</figure>
</body>
</html>
Wir können CSS-Eigenschaften verwenden, um die Beschriftungen der Bilder zu formatieren, indem wir dem Text verschiedene Stile oder Farben hinzufügen.
Fügen Sie mit dem <div>-Tag Bildunterschriften zu mehreren Bildern hinzu
Mit Hilfe des <div>-Tags und der CSS-Eigenschaften können wir mehreren Bildern gleichzeitig Bildunterschriften hinzufügen. Im folgenden Beispiel fügen wir Beschriftungen zu zwei Bildern hinzu, und optional können wir einen Link hinzufügen, der zu einer anderen Webseite oder Website führt, sobald auf das Bild geklickt wird.
<!DOCTYPE html>
<html>
<head>
<style>
#pictures{
text-align:center;
margin:50px auto;
}
#pictures a{
margin:0px 50px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div id="pictures">
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 1 - DelftStack Logo</div>
</a>
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 2 - DelftStack Logo</div>
</a>
</div>
</body>
</html>
Bei Verwendung dieser Methode können wir mit weiteren Implementierungen die Beschriftung der Bilder oben hinzufügen.
Abschluss
Wie oben erwähnt, können verschiedene Ansätze verwendet werden, um ein Bild oder Bilder mit HTML zusammen mit CSS-Eigenschaften zu beschriften. Dennoch sind einige Methoden, wie das Hinzufügen eines Bildes oder von Bildern und deren Beschriftungen in einem Tabellenformat, derzeit nicht geeignet.
Neue Tags wie <figure> und <figcaption> in HTML5 haben die Aufgabe, ein Bild mit Bildunterschriften zu versehen, vereinfacht.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.