L1_4 HTML-Seite mit grafischen Elementen – Information
Um das Bild mit dem Namen bild1.jpg in eine HTML-Seite einzubinden, wird das folgende Tag benötigt:
<img src="bild1.jpg">
Wenn dieses Tag verwendet wird, muss die Datei bild1.jpg im selben Verzeichnis gespeichert sein wie die HTML-Datei.
Sollte die Bilddatei in einem Unterordner (z.B. grafiken ) gespeichert sein, so muss die Pfadangabe folgendermaßen lauten:
<img src="grafiken/bild1.jpg">
Ist die Bilddatei in einem anderen Verzeichnis gespeichert, so lautet für das abgebildete Beispiel die Pfadangabe folgendermaßen:
<img src="../grafiken/bild1.jpg">
Die Angabe .../ führt aus dem Ordner musikschule in den übergeordneten Ordner internet-seiten. Die Angabe grafiken/ führt aus dem Ordner musikschule in den untergeordneten Ordner grafiken
Solche Pfadangaben nennt man relative Pfadangaben, da sie relativ vom Speicherort der HTML-Seite ausgehen.
Absolute Pfadangaben
mit Nennung des Laufwerksbuchstabens sind zu vermeiden, da sich diese Angaben immer nur auf den lokalen Rechner beziehen. Sobald die Seiten online verfügbar sein sollen, gelten diese Laufwerksangaben nicht mehr.
<img src="C:/Benutzer/internetseiten/grafiken/bild1.jpg">
Das <img>-Tag kann durch weitere Attribute ergänzt werden:
• <img src="bild1.jpg" alt ="Vereinslogo" >
Mit diesem Attribut wird der angegebene alternative Text ausgegeben, falls das Bild nicht angezeigt werden kann.
• <img src="bild1.jpg" alt =title = "Unser neues Vereinslogo" >
Verwendet man das title – Attribut, so wird dem Benutzer, wenn er mit der Maus über das Bild streicht, ein kleines Pop-up-Fenster mit Hinweistext angezeigt.
• Häufig sieht man die Größengaben noch als prozentuale oder absolute Werte in Form von HTML-Attributen:
<img src="bild1.jpg" width="30%" height="50" >
Die beiden HTML-Attribute width und height sind seit HTML5 allerdings veraltet und sollten gegen die entsprechenden CSS-Angaben ausgetauscht werden.
img {
width: 30%;
height: 50px;
}
Neben den Einheiten % (dieser Anteil des umgebenden Elements soll durch das Bild aus-gefüllt werden und px (Pixel = Kleinster möglicher Bildpunkt) kennt CSS noch weitere Einheiten (https://www.w3schools.com/cssref/css_units.php )
Damit das Bild zentriert angezeigt wird, kann das <img> -Tag beispielsweise von einem <p>-Tag umschlossen werden, weil die zentrierte Textausrichtung für das <p>-Tag in der Datei format.css festgelegt ist.