2.13.3 Projekt-interne Verweise

• 1 Prinzip
  • a) Projekt-interne Verweise
  • b) Im Gegensatzu zu Projekt-externen Verweise
• 2 Grundlagen-Websites & Workshops
• 3 Beispiele von internen Verweisen
  • Beispiel 1: Die Datei befindet sich im gleichen Verzeichnis
  • Beispiel 2: Link auf eine Datei in einem andern Verzeichnis
  • Beispiel 3: Link auf eine Datei im Stammverzeichnis dieser Website
  • Beispiel 4: Link auf das Stylesheet dieser Website
• 4 Anker definieren und Verweise zu Ankern
  • a) Prinzip
  • b) Beispiel: Link auf Color-Mixer im Abschnitt Farben
  • c) Workshops

-

⇧ 1 Prinzip

• a) Projekt-interne Verweise
• b) Im Gegensatzu zu Projekt-externen Verweise

-

↑ a) Projekt-interne Verweise

• Projekt-interne Verweise sind Links auf andere Dateien derselben Website.

• Mit einem Anker kann bei Projekt-internen Verweise auch auf eine bestimmte Stelle in einer solchen Datei verlinkt werden.

• Bei Projekt-internen Verweisen wird empfohlen, relative Angaben zu den Verweiszielen zu machen,
  wie z.B. ./xyz.php oder ../xyz.php oder ../../xyz.php etc.

Rekapitulation:

• Wenn die Datei im selben Ordner ist, wird also ein Punkt geschrieben. ./

• Wenn zuerst in den darüberliegenden Ordner geschaltet werden muss, werden zwei Punkte geschrieben. ../

• Bei noch höheren Ordnern wird je Stufe ../ zugefügt.
  

• Das ergibt dann zum Beispiel: ../../ oder ../../../

-

↑ b) Im Gegensatzu zu Projekt-externen Verweise

• Bei Verweisen auf Projekt-externe Verweisziele werden absoluten Angaben
  wie z.B. http://www.uvw.xy gemacht.

-

⇧ 2 Grundlagen-Websites & Workshops
en Basic Sites & Workshops
fr Sites de base & Workshops

• SELFHTML de Verweise zu Dateien oder Quellen im Projekt
  SELFHTML de Beispiel 1: Homepage
  SELFHTML de Beispiel 2: Zweite Seite
  SELFHTML de Beispiel 3: Willkommen

• Bachmann (via Wayback)
  de Allgemeines zum Einbinden von Bildern
  de Einbinden von Grafiken in HTML-Seiten
  

HTML: Grafiken in HTML-Seiten einbinden

-

⇧ 3 Beispiele von internen Verweisen

• Beispiel 1: Die Datei befindet sich im gleichen Verzeichnis
• Beispiel 2: Link auf eine Datei in einem andern Verzeichnis
• Beispiel 3: Link auf eine Datei im Stammverzeichnis dieser Website
• Beispiel 4: Link auf das Stylesheet dieser Website

-

↑ Beispiel 1: Die Datei befindet sich im gleichen Verzeichnis

Gleiches Verzeichnis = Ordnder in dem die vorliegende Datei, eventuell mit anderen Dateien (Dokumenten) enthalten ist.

Relativer Verweis = Nicht den ganzen Pfad der aufzurufenden Datei angeben,
nur wie die Adresse relativ von der vorliegenden Datei zu der Datei steht, die aufgerufen werden soll.

1) Eintrag im Quelltext:

Variante 1: mit Punk und Schrägstrich: ./xyz

<p>
Relativer Link: <a href="./referenz.php">Link zur Datei "Refernzieren" 
im gleichen Ordner wie diese Datei</a>
</p>

Variante 2: ohne Punk und ohne Schrägstrich: xyz

<p>
Relativer Link: <a href="referenz.php">Link zur Datei "Refernzieren" 
im gleichen Ordner wie diese Datei</a>
</p>

2) Anzeige im HTML-Dokument:

Variante 1: mit Punk und Schrägstrich:

Relativer Link: Link zur Datei "Refernzieren" im gleichen Ordner wie diese Datei

Variante 2: ohne Punk und ohne Schrägstrich:

Relativer Link: Link zur Datei "Refernzieren" im gleichen Ordner wie diese Datei

Bemerkungen:

