HTML bis PHP - Links und Anker

Links (Verweise) in HTML

Ein wichtiges Bestandteil des World Wide Web sind die Verweise. Diese ermöglichen den Aufruf anderer Webseiten, sowie das Aufrufen anderer Seiten im eigenen Projekt. Für interne und externe Links wird folgender Befehl benutzt:

<a href="...">Beschreibung</a>

(a = anchor = Anker) (href = hyper reference = Hyper(text)-Referenz).

Interne und externe Links

Um Beispielsweise eine andere Seite im eigenen Projekt aufzurufen, die den Name html2.htm hat, benutze Sie den Befehl:

<a href="index.html">Andere Seite</a>

Dieses währe ein interner Link. Externen Link können mit folgendem Befehl definieren:

<a href="http://www.html-php.de/">Andere Seite</a>

Fenster für Verweise definieren

Normalerweise werden die aufgerufenen Seiten im gleichen Fenster angezeigt. Mit den Attribut target="..." kann man das Zielfenster für den Verweis festlegen. Auch wenn das Attribut nicht als deprecat eingestellt, darf es nur in der HTML-Variante transitional oder in frameset benutzt werden.

<a href="http://www.html-php.de" target="_blank">Andere Seite</a>

Folgene möglichkeiten stehen zur Verfügung:
_self = Verweis wird im gleichen Fenster geöffnet (Standard)
_blank = öffnet ein neues Fenster
_top = Löscht alle vorhandenes Frameset
_parent = Löscht bei verschachtelten Framesets das aktuelle Frameset

Grafik für Verweise definieren

Wollen Sie statt ein Link-Text mal eine Grafik, z.B. ein Banner, verlinken, so geben Sie die Grafik mit an:

  <a href="http://www.html-php.de">
  <img scr="./ordner/Dateiname des Bildes" alt="Bild">Andere Seite</a>

Sprungmarken

Mit Sprungmarken kann man innerhalb einer Seite Ziele definieren, die angezeigt werden sollen. Sprungmarken werden durch eine # gekennzeichnet.

<a href="#xyz"> Sprung nach xyz</a>

Auch möglich ist eine Datei oder Internetadresse mit Sprungziel, wie z.B.:

<a href="http://www.adresse.de/datei.html#xyz"> Sprung nach xyz</a>

Sprungziele werden mit id=Name definiert. Dieses können beliebige Elemente sein:

<h1 id="xyz">Irgendwas</h1>

dabei darf "Irgendwas" nicht leer bleiben.

Link-Farben

Die Farben für Anker (Verweise, Sprundmarken) werden mit folgenden Stylesheet definiert:

  a:link { color:#0000FF; }
  a:visited { color:#FF0000; }
  a:hover { color:#FFFF00; background-color: #0000FF; }
  a:active { color: #000000; }

`a:link`	Farbe für Anker
`a:visited`	Farbe für Anker, die schon besucht wurden
`a:hover`	Farbe für Anker, die gerade von der Maus berühert wird
`a:active`	Farbe für ein Anker, der gerade aktiviert ist

Textformatierung für Verweise

Nicht nur die Farbe, sondern auch die Textformatierung kann definiert werden:

  a:link { 
   text-decoration:underline; font-weight:bold; color:#0000FF; 
   }
  a:visited {
   text-decoration:underline; font-weight:bold; color:#FF0000;
   }
  a:hover { 
   text-decoration:none; font-weight:bold; background-color:#FFFF00; 
   }
  a:active { 
   text-decoration:none; font-weight:bold; background-color:#FFFFC0; 
   }

Im obengenannten Beispiel wird link und visited unterstrichen, hover und active nicht unterstrichen, sowie der Text fett dargestellt. Weitere Textformationen können Sie unter Text formatieren nachlesen.

CSS-Navigationsleisten

Mit Hilfe von ul-Listen können sie einfach Navigationslisten erstellen:

  <!DOCTYPE HTML">
  <html lang="de">
  <head>
   <title>Layout 1</title>
   <style type="text/css">
    ul#Menue { 
      margin:6px; padding:2px; 
    }
    ul#Menue li {
      list-style:none;
    }
    ul#Menue a {
      color:#0000FF; background-color:#FFFFFF;
    }
    ul#Menue a:hover {
      color:#FFFFFF; background-color:#0000FF;
    }
   </style>
  </head>
  <body>
   <ul id="Menue">
    <li><a href="navi1.htm">Navigation 1</a></li>
    <li><a href="navi2.htm">Navigation 2</a></li>
    <li><a href="navi3.htm">Navigation 3</a></li>
   </ul>
  </body>
  </html>

Das ganze sieht so aus

Vertikale CSS-Navigationsleisten

Im folgenden Beispiel wurde nun Farbe und Rahmen ins Spiel gebracht. Zusätzlich wurde noch der Stylesheet display:block und Korrekturen für den InternetExplorer hinzugefügt:

  <!DOCTYPE HTML">
  <html lang="de">
  <head>
   <title>Layout 1</title>
   <style type="text/css">
    ul#Menue { 
      width:130px; margin:6px; padding:2px; 
      border:1px solid #000000; background-color:#FFFFC0;
    }
    * html ul#Menue {   /* Nur fuer IE */
      width: 146px;
      w\idth: 130px;
      padding-left: 0;
      padd\ing-left: 2px;
    }
    ul#Menue li {
      list-style:none; margin:6px; padding:2px;
    }
    ul#Menue a {
      display:block; padding:2px; text-decoration:none; 
      border:1px solid #000000; border-left-color:#FFFFFF; 
      border-top-color:#FFFFFF; color:#000000; background-color:#C0C0C0;
    }
    * html ul#Menue a {  /* Nur fuer IE */
      width: 100%;
      w\idth: 110px;
    }
    ul#Menue a:hover {
      border-color:#FFFFFF; border-left-color:#000000; border-top-color:#000000;
      color:#FFFFFF; background-color:#808080;
    }
   </style>
  </head>
  <body>
   <ul id="Menue">
    <li><a href="seite1.htm">Navigation 1</a></li>
    <li><a href="seite2.htm">Navigation 2</a></li>
    <li><a href="seite3.htm">Navigation 3</a></li>
   </ul>
  </body>
  </html>

Das ganze sieht so aus

Horizontale CSS-Navigationsleisten

Sie können die Navigationsleiste auch horizontal anlegen. Hierzu entferne zunächst die Breitenangaben, und füge den Stylesheet display:inline hinzu.

  <!DOCTYPE HTML">
  <html lang="de">
  <head>
   <title>Layout 1</title>
   <style type="text/css">
    ul#Menue { 
      margin:4px; padding:4px; 
      border:1px solid #000000; background-color:#FFFFC0;
    }
    ul#Menue li {
      list-style:none; margin:6px; padding:2px;
      display:inline;
    }
    ul#Menue a {
      padding:2px; text-decoration:none; 
      border:1px solid #000000; border-left-color:#FFFFFF; 
      border-top-color:#FFFFFF; color:#000000; background-color:#C0C0C0;
    }
    * html ul#Menue a {  /* Nur fuer IE */
      width: 1em;
      w\idth: auto;
    }
    ul#Menue a:hover {
      border-color:#FFFFFF; border-left-color:#000000; border-top-color:#000000;
      color:#FFFFFF; background-color:#808080;
    }
   </style>
  </head>
  <body>
   <ul id="Menue">
    <li><a href="seite1.htm">Navigation 1</a></li>
    <li><a href="seite2.htm">Navigation 2</a></li>
    <li><a href="seite3.htm">Navigation 3</a></li>
   </ul>
  </body>
  </html>

Das ganze sieht so aus

Beispiel

Zum Schluss noch ein Beispiel:

  <html>
   <head>
    <title>Beispiel zu Links</title>
    <style type="text/css">
     * { 
       font-family: Arial, Helvetica, sans-serif;
       font-Size: 16px;
     }
     h1 {
       font-Size: 20px; 
       color: #000000; 
     }    
     p { color: #000000;}
     a:link { color:#0000FF; }
     a:visited { color:#FF0000; }
     a:hover { 
       color:#FFFF00; 
       background-color:#0000FF;
     }
     a:active { color:#000000; }
   </style>
  </head>
  <boby>
   <h1 id="marke1">Diverse Links</h1>
   <p>Zur <a href="../index.html">Startseite</a> dieses HTML-Kurses<br>
   Kostenlose Domains gibt es bei 
    <a href="http://www.nic.de.vu/" target="_blank">nic.de.vu</a><br>
   Kostenloser Webspace gibt es bei 
    <a href="http://www.bplaced.net/" target="_blank">bplaced.net</a><br>
   <br>
   <a href="../anker.html#beispiel">Zurück zum Kursus</a><br>
   <br>
   <a href="#marke2">Sprung nach unten</a><br>
   <hr><hr>...<hr><hr>
   <h1 id="marke2">Seitenende</h1>
   <a href="#marke1">Sprung nach oben</a><br>
   <br>
   <a href="../anker.html#beispiel">Zurück zum Kursus</a><br>
  </body>
  </html>

Das ganze sieht dann so aus