HTMLing.net - HTML, CSS, PHP, Flash ...

HTMLing
HTML
Webseiten-Erstellung

Vorbereiten einer Seite
Euer erstes HTML Dokument
Spielereien mit Schrift
Etwas Farbe in deiner Seite
Bilder in eurer Seite
Tabellen
Mehrere Seiten
Frames
CSS
Die Seite geht online
Formulare
Rechtliches
Tools
Danke
Und sonst so?
CSS
Formatvorlagen
PHP
Interaktion mit dem Nutzer
MySQL™
Datenbankanbindung
Flash
Aktivität und Spielerei
 

[ Profil ]   [ Bücher ]   [ Kontakt ]   [ Download ]   [ Links ]   [ Reaktionen ]

Mehrere Seiten (Links)

Nun sind wir beide aber schon ganz schön weit gekommen. Ihr könnt schon richtig viele Dinge auf einer HTML-Seite basteln, egal ob es nun Farben, Bilder, Texte und sogar Tabellen sind. Ich muss euch ganz ehrlich gratulieren, dass ihr sooo lange durchgehalten habt.


Nun mag ich euch aber auch noch etwas anderes verraten. Auf Internetseiten habt ihr ja meistens mehr als eine Seite. So habt ihr euch ja auch hier zwischen allen Dateien hindurch bewegt und immer wenn ihr eure Maus über ein Kapitel gelegt habt verwandelte sie sich in eine Hand. Dieses nennt man dann Link. Immer wenn sich euer Mauszeiger in eine Hand verwandelt, könnt ihr euch nämlich auf eine andere Seite durchklicken.

So könnt ihr zu jedem Thema, das ihr auf eurer Seite beschreiben möchtet eine eigene Seite machen.

Dieses ist noch nicht einmal so schwierig, denn um einen Link zu setzen braucht ihr mir nur zu sagen, welche Datei ich als nächstes öffnen soll.

Dieses machst ihr am geschicktesten mit

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

Hier könnt ihr auf ganz unterschiedliche Dateien auf eurer Seite verweisen. Aber ihr könnt auch auf Seiten verweisen, die irgendwo anders liegen. Beispielsweise auf eine von euch gerne besuchte Internetseite. Dabei solltest ihr jedoch eine andere Schreibweise verwenden. Mit

<a href="http://internetadresse" target="_blank">Beschreibung</a>

wird die von euch gelinkte Seite in einem Extra-Fenster geöffnet. So können eure Besucher auch immer wieder zu eurer Seite zurückkehren, indem sie die fremde Seite einfach schließen.

Warte, ich zeige es euch mal mit der Seite kaffee.htm. Ich möchte also einen Verweis auf die Datei kaffee.htm machen. Nunja, ihr habt ja schon bei eurem ersten HTML-Dokument gehört, dass man die Dateinamen klein schreiben sollte, hier seht ihr jetzt auch den Vorteil. Man muss den Dateinamen ganz genau bei den Links angeben, ansonsten kommt es zu einer Fehlermeldung. Aber jetzt mache ich mich an das Beispiel. Der Befehl zum Link nach kaffee.htm würde wie folgt aussehen:

<a href="kaffee.htm">Eine Tasse Kaffee?</a>

Dieser Link schaut dann so aus: Eine Tasse Kaffee?

Wie setzt man aber nun Links auf Internetseiten? Nunja mal sehen, mich findest ihr unter http://www.unki.de/htmling/ hierbei braucht ihr die index.htm gar nicht anzugeben, da diese automatisch geladen wird.
Der Befehl zum Link zu mir würde von daher wie folgt aussehen.

<a href="http://www.htmling.net/" target="_blank">Besuch doch mal den HTMLing</a>

Wenn ihr dann auf Besuch doch mal den HTMLing geht wird ein neues Fenster geöffnet und wenn ihr dieses dann schließt landet ihr wieder hier. :o) Probiert es doch einfach mal aus.

