Einführung HTML

Webseiten erstellen - Eine Einführung -

Was ist HTML?

Um Webseiten zu erstellen, müssen Sie HTML (= HyperText Markup Language), die „Web-Sprache der Seitenbeschreibung“ kennen, mit der das Layout Ihrer Seite gestaltet wird. Streng genommen ist HTML keine Programmiersprache. Es handelt sich eher um eine „Präsentationssprache“, mit der Sie Ihre Seiten attraktiver gestalten, indem Sie Bilder, Links usw. aufnehmen und die Textformatierung durch die Definition von Schriftarten und anderen Attributen, wie z. B. fett, kursiv, Unterstreichung usw., verbessern.
HTML arbeitet mit Tags. Das sind Syntax-Befehle, die sich auf einen Layout-Stil oder ein Objekt beziehen. Sie sind leicht zu erkennen, da sie immer in < und > eingeschlossen sind. Es spielt zwar keine Rolle, ob Tags groß oder klein geschrieben werden, Sie sollten aber die Kleinschreibung bevorzugen.


HTML verwendet zwei Typen von Tags:


Tags zur Formatierung

Diese Tags bestehen aus zwei Teilen: einem einleitenden Tag, z. B. <i>, und einem abschließenden Tag, der mit einem Schrägstrich / gekennzeichnet ist, z. B. </i>. Ein kursiver Text wird wie folgt markiert: <i>italic</i> (der Text „italic“ erscheint auf der fertigen Webseite kursiv: italic).

Tags zum Einfügen

Die Tags gestatten Ihnen, verschiedene Arten von Objekten in Ihre Webseite aufzunehmen, wie z. B. Bilder, Sound, Video usw. Diese Tags werden ohne einen abschließenden Teil verwendet; aber man kann ihnen Attribute zuweisen.
Wenn Sie z. B. ein Bild mit dem Namen avion.jpg einfügen möchten, verwenden Sie den Tag <img> in Kombination mit dem Attribut src: <img src="/avion.jpg">


Namenskonventionen


Die erste Seite einer Website erhält den Namen index.html oder index.htm. Das ist eine anerkannte Konvention im Internet. Dank dieser Konvention werden Besucher, die die URL Ihrer Webseite im Format http://www.meineSite.de eingeben, an http://www.meineSite.de/index.html weitergeleitet.
Die richtige Erweiterung: Die beiden Erweiterungen .htm und .html sind gleichwertig. Sie müssen nur darauf achten, dass Ihre Links auch die von Ihnen ausgewählte Erweiterung verwenden.
Beim Benennen aller Seiten Ihrer Website sollten Sie folgende Regeln einhalten:

Verwenden Sie in Dateinamen keine Leerzeichen, Sonderzeichen und andere ungewöhnliche Zeichen. Halten Sie sich an die 26 Buchstaben des Alphabets und ein paar Ziffern.

Verwenden Sie für Dateinamen innerhalb Ihres Homepage-Projekts nur Kleinbuchstaben.

Speichern Sie alles, was mit Ihrer Website zu tun hat – auch Grafiken und Trennlinien – in einem Ordner bzw. legen Sie eine geeignete Ordnerstruktur an. So können Sie beim Veröffentlichen nichts vergessen.

Webseite, Website oder Homepage?

Der Begriff Webseite wird für eine einzelne – als Dateien gespeicherte Seiten – verwendet. Mit Website wird dagegen das ganze Homepage-Projekt bezeichnet, das mehrere Webseiten und Grafikdateien umfasst. Die erste Seite einer Website – die Startseite – ist die Homepage des Projekts.

HTML-Seitenstruktur

Alle Webseiten müssen dem Grundgerüst eines HTML-Dokuments entsprechen, damit sie von den Browsern der Besucher richtig interpretiert werden können:
<html>
<head>
<title> Hier kommt der Titel hin</title>
</head>
<body>
< …Webseiten Inhalt …
</body>
</html>
Jeder der Tags in diesem Gerüst einer HTML-Seite hat eine bestimmte Funktion:

<html> und </html> bezeichnen den Anfang und das Ende der Webseite (= Wurzelelement).

<head> und </head> schließen den Kopf der Webseite ein (= Kopfdaten). Dieser Teil der Seite kann – muss aber nicht – sogenannte Meta-Tags enthalten, z. B. den Namen des Verfassers und weitere Daten, die für eine erfolgreiche Registrierung der Homepage bei Suchmaschinen benötigt werden.

