Summary  
This chapter explains how to embed images in HTML using the `<img>` tag and its key attributes (`src`, `alt`, `width`, `height`), including best practices for accessible alt text and using absolute versus relative paths.  

General domain of usage  
Web page content design

Bilder machen Webseiten ansprechender. Ein Bild kann mit dem `<img>`-Tag eingefügt werden.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL21vdW50YWlucy5hdmlmIgogIGFsdD0iTW91bnRhaW5zIGluIHNub3cgYW5kIGNsZWFuIHNreSIKICB3aWR0aD0iNTAwIgogIGhlaWdodD0iMzMzIgovPg==

### Wichtige Attribute:
- `src`: erforderlich. Pfad zur Bilddatei (absolut oder relativ);
- `alt`: erforderlich. Text, der angezeigt wird, wenn das Bild nicht geladen werden kann; wird auch von Screenreadern verwendet;
- `width` / `height`: Größe in Pixel. Ohne diese Angaben wird das Bild in seiner Originalgröße angezeigt.

## alt-Attribut
Der `alt`-Text sollte das Bild klar beschreiben und nützlichen Kontext bieten.

Stellen wir uns folgendes Beispiel vor. Sie verfügen über eine Quelle zum Pferderennen. Sie möchten zeigen, wie sich die Teilnehmer auf das Rennen vorbereiten.

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgaHVtYW4gb24gYSBob3JzZSIKLz4=

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgam9ja2V5IHJpZGVzIGEgaG9yc2UgdGhyb3VnaCBhIHRyYWluaW5nIGFyZWEgc3Vycm91bmRlZCBieSB0cmVlcyIKLz4=

Die verbesserte Version bietet einen echten Kontext und hilft sehbehinderten Nutzern zu verstehen, was das Bild zeigt.

## src-Attribut
Das `src`-Attribut kann sowohl absolute als auch relative Pfade verwenden, um den Speicherort der Bilddatei anzugeben.

### Absoluter Pfad
Eine vollständige URL, die auf ein Online-Bild verweist.

PGltZyBzcmM9Imh0dHBzOi8vZXhhbXBsZS5jb20vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Jede Person kann über diesen vollständigen Link auf das Bild zugreifen.

Bitte prüfen Sie das folgende reale Beispiel.
- [View the Code](https://github.com/olreyplay/adding-images-in-html/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html/)

### Relativer Pfad
Verweist auf ein Bild innerhalb Ihres Projektordners.

PGltZyBzcmM9Ii4vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Das bedeutet, dass sich `image.jpg` im Verzeichnis images in der Nähe Ihrer HTML-Datei befindet.

Bitte sehen Sie sich das unten bereitgestellte reale Beispiel an. Sie finden den Ordner `images`, der die Datei `sun.png` enthält.

- [View the Code](https://github.com/olreyplay/adding-images-in-html-v2/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html-v2/)

Absolute Pfade: vollständige URLs, die von überall im Internet funktionieren.

Relative Pfade: lokale Projektpfade, die innerhalb Ihrer eigenen Ordnerstruktur verwendet werden.

Zusammenfassung

Welches Tag kann verwendet werden, um ein Bild auf einer Website einzufügen?

Welches Attribut muss für ein `<img/>`-Tag angegeben werden?

Erlernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser einsteigerfreundliche Kurs behandelt Tags, Attribute, Elemente und die Strukturierung von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Webentwicklungsreise mit HTML.

Erkunden Sie die Funktionsweise des Webs. Erfahren Sie, wie Daten über Netzwerke übertragen werden, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein grundlegendes Verständnis darüber, wie Webbrowser und Server miteinander kommunizieren, um Webinhalte bereitzustellen.

Erkunden Sie die Möglichkeiten von Tags zur Strukturierung von Inhalten, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Erfahren Sie, wie Sie Elemente mit Attributen erweitern können.

Der Kern der HTML-Dokumentstruktur. Lernen Sie die Bestandteile eines HTML-Dokuments kennen, einschließlich der Doctype-Deklaration, des Head- und Body-Bereichs. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.

Gestaltung einer ansprechenderen Webseite durch den Einsatz von Medien wie Bildern, Audio und Video. Umgang mit strukturierten tabellarischen Daten in Form von Tabellen.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Bilder in HTML Einfügen

Wichtige Attribute:

alt-Attribut

src-Attribut

Absoluter Pfad

Relativer Pfad

1. Welches Tag kann verwendet werden, um ein Bild auf einer Website einzufügen?

2. Welches Attribut muss für ein `<img/>`-Tag angegeben werden?