Verweise (Links)Heute lernen wir, wie man Verweise (Links) erstellt. Wir unterscheiden dabei (zunächst nur) zwei Fälle:
1. Allgemeines zu VerweisenVerweise sind ein entscheidender Bestandteil von HTML und der "intelligente Mehrwert" des World Wide Web. Mit Hilfe von Verweisen lassen sich Verknüpfungen zwischen verschiedenen HTML-Dateien herstellen. Für unsere Steckbriefe gibt es eine Startseite im Ordner "00_Alle7e". Auf dieser Seite stehen Verweise zu den Steckbriefen aller SchülerInnen der Klasse 7e. Natürlich soll auf jedem Steckbrief, also auch auf Deinem, ein Verweis zu dieser "7emil-Startseite" stehen. Daneben sollst Du in Deinem Steckbrief auch einen Verweis zur Internetseite des DBG erstellen. Wenn Du schnell bist, kannst Du auch Verweise zu den Steckbriefen anderer SchülerInnen der Klasse 7e erstellen oder zu Deiner Lieblingsinternetseite im WWW. 2. Schema für Verweise in HTMLAlle Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einer anderen Datei auf demselben Rechner oder zu einer beliebigen WWW-Adresse führen. Jeder Verweis besteht aus einem Verweisziel und einer Verweisbeschreibung, die in HTML auf die folgende Weise notiert werden: Schema:
Erläuterung:Das Setzen eines Verweises beginnt mit <a href= (a = anchor = Anker, href = hyper reference = Hyper(text)-Referenz). Hinter dem Istgleichzeichen gibt man das Verweisziel an. Das Verweisziel muss in Anführungszeichen stehen. Dahinter endet das einleitende Tag mit >. Es folgt der Text, der dem Anwender als Verweisbeschreibung angeboten wird (bei den meisten WWW-Browsern andersfarbig, häufig unterstrichen). Im Beispiel ist das der Text "Verweisbeschreibung". Dahinter wird das abschließende Tag </a> notiert. Das Verweisziel kann sein:
Zwischen <a href=...> und </a> kann man anstelle eines Textes als Verweisbeschreibung auch eine Grafik als Verweis einbinden. Das werden wir demnächst (nicht heute) lernen. 3. Verweis zur "7emil-Startseite"AUFGABEFüge in Deinem Steckbrief einen neuen Absatz (<p>...</p>) ein mit dem Begriff "Meine Klasse:", den Du natürlich wieder (einschließlich des Doppelpunktes) mit <b> und </b> fett formatierst. Nach dem Doppelpunkt und einem Leerzeichen kommt der Verweis zur "7emil-Startseite": So wird's gemacht:
Erläuterung:Für das Setzen des Verweises gilt das Schema für Verweise in HTML. Das Verweisziel ist immer der Dateiname der anderen HTML-Datei einschließlich des Pfades zu dieser Datei. Von Deinem Steckbrief (Deiner HTML-Datei), die in Deinem Ordner gespeichert ist, gelangst Du auf dem folgenden Pfad zur "7emil-Startseite": ../ eine Ordner-Ebene höher (Das ist der Ordner "7emilInfROS".), Gesamter Pfad: ../00_Alle7e/Alle7emil.htm Bei der Angabe des Dateinamens muss man unbedingt zwischen Groß- und Kleinschreibung unterscheiden. Einige Systeme, allen voran MS Windows, sind bis heute entweder überhaupt nicht in der Lage, dies zu unterscheiden, oder sie unterscheiden es, aber nicht konsequent genug. Notiere die Dateinamen in den Verweisen exakt so, wie die Dateinamen (z. B. im Windows-Explorer) geschrieben sind. Nach dem Hochladen auf einen WWW-Server (häufig Unix-Rechner, die penibel zwischen Groß- und Kleinschreibung unterscheiden) müssten sonst alle Dateien noch einmal umbenannt werden. 4. Verweis zur WWW-Adresse des DBG OberasbachAUFGABEFüge in Deinem Steckbrief einen neuen Absatz (<p>...</p>) ein mit dem Begriff "Meine Schule:", den Du natürlich wieder (einschließlich des Doppelpunktes) mit <b> und </b> fett formatierst. Nach dem Doppelpunkt und einem Leerzeichen kommt der Verweis zur Internetseite des DBG: So wird's gemacht:
Erläuterung:Für das Setzen des Verweises gilt das Schema für Verweise in HTML. Das Verweisziel ist die gewünschte WWW-Adresse, die jedoch immer mit http:// beginnen muss. 5. Stil-Angaben für Links im HTML-KopfStandardmäßig werden Links in Browsern in einer blauen Schrift und unterstrichen dargestellt. Mit Stil-Angaben im HTML-Kopf (zwischen <style type=text/css> und </style>) lässt sich festlegen, wie Links dargestellt werden. Man kann hierbei sogar festlegen, wie sich das Aussehen von Links ädern soll, wenn man einen Link mit der Maus überfährt. Beispiel:
Anzeige im Browser:Für das Anzeigebeispiel hier klicken! Erklärung:Man kann mit a bzw. a:hover {color: maroon; text-decoration: none; font-weight: bold;} die Link-Farbe, die Art des Link-Aussehens und die Schrift-Stärke für alle a-Links festlegen. Dabei beziehen sich die Angaben nach a auf das normale Aussehen von Links, die Angaben nach a:hover auf das Aussehen von Links, wenn sie mit dem Mauszeiger überfahren werden. Link-Farbe: Die Angabe "color: red;" legt die Schriftfarbe fest (color = Farbe).
Anstelle von red kannn ein beliebiger Farbname angegeben werden, allerdings müssen hierbei die Regeln zum Definieren von Farben in HTML beachtet werden. Link-Aussehen: Die Angabe "text-decoration: none;" legt das Link-Aussehen fest (decoration = Verzierung, d. h. Ausschmückung). Anstelle von none sind die folgenden Angaben möglich:
Schrift-Stärke für Links: Die Angabe "font-weight: bold;" legt die Schrift-Stärke fest (font = Schrift; weight = Gewicht, d. h. Stärke). Anstelle von bold kannn auch normal angegeben werden:
AUFGABE:Füge in Deinem Steckbrief im HTML-Kopf zwischen den Zeilen <style type=text/css> und </style> Stil-Angaben für die a-Links und für die a:hover-Links ein. Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast! 6. Weitere Verweise in Deinem SteckbriefZUSATZ-AUFGABENFüge in Deinem Steckbrief zwei weitere Absätze (<p>...</p>) ein mit den Begriffen "Befreundete 7e-ler:" und "Meine Lieblingsinternetseite:", die Du natürlich wieder (einschließlich des Doppelpunktes) mit <b> und </b> fett formatierst. Erstelle hinter den beiden Begriffen passende Verweise. Achte bei der Angabe der Verweisziele (vor allem bei den befreundeten 7e-lern) auf die richtige Angabe des Pfades! Wähle als Verweisbeschreibung einen aussagekräftigen Text: Dass sich das Verweisziel in einem neuen Fenster des Browsers öffnet (wie bei den beiden Verweisen oben), erreicht man mit einer zusätzlichen Angabe hinter den schließenden Anführungszeichen des Verweisziels und einem Leerzeichen: So wird's gemacht:
Erläuterung:Das Attribut target="_blank" im einleitenden <a>-Tag bewirkt, dass das Verweisziel in einem neuen Fenster geöffnet wird. © 2023 - Christian Bauer - cn.bauer@gmx.de |