relativeMeister.com
In HTML Bilder einfügen mit dem img-Tag
Wie du in HTML mit dem img-Tag Bilder einfügst. Was src und alt Attribute sind und wie du Pfade verwendest, um Bilder richtig anzuzeigen.Tags: Bilder | HTML lernen | HTML-Tag | Pfade | Programmieren lernen | Web-Development lernen | Webseiten erstellen lernenWorum geht´s?
Eine Webseite ohne Bilder ist ziemlich langweilig. Dabei ist es in HTML sehr einfach, Bilder in deine Webseite zu verlinken und einzufügen. Alles, was wir dazu brauchen, ist ein einziges img-Tag und das src-Attribut. Und vielleicht noch ein wenig Hintergrundwissen über Pfade.
Aber der Reihe nach:
1. Wie wir in HTML Bilder einfügen können
Grundsätzlich ist es in HTML sehr einfach, Bilder einzufügen. Alles, was wir dazu brauchen, ist ein einzelnes <img>-Tag.
Wobei das nicht ganz stimmt. Ein <img>-Tag sagt dem Browser zwar, dass hier ein Bild sein soll, aber noch nicht welches Bild. Und um ihm das zu sagen, brauchen wir nun etwas Neues: Attribute. HTML-Attribute sind zusätzliche Informationen, die du zu einem HTML-Tag dazu schreibst. Ist es ein alleinstehendes HTML-Tag wie unser <img>-Tag, musst du sie nur in das einzelne hineinschreiben. Handelt es sich um ein öffnendes und ein schließendes Tag (z.B. beim <h1>-Tag für Überschriften), dann musst du die Attribute nur in das öffnende Tag schreiben.
1.1 In HTML Bilder von der Festplatte lokal einfügen
Das Ganze sieht dann beispielsweise für unser Bild so aus:
Hier kommt gleich ein Wal: <img src="wal.jpg">
Das src-Attribut steht für „Source“, oder auf Deutsch „Quelle“ des Bildes – also welches Bild der Browser nun tatsächlich anzeigen soll.
In unserem Fall gibt es im selben Ordner in dem unsere index.html ist auch eine Bilddatei namens wal.jpg – die soll nun angezeigt werden.
Das Ergebnis sieht dann so aus:
Du kannst unsere wal.jpg natürlich gegen ein beliebiges Bild von dir ersetzen. Wichtig ist nur, dass die Bild-Datei im selben Ordner ist wie deine .html-Datei.
1.2 In HTML Bilder über einen Link einfügen
Du kannst in HTML Bilder nicht nur von deiner Festplatte bzw. aus dem gleichen Ordner einfügen und verlinken, sondern auch über Web-Adressen, sogenannten URLs.
Dazu musst du nur den Text der in den Doppelhochkommas beim src-Attribut steht entsprechend verändern, z.B. so:
Hier kommt gleich ein Wal: <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
Mit diesem Code wird z.B. das Google-Logo von der Google-Startseite verlinkt und angezeigt:
1.3 In HTML Bilder von einem anderen Ordner einfügen
Wenn dein Bild sich im gleichen Ordner befindet wie deine .html-Datei, kannst du wie weiter oben beschrieben einfach den Dateinamen im src-Attribut angeben, und es sollte funktionieren.
Aber was ist, wenn sich dein Bild in einem Unterordner befindet? Oder in einem übergeordneten Ordner?
Da kommen jetzt Pfade ins Spiel.
Weil die aber auch z.B. für Links wichtig sind, gibts dazu ein eigenes Tutorial.
2. Die Größe deines HTML-Bildes verändern und das wichtige Alt-Attribut
Die erste Frage, die du dir vermutlich stellen wirst, ist die, wie du die Größe deines Bildes nun verändern kannst.
2.1 Die Größe von HTML-Bildern verändern
Mittelfristig wirst du das im Normalfall mit Hilfe von CSS machen. Aber weil du vermutlich noch nicht so weit bist, hier erstmal die Schnell-Variante in HTML:
<img src="wal.jpg" width="400px">
Mit Hilfe von dem Attribut width kannst du festlegen, wie groß dein Bild sein soll. Die Einheit „px“ steht dabei für „Pixel“, also Bildpunkte.
Das Attribut height ermöglicht es dir, auch die Höhe des Bildes festzulegen. Wenn du das willst, fügst du es einfach vor der schließenden >-Klammer des img-Tags ein, genau wie das width-Attribut.
Allerdings ist es bei HTML-Bildern meistens keine gute Idee, beide Attribute (also width und height) gleichzeitig anzugeben. Gibst du nur eines an, wird das Seitenverhältnis (auch aspect-ratio genannt) beibehalten. Gibst du beide an, wird das Bild womöglich unschön verzerrt, und sieht dann z.B. bei unserem Google-Logo von vorher so aus:
Darum solltest du im Normalfall immer nur einen der beiden Attribute verwenden, und darum vertrauen, dass der Browser sich darum kümmert, dass das Seitenverhältnis des Bildes passt.
2.2 Das alt-Attribut und warum es von zentraler Bedeutung ist
Dein img-Tag kann auch noch ein sogenanntes alt-Tag bekommen. Das alt-Attribut hat zwei zentrale Bedeutungen, weswegen du es immer setzen solltest:
- Suchmachinen versuchen über das alt-Attribut zu verstehen, was das Bild darstellt. Wenn dein Bild ein alt-Attribut hat das zur restlichen Webseite passt, hilft das deiner Suchmaschinen-Optimierung.
- Blinde und sonstwie beeinträchtigte Menschen lassen sich das Alt-Tag über einen Screen-Reader vorlesen. So können sie zumindest erahnen, was auf den Bildern zu sehen ist, die sie nicht selbst sehen können.
Zudem dauert eine Kurz-Beschreibung über das alt-Attribut nicht sehr lange.
Viele Vorteile, kaum Aufwand – es zahlt sich wirklich aus!
3. Dein HTML Bild wird nicht angezeigt?
Wenn dein Bild nicht angezeigt wird, liegt das sehr wahrscheinlich an einem von drei Gründen:
- Du hast einen Tippfehler: Überprüfe, ob du die korrekten Anführungszeichen verwendet hast!
- Dein Bild existiert gar nicht: Stimmt der Name? Ist es wirklich eine .jpg-Datei, oder doch eine .png-Datei?
- Dein Bild ist in einem anderen Ordner als du angegeben hast: Überprüfe deine Pfade!