Homepage bauen: Gratis-Tutorial HTML

Lektion 3: Bilder und Links

Internetseiten, die nur Text enthalten, sind eine ziemlich öde "Bleiwüste". Wir brauchen also noch eine Möglichkeit, um Bilder einzubinden. Außerdem besteht eine Homepage natürlich nur selten aus einer einzigen Seite (wäre ziemlich mühsam zu lesen...!). Damit man zwischen verschiedenen Seiten hin und her springen kann, brauchen wir noch eine Möglichkeit zur Verlinkung.

Bilder in die Homepage einbauen

Anders, als man es vielleicht erwarten würde, werden Bilder nicht in die einzelne HTML-Datei integriert. Wie sollte das auch gehen? HTML begnügt sich mit ASCII-Text. Das ist aber kein Problem, denn natürlich gibt es ein Tag, mit dem man dem Browser mitteilen kann, daß an dieser Stelle ein Bild gezeigt werden soll.

<html>
<head><title>Ein Bild einbauen</title></head>
<body>
Hier sehen wir, wie ein Bild in eine Internetseite eingebaut wird:
<img src="lichtenstein.jpg">
</body>
</html>

Die Seite anzeigen: hier klicken

Geht also eigentlich ganz einfach: Für das Bild (engl. image) gibt es das HTML-Tag <img>. Weil sich das Bild aber nicht innerhalb des HTML-Codes befindet, sondern extern als JPG-Datei vorliegt, muß dem Browser noch mitgeteilt werden, wie die gewünschte Bilddatei heißt (die "Quelle" also, engl. source). Das img-Tag ist übrigens einer der seltenen Einzelgänger unter den Tags, die kein beendendes Tag brauchen.

Beachten Sie aber folgendes:

Wenn Sie Ihre HTML-Datei im Internet publizieren (also auf einem Webserver ablegen und frei geben), dürfen Sie nicht vergessen die Bilddateien, die in Ihrer HTML-Datei eingebunden sind, auch mit hoch zu laden. In unserem einfachen Beispiel müßte die Datei lichtenstein.jpg im selben Verzeichnis liegen wie die HTML-Datei.

Ein Bild wird übrigens innerhalb des Absatzes auch nicht anders behandelt als ein einzelner Buchstabe. Da man ja nur im Ausnahmefall das Bild direkt mitten im Textfluß wird haben wollen, verwendet man für Zeilenumbruch oder setzt es direkt in einen eigenen Absatz (begonnen mit und beendet mit ). Mehrere Bilder nacheinander in derselben Zeile "kleben" unmittelbar aneinander. Das kann man vermeiden, indem man dazwischen einfach ein Leerzeichen läßt.

Links

Das Tag, mit dem man ein Verlinkung herstellt, ist das a-Tag. Ähnlich wie das src-Attribut im img-Tag braucht das a-Tag ebenfalls die Angabe seines Ziels, also wohin verknüpüft werden soll. Dieses Attribut heißt href (von hyperlink reference). Das a-Tag braucht wieder ein schließendes Tag um festzulegen, wo der Link endet. Was zwischen öffnendem und schließendem a-Tag steht ist sozusagen der "Auslöser" des Links. Wenn man drauf klickt, wird man vom Browser zum Linkziel weiter geleitet.

<html>
<head><title>Verlinkungen</title></head>
<body>
Hier geht es zu einer <a href="http://www.google.de">bekannten Suchmaschine</a> 
Oder <a href="mailto:km@eye.de">mailen Sie mir</a> doch mal.
</body>
</html>

Die Seite anzeigen: hier klicken

Wie man einen Email-Link in eine HTML-Seite einbauen kann, ist oben auch zu sehen und unterscheidet sich in der Funktion nur dadurch, daß (bei richtig konfiguriertem Browser) bei solchen Links sich das Mailprogramm öffnet.

Homepage optimieren

Analyse Ihrer Homepage

Tutorial HTML

Aktualisiert am 01.09.2010