Bildchen

Eure Webseite soll vermutlich nicht nur reinen Text, sondern auch in irgendeiner Form Grafiken enthalten. Grafiken werden in HTML nicht direkt eingebunden, sondern referenziert. Das bedeutet, der HTML-Code verweist auf eine Grafikdatei, die der Browser dann anzeigt. Solche Verweise realisiert Ihr mit dem img-Tag

<h3>Neuerscheinungen</h3>

<img src="pictures/cover05.jpg"
  alt="Cover Beispiel-Serie, Band 5"><br>
<img src="http://www.abcomics.test/neu_jan/cover3.gif"

  alt="Cover Noch eine Serie, Band 3">

Wie Ihr seht, ist der img-Tag ein leerer Tag. Es gibt also kein </img>, und alle nötigen Angaben müssen in den Attributen Platz finden. Die beiden wichtigsten Attribute sind src ('source') und alt ('alternative'). src ist die URL der Bilddatei, die der Browser anzeigen soll. Dabei könnt Ihr relative oder absolute URLs verwenden. Relative URLs werden vom «Standort» der HTML-Datei aus aufgelöst. Wenn Ihr also wie im Beispiels 'src="pictures/cover5.jpg"' schreibt, referenziert dieser img-Tag die Grafikdatei 'cover5.jpg' im Unterverzeichnis 'pictures' des Verzeichnisses, in dem sich die HTML-Datei befindet. Absolute URLs hingeben werden komplett mit Protokollvorspann angegeben, wie im zweiten img-Tag des Beispiels 'src="http://www.abcomics.test/neu_jan/cover3.gif"'.

Der Text des alt-Attributes wird angezeigt, wenn das referenzierte Bild aus irgendeinem Grund nicht angezeigt wird. Das kann eine Reihe von Gründen haben: Vielleicht habt Ihr Euch beim src-Attribut verschrieben, und an der angegebenen Stelle gibt es keine Grafikdatei mit diesem Namen. Oder der User hat in den Einstellungen seines Browsers angegeben, daß er keine Bilder angezeigt haben will. Oder der User ist blind und läßt sich den Text der Webseite von einem speziellen Browser vorlesen; in diesem Fall wird die Beschreibung des Bildes im alt-Attributes vorgelesen. Ihr solltet also immer eine kurze, aber prägnante Beschreibung Eures Bildes in das alt-Attribut schreiben.

img-Tags sind Inline-Tags. Das bedeutet, der Browser stellt mehrere Bilder nebeneinander, solange Platz ist. Damit die beiden Bilder im obigen Beispiel untereinander angezeigt werden, ist ein br-Tag eingefügt. Die Grösse des Bildes könnt Ihr mit den Attributen width und height angeben (in Pixel)

<img src="pictures/pic1.jpg" alt="Musterbild" height="100" width="150">

Hat die Datei auf dem Server eine andere Grösse, skaliert der Browser. Aber auch, wenn Ihr die Grafik in der Originalgrösse anzeigen wollt, solltet Ihr width und height angeben. Dann hat der Browser nämlich die Möglichkeit, beim Seitenaufbau den benötigten Platz für die Grafik freizuhalten und die Seite u. U. schneller zu laden.

Wie Ihr vermutlich wißt, gibt es eine Vielzahl von Formaten für Grafikdateien. Natürlich kann nicht jeder Browser jedes dieser Formate darstellen. Es gibt drei Formate, die Ihr bei Euren img-Tags benutzen könnt: GIF und PNG sind besonders für Grafiken, Zeichnungen etc. geeignet, für Fotos wird normalerweise JPEG verwendet. Beim Erstellen Eurer Grafiken solltet Ihr im Auge behalten, daß diese Dateien zusätzlich zu Eurem HTML-Dokument über das Netz übertragen werden müssen. Ihr solltet sie also nicht unnötig groß werden lassen, da sich sonst auch die Ladezeit Eurer Seite entsprechend verlängert.

Es gibt noch eine Reihe von weiteren Attributen für img-Tags, mit denen Ihr beispielsweise die Ausrichtung des Bildes zum umgebenden Text festlegen könnt. Alle diese Attribute sind jedoch mittlerweile deprecated, so daß auch hier der inzwischen wohl gewohnte Verweis auf CSS stehen muß. Aber auch ohne CSS könnt Ihr Texte und Grafiken zueinander anordnen, nämlich mit Hilfe von Tabellen. Diese werden noch ein eigenes Thema sein.