Kennen, können, beherrschen lernen was gebraucht wird

Transkript

1 Inhaltsverzeichnis Inhaltsverzeichnis... 1 Grundlagen... 2 Hyperlinks innerhalb einer Datei... 2 Verweisziel definieren... 2 Einen Querverweis setzen... 3 Verschiedene Arten von Hyperlinks... 3 Einfache Hyperlinks... 3 Relative Hyperlinks... 3 Absolute Hyperlinks... 4 Ziele von Hyperlinks... 4 Hyperlink zu einer anderen Seite der Domain... 5 Verweis an eine bestimmte Stelle im Dokument... 5 Verweis an eine -Adresse... 5 Ändern der Grundfarben des Dokuments... 6 Grafiken als Hyperlink... 7 Abbildungsverzeichnis... 8 Index (Stichwortverzeichnis... 8 Seite 1

2 Grundlagen Hyperlinks sind Querverweise auf andere Seiten im Internet. Sie dienen dazu, mehrere Webseiten miteinander zu verbinden. durch diese Möglichkeit der Verknüpfung verschiedener Seiten miteinander wurde der große Erfolg des Internets erzielt. Hyperlinks können sowohl aus Textabschnitten als auch aus Grafiken bestehen. Hyperlinks können auf Fundstellen in der aktuellen Datei, in der WebPräsenz als auch im Internet verweisen. Abbildung 1 - Veränderung des Mauszeigers über einem Hyperlink Hyperlinks innerhalb einer Datei innerhalb einer HTML-Datei kann mit Hilfe von Hyperlinks von einer Stelle der Datei zu einer anderen Stelle innerhalb der Datei gesprungen werden. Um dies zu erreichen, müssen Sie zwei Arbeitsschritte abarbeiten: Ein Verweisziel (Anker) definieren, Einen Querverweis zum Verweisziel definieren Abbildung 2 - Verweis auf eine andere Stelle im Dokument Verweisziel definieren Um ein Verweisziel zu definieren, setzen Sie den Anker an die Stelle im Dokument zu der der Verweis führen soll. Es kann sich um ein einzelnes Wort im Text, eine Überschrift, um eine Grafik handeln. Abbildung 3 - Einen Anker setzen Das Attribut name markiert die Stelle im Dokument, zu der gesprungen werden soll. Diesen Vorgang nennt man Anker setzen. Der Anker besitzt dabei den Namen der unter Bezeichnung eingegeben wurde. Beispiel: <a name="sprungziel1">10 Euro Sondermünzen</a> Diese Ankerangabe kann eine Identifikation innerhalb eines Befehls setzen Beispiel: <h2 id="muenzen">10 Euro Sondermünzen</h2> Seite 2

3 Einen Querverweis setzen Kennen, können, beherrschen lernen was gebraucht wird Abbildung 4 - Einen Querverweis setzen Der Befehl <a steht für Anker und leitet einen Hyperlink (Verweis) ein. Das Attribut href="#ziel" verweist auf einen Anker innerhalb der aktuellen Webseite. Die Raute (#) ist unbedingt erforderlich. Der Text weist den Besucher der Seite daraufhin, welche Informationen ihn bei Nutzung des Hyperlinks erwarten Beispiel: <a href="#sprungsziel1">10 Euro Sondermünzen </a> Klicken Sie auf einen Querverweis, sucht der Browser das entsprechende Verweisziel, wenn er es findet, springt er automatisch zu diesem und zeigt das Dokument ab dieser Stelle an. BEISPIEL QUERVERWEIS UND ANKER Verschiedene Arten von Hyperlinks Die meisten Server im Internet sind Unix-ähnliche-Server, welche zwischen Groß- und Kleinschreibung unterscheiden. Sie müssen also darauf achten dass bei den Dateinamen und den Namen im Quelltext eine genaue Übereinstimmung besteht. Einfache Hyperlinks Alle Dateien auf die verwiesen wird, befinden sich in demselben Verzeichnis. Die Dateien werden über einfache Hyperlinks miteinander verbunden. Um die Webseiten miteinander zu verbinden, ist die Angabe des Namens der aufzurufenden Datei notwendig. Ein Rückverweis auf die Startdatei benötigt den Hyperlink. Abbildung 5 - einfache Hyperlinks Relative Hyperlinks Das Projekt wird zur besseren Übersichtlichkeit in einzelne Ordner eingeteilt. Wollen Sie auf eine Datei in einem anderen Ordner verweisen, müssen Sie den Namen des Ordners, sowie den Namen der Datei angeben. Seite 3

4 Abbildung 6 - Relative Hyperlinks Wenn Sie auf eine Datei in einem untergeordneten Ordner verweisen wollen, geben Sie den Namen des Ordners und den Namen der betreffenden Datei, getrennt durch einen Schrägstrich ein. Wollen Sie vom Ordner Geschäftsleitung zur Datei produkt_a.html verweisen, geben Sie nebenstehenden Link ein. Soll dagegen auf ein Dokument in einem übergeordneten Ordner verwiesen werden, geben Sie zwei Punkte gefolgt von einem Schrägstrich ein (../), bei mehreren Ebenen entsprechend oft (../../). Wollen Sie vom Produkt A wieder auf die Datei index.html verweisen, geben Sie nebenstehenden Link ein. Absolute Hyperlinks Wollen Sie auf externe Internetseiten verweisen, müssen Sie absolute Hyperlinks setzen, wobei absolut bedeutet, dass Sie eine komplette Internetadresse (URL) eingeben müssen. Viele Adressen im Internet bestehen nur aus den Namen einer Domain (z.b.: /) Der Verweis führt jedoch auf ein konkretes HTML-Dokument. In den meisten Fällen index.html. Im Verweis muss diese Datei nicht mit angegeben werden. Beenden Sie die Eingabe des absoluten Hyperlinks immer mit einem abschließenden Schrägstrich. Eine solche Vorgehensweise beschleunigt den Aufruf der Datei. Abbildung 7 - Verweis auf eine Datei im untergeordneten Ordner Abbildung 8 - Verweis auf eine Datei im übergeordneten Ordner Abbildung 9 - absoluter Hyperlink Ziele von Hyperlinks Das Ziel des Hyperlinks wird in dem Fenster mit dem definierten Namen angezeigt. Existier kein Fenster mit diesem Namen, wird ein neues Fenster im Browser geöffnet, welches diesen Namen erhält Das Dokument wird in einem neuen leeren Fenster geöffnet. Abbildung 10 - Ziele von Hyperlinks Seite 4

5 Hyperlink zu einer anderen Seite der Domain Werden umfangreiche Informationen angeboten, bietet es sich an, diese auf mehrere Seiten zu verteilen. Der Vorteil dieser Vorgehensweise ist, dass zu lange Ladezeiten der Seiten verhindert werden. In meinem Downloadzentrum habe ich diesen Rat befolgt. Wenn alle hier vorhandenen Informationen in einer Seite gespeichert werden, wird die Datei so groß, das es zu unzulässig langen Ladezeiten der Seite kommt. Durch die Aufteilung der Informationen in nach Themengebieten sortierten einzelnen Seiten, wird der Zugriff auf die Informationen übersichtlicher und die Ladezeiten halten sich in akzeptablen Grenzen. Um auf eine andere Seite der aktuellen Domain zu verweisen, müssen Sie folgenden Befehl eingeben. Im Beispiel lautet der Befehl wie folgt. Abbildung 11 - Hyperlink auf andere Seiten der Domain (1) Abbildung 12 - Hyperlink auf andere Seiten der Domain (2) Verweis an eine bestimmte Stelle im Dokument Im Kapitel Einen Querverweis setzen haben wir gelernt, dass innerhalb eines Dokumentes an eine bestimmte Stelle gesprungen werden kann. Dieselbe Vorgehensweise ist auch bei einem Verweis auf ein anderes Dokument möglich. Es wird die Datei datei.html geladen und in dieser Datei an die Stelle ziel gesprungen Abbildung 13 - Verweis an eine bestimmte Stelle im Dokument Es wird die Datei datei.html im übergeordneten Ordner geladen und in dieser Datei an die Stelle ziel gesprungen Es wird die Datei datei.html der Webseite geladen und in dieser Datei an die Stelle ziel gesprungen Verweis an eine -Adresse wenn der Besucher Web-Seite auf den Hyperlinktext klickt, wird das Standard -Programm geöffnet. Zusätzlich können noch zusätzliche Angaben definiert werden. Vor der Angabe weiterer Informationen wird ein Fragezeichen (?) eingefügt. Abbildung 14 - Verweis an eine -Adresse (1) Seite 5

6 Abbildung 15 - Verweis an eine -Adresse - weitere Vorgaben Fügt einen vorgegebenen Text in das Feld Betreff im -Programm ein. Fügt einen vorgegebenen Text in das Feld für den -Text ein. Mit cc kann eine an eine zusätzliche Adresse verschickt werden. Die einzelnen Vorgaben können auch miteinander kombiniert werden. Die Vorgaben werden mit dem Zeichen voneinander getrennt. Ändern der Grundfarben des Dokuments Standardmäßig sind Hyperlinks unterstrichen und werden in zwei verschiedenen Farben dargestellt: Eine Farbe für noch nicht besuchte Links. Eine Farbe nachdem Sie den Link besucht haben. Die Attribute zur Änderung der Farben eines Dokuments werden in den Tag <body> eingebunden. Abbildung 16 - Grundfarben des Dokuments ändern Das Attribut bgcolor (background color = Hintergrundfarbe) legt die Hintergrundfarbe des Dokuments fest. Das Attribut text legt die Textfarbe im Dokument fest. Innerhalb des Befehls <font color= Farbe > </font> kann die Farbe des Textes geändert werden. Das Attribut link definiert die Farbe für Verweise die noch nicht angeklickt wurden. Das Attribut vlink (visited link = besuchter Verweis) definiert die Farbe von bereits besuchten Links. Seite 6

7 Abbildung 16 - Grundfarben des Dokuments ändern Das Attribut alink (activated link = aktivierter Verweis) definiert die Farbe für Verweise, die erscheinen sollen, wenn der Anwender diese anklickt. Beispiel: Abbildung 17 - Dokumentfarben Grafiken als Hyperlink Abbildung 18 - Grafiken als Hyperlink Mit diesem Hyperlink wird auf die Datei kolping.html verwiesen Das Bild 10 dm kolping werk - vorder.jpg wird als Hyperlinktext verwendet Beispiel Seite 7

8 Abbildungsverzeichnis Abbildung 3 - Einen Anker setzen... 2 Abbildung 1 - Veränderung des Mauszeigers über einem Hyperlink... 2 Abbildung 2 - Verweis auf eine andere Stelle im Dokument... 2 Abbildung 4 - Einen Querverweis setzen... 3 Abbildung 5 - einfache Hyperlinks... 3 Abbildung 6 - Relative Hyperlinks... 4 Abbildung 10 - Ziele von Hyperlinks... 4 Abbildung 7 - Verweis auf eine Datei im untergeordneten Ordner... 4 Abbildung 8 - Verweis auf eine Datei im übergeordneten Ordner... 4 Abbildung 9 - absoluter Hyperlink... 4 Abbildung 13 - Verweis an eine bestimmte Stelle im Dokument... 5 Abbildung 11 - Hyperlink auf andere Seiten der Domain (1)... 5 Abbildung 12 - Hyperlink auf andere Seiten der Domain (2)... 5 Abbildung 14 - Verweis an eine -Adresse (1)... 5 Abbildung 15 - Verweis an eine -Adresse - weitere Vorgaben... 6 Abbildung 16 - Grundfarben des Dokuments ändern... 6 Abbildung 17 - Dokumentfarben... 7 Abbildung 18 - Grafiken als Hyperlink... 7 Index (Stichwortverzeichnis Anker 2, 3, 8 Ankerangabe 2 Attribut 2, 3, 6, 7 Attribute 6 Bezeichnung 2 Browser 3, 4 Domain 1, 4, 5, 8 Ebenen 4 Grafiken 1, 2, 7, 8 Hintergrundfarbe 6 hr 3 Hyperlink 1, 3, 5, 7, 8 Hyperlinks 1, 2, 3, 4, 6, 8 Hyperlinktext 5, 7 Identifikation 2 Informationen 3, 5, 6 Internet 2, 3, 4 Ladezeiten 5 Produkt 4 Quelltext 3 Querverweis 1, 2, 3, 5, 8 Querverweise 2 Raute 3 Server 3 Tag 6 Überschrift 2 Unix 3 Unix-ähnliche-Server 3 URL 4 Verweisziel 1, 2, 3 Web-Seite 5 Seite 8