Umgang mit Dateien

Wenn Sie lokal auf Ihrem Computer an einer Website arbeiten, sollten Sie alle zugehörigen Dateien in einem einzigen Ordner speichern, der die Dateistruktur der veröffentlichten Website auf dem Server widerspiegelt. Dieser Ordner kann überall abgelegt werden, aber Sie sollten ihn an einem Ort platzieren, an dem Sie ihn leicht finden können, vielleicht auf Ihrem Desktop, in Ihrem Home-Ordner oder im Stammverzeichnis Ihrer Festplatte.

Im Allgemeinen sollten Sie:

1. Einen Speicherort für Ihre Projekte wählen. Hier werden alle Ihre Website-Projekte leben.
2. In diesem ersten Ordner weitere Ordner erstellen, um jedes Projekt zu speichern. Sie könnten Ihr erstes Projekt beispielsweise test-site (oder etwas Phantasievolleres) nennen.

Wählen Sie jetzt einen Ort zum Speichern Ihrer Projekte. Erstellen Sie innerhalb des gewählten Verzeichnisses einen neuen Ordner namens web-projects.

Sie werden bemerken, dass wir auf MDN darauf bestehen, Ordnernamen und Dateinamen vollständig in Kleinbuchstaben und ohne Leerzeichen zu verwenden. Das liegt daran:

1. Viele Computer, insbesondere Webserver, sind case-sensitive. Wenn Sie also ein Bild auf Ihrer Website bei test-site/MyImage.jpg ablegen und dann in einer anderen Datei versuchen, das Bild mit test-site/myimage.jpg zu referenzieren, funktioniert es möglicherweise nicht.
2. Es gibt viele Probleme, die durch die Verwendung von Leerzeichen in Dateinamen entstehen:
   • Wenn Sie Befehle in der Kommandozeile aufrufen, müssen Sie Anführungszeichen um Dateinamen mit Leerzeichen setzen oder der Pfad wird als zwei separate Elemente interpretiert.
   • Einige Programmiersprachen (z.B. Python) funktionieren in bestimmten Situationen nicht gut mit Leerzeichen in Dateinamen (z.B. wenn diese Dateien Module sind, die importiert werden sollen).

Dateinamen werden auch auf URLs abgebildet. Wenn Sie zum Beispiel eine Datei namens my_file.html im Stammverzeichnis Ihres server-bereitgestellten Verzeichnisses haben, ist sie im Allgemeinen unter https://example.com/my_file.html erreichbar, entsprechend dem Standardverhalten der meisten Webserver. Einige Server ersetzen die Leerzeichen in Ihren Dateinamen durch "%20" (den Zeichencode für Leerzeichen in URLs), was subtile Fehler mit einigen serverseitigen Logiken hervorrufen kann, wenn sie davon ausgehen, dass Dateinamen und URLs perfekt übereinstimmen.

Anstelle von Leerzeichen verwenden viele Entwickler ein Trennzeichen wie einen Bindestrich (-) oder einen Unterstrich (_). Es ist ratsam, Wörter mit Bindestrichen statt mit Unterstrichen zu trennen: my-file.html vs. my_file.html. Die Google-Suchmaschine behandelt einen Bindestrich als Worttrenner, ignoriert jedoch einen Unterstrich. Dies kann behoben werden, indem Ihr Server so konfiguriert wird, dass er Unterstriche durch Bindestriche ersetzt, aber das ist zusätzliche Arbeit und fehleranfälliger mit unterschiedlichen Dateinamen und URLs.

Es ist am besten, sich daran zu gewöhnen, Ihre Ordner- und Dateinamen in Kleinbuchstaben ohne Leerzeichen und mit durch Bindestriche getrennten Wörtern zu schreiben, zumindest bis Sie genau wissen, was Sie tun. Auf diese Weise treten weniger Probleme auf.

Betrachten wir als Nächstes, welche Strukturen Websites im Allgemeinen haben. Die häufigsten Elemente, die wir in jedem von uns erstellten Website-Projekt haben werden, sind eine Index-HTML-Datei und Ordner zur Speicherung von Bildern, Stil-Dateien und Skript-Dateien:

1. index.html: Diese Datei enthält im Allgemeinen Ihre Homepage-Inhalte, also den Text und die Bilder, die angezeigt werden, wenn Besucher erstmals auf Ihre Seite gehen.
2. images Ordner: Dieser Ordner enthält alle Bilder, die Sie auf Ihrer Website verwenden.
3. styles Ordner: Dieser Ordner enthält den CSS-Code, der zur Gestaltung Ihrer Inhalte verwendet wird (zum Beispiel um Text- und Hintergrundfarben festzulegen).
4. scripts Ordner: Dieser Ordner enthält den gesamten JavaScript-Code, der zur Hinzufügung interaktiver Funktionalitäten zu Ihrer Website verwendet wird (z.B. Schaltflächen, die beim Anklicken Daten laden).

Um eine Datei von einer anderen Datei aus zu referenzieren, müssen Sie einen Dateipfad angeben — im Grunde eine Route, damit eine Datei weiß, wo sich eine andere befindet. Wenn Sie zum Beispiel eine Webseite mit einem Bild erstellen, muss Ihr Webseitencode einen Dateipfad enthalten, der den Speicherort des anzuzeigenden Bildes angibt. Lassen Sie uns ein einfaches Beispiel dafür erstellen. Sie müssen jetzt vielleicht nicht alles verstehen, was das bedeutet, aber das ist in Ordnung.

1. Erstellen Sie in Ihrem web-projects Ordner einen neuen Ordner namens path-example.

2. Besuchen Sie Google Images, wählen Sie ein Bild aus, das Ihnen gefällt, und laden Sie es herunter.

3. Erstellen Sie in Ihrem path-example Ordner einen neuen Ordner namens images. Legen Sie Ihr heruntergeladenes Bild in diesem Ordner ab.

4. Erstellen Sie eine neue Datei namens index.html, und fügen Sie den folgenden Code genau so ein, wie gezeigt:

   html

   <!doctype html>
   <html lang="en-US">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <title>My test page</title>
     </head>
     <body>
       <img src="" alt="My test image" />
     </body>
   </html>
   

5. Die Zeile <img src="" alt="My test image"> ist der HTML-Code, der ein Bild in die Seite einfügt. Wir müssen dem HTML mitteilen, wo das Bild ist. Das Bild befindet sich im images-Verzeichnis, das sich im selben Verzeichnis wie index.html befindet. Um in der Dateistruktur von index.html zu unserem Bild zu navigieren, würde der erforderliche Dateipfad images/your-image-filename lauten. Wenn unser Bild beispielsweise firefox-icon.png hieße, wäre der Dateipfad images/firefox-icon.png.

6. Fügen Sie den Dateipfad in Ihren HTML-Code zwischen den Anführungszeichen des src=""-Codes ein.

7. Speichern Sie Ihre HTML-Datei und laden Sie sie dann in Ihrem Webbrowser (zum Beispiel durch Doppelklick auf die Datei). Sie sollten Ihre neue Webseite sehen, die Ihr Bild anzeigt!

Einige allgemeine Regeln für Dateipfade:

• Um auf eine Zieldatei im selben Verzeichnis wie die ausführende HTML-Datei zu verlinken, verwenden Sie einfach den Dateinamen, z.B. my-image.jpg.
• Um eine Datei in einem Unterverzeichnis zu referenzieren, schreiben Sie den Verzeichnisnamen vor den Pfad, plus einen Schrägstrich nach vorne, z.B. subdirectory/my-image.jpg.
• Um auf eine Zieldatei im Verzeichnis oberhalb der ausführenden HTML-Datei zu verlinken, schreiben Sie zwei Punkte. Wenn index.html also in einem Unterordner von test-site wäre und my-image.jpg in test-site, könnten Sie my-image.jpg von index.html aus mit ../my-image.jpg referenzieren.
• Sie können diese beliebig kombinieren, z.B. ../subdirectory/another-subdirectory/my-image.jpg.

Für den Moment ist das alles, was Sie wissen müssen.

• Zurück
• Übersicht: Einrichtung der Umgebung
• Weiter