• Um Verweise auf andere Projektdateien zu definieren, empfiehlt es sich, relative Angaben zum Verweisziel zu machen (und nicht den ganzen Pfad mit http:// anzugeben).

• 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 2: Link auf eine Datei in einem andern Verzeichnis

Der relative Link geht in der Hierarchie der Verzeichnisse zwei Stufen höher:

1) Angabe im Quelltext:

<p>
&rArr; Siehe "Internet-Grundlagen":
<a href="../../grundlagen/normen/w3c.php>
W3C - World Wide Web Consortium</a>
</p>

2) Anzeige im HTML-Dokument:

⇒ Siehe "Internet-Grundlagen": W3C - World Wide Web Consortium

-

↑ Beispiel 3: Link auf eine Datei im Stammverzeichnis dieser Website

• Der relative Link geht zwei Stufen höher.
  

• In einer ersten Stufe vom Verzeichnis /verweise/ in des Verzeichnis /html/.

• Dann in einer zweiten Stufe vom Verzeichnis /html/ in das Stammverzeichniss /webbau/.

• Im Stammverzeichnis /webbau/ befindet sich ein Unterverzeichnis /musik/ (das im HTML-Dokument nicht erscheint).

• In diesem Unterverzeichnis /musik/ befindet sich die Datei start.wav.

• Mit diesem realtiven internen Verweis wird also:

  • aus der vorliegenden Datei /webbau/html/verweise/intern.php

  • die Datei /webbau/musik/start.wav aufgerufen.

1) Angabe im Quelltext:

<p>
Relativer Link: 
<a href="../../musik/start.wav">
start.wav3</a>
(Haben Sie etwas Geduld: das Laden dauert einige Sekunden)
</p>

2) Angabe im HTML-Dokument:

Relativer Link: start.wav3
(Haben Sie etwas Geduld: das Laden dauert einige Sekunden)

-

↑ Beispiel 4: Link auf das Stylesheet dieser Website

1) Angabe im Quelltext:

<p>
Link auf das Stylesheet dieser Website:
<a href="../../styles/allgemein.css.php">
allgemein.css.php</a>
</p>

2) Anzeige im HTML-Dokument:

• Link auf das Stylesheet dieser Website: allgemein.css.php

Bemerkungen zum Stylesheet:

Wie in dieser Website an entsprechender Stelle angegeben wird, werden in einer separaten PHP-Datei zuerst die Farben definiert und als Datei oben in das Stylesheet eingelesen.

-

⇧ 4 Anker definieren und Verweise zu Ankern

• a) Prinzip
• b) Beispiel: Link auf Color-Mixer im Abschnitt Farben
• c) Workshops

-

↑ a) Prinzip

• 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.

-

↑ b) Beispiel: Link auf Color-Mixer im Abschnitt Farben

1) Im Abschnitt Farben muss ein Anker gesetzt werden:

Erklärungen:

• Der Code des Ankers lautet: <a name="mixer">"Name der aufgerufenen Stelle"</a>

• Wenn der Anker <a name="mixer"> mit dem Code mixer in der entsprechenden Datei aufgerufen wird, springt der Curser an die Stelle "Name der aufgerufenen Stelle" und der entsprechende Bildschirm wird angezeigt.

• In der vorliegenden Website ist als Name der aufgerufenen Stelle ein unsichtbarer Strich "<span style="visibility:hidden">-<br><br><br></span>" der am oberen Bildschirmrand unter der Kopfzeile plaziert wird, so dass einige Zeilen darunter der obere Rand des Textes unter der Kopfzeile erscheint.

• Im Normalfall (wenn die Website keine stehende Kopfzeile aufweist und der Text an oberen Bildschirmrand beginnt) wird anstatt des Striches - der Titel der aufgerufenen Seite oder der angerufenen Stelle angegeben.

• Der Code könnte dann also so lauten:
  <a name="mixer"><h3>Color-Mixer</h3></a>

<a name="mixer"><span style="visibility:hidden">-<br><br><br></span></a>

2) Mit folgendem Link wird nun auf diesen Anker gesprungen:

<p>&rArr; Link: 
<a href="../farben/waehler.php#mixer">
Color-Mixer</a>
</p>

⇒ Link: Color-Mixer

-

↑ c) Workshops

• SELFHTML de Anker definieren und Verweise zu Ankern
  SELFHTML de Beispiel: Lange Seite

↑