Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Eine Website besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn du eine Website erstellst, musst du diese Dateien in einer sinnvollen Struktur speichern, sicherstellen das die Dateien miteinander kommunizieren können und sicherstellen das alles richtig aussieht, bevor du upload them to a server. Dateien nutzen bespricht einige Themen, die du kennen solltest sodass du eine sinnvolle Dateistruktur für deine Website erstellen kannst.
Wo auf deinem Computer soll die Website liegen?
Wenn du an der Website »lokal« (auf deinem eigenen Computer) arbeitst solltest du 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 du solltest ihn dort speichern, wo du ihn wiederfinden kannst - vielleicht auf deinem Desktop oder in deinem Nutzerordner.
- Wähle einen Platz um deine Webprojekte abzuspeichern. Erstelle dort einen Ordner der z.B. »webprojekte« heißt. In diesen Ordner kannst du in Zukunft all deine Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.
- In diesem Ordner erstellen wir einen weiteren Ordner, in dem du ein bestimmtes Projekt speicherst, z.B. »erste-website«
Eine Bemerkung zu Großschreibung und Leerzeichen
In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das ist so weil:
- Viele Computer, besonders Webserver unterscheiden Groß- und Kleinschreibung. Wenn du eine Datei namens
MeinBild.jpgabspeicherst und dann darauf zugreifen möchtest, funktoniertmeinbild.jpgnicht. Für den Computer sindMeinBild.jpg und meinbild.jpgganz 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 namensMeinund eine Datei namensBild.jpginterpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichen%20(ein sog. Zeichencode) – das kann dir die Verlinkungen kaputtmachen:Mein Bild.jpgwird 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 vermeidest du verwirrende Probleme.
In welcher Struktur solltest du deine Dateien ablegen?
In dem Ordner deines Website-Projektes (siehe oben) wirst du meistens eine index.html-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstelle diese Sachen:
index.html: Das ist die erste Datei, die Leute sehen, wenn sie deinene Websites besuchen. Per Konvention heißt diese Dateiindex.html. Öffne deinen Texteditor und speichere eine neue Datei mit dem Namenindex.htmlin deinem Projektordner (der mit dem Namen »erste-website«).Bilder-Ordner: Dieser Ordner enthält die Bilder, die du auf deiner Website anzeigen willst. Erstelle einen Ordner mit dem NamenBilderin dem Projektordner (»erste-website«).Styles-Ordner: Dieser Ordner wird Dateien enthalten, die das Aussehen deiner Website definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstelle einen Ordner namensstylesin deinem Projektordner.Scripts-Ordner: Dieser Ordner wird Dateien enthalten die Interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstelle einen Ordner mit den Namenscriptsin deinem Projektordner.
Hinweis: Auf Windows-Computern kann es sein das du die Dateinamen nicht ganz sehen kannst. Es gibt einen Option mit dem Namen »Dateinamenerweiterung für bekannte Dateitypen verstecken«. Diese ist normalerweise eingeschaltet. Du kannst die Funktion deaktivieren, wenn du in den Windows-Explorer gehtst, Ordner-Optionen wählst und Dateinamenerweiterung für bekannte Dateitypen verstecken abwählstst und dann ok drückst. Siehe auch hier (Microsoft Support).
Dateipfade
Damit Dateien andere Dateien nutzen können (du also z.B. in der .html-Datei deiner Seite ein Bild einbinden und anzeigen kannst) musst du einen Pfad 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 wir vorher ausgewählt haben.
-
Kopiere dein Bild, welches du vorher ausgewählt hast, in den Ordner
Bilder. -
Öffne die Datei index.html und füge den folgenden Code genau so ein. (Keine Angst, du wirst die Bedeutung dieser Befehle später noch lernen.)
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="" alt="My test image"> </body> </html> - Die Linie
<img src="" alt="My test image">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 am selben Ort wieindex.htmlist. Um in diesen Unterordner zu gelangen, müssen wirBilder/DeinBildNameeingeben. Wenn das Bild z.B.Firefox-icon.pnggenannt ist, müssen wirBilder/Firefox-icon.pngeintippen. - Füge deinen Pfad jetzt in deinen HTML-Code zwischen die zwei
""beisrc=""ein. - Speichere deinen HTML-Code und öffne ihn mit einem Web-Browser. Jetzt sollte die Webseite dein Bild anzeigen.
Ein paar Grundregeln für Dateipfade:
- Um eine Zieldatei am selben Speicherort zu verlinken, kannst du einfach den Dateinamen eingeben. Bsp.
mein-bild.jpg - Um eine Datei in einem Unterordner zu verlinken musst du es machen, wie mit dem Beispielobjekt vorher.
Bsp. Bilder/mein-bild.jpg - Wenn du ein Bild in dem Ordner darüber verlinken willst, musst du zuerst zwei Punkte machen:
../mein-bild.jpg - Dies kannst du kombinieren, so viel du willst. Z.B.
../irgendeinordner/einandererordner/usw/mein-bild.jpg
Momentan ist dies alles, was du wissen musst.
Achtung: Das Windows-Dateisystem benützt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. C:\windows. Wenn du deine Webseite programmierst, solltest du immer die "normalen" Schrägstriche (/) verwenden.
Was sollte sonst noch getan werden?
Dies ist für jetzt. Deine Ordnerstruktur sollte ungefähr so aussehen:
