Webseiten Quick'n easy
<a href="http://www.tagesschau.de/">
Zur Tagesschau
</a>
Dabei handelte es sich um einen fremden Rechner. Im Folgenden
wollen wir verschiedene Möglichkeiten kennen lernen auf andere
Seiten zu verweisen - besonders auf eigene Seiten!
Per Klick zur nächsten Webseite
Alle nun folgenden Beispiele werden in der Praxis immer noch in
a-Tags verpackt. Wir werden aber im Folgenden nur noch den Inhalt
des href betrachten.
<a href="HIER_ÄNDERT_SICH_ETWAS">Klick Me!</a>
Will man auf einen Fremden Webauftritt verweisen, so verwendet man
eine Schreibweise, in der man die komplette Webadresse angibt:
http://www.tagesschau.de/
also: <a href="http://www.tagesschau.de">Klick Me!</a>
http gibt man an, um dem Webbrowser zu sagen, daß man eine
Verbindung mit dem Protokoll HTTP (HyperText Transfer Protokoll)
wünscht. Dies ist die klassische Version auf Webseiten zuzugreifen.
Eine modernere Variante ist eine verschlüsselte Verbidung: https.
https://banking.postbank.de/
Danach kommt ein Doppelpunkt (:) und zwei Slashes (/). Der / wird im
deutschen Sprachgebrauch oft auch als Schrägstrich bezeichnet.
Danach kommt der Name des Zielrechners: www.tagesschau.de
Zuletzt finden wir wieder einen Slash (/). Der Besagt, daß wir das
sogenannte Root-Dokument des Webservers haben wollen. Dies
entspricht in der Regel der Startseite.
Viele moderne Webbrowser können auch eine verkürzte Eingabe der
Adresse abrufen. So machen sie fast alle aus der Angabe:
www.tagesschau.de ein http://www.tagesschau.de/
Sollten Sie bei der Angabe banking.postbank.de automatisch auf
https://banking.postbank.de/ landen, so hat dies der Webserver
gemacht. Er hat auf die Anfrage Ihres Browsers nach
http://www.postbank.de/ (korrekter: auf die Verbindung per HTTP an
den Server banking.postbank.de und dort Anfrage nach dem
Root-Dokument) Ihrem Webbrowser gesagt: 'Das gibt es hier nicht, gehe
zu https://banking.postbank.de/ da ist das jetzt.'
Diese Art der Adressierung nennt man absolut. Sie können sie
jederzeit im Adressfenster Ihres Webbrowsers ablesen.
Adressen, die im Adressfenster des Webbrowsers erscheinen und mit
http:// oder https:// beginnen, können Sie fast immer als Werte für
Ihr Attribut href nutzen.
Ausnahme bilden Adressen, die eine
SessionID eincodiert haben.
<a
href="http://www.w3.org/TR/html401/struct/links.html">Klick
Me!</a>
Für Ihre eigenen Dokumente, die alle auf dem gleichen Webserver
liegen, können Sie eine etwas flexiblere Art der Adressierung
verwenden: relative Adressierung zum aktuellen Dokument.
Bei der relativen Adressierng wird der Weg vom aktuellen Dokment
(und dessen Adresse aus Sicht ds Webbrowsers) zum nächsten Dokument
angegeben.
Liegt das Dokument, auf das verwiesen werden soll im gleichen
Verzeichnis wie das Dokument von dem der Verweis ausgeht, so gibt
man lediglich den Dateinamen an - der ist aus Sicht des Webbrowsers
dann das einzige, was sich an der Adresse aktuelles Dokument zu
neuem Dokument ändert.
Ändert sich auch der Pfad, so muß dies angegeben werden.
Unterverzeichnisse im aktuellen Verzeichnis werden einfach angegeben
mit:
unterverzeichnis/nocheinunterverzeichnis/dokument.html
Um ein Verzeichnis 'nach oben' zu kommen, verwendet man ../
Dokument im gleichen Verzeichnis
Unsere aktuelle Webseite heisst seite1.html. In dieser wollen wir
einen Verweis auf die Datei seite2.html machen, welche im gleichen
erzeichnis liegt wie seite1.html
<a href="seite2.html">nächste
Seite</a>
Dokument im Unterverzeichnis
Unsere aktuelle Webseite heisst seite1.html. In dieser wollen wir
einen Verweis auf die Datei news.html machen. Die Datei befindet
sich im Unterverzeichis 2004.
<a href="2004/news.html">nächste Seite</a>
Dokument ein Verzeichnis weiter oben
Unsere aktuelle Webseite heisst news.html. In dieser wollen wir
einen Verweis auf die Datei seite1.html machen. Die Datei befindet
sich in einem Verzeichnis weiter oben.
<a href="../seite1.html">nächste Seite</a>
Dokument etwas weiter entfernt.
Wir wollen von der Datei xxx.html aus auf die Datei seite1.html
verweisen.
<a href="../../allgemeines/seite1.html">nächste Seite</a>
Per Klick an eine Stelle im Dokument springen
Sicher ist es Ihnen schon untergekommen: man klickt auf einen
Verweis und landet mitten in einer Webseite. Auch der Verweis zum
Anfang einer Webseite gehört hier her.
Der Trick ist einfach: man kann innerhalb einer Webseite
sogenannte Sprungmarken setzen. Dafür benötigen wir ein neues
Attribut für unser Anchor-Tag:
<a name="hierher"> </a>
Damit das ganze klappt, müssen wir im Anchor auch angeben können,
wohin es gehen soll. Dies geschieht mit einem #:
Ist unser Ziel in der gleichen Seite, sieht die neue Adresse so
aus:
<a href="#hierher">Springe zur Marke</a>
Beim Sprung auf eine andere Webseite (in der sich eine
entsprechende Markierung befindet!):
<a href="seite1.html#hierher">Springe zur Marke hierher in seite1.html</a>
Das kleine Wörtchen 'hierher' in name="hierher" kann man gegen ein
beliebiges anderes Wort tauschen. Damit muss man auch das Wort
hinter dem # anpassen.
Der Webbrowser springt nur so weit, wie er Platz nach unten hat.
Hat er genug Platz, ist das (unsichtbare) Sprungziel ganz oben am
Anfang des angesprungenen Bildausschnittes.
Ist die Webseite eher zu Ende, springt der Webbrowser so weit wie
möglich nach unten, bis er mit seinem untersten Rand vom
Bildausschnitt das Ende der Webseite anzeigt.
Für alle die, die sich das noch nicht so ganz vorstellen können,
ein kurzes Beispiel:
Man beachte die Position des Scrollbalkens auf der rechten
Seite. Hieran sieht man ganz gut, daß im zweiten Bild die aktuelle
Position mitten auf der Seite ist.
<html><head><title>Sprung in der Seite</title></head>
<body>
<a name="oben"> </a>
<a href="#mittendrin">Sprung mitten rein</a>
<pre>
ganz
weit
unten
|
...
</pre>
<a name="mittendrin"> </a>
<a href="#oben">und wieder nach oben</a>
<pre>
Hier
gehts
noch
weiter
...
V
</pre>
<a href="#oben">und wieder nach oben</a>
</body></html>
Per Klick eine EMail versenden
Vielleicht haben Sie es auch schon erlebt: Sie klicken
auf einer Webseite auf einen Link und Sie bekommen postwendend Ihr
EMailprogramm geöffnet. Adresse und Betreff sind bereits
ausgefüllt. Sie müssen nur noch Ihren Text eingeben und auf
absenden klicken...
Es gehört zum guten Ton, daß man einem Besucher seiner Webseite
die Möglichkeit gibt, Kontakt mit dem Erstller der Seiten
aufzunehmen: zum Beispiel um Fehler zu melden.
Diese Aktion kann man erreichen, indem man einen Anchor (das a-Tag
wird auch Anchor genannt) anlegt und statt einer Webseite eine
EMailadresse angibt.
und so geht es:
<a href="mailto:ich@example.com">Mail me!</a>
Diese Form der Adresse nennt man eine URI. Hierbei gibt man das
Protokoll an und dann die Adresse. Im Internet wird allerdings
kaum eine der anderen Möglichkeiten verwendet.
Es reicht also,
wenn man sich diese eine Variante merkt. Ansonsten sollte man sich
lediglich merken, daß diese Art eine Aresse zu schreiben URI
heisst, daß es davon noch ein paar mehr gibt, diese aber in der
Praxis nur sehr selten in Webseiten verwendet werden.
Die Barriere Webserver Root
Auf einem echten Webserver gibt es ein Verzeichnis, welches als
Document Root bezeichnet wird. Dies ist das Startverzeichnis des
Webservers.
Alle Dateien, auf die per Anchor verwiesen wird, müssen in einem
Unterverzeichnis dieses Docment Roots liegen.
Welches Verzeichnis Document Root ist, hängt von der Konfiguration
des Webservers ab.
Bei der Verwendung eines Webservers haben wir noch eine weitere
Möglichkeit zu adressieren: absolut zur Server Root - also zur
Wurzel des Webservers. Mit der Wurzel ist das Verzeichnis
gemeint, welches das Document Root bildet.
Eine Adressierung absolut zur Wurzel des Servers beginnt (nach
eventueller Nennung des Servernamens) immer mit einem /.
Mit folgenden Beispielen ruft man das Startdokument eines Servers
auf:
< a href="/">Startseite</a>
< a href="http://www.ard.de/">Startseite von www.ard.de</a>
W3Consortium
Kurze Einführung in URI/URL (engl.)
Kontaktaufnahme
Es gehört zum guten Ton, daß man einem Besucher seiner Webseite
die Möglichkeit gibt, Kontakt mit dem Erstller der Seiten
aufzunehmen: zum Beispiel um Fehler zu melden.
Erweitern Sie Ihre Webseiten um eine Kontaktmöglichkeit!
Wir verwenden eine unserer Seiten aus dem vorigen Kapitel und
erweitern sie am Ende wie folgt:
<div align="right">©
<a href="mailto:info@nekosoft.de">NekoSoft</a> 2004
</div>
</body>
</html>
Linksammlung
Erstellen Sie eine Liste, in der, nach Kategorien getrennt,
verschiedene Links/Verweise gelistet sind. Hierbei sollte man am
Anfang der Seite anhand einer Übersicht die verschiedenen
Kategorien anspringen können.
Vorschläge für verschiedene Links:
Kategorie URL
TV www.ard.de
www.zdf.de
www.rtl.de
www.pro7.de
www.tagesschau.de
Zeitung www.suedeutsche.de
www.faz.de
www.taz.de
www.stern.de
www.fokus.de
Suchmaschinen www.google.de
www.altavista.de
www.yahoo.de
Nachrichten www.cnn.uk
www.wetter-online.de
Diverses www.macnews.de
www.ebay.de
www.postbank.de
www.deutsche-bank.de
www.reuschel.com
www.ricardo.de
www.guensTiger.de
Wer genau hinsieht, wird zwei bisher unerwähnte Tags finden.
<b> </b> Läßt en Inhalt Fett (bold) erscheinen
<hr> zeichnet eine Trennlinie quer über den Bilschirm.
<html><head><title>Linksammlung</title></head>
<body>
<a name="uebersicht"> </a>
<b>Übersicht</b>
<br><a href="#TV">TV</a>
<br><a href="#Zeitung">Zeitung</a>
<br><a href="#Suchmaschinen">Suchmaschinen</a>
<br><a href="#Nachrichten">Nachrichten</a>
<br><a href="#Diverses">Diverses</a>
<hr>
<a name="TV">
<b>TV</b></a>
<br><a href="www.ard.de">www.ard.de</a>
<br><a href="www.zdf.de">www.zdf.de</a>
...
<a name="Diverses">
<b>Diverses</b></a>
<br><a href="www.macnews.de">www.macnews.de</a>
...
<div align="right"><a href="#uebersicht">zurück zur
Übersicht</a></div>
</body></html>