Die Verwendung von Bildern in HTML umfasst drei Hauptschritte:
1. Bilddatei:
- Bereiten Sie Ihre Bilddatei in einem geeigneten Format vor, z. B. JPEG, PNG oder GIF.
- Speichern Sie es unter einem aussagekräftigen Namen. Zum Beispiel „Bildname.jpg“.
2. Bildordner:
- Erstellen Sie auf Ihrem Computer einen Ordner zum Speichern Ihrer Bilder.
- Platzieren Sie die Bilddatei, die Sie verwenden möchten, in diesem Ordner.
3. HTML-Code:
- Öffnen Sie Ihre HTML-Datei in einem Texteditor oder HTML-Editor.
- Fügen Sie im entsprechenden Abschnitt Ihres HTML-Codes, normalerweise im „
“, den folgenden Code hinzu:
```html
„
- Ersetzen Sie „path_to_image“ durch den tatsächlichen Pfad zu Ihrer Bilddatei. Wenn Ihr Bild beispielsweise „Bildname.jpg“ heißt und sich im Ordner „images“ im selben Verzeichnis wie Ihre HTML-Datei befindet, wäre der Pfad:
```html
src="images/image-name.jpg"
„
- Ersetzen Sie „alternative_text“ durch eine kurze Beschreibung des Bildes. Dieser Text wird angezeigt, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann, z. B. weil der Link defekt ist oder die Einstellungen zum Laden von Bildern durch einen Benutzer deaktiviert sind.
Hier ist ein Beispiel für einen vollständigen Codeausschnitt:
```html
Überschrift
Textinhalt...
„
Speichern Sie Ihre HTML-Datei und öffnen Sie sie in einem Webbrowser, um das eingefügte Bild anzuzeigen.
Zusätzliche Attribute für ` ` Schlagwort:
- Attribute „width“ und „height“:Geben Sie die gewünschte Breite und Höhe des Bildes in Pixeln an.
- Attribut „align“:Steuert die horizontale Ausrichtung des Bildes. Zu den Werten gehören „links“, „rechts“ und „Mitte“.
- Attribut „Titel“:Fügt einen Tooltip-Text hinzu, der angezeigt wird, wenn Sie mit der Maus über das Bild fahren.
Notiz:
Es empfiehlt sich, Ihre Bilder für die Webleistung zu optimieren, indem Sie sie komprimieren, ohne die visuelle Qualität zu beeinträchtigen.