<title> und </title> schließen den Titel der Webseite ein, der in der Titelleiste des Browser-Fensters angezeigt wird. Gehört zu den Kopfdaten.

<body> und </body> schließen den eigentlichen Seiteninhalt ein (= Textkörper). Hier befinden sich alle die Elemente (Text, Bilder und Animationen), die im Browser-Fenster angezeigt werden.
Eine ausführliche Beschreibung von HTML findet sich im Internet unter http://de.selfhtml.org/
Angabe zum Default-Zeichensatz
Sie können mit Hilfe eines Meta-Tags – innerhalb der Kopfdaten – ausdrücklich bestimmen, welchen Zeichensatz Sie in der HTML-Datei verwenden. Diese Angabe ist sowohl für den Web-Server als auch für den Web-Browser sehr hilfreich, denn sie teilt beiden eindeutig mit, nach welchem Zeichensatz die Inhalte der HTML-Datei im Zweifelsfall zu interpretieren sind:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Die Angabe zum Zeichensatz wird mit http-equiv="content-type" definiert. Bei content= geben Sie bei HTML-Dateien immer text/html an, gefolgt von – durch einen Strichpunkt getrennt – der Angabe des Zeichensatzes. Im obigen Beispiel wird der Zeichensatz ISO-8859-1 definiert (das ist der normale Zeichensatz für westeuropäische Sprachen, unter anderem auch für Deutsch). Erlaubt sind Zeichensatzangaben wie unter http://www.iana.org/assignments/character-sets angegeben.
Deutsche Umlaute, scharfes ß , Eurozeichen und andere Sonderzeichen
Wenn Sie in Ihrer HTML-Datei keine Angaben zum verwendeten Zeichensatz machen, sollten Sie im Hinblick auf das Internet und die internationale Verwendung deutsche Umlaute, scharfes ß , € und auch andere Zeichen durch speziell dafür vorgesehene Zeichenfolgen ersetzen. Das gilt für den gesamten Inhalt einer HTML-Datei. Grundsätzlich beginnen die Zeichenfolgen mit & und enden mit ; also & ????;
Das Zeichen …
wird ersetzt durch die Zeichenfolge …
Das Zeichen …
wird ersetzt durch die Zeichenfolge …
ä (a Umlaut)
&auml;
ß
&szlig;
Ä (A Umlaut)
&Auml;

&euro;
ö
&ouml;
©
&copy;
Ö
&Ouml;
§
&sect;
ü
&uuml;
Ein Viertel 1/4
&frac14;
Ü
&Uuml;
Leerschritt
&nbsp;

Hintergrundfarbe

Wenn Sie Ihre Webseite mit farbigem Hintergrund versehen wollen, erweitern Sie den <body>-Tag um das Attribut bgcolor= (= background color = Hintergrundfarbe). Die Farbe können Sie als Farbwort oder hexadezimal angeben. Zu den Hexadezimalwerten siehe http://www.dombergen.de/farben.html oder http://www.dombergen.de/farbmischer.html
Die (Netscape-)Farbnamen und die zugehörigen Hexadezimalwerte finden Sie hier: http://de.selfhtml.org/diverses/anzeige/farbnamen_netscape.htm
Beispiel für dunkelblauen Hintergrund, definiert mit Farbname: <body bgcolor="darkblue">
Beispiel für blaugrünen Hintergrund, hexadezimal definiert: <body bgcolor="#00C0C0">

Hintergrundbild

Sie können für Ihre Webseite auch ein Hintergrundbild bestimmen. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, so dass ein Tapeteneffekt (Wallpaper) entsteht. Besonders geeignet für Wallpaper-Effekte sind relativ kleine Grafiken, die irgendein abstraktes Muster darstellen.
Die Angabe zum Einbinden eines Hintergrundbildes erfolgt im einleitenden <body>-Tag. Mit dem Attribut background= (= Hintergrund) bestimmen Sie eine Grafikdatei als Hintergrundbild.
Beispiel: <body background="hintergrund.jpg">
Geeignete Hintergrundbilder finden Sie hier: http://de.selfhtml.org/grafik/anzeige/wallpapers.htm Die gewünschte Grafik müssen Sie mit der rechten Maustaste anklicken, im Kontextmenü wählen Sie dann BILD SPEICHERN UNTER und bestimmen z.B. H:\Eigene Dateien\HTML als Speicherort.
Sie erhalten so z. B. die Datei wallpaper1.jpg, die Sie im <body>-Tag benutzen können.
Text-Layout
Um einen Text anzuzeigen, brauchen Sie ihn nur zwischen die Tags <body> und </body> der Seite zu setzen. Das Layout des Textes kann mit ein paar wenigen weiteren Tags verbessert werden.

