Start Basics Struktur Text Links Bilder Tabellen Style CSS-Layout Tag-Ref

Bilder einbinden <img>

Noch sieht das ganze ja etwas langweilig aus: Da müssen Bilder her! Wenn du auf deinem Computer eigene Bilder hast, kannst du die natürlich auf deiner Seite anzeigen. Wie das geht?

Wir wollen nun den Hund auch als Bild einbinden.
Dazu muss man dem Browser allerdings genau sagen, wo er die Grafik findet (Quelle=source, hier im Verzeichnis "pics").
Außerdem möchte er wissen, ob er einen Rahmen (border) um das Bild machen soll und welchen Text (alt für alternative text) er zeigen muss, wenn er das Bild aus irgendeinem Grund nicht findet (z.B. wenn die Quelladresse nicht genau stimmt).
Es gilt als guter Stil, wenn man außerdem die Breite (width) und Höhe (height) der Grafik mit angibt (die Werte bekommst Du heraus, wenn du das Bild im InternetExplorer öffnest, es mit der rechten Maustaste anklickst und auf "Eigenschaften" klickst).

<img src="grafik/hund.jpg" border="0" alt="Ich bin der Hund und heiße Wasti" width="252" height="145"/>

Ich bin der Hund und heiße Wasti

Bitte beachten: Das Netz kennt hauptsächlich zwei Grafikformate: .jpg und .gif. Andere sollte man nicht verwenden! Img hat keinen Schlusstag!


Füge auf deiner Seite das Bild "ich.jpg" ein. Es befindet sich bereits im Verzeichnis "pics" und ist 248 Punkt breit und 342 hoch. Du möchtest einen 2 Punkte breiten Rand um dein Bild und einen beliebigen Alternativtext.

Zwischenergebnis

Wenn du bisher alle Übungen mitgemacht hast, dann sieht deine Seite schon ganz gut aus. Wenn du Lust hast, dann bringen wir sie jetzt so in Form, dass dein "Inhaltsverzeichnis" auch funktioniert. Nebenbei kannst du einiges wiederholen:


Um einen Abstand auf deiner Seite einzufügen benutzt du am besten ein kleines unsichtbares Bild namens "blind.gif" im Verzeichnis "pics", das du unter deinen bisherigen Text einfügst. Definiere die Höhe auf 600, die Breite auf einen Punkt und lasse den alternativen Text leer!
Darunter kommt der Anker (Haustier oder Hobby). Unter das Bild setzt du auch einen Link auf einen neuen Anker namens "inhalt". Diesen setzt du ganz an den Anfang der Seite. Füge als Text "Nach oben" ein! Fertig!
Jetzt gibst du deinem Haustier noch eine passende Überschrift (1. Ordnung).

Beispielseite anschauen: Zur Beispielseite (Zwischenergebnis)

Weiter zu den Tabellen
Nach oben

HTML-Einführung (Version 3.0) ©2005 Ralf Arndt