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>
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.
<object> Objekt
PHP - Den Array-Inhalt in einer Tabelle aufteilen