Eine Webseite besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn Sie eine Webseite erstellen, müssen Sie diese Dateien in einer sinnvollen Struktur speichern und sicherstellen, dass die Dateien miteinander kommunizieren können. Die Webseite sollte reibungslos funktionieren, bevor Sie alles auf einen Server hochladen. Dieser Artikel erklärt den Umgang mit Dateien, sodass Sie eine sinnvolle Dateistruktur für Ihre Website erstellen können.
Wo auf Ihrem Computer soll die Webseite liegen?
Wenn Sie an der Webseite »lokal« (auf dem eigenen Computer) arbeiten, sollten Sie alle zusammengehörigen Dateien in einem Ordner haben. Dieser Ordner sollte die Struktur der Dateien auf dem Server (dem Computer, über den die Dateien im Internet zugänglich sind) wiederspiegeln. Der lokale Ordner kann überall liegen, aber Sie sollten ihn dort speichern, wo Sie ihn wiederfinden können - vielleicht auf ihrem Desktop oder in einem Nutzerordner.
- Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der »webprojekte« heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.
- In diesem Ordner erstellen Sie einen weiteren Ordner, in dem Sie ein bestimmtes Projekt speichern, in diesem Fall Ihre erste Webseite. Nennen Sie den Ordner »erste-webseite«.
Eine Bemerkung zu Großschreibung und Leerzeichen
In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:
- Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens
MeinBild.jpg
abspeichern und dann darauf zugreifen möchten, funktoniertmeinbild.jpg
nicht. Für den Computer sindMeinBild.jpg
undmeinbild.jpg
ganz unterschiedliche Dateien. - Browser, Webserver und Programmiersprachen gehen nicht immer gleich mit Leerzeichen um. Wenn z.B. ein Leerzeichen in einem Dateinamen vorkommt, könnte angenommen werden, es handle sich um zwei Dateien deren Namen durch das Leerzeichen getrennt sind:
Mein Bild
.jpg würde als eine Datei namensMein
und eine Datei namensBild.jpg
interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge"%20"
(der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen:Mein Bild.jpg
wird nämlich zuMein%20Bild.jpg
.
Deshalb ist es am besten, sich anzugewöhnen Namen von Ordnern und Dateien ohne Leerzeichen und nur in Kleinbuchstaben zu vergeben. So vermeidet man Probleme.
In welcher Struktur sollten Sie Ihre Dateien ablegen?
In dem Ordner Ihres Webseiten-Projektes (siehe oben) werden Sie meistens eine index.html
-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:
index.html
: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Dateiindex.html
. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namenindex.html
in Ihrem Projektordner (der mit dem Namen »erste-website«) ab.Bilder-Ordner
: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namenbilder
in dem Projektordner (»erste-website«).Styles-Ordner
: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namensstyles
in Ihrem Projektordner.Scripts-Ordner
: Dieser Ordner wird Dateien enthalten, die interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstellen Sie einen Ordner mit den Namenscripts
in Ihrem Projektordner.
Hinweis: Auf Windows-Computern kann es sein, dass die Dateinamen nicht ganz zu sehen sind. Es gibt eine Option mit dem Namen »Erweiterungen bei bekannten Dateitypen ausblenden«. Diese ist normalerweise eingeschaltet. Man kann die Funktion deaktivieren, wenn man in den Windows-Explorer geht, Ordner-Optionen wählt und Erweiterungen bei bekannten Dateitypen ausblenden abwählt und dann OK drückt.
Dateipfade
Damit Dateien untereinander kommunizieren können (wenn z.B. in der .html-Datei einer Seite ein Bild eingebunden ist), müssen Sie einen Dateipfad angeben. Das ist eine Art "Wegbeschreibung", anhand derer eine Datei eine andere Datei finden kann. Um zu zeigen, wie dies funktioniert, werden wir ein wenig HTML in unsere index.html
-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel ("Wie soll Ihre Webseite aussehen?") ausgewählt haben, anzeigen.
-
Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner
bilder
. -
Öffnen Sie die Datei
index.html
in einem Texteditor und fügen den folgenden Code genau so ein. (Keine Angst, Sie werden die Bedeutung dieser Befehle später noch kennen lernen.)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mein Testseite</title> </head> <body> <img src="" alt="Mein Testbild"> </body> </html>
- Die Zeile
<img src="" alt="Mein Testbild">
ist der HTML-Code, welcher das Bild in die Seite einfügt. Jetzt müssen wir noch angeben, wo das Bild gespeichert ist. Das Bild ist im Ordnerbilder
, welcher in dem selben Ordner wieindex.html
ist. Um in diesen Unterordner zu gelangen, müssen wirbilder/DeinBildName
eingeben. Wenn das Bild z.B.firefox-icon.png
genannt ist, müssen wirbilder/firefox-icon.png
eintippen. - Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei
src=""
ein. - Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.
Ein paar Grundregeln für Dateipfade:
- Um eine Zieldatei am selben Speicherort zu verlinken, können Sie einfach den Dateinamen eingeben. Beispiel:
mein-bild.jpg
- Um eine Datei in einem Unterordner zu verlinken müssen Sie es so machen wie in dem Beispielprojekt oben.
Beispiel: bilder/mein-bild.jpg
- Wenn Sie ein Bild in dem Ordner darüber verlinken wollen, müssen Sie zuerst zwei Punkte machen:
../mein-bild.jpg
- Dies können Sie kombinieren, so viel Sie wollen:
../irgendeinordner/einandererordner/usw/mein-bild.jpg
Momentan ist das alles, was Sie wissen müssen.
Achtung: Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. C:\windows
. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.
Was sollte sonst noch getan werden?
Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen: