Links und einfache Menübeispiele

Mit Links kann man durch Mausklick auf andere Seiten springen oder an eine markierte Stelle einer großen Seite. Der Befehl lautet <a href = "Dateiname.html"> Beschreibung < /a>. Je nach Style wird die Beschreibung farbig geschrieben und unterstrichen. Der Mauszeiger verwandelt sich über der Beschreibung in eine Zeigehand. Mit einem einfachen Klick wirst du zur gewünschten Datei "verlinkt": Die Datei wird im aktuellen Fenster geöffnet. Anstelle der Beschreibung kann auch ein Bild (img) stehen. Klickt man dann auf das Bild, wird zur HTML-Datei verlinkt. Trägst du als Dateiname eine andere, z.B. eine .doc- oder .exe-Datei ein, versucht der Browser, diese Datei auf deinen Rechner herunterzuladen (Download). Du kannst auch eine beliebige URL (Internetseite) eintragen, aber bitte nicht http:// vergessen!
Mehr Informationen zu Links und Ankern kannst du in folgener PDF-Datei lesen: Infoblatt: Links.pdf

Die Knöpfe am oberen Rand dieser Seite sind Bilder, die ich im Grafikprogramm gezeichnet und beschriftet habe. Der Quelltext des ersten Knopfes lautet:

<a href="programme.html"><img alt="Freeware-Programme" src="freeware.gif" height="56" width="158" style="border: none;" /></a>

Mit style="border: none;" verhindere ich, dass ein bunter Link-Rahmen um die Knöpfe erscheint.

Nun folgen Beispiele von Menüs. Unter die Menüs habe ich den Quelltext des ersten Links gedruckt.

Freeware-Programme    Grundlegende XHTML-Befehle    Listen-Befehle    Tabellen    Links und Menüs    Meine eigene Homepage

<p style="font-size: 10pt;">
<a href = "programme.html" >Freeware-Programme</a>

Die Farben der Links werden in der CSS-Datei festgelegt:
A:Link {color: #191970;}
A:Hover {color: red;}
A:Visited {color: #606090;}

Freeware-Programme    Grundlegende XHTML-Befehle    Listen-Befehle    Tabellen    Links und Menüs    Meine eigene Homepage

<p style="font-size: 10pt; background-color: #ccccff;">
<a href="programme.html">Freeware-Programme</a>

Freeware-Programme Grundlegende XHTML-Befehle Listen-Befehle Tabellen Links und Menüs Meine eigene Homepage

<a href="programme.html"><span>Freeware-Programme</span></a>

Er sieht wie ein Knopf aus, ist aber keiner: Die Link-Beschreibung wird goldgelb hinterlegt. Dann kommt ein Rahmen um den Hintergrund, der oben und links heller gefärbt wird als unten und rechts. Dieser Stil für <span> wird in der CSS-Datei festgelegt:

span {
padding: 5px;
background-color: #FFED86;
border-left: 2px solid #FFF6C3;
border-top: 2px solid #FFF6C3;
border-bottom: 2px solid #C8AA00;
border-right: 2px solid #C8AA00;
}

Die folgenden Menüs sind im Tabellenformat

<table width="100%" cellspacing="5px">
<tr>
<td> <a href="programme.html">Freeware-Programme</a> </td>

Hier handelt es sich um eine einfache Tabelle. Der Befehl: width="100%" sorgt dafür dass die Tabellenzeile über die ganze Seitenbreite geht. cellspacing schafft einen Abstand zwischen den Zellen.

Das Design dieses kleinen Menüs wird von der CSS-Datei festgelegt:

td {
text-align: left;
vertical-align: top;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-top: 5px;
background-color: #EEEEF9;
border-top: 2px solid #888888;
border-left: 2px solid #888888;
border-right: 2px solid #F7F7F7;
border-bottom: 2px solid #F7F7F7;
}

<table width="100%" cellspacing="5px">
<tr>
<td style="background-color: #D3D3D3; border: 2px; border-top: solid #E6E6E6; border-left: solid #E6E6E6; border-right: solid Gray; text-align: center; font-size: 10pt; border-bottom: solid Gray;"> <a href="programme.html">Freeware-Programme</a> </td>

In jeder Zelle wird der Style festgelegt: grauer Hintergrund mit hellem Rand oben und links und dunklem Rand unten und rechts.

<table width="100%" cellspacing="0px">
<tr>
<td style="border-top: solid gray 2px; background-color: transparent; border-left: solid gray 2px; border-right: solid gray 1px; border-bottom: transparent; text-align: center; font-size: 10pt;"> <a href="programme.html">Freeware-Programme</a> </td>

Die Zellen sehen aus wie Karteireiter. Die Zelle, die der aktuellen Seite entspricht, bekommt am unteren Rand keinen Rahmen (border-bottom: transparent). Alle übrigen Zellen haben einen unteren dünnen Rand: border-bottom: solid gray 1px;

Um die Wirkung der einzelnen Menüs zu vergleichen, verkleinere und vergrößere bitte das Fenster in seiner Breite!

Hier noch einmal alle Menüs in der übersicht:

Freeware-Programme    Grundlegende XHTML-Befehle    Listen-Befehle    Tabellen    Links und Menüs    Meine eigene Homepage

Freeware-Programme    Grundlegende XHTML-Befehle    Listen-Befehle    Tabellen    Links und Menüs    Meine eigene Homepage

Freeware-Programme Grundlegende XHTML-Befehle Listen-Befehle Tabellen Links und Menüs Meine eigene Homepage