mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 23.04.2024 13:28 Benutzername: Passwort: Auto-Login

Thema: ZP-Thema: Links auf Webseiten vom 16.03.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Zwischenprüfung Theorie -> ZP-Thema: Links auf Webseiten
Seite: Zurück  1, 2, 3, 4  Weiter
Autor Nachricht
Waschbaer

Dabei seit: 14.07.2004
Ort: Halle
Alter: 41
Geschlecht: Weiblich
Verfasst Mi 16.03.2005 11:44
Titel

Antworten mit Zitat Zum Seitenanfang

Habe ich damit auch nicht gemeint, wollte nur sagen das man den rechtlichen Aspekt nicht
vernachlässigen sollte.

* Ich will nix hören... *
  View user's profile Private Nachricht senden
savomy

Dabei seit: 23.03.2005
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 23.03.2005 13:45
Titel

Antworten mit Zitat Zum Seitenanfang

Naja ein bischen was gibt es da schon noch:
Anker definieren und Verweise zu Ankern
Verweise optisch gestalten mit CSS
Zielfenster für Verweise bestimmen
Framesets
  View user's profile Private Nachricht senden
Anzeige
Anzeige
deeesi

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Mi 23.03.2005 13:47
Titel

Antworten mit Zitat Zum Seitenanfang

savomy hat geschrieben:
Naja ein bischen was gibt es da schon noch:
Anker definieren und Verweise zu Ankern
Verweise optisch gestalten mit CSS
Zielfenster für Verweise bestimmen
Framesets


erzähl das mal nem puren Printler... der wird sich freuen
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Airlebnis
Threadersteller

Dabei seit: 02.03.2005
Ort: Düsseldorf
Alter: 43
Geschlecht: Weiblich
Verfasst Mi 23.03.2005 13:50
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
erzähl das mal nem puren Printler... der wird sich freuen


dat kannste laut sagen. und wie ich mich freu!! * Ich muß mich mal kurz übergeben... *

aber wir sind ja alt genug, um uns das auch selber beizubringen, wenn die lehrer zu unqualifiziert dazu sind! * Ja, ja, ja... *
  View user's profile Private Nachricht senden
savomy

Dabei seit: 23.03.2005
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mi 23.03.2005 14:02
Titel

Antworten mit Zitat Zum Seitenanfang

ok! hier nochmal ne erklärung für printer:

Quelle: www.self-html.de

Verweise zu Dateien oder Quellen im Projekt
Ein Web-Projekt besteht typischerweise aus mehreren bis vielen Einzelseiten, die miteinander verlinkt sind. Einleitende Bemerkungen dazu finden Sie im Abschnitt Informationsverteilung und Dateiorganisation.
Um Verweise auf andere Projektdateien zu definieren, empfiehlt es sich, relative Angaben zum Verweisziel zu machen. Das Projekt bleibt dadurch flexibler, und die Verweise funktionieren auch in anderen Umgebungen (z.B. solange Sie das Projekt lokal auf Ihrem PC erstellen und austesten wollen, oder wenn Sie es mal auf CD-ROM präsentieren möchten).

Beispiel Teil 1 - index.htm:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Homepage</h1>
<p>Dies ist eine ganz einfache Homepage
mit einem <a href="zweiteseite.htm">Verweis zu einer anderen Seite des Projekts</a>.
Eine <a href="../../tabellen/anzeige/layout.htm">aufwendigere Homepage
mit projekt-internen Verweisen</a> k&ouml;nnen Sie aber ebenfalls aufrufen.</p>

</body>
</html>
Beispiel Teil 2 - zweiteseite.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<div style="width:100%; border:thin solid gray; padding:5px">
<a href="index.htm">Homepage</a>
</div>

<h1>Zweite Seite</h1>
<p>Ja, hurra, geschafft!</p>

</body>
</html>

Erläuterung:
Das Beispiel zeigt zwei kleinere HTML-Dateien. Die erste - mit Namen index.htm - enthält einen Verweis zur zweiten Datei. Der Dateiname der zweiten Datei lautet zweiteseite.htm. Beide Dateien sind im gleichen Verzeichnis abgelegt. Deshalb genügt bei href= die Angabe des Dateinamens ohne weitere Zusätze. Im Beispiel der Datei index.htm wird aber auch noch gezeigt, wie Verweise zu Dateien in anderen Verzeichnissen definiert werden. Die genaue Syntax solcher relativen Angaben wird im Abschnitt Mit relativen Pfadangaben relativ zum Basis-URI referenzieren beschrieben.

Die zweite Datei im Beispiel (zweiteseite.htm) enthält einen typischen "Rückverweis" auf die erste Seite, also auf die "Einstiegsseite". Ein Rückverweis ist kein spezieller Verweis, sondern einfach wieder ein Verweis auf die gewünschte Datei. Da beide Dateien im gleichen Verzeichnis liegen, genügt auch in diesem Fall wieder die Angabe des Dateinamens, also href="index.htm"

Beachten Sie:
Der "Rückverweis" in der zweiten Datei wird im obigen Beispiel mit Hilfe eines allgemeinen Bereichs, dem ein paar CSS-Formate zugewiesen sind, optisch etwas aufgewertet. Er steht am Anfang des sichtbaren Dateikörpers und durch den Rahmen, den er dank CSS erhält, wirkt der Bereich wie eine Navigationsleiste. Es ist sehr empfehlenswert, solche typischen Navigationsverweise immer an der gleichen Stelle einer Seite zu notieren und optisch so zu gestalten, dass der Navigationszweck ersichtlich ist. HTML bietet keine speziellen Verweise oder gestalterischen Möglichkeiten für Navigationsleisten und Navigationsverweise an. Navigationsleisten müssen Sie mit den zur Verfügung stehenden Bordmitteln selbst kreieren. (Genaugenommen ist diese Aussage falsch: HTML bietet sehr wohl so etwas an, nämlich mit der Möglichkeit, logische Beziehungen zu definieren. Leider wird dies jedoch von den Browsern bis heute nicht unterstützt.)

Anker definieren und Verweise zu Ankern
Sie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei.
Beispiel:
Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1><a name="anfang">Lange Seite</a></h1>

<p><a href="#kap02">Kapitel 2</a></p>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->

<h2><a name="kap02">Kapitel 2</a></h2>

<p><a href="#anfang">Seitenanfang</a> oder
<a href="../projektintern.htm#anker">Anker definieren und Verweise zu Ankern</a></p>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->

</body>
</html>

Erläuterung:
Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href= notiert wird, sondern stattdessen ein Attribut name=. Ein kompletter Anker sieht also so aus:
<a name="Ankername">...</a>
Den Ankernamen können Sie frei vergeben. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (Lächel oder den Punkt (.).

Was Sie zwischen <a name="Ankername"> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name="Ankername"></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen. Beachten Sie dabei aber, dass das a-Element selber ein Inline-Element ist und keine Block-Elemente als Inhalt haben darf. Wenn Sie also beispielsweise eine Überschrift als Anker definieren wollen, was ja durchaus typisch ist, dann notieren Sie die Elementverschachtelung immer in dieser Form:
<h2><a name="Ankername">Text der Überschrift</a></h2>
Um innerhalb einer Datei einen Verweis zu einem in der Datei vorhandenen Anker zu notieren, gilt folgendes Schema:
<a href="#Ankername">Verweistext</a>.

Das Verweisziel beginnt also mit einem Gatterzeichen #, unmittelbar gefolgt vom Ankernamen.
Wenn der Verweis zu einem Anker in einer anderen Datei führen soll, wird zuerst die Datei adressiert. Hinter dem Dateinamen folgt das Gatterzeichen # und dahinter der Ankername.

Beachten Sie:
Obwohl HTML nicht zwischen Groß- und Kleinschreibung unterscheidet, ist es in jedem Fall empfehlenswert, Ankernamen bei Ankern und Verweisen dorthin genau gleich zu schreiben. Einige Browser führen den Verweis nämlich nicht aus, wenn der Ankername beim Anker und beim Verweis dorthin unterschiedliche Groß-/Kleinschreibung verwendet.

Wenn Sie XHTML-konform arbeiten wollen, müssen Sie in jedem Fall auf einheitliche Groß-/Kleinschreibung achten, da XHTML im Gegensatz zu HTML Groß-/Kleinschreibung streng unterscheidet.
Bei Verweisen innerhalb einer Datei erzeugt der Web-Browser, wenn die Datei in einer http-Umgebung angezeigt wird, keinen neuen Server-Zugriff, sofern er die Datei so vollständig in den Arbeitsspeicher geladen hat, dass er den Sprung ausführen kann.
Einige Browser, z.B. der Internet Explorer, kennen auch "intern reservierte" Ankernamen wie top. Wenn Sie also einen Verweis <a href="#top">...</a> notieren und kein Anker dieses Namens in der Datei existiert, springt der Browser beim Ausführen des Verweises an den Anfang der Seite.
Manche Browser haben Schwierigkeiten, zu Ankern zu springen, die innerhalb einer Tabelle notiert sind.
Es ist durchaus möglich, a-Elemente zu notieren, die sowohl ein href- als auch ein name-Attribut haben! Absichtlich selbstbezügliche Verweise können Sie beispielsweise so erzeugen:
<a name="hier" href="#hier">immer sch&ouml;n hierbleiben!</a>

Allgemeines zu projekt-externen Verweisen
Aus technischer Sicht stellen projekt-externe Verweise kein großes Problem dar. Im Abschnitt Referenzieren in HTML wird beschrieben, welche Möglichkeiten zur Referenzierung bestehen. Diese Möglichkeiten sind beim href-Attribut des <a>-Tags erlaubt.
Dennoch sollten Sie einiges mehr über projekt-externe Verweise wissen:
Im Normalfall dürfen Sie ungefragt Verweise auf fremde Web-Angebote setzen. Sie brauchen also keine E-Mail an den Anbieter mit Bitte um Genehmigung zu schreiben, wenn Sie auf sein Angebot einen Link setzen wollen. Jeder Anbieter, der mit seinem Web-Projekt online geht, muss sich im Klaren darüber sein, dass er Teil eines weltweiten Hypertext-Systems ist, in dem er nicht allein ist. Wenn er das nicht akzeptieren kann, ist er im Web fehl am Platz und hat das falsche Medium gewählt. Die Grundregeln des Web werden von den Ideen des Web bestimmt, nicht von den hermetischen Zwangsvorstellungen einiger Zuspätgekommener.
Es gibt jedoch Ausnahmen von der Regel. Wenn Sie beispielsweise selbst ein sehr stark frequentiertes Web-Angebot haben und auf dessen Einstiegsseite einen Verweis auf die Homepage eines kleinen, unbekannten Anbieters setzen, dann sollten Sie ihn vorher fragen. Der Grund: durch die vielen zu erwartenden Besucher, die über Ihren Verweis auf das fremde Angebot finden, wird dort plötzlich sehr viel Traffic (Besucherverkehr und Datenübertragung) erzeugt. Viele Anbieter haben bei ihrem Provider eine Volumenbegrenzung, und wenn diese überschritten wird, entstehen den Anbietern unkalkulierbare Kosten. Auch könnte es sein, dass der fremde Server nicht sehr belastungsfähig ist und durch die vielen plötzlichen Besucher zusammenbrechen könnte.
Eine andere Ausnahme ist, wenn Sie den Verweis in einem negativen Kontext setzen. Wenn Sie also auf einen Anbieter verweisen, nur weil sie ihn auf Ihren eigenen Seiten heftig kritisieren, dann ist es sicherer, sich dort eine Bestätigung einzuholen, dass ein solcher Verweis gebilligt wird. Juristisch sicher ist eine solche Bestätigung aber nur, wenn sie mit Unterschrift in dokumentenechter Form von einer dafür zuständigen Person geleistet wird.
Eine Sache, gegen die man sich im Sinne der Zivilcourage wehren sollte, ist der Versuch von Anbietern, juristisch gegen so genannte Deeplinks (Verweise in die Tiefe eines fremden Angebots) vorzugehen. Weltweiter Hypertext im Web bedeutet, dass auf vorhandene URIs verwiesen werden darf. Schließlich kann sich auch jeder Anwender auf jeden URI ein Lesezeichen (Bookmark, Favoriten) in seinem Browser setzen. Das kann auch eine Datei tief in einem fremden Web-Angebot sein. Es gibt von Anbieterseite aus technische Möglichkeiten, Deeplinks auf eine allgemeinere Seite umzulenken. Wenn er also nicht will, dass Deeplinks auf sein Angebot gesetzt werden, dann soll er von diesen technischen Möglichkeiten Gebrauch machen.
Weitere Informationen und Bemerkungen zu Diskussionen, die Sie zu diesen Themenkomplexen kennen sollten, finden Sie im Abschnitt Rechtliche Aspekte von Web-Projekten.

Beispiele für projekt-externe Verweise
Die einzige Bedingung, die beim Anwender erfüllt sein muss, damit er projekt-externe Verweise ausführen kann, ist eine bestehende Internetverbindung.

Beispiel:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Besuchen Sie doch mal...</h1>

<p>
<a href="http://www.teamone.de/training/">ein paar Kurse &uuml;ber die hier vermittelten Inhalte</a><br>
<a href="http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view">das <i>SELFSpezial</i>-G&auml;stebuch</a><br>
<a href="http://babelfish.altavista.com/">den Babelfish</a><br>
<a href="ftp://ftp.uni-augsburg.de/">den FTP-Server der Universit&auml;t Augsburg</a><br>
<a href="gopher://ftp.std.com/1">die ganze Welt auf einem Gopher-Server</a><br>
<a href="telnet://locis.loc.gov/">die &ouml;ffentliche Telnet-Anwendung der Library of Congress</a><br>
<a href="news:de.comm.infosystems.www.authoring.misc">die deutschsprachige Newsgroup f&uuml;r HTML/CSS</a>
</p>

</body>
</html>
Erläuterung:
Web-Adressen beginnen mit http://, manchmal auch mit https:// (letzteres sind Server, bei denen die Datenübertragung von und zum Browser verschlüsselt stattfindet, z.B. bei Internet-Banking).
Andere Internet-Protokolle können Sie ebenfalls adressieren, beispielsweise FTP-Adressen mit ftp://, Adressen auf Gopher-Servern mit gopher:// oder Telnet-Adressen mit telnet://. Auch Newsgroups im Usenet können Sie adressieren, nämlich mit news: (ohne die beiden sonst charakteristischen Schrägstriche). Bei anderen als http-Adressen kommt es auf den Web-Browser an, wie er damit umgeht. Die modernen Browser beherrschen meistens FTP und Gopher und stellen entsprechende Adressen in ihrem Anzeigefenster dar. Bei Protokollen, die der Browser nicht unterstützt, versucht er, auf dem Rechner des Anwenders ein Programm auszuführen, das für das entsprechende Internet-Protokoll zuständig ist. Bei Telnet wird beispielsweise ein auf dem Rechner installierter Telnet-Client aufgerufen, und bei Verweisen auf Newsgroups ein Newsreader oder das Newsreader-Modul eines Mailprogramms. Bei Newsgroups muss jedoch ein News-Server im Newsreader des Anwenders eingerichtet sein, der die adressierte Newsgroup anbietet. Auch E-Mail-Verweise sind möglich.

Beachten Sie:
Viele Adressen bestehen nur aus dem Namen einer "WWW-Domain", etwa http://www.teamone.de/. Trotzdem führt der Verweis auf eine konkrete HTML-Datei. Das liegt daran, dass es bei vielen Web-Servern einen so genannten Default-Dateinamen gibt - meistens index.htm, index.html oder welcome.htm bzw. welcome.html. Das Projekt muss natürlich auch eine entsprechende Datei besitzen. Im Verweis braucht die HTML-Datei aber nicht mit angegeben zu werden.
Viele solcher Adressen werden immer wieder ohne abschließenden Schrägstrich angegeben, etwa http://www.teamone.de. Es ist jedoch sauberer, wenn Sie noch den Schrägstrich dahinter setzen. Nur so kann der Web-Browser bereits am Verweis erkennen, dass es sich um ein Verzeichnis handelt, in dem eine Default-Datei steht, deren Namen der Web-Server zur Verfügung stellt. Es ist deshalb besser zu notieren: http://www.teamone.de/.
Noch wichtiger ist es, bei Unterverzeichnissen einen abschließenden Schrägstrich zu notieren. Zwar klappt es auch, wenn Sie eine Adresse wie http://www.teamone.de/training notieren. Doch dann findet unnötig viel Kommunikation zwischen Browser und Server statt, denn intern fordert der Browser vom Server im Beispiel erst mal eine Datei namens training, was den Server zunächst zu einer Fehlermeldung veranlasst, da diese Datei nicht existiert. Erst im zweiten Schritt wird erkannt, dass es sich um den Namen eines Verzeichnisses handelt. Notieren Sie deshalb also immer Angaben wie http://www.teamone.de/training/, also mit abschließendem Schrägstrich.
Es gibt neben den angesprochenen Internet-Protokollen auch noch andere, etwas wais oder irc. Ferner gibt es das "Un-Protokoll" file, über das sich lokale Rechner und Netzwerk-Adressen absolut adressieren lassen, mit Angaben wie <a href="file://localhost/">...</a>. Dies wird von moderneren Browsern jedoch aus Sicherheitsgründen nicht mehr oder nur noch eingeschränkt unterstützt und ist auch nicht besonders sinnvoll, da es heute wirklich kein Problem mehr ist, für lokale Zwecke einen Web-Server lokal einzurichten.

Allgemeines zu Verweisen
Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der "intelligente Mehrwert" des World Wide Web.
Mit Hilfe von Verweisen strukturieren Sie Ihr Projekt. Wenn Sie beispielsweise eine HTML-Datei mit einer Projekt-Einstiegsseite und verschiedene HTML-Dateien für Themenseiten planen, brauchen Sie in der Einstiegsseite Verweise zu allen Themenseiten und in jeder Themenseite einen Rücksprungverweis zur Einstiegsseite. Erst dadurch wird aus der losen Dateisammlung ein zusammenhängendes Web-Projekt, eine Homepage. In komplexeren Projekten wie dem vorliegenden Dokument finden Sie auch Verweise mit bestimmter Bedeutung - Verweise zu übergeordneten oder untergeordneten Ebenen, Verweise zum Blättern, Verweise zum Wechseln zwischen Beschreibungen und Anzeigebeispielen, Querverweise, Verweise zu anderen Web-Adressen usw.
Alle Verweise in HTML haben den gleichen Aufbau. Das vereinfacht die Syntax, hat aber auch Nachteile: es gibt nämlich keine Verweise für bestimmte Aufgaben. Mittlerweile gibt es zwar auch Attribute für solche Zwecke, aber in der Praxis ist es Ihnen überlassen, wie Sie zum Beispiel Verweise so gestalten, dass dem Anwender klar wird, ob es sich um einen Rückverweis zur Einstiegsseite, um einen Querverweis zu einem assoziativ verwandten Thema, oder etwa um einen Verweis zu einer ganz anderen Web-Adresse handelt.
Wichtig ist in allen Fällen ein aussagekräftiger Verweistext.
Schlecht ist: zurück (wohin eigentlich?)
Besser ist: zurück zur Einstiegsseite (ah ja!)
Verweise lenken die Aufmerksamkeit des Anwenders sofort auf sich. Wenn Sie Verweise mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wörter anbieten, keine Wörter ohne Inhalt
Schlecht ist: Für weitere Information klicken Sie hier (worum geht es "hier" eigentlich?)
Gut ist: Weitere Information können Sie ebenfalls aufrufen (ah ja!)
Bei komplexeren Projekten sollten Sie sich überlegen, wie Sie dem Anwender die Vielzahl der Verweise mit unterschiedlicher Bedeutung intuitiv zugänglich machen. Ein sinnvoller Weg ist, den Verweisen kleine Symbolgrafiken voranzustellen, so wie es im vorliegenden Dokument auch der Fall ist (siehe auch Grafiken einbinden). Durch aussagekräftige Symbole können Sie dem Anwender sofort signalisieren, um welche Art von Verweis es sich handelt. Die Symbolgrafiken sollten jedoch in der Höhe nicht größer sein als normaler Fließtext - normalerweise etwa 10-12 Pixel. Auch Grafiken als Verweise tragen häufig zu einer besseren Verweiskennzeichnung bei.
Zu wenige Verweise erschweren das Navigieren in einem Projekt und zeugen von wenig Kreativität beim Anbieter des Projekts. Zu viele Verweise verwirren den Anwender und können ein "Lost-in-Hyperspace-Gefühl" erzeugen - auch das wirft kein gutes Licht auf den Projektanbieter. Setzen Sie deshalb alle Verweise, die zum bequemen Navigieren nötig sind, und denken Sie auch an Querverweise sowie an sinnvolle Verweise zu anderen WWW-Adressen. Übertreiben Sie die Querverweistechnik aber nicht.

Beispiele für Verweise
Alle Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einem Verweisziel in der gleichen Datei, zu einer anderen Datei im eigenen Projekt, zu einer beliebigen WWW-Adresse oder zu einer beliebigen Datei eines anderen Dateityps im Internet oder lokal auf dem eigenen Rechner führen.
Beispiel:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Eine kleine Verweissammlung</h1>

<p>
<a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
<a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
<a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
<a href="http://www.oneworld.org/news/today/">OneWorld News</a> Nachrichten (en)
</p>
<p>
<a href="/">Wohin der wohl f&uuml;hren mag?</a><br>
<a href="./">Und der hier?</a>
</p>

</body>
</html>

Erläuterung:
Für Verweise in HTML gibt es das a-Element (a = anchor = Anker). Damit jedoch ein Verweis aus diesem Element wird, ist das Attribut <a href= erforderlich (href = hyper reference = Hyper(text)-Referenz). Als Wert an das href-Attribut weisen Sie das gewünschte Verweisziel zu. Als Inhalt des a-Elements, also zwischen <a> und </a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen).
Im obigen Beispiel führen die ersten vier Verweise zu anderen Web-Angeboten. Die letzten beiden Verweise führen zu "lokalen" Zielen. Um die Syntax möglicher Verweisziele zu verstehen, müssen Sie sich mit dem Referenzieren in HTML vertraut machen.

Beachten Sie:
Als Inhalt des a-Elements, also bei Verweisen der Verweistext, ist nicht nur reiner Text erlaubt. Sie können im Verweistext auch andere Inline-Elemente notieren. Unter anderem können Sie anstelle von Text auch eine Grafik referenzieren und auf diese Weise Grafiken als Verweise fungieren lassen, was in der Praxis des Web-Designs recht häufig vorkommt.

Verweise optisch gestalten mit CSS
Wenn Sie nichts anderes angeben, erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben, z.B. blau für Verweise zu noch nicht besuchten Seiten, und violett für Verweise zu bereits besuchten Seiten. Um dateiweit eigene Verweisfarben zu bestimmen, können Sie die Attribute verwenden, die im Abschnitt Farben für Text und Verweise beschrieben werden. Darüber hinaus gibt es aber die Möglichkeit, Verweise mit Hilfe von CSS individueller zu gestalten. Unter anderem ist es auch möglich, die meist voreingestellte Unterstreichung des Verweistextes zu unterdrücken.

Beispiel:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
a:link { text-decoration:none; font-weight:bold; color:#E00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#FFFF00; }
a:active { text-decoration:none; font-weight:bold; background-color:#CCFFFF; }
-->
</style>
<title>Text des Titels</title>
</head>
<body>

<h1>Eine kleine Verweissammlung</h1>

<p>
<a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
<a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
<a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
<a href="http://www.oneworld.org/news/today/">OneWorld News</a> Nachrichten (en)
</p>
<p>
<a href="/" style="color:green">Wohin der wohl f&uuml;hren mag?</a><br>
<a href="./" style="color:green">Und der hier?</a>
</p>

</body>
</html>

Erläuterung:
Das Beispiel arbeitet konsequent mit CSS Stylesheets. Dazu ist im Dateikopf der HTML-Datei ein eigener zentraler Bereich zum Definieren von CSS-Formaten notiert (<style>...</style>). Näheres dazu im CSS-Kapitel im Abschnitt Zentrale Formate definieren. Der vielfache Wunsch von Web-Designern, die Unterstreichung des Verweistextes zu unterdrücken, wird durch die CSS-Angabe text-decoration:none erzielt (text-decoration:underline würde übrigens die Voreinstellung, also unterstrichenen Verweistext bewirken). Weitere im Beispiel verwendete Formatdefinitionen sind font-weight:bold; (fette Schrift) sowie Angaben zur Farbe (color:) und zur Hintergrundfarbe (background-color:). Die entsprechenden CSS-Eigenschaften werden in den Abschnitten über Schriftformatierung und Hintergrundfarben und -bilder beschrieben.
Was im obigen Beispiel auffällt, ist, dass für insgesamt vier "Verweistypen" CSS-Formate definiert werden. Mit a:link sind Verweise zu noch nicht besuchten Seiten gemeint, mit a:visited Verweise zu bereits besuchten Seiten, mit a:hover Verweise, während der Anwender mit der Maus über den Verweistext fährt, und mit a:active Verweise, wenn sie angeklickt werden oder sind. Weitere Einzelheiten dazu werden im Abschnitt :link, :visited, :hover, :active, :focus (Pseudoformate für Verweise) beschrieben.
Die beiden letzten Verweise im obigen Beispiel werden individuell formatiert. Sie übernehmen die zentral definierten CSS-Formate, erhalten aber zusätzlich eine eigene Verweistextfarbe zugewiesen. Dazu wird im einleitenden <a>-Tag das Attribut style= notiert.

Zielfenster für Verweise bestimmen
Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Es sei denn, Sie haben in den Kopfdaten der HTML-Datei eine Zielfensterbasis angegeben und dort etwas anderes bestimmt. Bei einzelnen Verweisen können Sie jedenfalls unabhängig davon entscheiden, ob ein Verweisziel im aktuellen Browserfenster ausgegeben werden soll, oder ob ein neues Fenster dafür geöffnet werden soll. Bei Verweisen zu fremden Web-Angeboten kann es beispielsweise sinnvoll sein, das Verweisziel in einem neuen Fenster zu öffnen. So braucht der Anwender das eigene Web-Angebot nicht verlassen, sondern bekommt das andere Angebot einfach in einem neuen Fenster angezeigt. Die Seite Ihres Angebots mit dem Verweis bleibt in einem Fenster im Hintergrund erhalten.
Beispiel:
Anzeigebeispiel: So sieht's aus (das hier ist übrigens so ein Verweis zu einem Ziel im neuen Fenster!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>SELFHTML aktuell</h1>
<p>
immer wieder neu: <a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>
</p>

</body>
</html>

Erläuterung:
Mit dem Attribut target= im einleitenden <a>-Tag können Sie ein Zielfenster für den Verweis festlegen. Wenn Sie den Verweis in einem neuen Fenster öffnen wollen, weisen Sie bei target den Wert _blank zu (mit dem Unterstrich am Anfang!).
Weitere mögliche Wertzuweisungen an target= sind:
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen,
sowie ein beliebiger Fenstername, der in einem Frameset definiert ist.
Genauere Einzelheiten zu den Angaben im Zusammenhang mit Frames finden Sie im Abschnitt Verweise zu anderen Frames und zum Sprengen von Framesets.

Beachten Sie:
Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen, müssen Sie die HTML-Variante "Transitional" verwenden. Der Grund ist, dass dieses Attribut vorwiegend für Verweise bei Verwendung von Frames gedacht ist und Frames eine eigene HTML-Variante haben, die von der Einstufung her der Variante "Transitional" entspricht (auf gut Deutsch: nicht der "reinen Lehre" entspricht).
Anstelle von target="_blank" können Sie auch target="Halligalli" oder sonst irgendeinen Unsinn notieren. Wenn es kein Fenster mit diesem Namen gibt, öffnen die Web-Browser das Verweisziel in einem neuen Browser-Fenster.
  View user's profile Private Nachricht senden
ocra

Dabei seit: 11.12.2003
Ort: Düsseldorf
Alter: 40
Geschlecht: Männlich
Verfasst Do 24.03.2005 15:21
Titel

Antworten mit Zitat Zum Seitenanfang

hier noch ein nützlicher link mit hier noch nicht genannten Begriffen wie permanenter link etc.

go:
links

viel erfolg!
  View user's profile Private Nachricht senden
lizzie

Dabei seit: 26.03.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 26.03.2005 15:26
Titel

Antworten mit Zitat Zum Seitenanfang

hallo zusammen,

ich muss zugegeben bei links auf webseiten bin ich auch ziemlich
aufgeschmissen. ich bin auch printler und hab davon keine ahnung.
aber was wollen die wissen, bei dem thema homepage? rechtliche sachen
oder was über gestaltung??

mfg,
liezzi
  View user's profile Private Nachricht senden
aka

Dabei seit: 01.08.2003
Ort: -
Alter: 44
Geschlecht: Weiblich
Verfasst Mo 28.03.2005 17:23
Titel

???externe/interne links/ankerpunkte/codes/href...?? HÄH?

Antworten mit Zitat Zum Seitenanfang

hallo!

also, dieses thema links auf webseiten macht mich noch ganz kirre!
allgemein alle scheiß prüfungsthemen der ZP treiben mich in den wahnsinn!

wollt ihr mir allen ernstes weiß machen, dass ich all das drauf haben muss?

gibts da auch ne kurzfassung von????

als printler ist das wirklich ne tortur!
vorallem weil man es sich gänzlich allein beibringen muss! und die anderen themen sind ja auch nicht gerade ohne....also da werden wir wohl eh schon mut zur "großen lücke" beweisen müssen!

es ist echt zum * Ich muß mich mal kurz übergeben... * ...
insbesondere diese wunderbare abstimmung zwischen tatsächlicher relevanz für die weitere laufbahn (sprich, IHK-Prüfung) und dem schulischen lerninhalt - einfach nur traumhaft! * grmbl *
unsere klasse hat mal so ziemlich überhaupt nix von allen themen im unterricht durchgenommen!

so, genug ausgekotzt!
wäre dankbar wenn mir jemand trotzdem noch ne antwort auf meine frage bezüglich "kurzfassung von links auf webseiten" geben könnte! *hehe*

danke!
  View user's profile Private Nachricht senden
 
Ähnliche Themen [AP06] Medienoperating NON-PRINT - Links z. Thema weblog?
[FAQ] Dynamische Webseiten
Dynamische Webseiten
Grundlinienraster bei Webseiten
Max. Pixelgröße für Fotos auf Webseiten als Hintergrund
[AP 07] Mediendesign - Nonprint - Eure erstellten Webseiten
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Zwischenprüfung Theorie


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.