Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Dateien nutzen

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.

  1. 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.
  2. 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:

  1. Viele Computer, besonders Webserver unterscheiden Groß- und Kleinschreibung. Wenn du eine Datei namens MeinBild.jpg abspeicherst und dann darauf zugreifen möchtest, funktoniert meinbild.jpg nicht. Für den Computer sind MeinBild.jpg und meinbild.jpg ganz unterschiedliche Dateien.
  2. 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 namens Mein und eine Datei namens Bild.jpg interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichen %20 (ein sog. Zeichencode) – das kann dir die Verlinkungen kaputtmachen: Mein Bild.jpg wird nämlich zu Mein%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:

  1. index.html: Das ist die erste Datei, die Leute sehen, wenn sie deinene Websites besuchen. Per Konvention heißt diese Datei index.html. Öffne deinen Texteditor und speichere eine neue Datei mit dem Namen index.html in deinem Projektordner (der mit dem Namen »erste-website«).
  2. Bilder-Ordner: Dieser Ordner enthält die Bilder, die du auf deiner Website anzeigen willst. Erstelle einen Ordner mit dem Namen Bilder in dem Projektordner (»erste-website«).
  3. Styles-Ordner: Dieser Ordner wird Dateien enthalten, die das Aussehen deiner Website definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstelle einen Ordner namens styles in deinem Projektordner.
  4. 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 Namen scripts in 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.

  1. Kopiere dein Bild, welches du vorher ausgewählt hast, in den Ordner Bilder.

  2. Ö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.) 

  3. <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  4. 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 Ordner Bilder, welcher am selben Ort wie index.html ist. Um in diesen Unterordner zu gelangen, müssen wir Bilder/DeinBildName eingeben. Wenn das Bild z.B. Firefox-icon.png genannt ist, müssen wir Bilder/Firefox-icon.png eintippen.
  5. Füge deinen Pfad jetzt in deinen HTML-Code zwischen die zwei "" bei src="" ein.
  6. Speichere deinen HTML-Code und öffne ihn mit einem Web-Browser. Jetzt sollte die Webseite dein Bild anzeigen.

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

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:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: janjo, d_jan
 Zuletzt aktualisiert von: janjo,