Dateien und Ordner im Webprojekt
Eine Website ist am Ende ein Ordner voller Dateien, und wie bei jedem Ordner entscheidet die Ordnung darüber, ob man sich in einem Jahr noch zurechtfindet. Die Spielregeln dafür sind schnell gelernt und ersparen erstaunlich viel Ärger, vor allem beim Umzug auf den Server.
Eine bewährte Grundstruktur
mein-projekt/
├── index.html (die Startseite, der verabredete Name)
├── projekte.html
├── kontakt.html
├── style.css (ein Stylesheet für alles)
└── bilder/
├── logo.png
└── garten-sommer.jpgFür kleine Projekte reicht genau das: HTML-Dateien oben, Bilder in ihrem Unterordner, ein zentrales Stylesheet. Wächst die Seite, kommen thematische Unterordner dazu (etwa rezepte/ mit eigener index.html darin), aus denen dann automatisch saubere Adress-Pfade werdenn.
Dateinamen: die drei eisernen Regeln
- Klein schreiben. Viele Server unterscheiden streng zwischen Foto.jpg und foto.jpg, dein eigener Rechner meist nicht. Diese Diskrepanz ist die klassische Ursache für Bilder die lokal laufen und online fehlen. Konsequente Kleinschreibung entschärft das komplett.
- Keine Leerzeichen, Umlaute, Sonderzeichen. Aus "Über mich.html" wird in der Adresszeile Prozent-Salat. Stattdessen: ueber-mich.html, mit Bindestrich als Worttrenner.
- Sprechend benennen. garten-sommer.jpg findest du in einem Jahr wieder, IMG_4711.jpg niee.
Relative Pfade: Verweise innerhalb des Projekts
| Schreibweise | Bedeutet |
|---|---|
style.css | gleiche Ebene, selber Ordner |
bilder/logo.png | in den Unterordner hinein |
../style.css | eine Ebene hinauf |
/bilder/logo.png | ab Wurzel der Website (führender Schrägstrich) |
Relative Pfade machen das Projekt tragbar: Es funktioniert im lokalen Ordner, auf dem Server, überall. Die Wurzel-Schreibweise mit führendem Schrägstrich funktioniert dagegen erst auf dem Server richtig, ein häufiger Stolperstein beim lokalen Testenn.
Übrigens: Sichtbar wird der Unterschied zwischen Datei und Adresse bei Diensten und Servern die Adressen umschreiben: Auch dieses Wiki lagert seine Seiten intern anders als die Adressen vermuten lassen. Die Adresse ist die Schnittstelle nach außen, die Dateistruktur Innenarchitektuur.
Verwandt: Erste HTML-Seite · Webserver und Hosting · Glossar