| Internetname |
Reservieren Sie Ihren eigenen
Internetnamen. Meiner jüngsten
Tochter gehört zum Beispiel der
Name lea-becker.de.
Der eigene Internetname kann ein schönes Geschenk von
bleibendem Wert für die Kinder und
Enkelkinder sein.
|
| Referenzen |
Besuchen Sie Seiten unserer
Internetkunden.
|
| Auszeichnungen |
Klappern gehört zum Handwerk.
|
| Impressum |
Hier finden Sie unsere Kontaktdaten sowie etwas zum Lesen für die Juristen.
|
|
|
 |
HTML - Schritt für Schritt |
|
| |
Eine der entscheidenden Stärken von HTML ist die Möglichkeit der Verknüpfung von
HTML-Seiten mit anderen HTML-Seiten. Sie klicken auf ein farblich markiertes und
meistens unterstrichenes Wort - und schon wird die mit diesem Wort verknüpfte Seite
angezeigt.
In dieser Folge geht es um das Einfügen solcher Verknüpfungen in eigene HTML-Seiten.
Auch wenn Sie nicht vorhaben Seiten in aller Welt in Ihren Internetauftritt
einzubinden benötigen Sie Verknüpfungen. Oder wie soll der Besucher Ihrer Seiten
von der Hauptseite aus auf Ihre anderen Seiten verzweigen können?
|
|
|
Einfügen von Verknüpfungen (Links) |
|
| |
In den Beispielen wird gezeigt, wie Sie mit Hilfe von Verknüpfungen ein
Menüsystem realisieren können. Gezeigt werden auch die verschiedenen
Optionen des Seitenaufrufs.
|
|
|
Die Standardform eines Links |
|
| |
Die Standardform eines Links sieht so aus:
Zum Inhaltsverzeichnis - blau, bevor der Link benutzt wurde
Zum Inhaltsverzeichnis - rot, während der Link benutzt wird
Zum Inhaltsverzeichnis - violett, nachdem der Link benutzt wurde
Wenn keine besonderen Textattribute gesetzt werden, sieht der Besucher Ihrer Seite unterstrichenen
Text in blauer Farbe. Wenn Sie auf den Link klicken, wird das Inhaltsverzeichnis angezeigt. Im gezeigten Beispiel
wird nicht wirklich zum Inhaltsverzeichnis verzweigt - Sie wollen ja noch weiterlesen.
In HTML wird der Link so codiert:
<a href="index.htm">Zum Inhaltsverzeichnis</a>
Mit diesen Informationen können Sie bereits eine Einstiegsseite schreiben, von der aus auf
verschiedene andere Seiten verzweigt wird (auch hier sind die Links nicht hinterlegt):
Mein Haus
Mein Auto
Meine Yacht
Mein Swimmingpool
So sieht das in HTML aus:
<a href="haus.htm">Mein Haus</a><br>
<a href="auto.htm">Mein Auto</a><br>
<a href="yacht.htm">Meine Yacht</a><br>
<a href="swimmingpool.htm">Mein Swimmingpool</a>
Diese Linkliste kann natürlich optisch hervorgehoben und vom übrigen Text abgesetzt werden.
Beispielsweise indem die Links als ungeordnete Liste ausgezeichnet werden:
So sieht das in HTML aus:
<ul>
<li><a href="haus.htm">Mein Haus</a>
<li><a href="auto.htm">Mein Auto</a>
<li><a href="yacht.htm">Meine Yacht</a>
<li><a href="swimmingpool.htm">Mein Swimmingpool</a>
</ul>
|
|
|
Achtung: Fehlerfalle bei Dateinamen |
|
| |
Die am häufigsten an mich gerichtete Frage lautet:
Frage:
Ich habe eine Linkliste angelegt und es funktioniert auch alles ganz wunderbar, solange ich die Links
auf meiner Festplatte teste. Wenn ich dann die Seiten auf meinen Internetserver kopiert habe funktioniert
gar nichts mehr. Der Server gibt immer eine Fehlermeldung aus und behauptet, die Seiten sind nicht vorhanden.
Dabei sind sie ganz bestimmt da!
Antwort:
Windows unterscheidet bei Dateinamen nicht zwischen Groß- und Kleinschreibung. Die meisten Server im
Internet sind jedoch UNIX-Maschinen. Für UNIX sind index.htm und INdex.Htm und INDEX.HTM drei
unterschiedliche Dateien. Sie haben wahrscheinlich bei den Dateibezeichnungen nicht auf die
Schreibweise geachtet. Benutzen Sie immer Kleinbuchstaben. Dann kommen Sie nicht durcheinander.
|
|
| | | |
|
Relative und absolute Pfadangaben |
|
| |
Der vollständige Name dieser Seite im Internet lautet
http://www.htmlmaster.de/html-kurs/06html.htm
Wenn Sie von Ihrer Seite aus einen Link auf diese Seite legen, dann müssen Sie diese Adresse
vollständig angeben. Dieser absolute Link sieht dann so aus:
<a href="http://www.htmlmaster.de/html-kurs/06html.htm">So wird gelinkt</a>
Absolute Links enthalten vollständige Pfadangaben einschließlich des Domainnamens. Absolute Links
werden hauptsächlich von Leuten benutzt, die keine eigenen Inhalte sondern Listen mit Überschriften
wie "HOT HOT *** Die coolsten Seiten im Web *** HOT HOT" ins Internet stellen.
Wenn Sie Ihre eigenen Seiten verknüpfen, dann benutzen Sie besser relative Links. Der relative Link
enthält keine vollständige Adresse. Enthalten sind nur die Angaben, welche von der aufrufenden
Datei mindestens benötigt werden, damit die andere Datei eindeutig gefunden wird. Im Beispiel soll
die Datei index.htm die Datei start.htm aufrufen.
http://www.htmlmaster.de/index.htm
http://www.htmlmaster.de/start.htm
Beide Dateien liegen am gleichen Ort. Für eine eindeutige Adressierung wird lediglich der
Dateiname benötigt. Pfadangaben sind hier überflüssig.
<a href="start.htm">Los gehts!</a>
Solange beide Dateien im gleichen Verzeichnis liegen, findet index.htm die Datei start.htm. Auch wenn
sie sich auf Ihrer lokalen Festplatte befinden.
C:\hmaster\html\index.htm
C:\hmaster\html\start.htm
Mit der relativen Adressierung <a href="start.htm">Los gehts!</a>
können Sie die Links bereits testen, bevor die Seiten im Internet stehen. Sie können Ihre Seiten sogar
auf eine CD brennen und weitergeben. Die Links funktionieren!
|
|
|
Komplexere relative Pfadangaben |
|
| |
Solange alle Seiten in einem gemeinsamen Verzeichnis stehen sind Links mit relativer Adressierung
problemlos. Sie geben lediglich den Dateinamen an. Bei kleinen Sites reicht das auch aus. Größere
Sites werden Sie strukturieren. Sie werden bereits während der Entwicklung auf Ihrer lokalen
Festplatte eine Verzeichnisstruktur anlegen. Im Internet selbst werden Sie die Dateien dann später
mit identischer Verzeichnistruktur ablegen. Die Angabe des Dateinamens reicht dann nicht mehr aus.
http://www.htmlmaster.de/index.htm
http://www.htmlmaster.de/html-kurs/06html.htm
Wenn die Datei index.htm die Datei 06html.htm aufrufen soll, dann geben Sie einfach den relativen Pfad
zusätzlich zum Dateinamen an. Das sieht dann so aus:
<a href="html-kurs/06html.htm">HTML Schritt 6</a>
Im Beispiel wurde eine Datei verknüpft, die eine Verzeichnisebene tiefer liegt. Genau diese
Verzeichnisnamen wurden in die Adressierung aufgenommen. Auch nicht so schwer. Aber wie sieht es aus, wenn
ein Rücksprung realisiert werden soll? Nun wenn Sie es wissen, ist es ebenfalls ganz einfach. Die
Zeichenfolge für den Rücksprung um eine Verzeichnisebene lautet ../.
Von der Datei 06html.htm aus soll ein Link zur index.htm führen.
http://www.htmlmaster.de/html-kurs/06html.htm
http://www.htmlmaster.de/index.htm
Es soll um eine Verzeichnisebene zurückgesprungen werden. In HTML sieht das dann so aus:
<a href="../index.htm">Inhaltsverzeichnis</a>
Nun fehlt nur noch ein Beispiel dass zeigt, wie eine Datei in einem ganz anderen Verzeichnispfad aufgerufen
wird.
C:\hmaster\tests\komplex\neu\index.htm
C:\hmaster\tests\fullscreen\beispiel.htm
Die Datei index.htm soll die Datei beispiel.htm aufrufen. Der Weg dorthin führt zunächst zwei
Verzeichnisebenen zurück und dann vorwärts in das Verzeichnis fullscreen.
<a href="../../fullscreen/beispiel.htm">Fullscreen Beispiel</a>
Als Beispiel wurde bewußt die Verzeichnisstruktur einer lokalen Festplatte gewählt. Verzeichnisse
werden unter DOS und Windows durch das Backslash genannte Zeichen \ voneinander getrennt. HTML erwartet
immer Slash / (auf der Tastatur über der 7). Auch dann, wenn Sie lokal arbeiten!
|
|
|
Linkattribute |
|
| |
Ein Link kann mit einem Titel versehen werden. Wenn der Mauszeiger über dem Link steht, wird dieser Titel
dann nach kurzer Verzögerung in einem kleinen, hellgelben Fenster angezeicht. Allerdings nicht von
allen Browsern.
HTML Kurs, 6. Teil
In HTML sieht das dann so aus:
<a href="02html.htm" title="Verknüpfungen (Links)">
HTML Kurs, 6. Teil
</a>
Standardmäßig wird die neue Seite im Browserfenster der aufrufenden Seite angezeigt. Die neue
Seite ersetzt also die aufrufende Seite. Es kann jedoch gewünscht werden, dass die neue Seite in
einem eigenen Browserfenster erscheint. Die wird durch das Attribut target="_blank" erreicht.
Diese Seite in einem zweiten Fenster öffnen
In HTML sieht das dann so aus:
<a href="06html.htm" target="_blank">Diese Seite in einem zweiten Fenster öffnen</a>
|
|
|
|
