Mit dem Layout sind wir beim letzten Mal fast fertig geworden. Lediglich die Feinanpassung für die Navigation fehlt noch. Dafür müssen wir zum einen Links in der Liste erstellen und zum anderen diese dann mit CSS formatieren bzw. gestalten.

Fangen wir erstmal mit den verschiedenen Formen von Hyperlinks an:

  • Textlinks (wie auch hier im Blog), sie bestehen aus anklickbarem Text,
  • Bildlinks, hier sind die Bilder anklickbar,
  • Imagemaps, welches Bilder sind, in denen bestimmte Bereiche davon anklickbar sind und
  • Ankerlinks; sie verweisen auf Punkte direkt im gleichen oder fremdem Dokument, springen z. B. direkt zu einem bestimmten Abschnitt

Die ersten beiden sind am häufigsten im Einsatz und werden in diesem Beitrag erklärt.


Ein Hyperlink wird immer mit dem <a>-tag eingeleitet und enthält den Link, welcher mit Klick darauf geöffnet werden soll. Danach folgt der sichtbare Text und das schliessende </a>:

<a href="http://www.google.de">anklickbarer Text</a>

So sieht das Ergebnis aus: anklickbarer Text

Wenn eine eigene Seite verlinkt werden soll, kann man auf das „http://www.domainname.de/“ verzichten und nur den Dateinamen schreiben wie z. B.:

<a href="index.html">Startseite</a>

Ordnerstrukturen werden übrigens mit Schrägstrichen dargestellt (about ist der Ordnername):

<a href="/about/index.html">über mich</a>

Auf Bilder kann man es exakt genauso anwenden; nur muss natürlich innerhalb des <a> ein Bild bzw. <img> liegen und kein Text:

<a href="http://www.google.de"><img src="bild.jpg" alt="bild" /></a>

Dies sind die Grundlagen für Hyperlinks; nun noch ein paar wichtige Feinheiten:

  • Links lassen sich in einem neuen Fenster öffnen
  • Links können wichtige Informationen für Suchmaschinen enthalten
  • Links können das E-Mail-Programm öffnen lassen

Links in einem neuen Fenster

Wenn dies geschehen soll (z. B. wenn man verhindern möchte, dass ein Link auf eine fremde Seite, die eigene Seite verschwinden lässt) fügt man noch eine „target“-Anweisung hinzu:

<a href="http://www.google.de" target="_blank">anklickbarer Text</a>

Aus Usability-Sicht gibt es hier einen Beitrag dazu.

Links mit Informationen für Suchmaschinen

Möchten Sie die Suchmaschine noch über den Inhalt der zu öffnenden Seite informieren, fügen Sie noch eine „title“-Anweisung hinzu. Diese wird übrigens auch angezeigt, wenn Sie kurz mit der Maus über dem Link verharren (wie die Quickinfo in Programmen):

<a href="http://www.google.de" target="_blank" title="Google bzw. Text für SEO">anklickbarer Text</a>

Links, die das Mailprogramm öffnen lassen

Bisher waren die Links nur für das Öffnen von Webseiten verantwortlich, nun soll darüber eine Mail verschickt werden. Schreiben Sie  mailto: und fügen danach die Mailadresse ein:

<a href="mailto:meinName@meineDomain.de">E-Mail verschicken</a>

Target und title sind in diesem Fall unnötig.
Vorsicht: Wenn Sie die Mail-Adresse so veröffentlichen, dann werden Mail-Robots diese finden und Sie in Zukunft mit Spam belästigen. Verschlüsseln Sie Ihre Adresse lieber mit JavaScript zum Beispiel auf folgender Webseite:

http://www.skoom.de/service/email-verschluesseln.xtc

 

Dort tragen Sie die Mail-Adresse ein und kopieren den gesamten Text aus der Auswahlbox und fügen Ihn in Ihren Code wieder ein:

<script language='JavaScript' type='text/javascript'> 
var pref = '&#109;a' + 'i&#108;' + '&#116;o'; 
var attribut = 'hr' + 'ef' + '='; var first = '%6D%65%69%6E%4E%61%6D%65'; var at = '%40'; var last = '&#x6D;&#x65;&#x69;&#x6E;&#x65;&#x44;&#x6F;&#x6D;&#x61;&#x69;&#x6E;&#x2E;&#x64;&#x65;'; 
var first2 = '&#x6D;&#x65;&#x69;&#x6E;&#x4E;&#x61;&#x6D;&#x65;'; var at2 = '&#x40;'; var last2 = '&#109;&#101;&#105;&#110;&#101;&#68;&#111;&#109;&#97;&#105;&#110;&#46;&#100;&#101;'; 
document.write( '<a ' + attribut + '\'' + pref + ':' + first + at + last + '\'>' ); 
document.write( first2 + at2 + last2 ); document.write( '<\/a>' ); </script> <noscript> 
<span style='display:none; '>are-</span><span style='display:inline; '>&#x6D;&#x65;&#x69;&#x6E;&#x4E;&#x61;&#x6D;&#x65;</span><span style='display:none; '>-xya34</span><span style='display:inline; '>[at]</span><span style='display:none; '>ddks-</span><span style='display:inline; '>&#109;&#101;&#105;&#110;&#101;&#68;&#111;&#109;&#97;&#105;&#110;&#46;&#100;&#101;</span> </noscript>

Das Ergebnis:

Damit haben wir nun die wichtigsten Links kennen gelernt und fügen mal beispielhaft Textlinks und einen E-Mail-Link in unsere Übung ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC; color:#011C26; background-image: URL(496.png)}
#container {border:1px solid black; width:800px; margin:auto; box-shadow:8px 8px 8px #000000;}
#logo {padding:25px 0 25px 10px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px 5px 5px 170px; height:350px;background-color:#D9CEAD;}
h1 {font-size:18px;}
p {font-size:12px;}
ul {list-style-type:none;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> 
<ul>
    <li><a href="datei1.html">Punkt 1 </a></li>
    <li><a href="datei2.html">Punkt 2 </a></li>
    <li><a href="datei3.html">Punkt 3 </a></li>
    <li><a href="mailto:meinName@meineDomain.de">Mail an mich </a></li>
</ul>
</div>
<div id="inhalt"> 
<h1>Willkommen im feinen Yoga-Studio!</h1>
<p>Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
</p>    
</div>
</div>
</body>
</html>

Live sieht es dann so aus:

Hyperlinks in der Liste

Hyperlinks in der Liste

Diese Links führen natürlich ins Leere und produzieren eine Fehlermeldung; da wir aber noch keine fertigen anderen Seiten haben behelfen wir uns mit dem Rauten-Symbol – dem sogenannten „blinden Hyperlink“. Er führt nirgends hin, wird aber wie ein Link formatiert. Für Testzwecke gut geeignet:

 <li><a href="#">Punkt 1 </a></li>
 <li><a href="#">Punkt 2 </a></li>
 <li><a href="#>Punkt 3 </a></li>
 <li><a href="mailto:meinName@meineDomain.de">Mail an mich </a></li>

Hyperlinks mit CSS formatieren

Nun zum grafischen Teil: Wir legen mit CSS fest wie der <a>-tag formatiert werden soll. Nämlich ohne Unterstrich, in der Farbe #BF2633 (wie in Abschnitt 12 der Artikelreihe festgelegt) und in der Stärke bold (zu den Schriftfamilien kommen wir im nächsten Kapitel). Hier noch mal alle Stile inklusive der neuen Anweisungen für <a>:

body {
    background-color:#CCCCCC; 
    color:#011C26; 
    background-image: URL(496.png)}
#container {
    border:1px solid black; 
    width:800px; 
    margin:auto; 
    box-shadow:8px 8px 8px #000000;}
#logo {
    padding:25px 0 25px 10px;
    background-color:#A6242F;}
#navigation {
    padding:5px; 
    width:150px;
    height:350px;
    float:left;
    background-color:#C0B18F;}
#inhalt {
    padding:5px 5px 5px 170px; 
    height:350px;
    background-color:#D9CEAD;}
h1 {
    font-size:18px;}
p {
    font-size:12px;}
ul {
    list-style-type:none;}
a {
    text-decoration:none; 
    color:#BF2633; 
    font-weight:bold;}

Diesmal sind die Anweisungen nicht mehr hintereinander, sondern untereinander. Das ist übersichtlicher und hatte keine Auswirkung auf die Funktionalität.

Hier nun das Ergebnis:

Hyperlink mit CSS formatiert

Hyperlinks mit CSS formatiert

In Teil 16 von „wie erstelle ich eine Homepage“ werden wir die Schriftfamilie genauer unter die Lupe nehmen. Wir hatten zwar schon im Teil 6 etwas darüber gelernt, aber noch nicht praktisch eingesetzt.