Fettdruck

Um Text durch Fettdruck hervorzuheben, müssen Sie ihn in den Tag <b> (= bold = fett) einschließen:
<b>Dieser Text erscheint in Fettdruck.</b>
ergibt folgendes Ergebnis: Dieser Text erscheint in Fettdruck.

Kursivdruck und Unterstreichung

Auf die gleiche Weise können Sie die Tags <i> (= italic = kursiv) und <u> (= underline = unterstrichen) verwenden, um Text kursiv anzuzeigen oder zu unterstreichen.
<i>Dieser Text erscheint kursiv.</i>
<u>Und dieser Text wird unterstrichen.</u> (Hinweis: Webseiten sollten meiner Meinung nach keine Unterstreichnungen haben, da dies ein Merkmal für Links ist.)
Der Text wird jetzt folgendermaßen angezeigt:
Dieser Text erscheint kursiv. Und dieser Text wird unterstrichen.
Verschachtelte Tags
Tags können ineinander verschachtelt werden:
<i>Der komplette Text erscheint kursiv. <b>Aber nur dieser Text wird fett.</b></i>
führt zu diesem Ergebnis:
Der komplette Text erscheint kursiv. Aber nur dieser Text wird fett.
Beenden Sie die Tags immer in der Reihenfolge, in der Sie sie begonnen haben!

Zeilenumbruch

Das Verwenden von Enter bei der Texteingabe wird bei der Wiedergabe durch den Browser nicht als Zeilenumbruch, sondern als einfaches Leerzeichen interpretiert. Um einen Zeilenumbruch zu forcieren, müssen Sie den Tag <br> (= break = Umbruch) wie folgt verwenden. Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile:
<i>Dieser Text erscheint kursiv.</i><br>
liefert das folgende Ergebnis:
Dieser Text erscheint kursiv.

Textabsätze

Absätze dienen der optischen Gliederung eines Textes. <p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes. Es wird automatisch ein Abstand nach dem Absatz eingehalten.
Alleinstehende <p>-Tags sind nicht HTML-gerecht. Notieren Sie Textabsätze immer mit einleitendem und abschließendem Tag.

Trennlinie

Mit <hr> (= horizontal rule = Querlinie) fügen Sie eine Trennlinie ein. Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile:

Schriftart, Schriftgröße und Schriftfarbe

Mit <font>…</font> definieren Sie einen Bereich für Schriftformatierung.
Durch Attribute im einleitenden <font>-Tag können Sie die Schrift formatieren:

<font size="…"> bestimmt die Schriftgröße. Mit </font> beenden Sie den Abschnitt mit anderer Schriftgröße. Sie können den Wert in Zahlen zwischen 1 und 7 angeben. Die Normalschriftgröße ist 3.
(Bei den Angaben zu <font size="…"> handelt es sich um relative Werte. Hat der Anwender eine 12-Punkt-Schrift eingestellt, dann hat beispielsweise <font size="5"> eine andere Wirkung, als wenn der Anwender eine 9-Punkt-Schrift eingestellt hat.)

<font color="…">…</font> bestimmt die Schriftfarbe. Farben können durch Angabe eines Farbnamens definiert werden (<font color="violet">) oder durch Angabe der RGB-Werte in Hexadezimalform (<font color="#EE82EE">).
Die sogenannten Netscape-Farbnamen (mit den zugehörigen Hexadezimalwerten) finden Sie hier: http://de.selfhtml.org/diverses/anzeige/farbnamen_netscape.htm

<font face="…">…</font> bestimmt die Schriftart. Als Wert können Sie die Namen von Schriftarten zuweisen. Wenn Sie mehrere Schriftarten angeben, trennen Sie die Schriftartnamen durch Kommata: <font face="Avalon,Wide Latin">
(Bei mehreren angegebenen Schriftarten versucht der WWW-Browser zuerst, den Text in der ersten angegebenen Schriftart darzustellen, im Beispiel in Avalon. Wenn diese Schrift beim Anwender nicht installiert ist, wird versucht, die zweite angegebene Schrift, im Beispiel Wide Latin, zu nehmen. Wenn keine der angegebenen Schriftarten beim Anwender darstellbar ist, bleibt die Angabe wirkungslos, d. h. der Text wird in der vom Anwender eingestellten Schrift angezeigt.)

