HTML - Element: <img>

Mit dem <img>-Tag (img = Image = Bild) definieren Sie eine Grafikreferenz zu einer Bild-Datei. Der <img>-Tag benötigt noch das Attribut src="" in diesem wird der Pfad zu der Bild-Datei angegeben.

<!DOCTYPE html>
<html>
<head>
 <title>Grafikreferenz mit absoluter Pfadangabe</title>
</head>
<body>

<h1>Grafikreferenz mit absoluter Pfadangabe</h1>

<p>
<img src="https://werner-zenk.de/logo.png">
</p>

</body>
</html>

Beispiel anzeigen

Bild-Datei mit relativer Pfadangabe referenzieren

Um eine Bild-Datei im gleichen Verzeichnis anzuzeigen wo die Datei liegt, geben Sie nur den Dateinamen an:

<img src="logo.png">

Um von einer Datei zu einer Bild-Datei die in einem übergeordneten Verzeichnis liegt zu referenzieren, geben Sie ../ und den Dateinamen an:

<img src="../logo.png">

Um von einer Datei zu einer Bild-Datei die in einem untergeordneten Verzeichnis liegt zu referenzieren, geben Sie den Verzeichnisnamen: beispiel/ und den Dateinamen an:

<img src="beispiel/logo.png">

Das folgende Beispiel geht zwei Verzeichnisse nach oben: ../../ und dann ins Verzeichnis beispiel/ zur Bild-Datei: logo.png.

<img src="../../beispiel/logo.png">

Das folgende Beispiel geht zwei Verzeichnisse nach unten: beispiel/test/ und dann zur Bild-Datei: logo.png.

<img src="beispiel/test/logo.png">

➤ Sämtliche Pfadangaben müssen zu einer existierenden Bild-Datei führen.

Attribute

Mit den Attributen: width="" und height="" geben Sie die Breite und Höhe der Grafik an,
besonders bei größeren Grafiken ist dies sinnvoll. Wenn die Größenangabe fehlt, dann verschiebt sich beim laden der Seite der Seiteninhalt so lange, bis die Grafiken alle geladen sind.

<img src="logo.png" width="600" height="500">

Mit den Attribut: alt="" geben Sie einen alternativen Text an. Die Eingabe eines alternativen Textes ist Pflicht. Er wird angezeigt, wenn die Grafik nicht (oder noch nicht) dargestellt wird. Möchten Sie aus irgendeinem Grund keinen alternativen Text angeben, schreiben Sie einfach alt="".

<img src="logo.png" alt="Das Logo unserer Firma">

Weitere Attribute sind: border="1" zeichnet einen Rahmen um die Grafik. Dieses Attribut soll künftig aus dem HTML-Standard entfallen. Für Verweis-sensitive Grafiken wird das Attribut usemap="" benötigt <map>.

<img src="logo.png" decoding="sync">

Mit dem Decodierungsattribut: decoding="sync" für ein <img>-Tag kann man angeben ob das Bild parallel oder zusammen mit dem restlichen Seiteninhalt decodiert werden soll. Der Standardwert ist decoding="auto", es bleibt dem Browser überlassen.

Bausteine Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<pre> Präformatierter Text

CSS - Animierte Box mit Keyframes

PHP - Filtern von ganzen Zahlen

JavaScript - Interne Anker hervorheben

MySQL - Suchen unter Berücksichtigung von Groß- und Kleinschreibung

Homepage-Umzug
Sollten Sie einmal mit Ihrer Homepage umziehen, dann teilen Sie es den Besuchern auch mit. Lassen Sie unter der alten Adresse einen Hinweis und einen Link auf die neue Seite zurück. Vorsicht ist bei automatischen Weiterleitungen geboten. Stellen Sie auf jeden Fall einen alternativen Link zur Verfügung, falls die automatische Weiterleitung nicht funktioniert.