HTML Bild-Einbindung

Grundlagen der Bild-Einbindung in HTML

Der grundsätzlich benötigte HTML-Code, um ein Bild einzufügen, sieht folgendermaßen aus:


        <img src="bilder/bild.jpeg">

Das Tag <img src="..."> ist dabei der Hauptbestandteil. src steht hierbei für "source" (Quelle). Es handelt sich also um die Datei bild.jpeg, die im Ordner Bilder gespeichert ist. Groß- und Kleinschreibung spielt hierbei keine Rolle.

Bilder von externen Websites einbinden

Wenn Sie ein Bild von einer externen Website einfügen möchten, müssen Sie eine URL als Quelle angeben. Ein Beispiel dafür ist:


        <img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

In diesem Beispiel wird das Google-Logo von der Website www.google.de angezeigt. Um eine Grafik einzufügen, kopieren Sie die Grafikadresse eines Bildes, indem Sie im Browser mit der rechten Maustaste auf das Bild klicken und "Grafikadresse kopieren" wählen.

Format-Kompatibilität

Dieses Verfahren funktioniert für Bilder aller Art, einschließlich GIFs, die wie kleine, sich wiederholende Videosequenzen wirken, aber als Grafikdateien betrachtet werden.

Detaillierte Bildeinstellungen

Sie können Ihr Bild weiter anpassen, indem Sie Attribute wie Höhe, Breite, Alternativtext und Ausrichtung hinzufügen. Diese Attribute fügen Sie direkt in das <img src="...">-Tag ein.

Höhe und Breite einstellen

Die Bildhöhe und -breite können Sie mit den Attributen height="..." und width="..." in Pixeln festlegen. Ein Beispiel:


        <img src="..." height="100" width="200">

Alternativtext erstellen

Mit dem alt="..."-Attribut können Sie einen Alternativtext für Ihr Bild angeben. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann:


        <img src="..." alt="Bild kann nicht geladen werden.">

Ausrichtung festlegen

Sie können Bilder ähnlich wie Text ausrichten. Dafür verwenden Sie das align="..."-Attribut, z.B.:

align="left" für linksbündige Ausrichtung
align="right" für rechtsbündige Ausrichtung
align="center" für zentrierte Ausrichtung
align="top" für eine Ausrichtung oben
align="bottom" für eine Ausrichtung unten

Rahmen erstellen

Sie können einem Bild einen Rahmen hinzufügen, indem Sie das border="..."-Attribut verwenden und eine Pixelzahl für die Rahmenbreite angeben:


        <img src="..." border="3">

Vollständiges Beispiel für eine Bild-Einbindung

Hier ist ein vollständiges Beispiel, das die zuvor genannten Attribute verwendet:


        <img src="bilder/bild.jpg" height="100" width="100" alt="Bild kann nicht geladen werden." border="3" align="center">

In diesem Beispiel stammt das Bild "bild.jpg" aus dem Ordner "Bilder", ist 100 Pixel hoch und breit, und hat einen 3 Pixel breiten Rahmen. Falls das Bild nicht geladen wird, wird der Alternativtext "Bild kann nicht geladen werden." angezeigt. Das Bild wird zentriert ausgerichtet.

Impressum Datenschutzinformation