Absatzausrichtung <p> leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes. Textabsätze werden linksbündig ausgerichtet, wenn Sie nichts anderes angeben. Sie können einen Textabsatz auch zentriert oder rechtsbündig ausrichten. Auch Blocksatz ist möglich, er wird aber nicht von allen Browsern beherrscht.
Normaleinstellung (linksbündige Ausrichtung): <p align="left">…</p>
Zentrieren: <p align="center">…</p>
Rechtsbündig: <p align="right">…</p>
Blocksatz: <p align="justify">…</p> (Wirkt sich nur bei Absätzen aus, die sich über mehr als eine Zeile erstrecken. Dann wird am linken und am rechten Seitenrand ein bündiger Abschluss erzeugt, indem die Wortzwischenräume angepasst werden.)

Überschriften

HTML unterscheidet 6 Überschriftenebenen, um Dokumente hierarchisch zu strukturieren.
<h[1-6]> (h = heading = Überschrift) leitet eine Überschrift ein. Die Nummer [1-6] steht für die Überschriftenebene. 1 ist die höchste Ebene (größte Schrift), 6 die niedrigste (kleinste Schrift). Dahinter folgt der Text der Überschrift.

Bsp: <h1>
</h> beendet die Überschrift und steht am Ende des Überschriftentextes. Bsp: </h1>
Die Nummern bei einleitendem und abschließendem Tag müssen gleich sein. Jede Überschrift ist ein eigener Absatz, d. h. vor und nach Überschriften sind keine Absatzschaltungen nötig.

Listen

Mit Aufzählungslisten können z. B. Produkteigenschaften oder Argumente für eine These übersichtlich dargestellt werden. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet, Dot) versehen.
<ul> (= unordered list = unsortierte Liste) leitet eine Aufzählungsliste ein.
Mit <li> (= list item = Listeneintrag) beginnt ein neuer Punkt innerhalb der Liste, </li> beendet den Listeneintrag.
</ul> beendet die Liste.
Zwischen <li> und </li> darf eine komplette weitere Liste stehen.
Beispiel:
<ul>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>Dritter Listeneintrag</li>
</ul>
Wie das Aufzählungszeichen dargestellt wird, bestimmt dabei der Web-Browser. Es gibt aber die Möglichkeit, mit dem Attribut <ul type="…"> das Aussehen der Zeichen zu beeinflussen.
Mit <ul type="square"> bestimmen Sie ein eckiges gefülltes Bullet ■ (square = Rechteck).
Mit <ul type="disc"> bestimmen Sie rundes gefülltes Bullet ● (disc = Scheibe).
Mit <ul type="circle"> bestimmen Sie ein rundes Bullet ○ (circle = Kreis).
Nummerierte Listen sind z. B. von Bedeutung, um nacheinander auszuführende Aktionen oder Rangfolgen übersichtlich darzustellen. Es werden alle Listeneinträge automatisch durchnummeriert.
<ol> (ol = ordered list = nummerierte Liste) leitet eine nummerierte Liste ein. Mit <li> beginnt ein neuer Punkt innerhalb der Liste, </li> beendet den Listeneintrag. </ol> beendet die Liste.
Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1 sind in HTML nicht möglich.

Tabellen

Grundgerüst einer Tabelle

