Relative und absolute Pfade
Folien
Falls keine PDF-Präsentation zu sehen ist: Direktdownload der PDF-Präsentation
Übungen
Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei herunterladen.
Übungen: HTML - Verzeichnisse, Seitenstrukturen
Vier Dokumente untereinander verlinken
Benutzen Sie für die folgenden Übungen die Dateien im Zip-Archiv 02html/html08-UEsdateien-pfade-anpassen.zip. Sie finden dort einen Ordner mit drei leeren Unterordnern (bilder, rechner, seiten), drei Bilddateien (ich.jpg, ozean.jpg und sonnenuntergang.jpg) und vier HTML-Dateien (Inhalt unter der Aufgabenstellung).
1. Rufen Sie die index.html auf und kontrollieren Sie, ob alles funktioniert (Links, Bilder …).
2. Verschieben Sie alle Bilder in das Verzeichnis “bilder”. Passen Sie die Pfade an, so dass alle Bilder auf der Seite wieder angezeigt werden.
3. Verschieben Sie die HTML-Seiten bilder.html, lebenslauf.html und rechner.html in das Verzeichnis “seiten”, um etwas aufzuräumen. Gleichen Sie alle Link- und Bild-Pfade an, damit die Seite wieder voll funktionsfähig ist. (Tipp: Um eine Ebene höher zu wechseln, benutzen Sie zwei Punkte, also z.B. in einer Datei, die im Ordner “seiten” liegt, <img src="../bilder/ich.jpg" alt="...">. Das bedeutet: Wechsle eine Verzeichnisebene nach oben, suche dort das Verzeichnis “bilder” und im Verzeichnis “bilder” die Datei “ich.jpg”.)
4. Speichern Sie ein zusätzliches Bild im Ordner “bilder” und fügen Sie es in bilder.html ein.
Inhalt der Dokumente
1 index.html
<!DOCTYPE html>
<html>
<head>
<title>Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Meine Homepage</h1>
<p>Ich habe hier einige Materialien für Sie:</p>
<ul>
<li>Meinen <a href="lebenslauf.html" title="Tabellarischer Lebenslauf von Max Muster">Lebenslauf</a></li>
<li>Einen <a href="rechner.html" title="Mein Mehrwertsteuer-Rechner, mit dem Sie online die Mehrwertsteuer berechnen können">selbst programmierten Mehrwertsteuer-Rechner</a></li>
<li>Einige <a href="bilder.html" title="Sammlung meiner schönsten Fotografien">Bilder</a></li>
</ul>
<p>Viel Spaß beim Stöbern!</p>
</body>
</html>2 bilder.html
<!DOCTYPE html>
<html>
<head>
<title>Bilder</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Meine Bilder</h1>
<p>Hier sehen Sie meine Bildersammlung:</p>
<h2>Meine Sonnenuntergänge</h2>
<p>Ich habe mich vor einiger Zeit auf das Fotografieren von Sonnenuntergängen spezialisiert:</p>
<p><img src="sonnenuntergang.jpg" alt="Sonnenuntergang am Bla-Beach"></p>
<h2>Meine Urlaubsbilder</h2>
<p>Dieses Bild habe ich in Florida geschossen:</p>
<p><img src="ozean.jpg" alt="Der Ozean vor Florida, geknipst am 13.02.2007"></p>
<p>Hier geht's zurück zur <a href="index.html" title="Startseite">Startseite</a>!</p>
</body>
</html>3 lebenslauf.html
<!DOCTYPE html>
<html>
<head>
<title>Mein Lebenslauf</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Mein Lebenslauf</h1>
<p>Geboren: 13.02.2005</p>
<p>Ausbildung: Abitur.</p>
<p>(wird vervollständigt)</p>
<p><img src="ich.jpg" alt="Bild von mir, Max Muster"></p>
<p>Hier geht's zurück zur <a href="index.html" title="Startseite">Startseite</a>!</p>
</body>
</html>4 rechner.html
<!DOCTYPE html>
<html>
<head>
<title>Mehrwertsteuer-Rechner</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Berechnen Sie die Mehrwertsteuer!</h1>
<p style="font-style : italic;">Wegen einer Server-Störung ist der Rechner aktuell nicht betriebsbereit. Schicken Sie mir eine <a href="mailto: max.muster@maxmuster.de" title="Mail an mich">E-Mail</a>, dann rechne ich Ihre MwSt. von Hand aus.</p>
<p>Hier geht's zurück zur <a href="index.html" title="Startseite">Startseite</a>!</p>
</body>
</html>