Durch Verzeichnisse/Ordner mehr Ordnung

Ordnung ist gut und Verzeichnisse helfen, mehr Ordnung zu bekommen bzw. zu erhalten. Am Anfang, wenn man nur ein paar einzelne HTML-Seiten und eine Handvoll Bilder und unter Umständen PDFs hat, speichern die meisten Einsteiger alles in einem Verzeichnis. Das macht erst einmal die wenigsten Probleme. Aber sobald der Inhalt der Website anwächst, geht irgendwann der Überblick verloren.

Daher hilft es, gleich von Anfang an sich eine Struktur festzulegen und somit dann mehr Ordnung zu haben.

Erfahrungsgemäß hilft es, wenn man einen Ordner für seine Bilder und Grafiken hat und ein Ordner für seine PDF-Dokumente (oder z.B. für Downloads), die man anbietet.

Sprich wir machen uns folgende Ordner, wie in der folgenden Grafik dargestellt.

Im folgenden Beispiel, liegen alle Bilder und Grafiken im Unterverzeichnis „bilder“ und alle PDFs im Verzeichnis „pdf“.

Beispiel Verzeichnisse auf Websites nutzen

Bilder im eigenen Verzeichnis

Jetzt können wir unsere Bilder in dem Ordner „bilder“ speichern. Allerdings müssen wir unseren HTML-Befehl, der Bilder anzeigt, entsprechend ändern.

Bisher sah der HTML-Befehl so aus:

<img src="fennek.jpg" width="474" height="66" alt="Fennek">

Jetzt muss dieser um den entsprechenden Ordner ergänzt werden:

<img src="bilder/fennek.jpg" width="474" height="66" alt="Fennek">

Download-/PDF im eigenen Ordner

Das Gleiche gilt auch für PDFs, die zum Download angeboten werden. Dafür haben wir den üblichen HTML-Befehl für einen Link verwendet:

<a href="ebook.pdf">E-Book herunterladen</a>

Auch hier wird der Pfad ergänzt, damit das Dokument auch aus dem entsprechenden Ordner heruntergeladen werden kann:

<a href="pdf/ebook.pdf">E-Book herunterladen</a>

HTML-Seiten in Ordnerstrukur?

Bei verschiedenen Webprojekten sieht man, dass auch die HTML-Seiten in Unterverzeichnisse verteilt sind. Das ist meiner Meinung nach, nur in sehr komplexen Projekten, mit vielen Seiten sinnvoll. Hier ist bei vielen HTML-Seiten eine Hausnummer von über 200 Einzelseiten.

Also hier würde ich besonders als Einsteiger die Finger davon lassen, da sonst mehr Chaos entsteht als Ordnung herauskommt. Verteilt man HTML-Seiten auf Unterverzeichnisse, wird die Linkstruktur schnell sehr komplex und macht dann wenig Spaß zum Pflegen.

Böse Stolperfalle CSS in Unterverzeichnis

Natürlich kann man auch seine CSS-Datei(en) in Unterverzeichnisse packen. Allerdings kommt hier ein schönes Problem auf, wenn man in CSS (das kommt in einem späteren Kapitel) dann eine Grafik als Hintergrundgrafik integriert. Dann muss man aus dem Unterverzeichnis (nennen wir es „design“) erst auf das Hauptverzeichnis wechseln und dann wieder in das Unterverzeichnis für die Bilder:

#wrapper {
  background-image:url(../bilder/hintergrundgrafik.jpg);
}

Das bewirkt die Konstruktion „../“ – und wehe man übersieht das. Dann kommt keine Grafik und man wundert sich.

Stolperfallen Slash „/“ und Backslash „\“

Bei der Pfadangabe von Links wird gerne anstatt dem „/“ ein „\“ gesetzt. Dies ergibt im Browser von Netscape Probleme, hingegen moniert der Microsoft Internet-Explorer die falsche Schreibweise nicht und führt sie einfach aus.

Tipps bei Verwendung von Unterverzeichnissen

In jedem Verzeichnis sollte eine index.htm existieren, da ansonsten unter Umständen bei der URL ohne die index.htm-Datei der Inhalt dieses Ordners aufgelistet wird oder nur eine Fehlermeldung kommt.