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.
Was nicht mit auf den Server gehört
Zur Ordnung gehört auch das Aussortieren beim Hochladen: Arbeitsdateien wie Bildbearbeitungs-Originale, Notizen, Sicherungskopien mit Namen wie index-alt-FINAL2.html haben auf dem Webserver nichts verloren. Alles was dort liegt, ist grundsätzlich öffentlich abrufbar, wer den Dateinamen errät oder in einer offenen Verzeichnisliste findet, kann es laden. Bewährt hat sich die Trennung in zwei Ordner: einen Arbeitsordner mit allem, und einen sauberen Veröffentlichungsordner, der nur enthält was wirklich online soll. Hochgeladen wird immer nur der zweitte.
Umbenennen will überlegt sein
Sobald die Seite online ist, wird jeder Dateiname Teil einer öffentlichen Adresse, und Adressen sind Versprechen: Benennt man rezepte.html später in kochen.html um, laufen alle Links und Lesezeichen auf die alte Adresse ins Leere. Deshalb Namen einmal ordentlich wählen und dann dabei bleiben, und falls ein Umzug wirklich sein muss, eine dauerhafte Weiterleitung einrichten, wie im HTTP-Kapitel beschrieben. Auf dem eigenen Rechner vor der Veröffentlichung darfst du dagegen umbenennen bis der Arzt kommt, solange du die Verweise mitpflegsst.
Verwandt: Erste HTML-Seite · Webserver und Hosting · Glossar