Zur Definition einer Tabelle sowie der Zeilen und Spalten werden drei Tags benötigt:
<table> (= Tabelle) leitet eine Tabelle ein.
<tr> (= table row = Tabellenzeile) leitet eine neue Tabellenzeile ein. Im Anschluss daran werden die Datenzellen (Spalten) der betreffenden Reihe definiert, und zwar mit <td> (= table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert, </td> beendet die Eingabe.
Am Ende einer Tabellenzeile folgt ein abschließendes Tag </tr>.
Die Tabelle wird mit </table> beendet.
Beispiel für eine Tabelle mit 6 Zellen, die sich auf 2 Zeilen und 3 Spalten aufteilen:
<table>
<tr>
<td>Erste Zelle in der ersten Zeile. A</td>
<td>Zweite Zelle in der ersten Zeile. B</td>
<td>Dritte Zelle in der ersten Zeile. C</td>
</tr>
<tr>
<td>Erste Zelle in der zweiten Zeile X.</td>
<td>Zweite Zelle in der zweiten Zeile Y.</td>
<td>Dritte Zelle in der zweiten Zeile Z.</td>
</tr>
</table>
Beispiel:
Erste Zelle in der ersten Zeile. A
Zweite Zelle in der ersten Zeile. B
Dritte Zelle in der ersten Zeile. C
Erste Zelle in der zweiten Zeile. X
Zweite Zelle in der zweiten Zeile. Y
Dritte Zelle in der zweiten Zeile. Z
Die Felder im Beispiel enthalten Text, aber der Inhalt ist beliebig, er kann auch aus Bildern oder sogar einer weiteren Tabelle bestehen.
Rahmen und Abstände in Tabellen
Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie im einleitenden <table>-Tag das Attribut border= notieren und ihm einen Wert größer 0 zuweisen. Der angegebene Wert ist dann die Breite des Rahmens in Pixeln. Um eine blinde Tabelle ohne sichtbaren Rahmen und Gitternetzlinien zu erzeugen, notieren Sie border="0".
cellspacing= legt den Abstand zwischen den einzelnen Tabellenfeldern in Pixel fest.
cellpadding= legt den Abstand zwischen Feldrand und Feldinhalt in Pixel fest.
Zellen in einer Zeile spaltenweise verbinden
Sie können mehrere Zellen innerhalb einer Zeile verbinden, so dass sich eine Spalte in dieser Zeile über mehrere Spalten hinweg erstreckt. Durch das Attribut colspan="3" (= column span = Spalten spannen) erreichen Sie, dass sich eine Zelle über drei Spalten hinweg erstreckt. Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Spalten besitzt wie angegeben.
Höhe und Breite von Tabellen
Die Breite kann mit einem absoluten Wert (<table width="200"> für 200 Pixel) oder als Prozentanteil des horizontal und seitlich verfügbaren Platzes (<table width="80%">) angegeben werden.
Bei der Höhe handelt es sich lediglich um einen Mindestwert. Die tatsächliche Höhe kann den angegebenen Wert überschreiten, wenn er zur Anzeige des Inhalts nicht ausreicht.
Auch <td> kann mit den Parametern width= und height= kombiniert werden.

Text ausrichten in Tabellen

align= richtet den Text horizontal aus und kann die Werte left, center und right erhalten.
valign= richtet den Text vertikal aus. Mögliche Werte sind top, middle und bottom.
Farbe in Tabellen
Wenn nichts anderes festgelegt wird, ist der Hintergrund einer Tabelle transparent, d. h., das Hintergrundbild oder die Hintergrundfarbe der Webseite ist sichtbar. Sie können aber auch eine Hintergrundfarbe für die Tabelle oder sogar für jedes einzelne Feld und die Ränder definieren.
Um die Hintergrundfarbe einer Tabelle oder eines Felds zu ändern, verwenden Sie das Attribut bgcolor= in Kombination mit den Tags <table> und <td>.
Farbe für die Ränder definieren Sie mit dem Attribut bordercolor= des Tags <table>.
Hier sehen Sie das Beispiel einer Tabelle mit einem blauen Hintergrund und rotem Rahmen, das mittlere Feld ist weiß:
<table border="2" bgcolor="#0000ff" bordercolor="#ff0000">
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>d</td><td bgcolor="#ffffff">e</td><td>f</td></tr>
<tr><td>g</td><td>h</td><td>i</td></tr>
</table>

Webseite illustrieren

Im Internet verwendete Bildformate
Man kann im Internet nicht unbedingt anzeigen, was man will. Wie für die Seitenerstellung sind auch für die Integration von Bildern bestimmte Regeln zu beachten. Als erstes müssen Sie wissen, dass im World Wide Web nur drei Bildformate unterstützt werden:

Das Format GIF (image.gif) ermöglicht die Erstellung von sehr kleinen Bildern, die jedoch nur max. 256 Farben enthalten können (Schaltflächen, Zeichnungen, grafische Texte usw.). Mit bestimmten Versionen dieses Formats können transparente Farben definiert und Animationen erstellt werden.

Das Format JPEG (image.jpg oder image.jpeg) wird für Farbfotos und sehr bunte Grafiken verwendet. Es gestattet 16,7 Millionen Farben in Bildern und kann optimal komprimiert werden.

Das Format PNG (image.png) ist das jüngste Format im Web und konkurriert mit dem GIF-Format. Es kann 256 bis mehrere Millionen Farben speichern, jedoch keine Animationen.
Welches Format Sie auswählen, bleibt Ihnen überlassen, aber Sie sollten den folgenden Rat befolgen: Achten Sie genau auf die Größe Ihrer Grafikdateien! Dazu müssen Sie nur die Größe Ihrer Dateien auf der Festplatte ablesen. Eine Navigationsschaltfläche sollte nicht mehr als 5 KB und ein relativ großes Foto nicht mehr als 30 KB umfassen. Wenn sie größer sind, besteht die Gefahr, dass die Besucher Ihrer Webseite sie nie sehen und – was schlimmer ist – dass sie Ihre Website kein zweites Mal besuchen.

Bilder in Webseiten integrieren

Unabhängig vom ausgewählten Format erfolgt die Integration eines grafischen Elements immer auf die gleiche Weise, der zugehörige HTML-Tag heißt <img>. Er wird mit dem Attribut src verwendet, dessen Wert die Datei definiert, die das zu integrierende Bild enthält: <img src="/mein_bild.jpg">
Es kann sich bei der Adresse des anzuzeigenden Bilds um eine absolute Adresse (im Format http://www.site.com/image.jpg) oder eine relative Adresse (im Format images/image.jpg) handeln.
Der Tag <img> hat zahlreiche Attribute, mit denen Sie die Anzeige von Bildern anpassen können. Hier eine Auswahl:
Attribut
Bedeutung
Attribut
Bedeutung
src=
Name der Bilddatei
alt=
Kommentar
width=
Bildbreite
height=
Bildhöhe
align=
Ausrichtung
border=
Rahmenstärke in Pixeln
hspace=
horizontaler Bildrand
vspace=
vertikaler Bildrand

Links einbinden

Links oder Hyperlinks (Verweise) sind ein zentrales Element beim Entwurf einer Website, da sie Besuchern gestatten, zwischen den einzelnen Seiten zu wechseln.
Wie jedes andere Seitenelement wird ein Link durch einen Tag definiert: <a>. Dieser Tag schließt den Text oder das Objekt ein, das den Link aktiviert. Er verwendet außerdem das Attribut href, dessen Wert das Ziel des Links angibt.
Links werden im Browser automatisch farbig und unterstrichen dargestellt.
Ein Link, der auf die Webseite unserer Schule in Kiel zeigt, würde wie folgt aussehen:
<a href="http://www.rbz-wirtschaft-kiel.de">RBZ-Wirtschaft</a>
Sie brauchen also nur die Zieladresse des Links in doppelten Anführungszeichen anzugeben. Diese Adresse kann auf verschiedene Arten geschrieben werden:

Wenn sich das Ziel des Links innerhalb Ihrer eigenen Website befindet, ist eine relative Adresse, in der der Name des Servers nicht angegeben wird, ausreichend: ordner/seite.html

Wenn sich das Ziel des Links außerhalb der Website befindet, verwenden Sie eine absolute Adresse wie http://www.andereseite.de/ordner/seite.html

Auch eine beliebige andere Datei oder ein Bild können als Ziel für den Link definiert werden. Sie müssen nur den richtigen Dateinamen im Attribut href angeben: <a href="/mein_bild.jpg">Das bin ich</a>

Sie können auf FTP-Dienste verweisen und diese runterladen: <a href="ftp://download.intel.com/software/">Dateien von Intel</a>

Außerdem können Sie auf E-Mail-Adressen verweisen: <a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">Name</a>
Überprüfen Sie die Dateinamen in Links immer zweimal, denn schon ein kleiner Tippfehler bewirkt die Anzeige einer Fehlermeldung – und das wird von Besuchern meistens schlecht aufgenommen.
Bilder/Grafiken als Links
Tags können kombiniert werden. Das bedeutet, dass Sie einen Link erstellen können, der auf einem Bild basiert. Das ergibt den folgenden Code:
<a href="/seite.html"><img src="/eisbaer.jpg" border="0"></a>
Wenn Sie border="0" weglassen, wird das Bild blau eingerahmt, um es als Link zu kennzeichnen.