Relative und absolute Pfade


(letzte Änderung an dieser Seite: 03.08.2010)

Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File 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

HTML-Code
<!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

HTML-Code
<!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

HTML-Code
<!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

HTML-Code
<!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>
 

Nach oben