Neben den Links zu anderen Dokumenten kann man aber auch innerhalb von Texten Links setzen. Mmmh dieses ist etwas schwieriger. Aber ich versuche es mal zu erklären. ihr könnt Stellen in deiner Seite eigene Namen (Sprungzielname) geben und dann mir durch den Link sagen, dass ich genau an diese Stelle gehen soll.

Den Namen der Stelle gibst ihr durch

<a name="Sprungzielname"></a>

Um jetzt zu diesem Sprungziel zu kommen schreibt ihr einfach als Link

<a href="#Sprungzielname">Beschreibung</a>

Wichtig ist dabei das #. Ich habe mal ganz oben am Anfang der Seite den Namen htmling gegeben, indem ich einfach <a name="htmling"></a> am Textanfang schrieb. Wenn ich nun einem Link zu dieser Stelle folgen soll dann müßtet ihr folgendes schreiben.

<a href="#htmling">nach oben mit euch</a>

Aber hey ich schreibe es ja schon... :o) Also sooo schaut es dann aus:
nach oben mit euch Wenn ihr auf diesen Link klickt, dürfte euch etwas in der Internetadressenanzeige, da wo ihr immer die Adresse der Seite angebt, die angezeigt werden soll und derzeit http://www.htmling.net/index.php?c=links&menu=html stehen sollte auffallen. Genau jetzt ist an der Adresse noch ein #htmling angehängt. So könnt ihr bei jeder Datei auch direkt eine Sprungzielmarke ansteuern ohne, dass ihr dieses Dokument extra aufgerufen haben müsst.

So könntest ihr von jeder Seite jetzt diese Stelle aufrufen indem ihr als Link schreibst:

<a href="seiten.htm#htmling">Etwas über Links und viele Seiten</a>

Damit hätte ich euch eigentlich alles, was Unki zu Links für wichtig hällt, erzählt. Jedoch fällt mir noch eine Kleinigkeit ein. Erinnert ihr euch noch daran, dass ich euch von dem Befehl ALT="Beschreibung" bei Bildern erzählt habe? Nun bei Links ist so etwas auch möglich und zwar könnt ihr dieses durch die Ergänzung title machen.

Der Befehl würde dann wie folgt aussehen...:
<a href="Adresse" title="lange Beschreibung">Beschreibung</a>
Jedoch funktioniert dieses auch nur bei Opera und IE, aber dennoch habe ich einmal diesen Befehl bei Weiter angewandt, so dass ihr es euch ansehen könnt.

Sagte ich eigentlich schon, dass Unki ein Schusseltier ist??? Nunja, aber ich bin ja da und denke manchmal etwas weiter. Jetzt fragt ihr sicherlich was los ist. Also, Unki hat ganz vergessen mich zu bitten euch zu sagen, dass ihr anstatt einer Beschreibung auch ein Bild nehmen könnt.

Hier würde der Befehl zum Link dann so aussehen:

<a href="Adresse"><img src="Bildname" alt="Beschreibung" border="0"></a>
Erinnert ihr euch noch an das border="0" bei Bildern? Nun ohne das Border="0" würde ein solcher Bilderlink einen blauen Rand bekommen, was nicht sonderlich schön ausschaut.
Ach noch eine Kleinigkeit ihr könnt eure Seite auch in Unterordner legen. Dabei müsst ihr jedoch achtgeben, dass ihr einen Unterordner mit / anstatt \ schreibt. Wenn ihr also eine Datei namens juli.htm in dem ordner monate liegen habt, dann lautet der dazu gehörige Linkbefehl:

<a href="monate/juli.htm">Der Monat Juli</a>
Aber nun kommt endlich das Beispiel für title

» Weiter geht es «.
HTMLing.net - .top
© 2001 - 2018 Claudia u. Andreas Unkelbach
Impressum & Datenschutzerklärung