Meisterklasse: HTML Figure Captions

Einführung

Das HTML <figcaption>-Tag wird verwendet, um Beschriftungen für den Inhalt innerhalb des <figure>-Elements bereitzustellen. In diesem Lab werden Sie lernen, wie Sie das <figcaption>-Tag verwenden, um Beschriftungen zu Ihren Bildern hinzuzufügen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") subgraph Lab Skills html/basic_elems -.-> lab-70757{{"HTML Figure Caption"}} html/head_elems -.-> lab-70757{{"HTML Figure Caption"}} html/multimedia -.-> lab-70757{{"HTML Figure Caption"}} html/fig_cap -.-> lab-70757{{"HTML Figure Caption"}} end

Hinzufügen des Bilds und der Beschriftung

Öffnen Sie die Datei index.html in Ihrem bevorzugten Texteditor und schreiben Sie die grundlegende HTML-Struktur. Fügen Sie die <DOCTYPE>-Deklaration, die <html>, <head>- und <body>-Tags hinzu.

Innerhalb des <body>-Tags erstellen Sie ein <figure>-Element mit einem darin enthaltenen Bildtag. Sie können jedes beliebige Bild verwenden. Beispiel:

<figure>
  <img src="your-image-url-here" alt="Your image description" />
</figure>

Fügen Sie nun unmittelbar nach dem <img>-Tag ein <figcaption>-Tag hinzu, um der Abbildung eine Beschriftung zu geben. Beispiel:

<figure>
  <img src="your-image-url-here" alt="Your image description" />
  <figcaption>Image caption goes here</figcaption>
</figure>

Speichern Sie Ihre Änderungen in der index.html-Datei und öffnen Sie sie in Ihrem Webbrowser. Sie sollten nun das Bild mit der darunterliegenden Beschriftung sehen.

Gestalten der Beschriftung

Standardmäßig ist das <figcaption>-Tag ein Blockelement, das die volle Breite des übergeordneten Elements einnimmt. Sie können die Beschriftung mit CSS gestalten, um ihre Positionierung, Schriftart, Farbe usw. anzupassen.
Fügen Sie den folgenden CSS-Code in den <head>-Abschnitt Ihrer index.html-Datei hinzu, um die Schriftart, die Schriftgröße und die Farbe der Beschriftung zu ändern:

figcaption {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #555;
}

Sie können auch die Position der Beschriftung ändern, indem Sie CSS verwenden, um die Margin- und Padding-Eigenschaften des <figcaption>-Tags anzupassen. Beispiel:

figcaption {
  margin-top: 10px;
  padding: 5px;
}

Hinzufügen mehrerer Bilder und Beschriftungen

Sie können mehrere Bilder und Beschriftungen zu einer einzelnen Webseite hinzufügen, indem Sie die vorherigen Schritte wiederholen. Erstellen Sie einfach ein neues <figure>-Element mit einem <img>-Tag und einem <figcaption>-Tag für jedes Bild.
Speichern Sie Ihre Änderungen in der index.html-Datei und aktualisieren Sie die Webseite. Sie sollten nun alle Ihre Bilder mit ihren darunterliegenden Beschriftungen sehen.

Zusammenfassung

Das HTML <figcaption>-Tag ist ein leistungsstarkes Werkzeug zum Bereitstellen von Bildbeschriftungen in Ihren Webseiten. Indem Sie dieses Tag verwenden, können Sie Ihre Bilder für Ihr Publikum zugänglicher und nutzerfreundlicher gestalten. Vergessen Sie nicht, Ihre Beschriftungen mit CSS zu gestalten, um sie auch gut aussehen zu lassen!