Umgang mit Dateien

Dateien und Ordner bearbeiten

Es gibt viele verschiedene Möglichkeiten, die auf Ihrem Computer enthaltenen Dateien und Ordner zu erstellen und zu bearbeiten. Sie können dies über die Kommandozeile/das Terminal Ihres Computers mit einer Reihe von Textbefehlen tun, worüber Sie im nächsten Artikel mehr erfahren werden. Viele Menschen finden es jedoch einfacher, zunächst visuell etwas über Dateisysteme zu lernen, worüber wir hier sprechen werden. Moderne Betriebssysteme (OSes) verfügen über eine leistungsfähige Benutzeroberfläche (UI) für Dateisysteme, mit der Sie Dateien und Ordner bei Bedarf bearbeiten können.

Unter macOS haben Sie beispielsweise das Programm Finder:

Windows hingegen verfügt über den Datei-Explorer:

Grundstruktur

Die meisten modernen Betriebssysteme haben einen Users-Ordner, der für jedes auf dem System vorhandene Benutzerkonto einen Ordner enthält, der auch als Home-Ordner des Benutzers bezeichnet wird. Dieser wird normalerweise durch ein Haus-Symbol dargestellt, damit er leichter zu finden ist. Der Home-Ordner enthält wiederum weitere wichtige Standardordner (und Dateien), die speziell für diesen Benutzer relevant sind, etwa Documents, Music usw. Auf Ihrem Computer gibt es auch viele weitere Dateien und Ordner, aber darum müssen Sie sich vorerst nicht kümmern.

Der aktuell angemeldete Benutzer kann standardmäßig nur auf seinen eigenen Home-Ordner zugreifen.

Sie sollten Projektdateien, die sich auf Ihre Arbeit beziehen, irgendwo innerhalb Ihres Home-Ordners erstellen, vielleicht innerhalb von Documents. Das ist sinnvoll, da Webseiten-Dateien häufig als Dokumente bezeichnet werden.

Einen Ordner erstellen

Erstellen wir einen neuen Ordner, um alle unsere Webprojekte zu speichern.

1. Klicken Sie in der Dateisystem-Benutzeroberfläche auf Ihren Home-Ordner und doppelklicken Sie dann auf Ihren Documents-Ordner.
2. Erstellen Sie an diesem Ort einen neuen Ordner mit dem Namen web-projects:
   1. Unter Windows können Sie dies tun, indem Sie im Fenster des Datei-Explorers die Schaltfläche New auswählen und Folder wählen (oder Ctrl + Shift + N drücken), web-projects als Namen für das angezeigte neue Ordnersymbol eingeben und Enter/Return drücken.
   2. Unter macOS können Sie dies tun, indem Sie im Finder-Menü File > New Folder auswählen (oder Cmd + Shift + N drücken) – es wird ein neuer Ordner namens untitled folder angezeigt. Klicken Sie auf den Ordnernamen, um ihn zu bearbeiten, geben Sie web-projects ein und drücken Sie Enter/Return.

Wenn Sie einen Tippfehler machen, können Sie den Ordnernamen bearbeiten, um ihn zu korrigieren (das funktioniert auch bei Dateien):

• Klicken Sie unter Windows mit der rechten Maustaste auf den Ordner, wählen Sie im Menü Rename und bearbeiten Sie dann den Namen. Einige Windows-Versionen zeigen zunächst ein vereinfachtes Menü an – möglicherweise müssen Sie mit der rechten Maustaste klicken, dann Show more options und anschließend Rename auswählen!
• Klicken Sie unter macOS auf den Ordnernamen bzw. wählen Sie ihn aus, um ihn zu bearbeiten.

Einen Projektordner öffnen und Dateien in VS Code erstellen

Sie können zwar Textdateien in der Dateisystem-Benutzeroberfläche des Betriebssystems erstellen, aber im Allgemeinen ist es einfacher und weniger fehleranfällig, sie in Ihrem Code-Editor zu erstellen. Tatsächlich verfügt VS Code über einen eigenen Dateiexplorer, mit dem Sie alle Ordner und Dateien erstellen können, die Sie für Ihre Webprojekte benötigen.

Warum haben wir Sie dann dazu gebracht, einen Ordner über die Dateisystem-Benutzeroberfläche des Betriebssystems zu erstellen? Weil VS Code auf einen anfänglichen Ordner der obersten Ebene verwiesen werden muss!

Es ist außerdem nützlich, ein wenig darüber zu verstehen, wie das Dateisystem Ihres Betriebssystems strukturiert ist. Das wird hilfreicher, wenn Sie später komplexere Werkzeuge verwenden.

Öffnen wir jetzt unseren Ordner web-projects in VS Code:

1. Öffnen Sie VS Code.
2. Wählen Sie im Menü File > Open Folder... aus.

   Hinweis: Wenn Sie die Tastatur verwenden, können Sie den Befehl Open Folder unter Windows ausführen, indem Sie die Ctrl-Taste gedrückt halten und K und anschließend O drücken. Für macOS-Benutzer ist es am einfachsten, die Command Palette mit Cmd + Shift + P zu öffnen, „Open Folder“ einzugeben, um die Befehlsliste zu filtern, mit den Pfeiltasten zu File: Open Folder zu navigieren und dann Enter zu drücken.

3. Es wird eine Mini-Version der Dateisystem-Benutzeroberfläche des Betriebssystems angezeigt. Verwenden Sie sie, um Ihren Ordner web-projects zu finden, wählen Sie ihn aus und drücken Sie dann die Schaltfläche Select Folder.
4. Ihnen wird ein Dialogfeld mit dem Titel Do you trust the authors of the files in this folder? angezeigt. Lesen Sie es sorgfältig, um zu verstehen, worum es geht. Im Moment sind Sie die einzige Person, die Dateien in diesem Ordner erstellen wird, daher können Sie auf Yes, I trust the authors klicken.

Sie sollten Ihren Ordner web-projects im Bereich EXPLORER von VS Code geöffnet sehen, wie unten dargestellt:

Ein Hinweis zur Tastaturnavigation in VS Code

VS Code verfügt, obwohl es keineswegs perfekt ist, über eine umfangreiche Sammlung von Tastenkombinationen. In diesem Artikel haben wir versucht, nützliche Tastenkombinationen anzugeben, wo immer dies möglich war. Umfassendere Listen finden Sie jedoch in der VS-Code-Referenz Keyboard Shortcuts Reference.

Wenn Sie VS Code allgemein per Tastatur navigieren möchten, können Sie die Tab-Taste drücken, um zwischen verschiedenen Bereichen der Benutzeroberfläche zu wechseln (Shift + Tab bringt Sie zu einer vorherigen Tab-Fokusposition). Wenn eine Tab-Fokusposition mehrere Schaltflächen enthält, können Sie mit den Pfeiltasten zwischen ihnen wechseln.

Wenn Sie gerade eine Datei bearbeiten, navigiert die Tab-Taste nicht durch die Benutzeroberfläche – sie fügt Tabulatorzeichen in die Datei ein. Um aus der Datei, die Sie bearbeiten, zum Bereich EXPLORER zu wechseln, können Sie unter macOS Cmd + Shift + E oder unter Windows Ctrl + Shift + E drücken.

Um zum Dateieditorbereich zurückzukehren und zwischen den verschiedenen Dateien zu wechseln, die in unterschiedlichen Tabs geöffnet sind, halten Sie die Ctrl-Taste gedrückt und verwenden Sie Tab sowie Shift + Tab, um in der Liste geöffneter Tabs nach oben und unten zu wechseln (sowohl unter macOS als auch unter Windows). Sobald Sie die Datei hervorgehoben haben, die Sie bearbeiten möchten, lassen Sie die Tasten los, um zu diesem Tab zu wechseln.

Eine Datei erstellen

Von hier aus können Sie über die entsprechenden Schaltflächen oben im Bereich EXPLORER neue Dateien und Ordner erstellen.

1. Erstellen Sie eine neue Datei, indem Sie auf das Symbol New File... klicken (oder mit Tab dorthin navigieren und Enter/Return drücken).
2. Geben Sie im angezeigten Texteingabefeld den Dateinamen „index.html“ ein und drücken Sie Enter/Return.

Gehen Sie nun zurück zur Dateisystem-Benutzeroberfläche Ihres Betriebssystems, öffnen Sie Ihren Ordner web-projects per Doppelklick und Sie sollten dort ebenfalls Ihre Datei index.html sehen. VS Code verwendet das zugrunde liegende Dateisystem des Betriebssystems und kein eigenes, seltsames Dateisystem.

index.html in einen eigenen Unterordner verschieben

Sie können Ordner innerhalb anderer Ordner erstellen (diese werden Unterordner genannt), und zwar beliebig viele Ebenen tief. Sie können außerdem Dateien (und Ordner) in andere Ordner verschieben, indem Sie sie per Drag-and-Drop auf diesen Ordner ziehen.

Sehen wir uns das an und verschieben dabei unsere Datei index.html in ihren eigenen Unterordner. Wir möchten sie nicht direkt im Hauptordner web-projects liegen haben.

1. Erstellen Sie innerhalb von web-projects einen neuen Ordner über die Schaltfläche New Folder... im Bereich EXPLORER von VS Code.
2. Nennen Sie ihn test-site.
3. Sie sollten nun die Datei index.html auf den Ordner test-site ziehen und dort ablegen können, um die Datei in den Ordner zu verschieben.

   Hinweis: Wenn Sie die Tastatur verwenden, können Sie dies mit den folgenden Schritten tun:

   1. Verwenden Sie die Pfeiltasten nach oben und unten, um den Fokusrahmen über die Datei index.html zu bewegen.
   2. Drücken Sie unter macOS Cmd + X (unter Windows Ctrl + X), um die Datei zum Verschieben auszuwählen.
   3. Verwenden Sie die Pfeiltasten, um den Fokusrahmen über den Ordner zu bewegen.
   4. Drücken Sie unter macOS Cmd + V (unter Windows Ctrl + V), um die Datei in diesen Ordner zu verschieben.

Es gibt noch viel mehr, was wir über die Verwendung von Dateisystem-Benutzeroberflächen des Betriebssystems und VS Code erklären könnten, aber wir haben nur begrenzt Platz, daher belassen wir es vorerst dabei. Das hat Ihnen genug Informationen gegeben, um loszulegen, und wir empfehlen Ihnen, im Web nach Informationen dazu zu suchen, wie Sie andere Aufgaben mit Dateien und Ordnern erledigen können.

Kommen wir nun zu einer kurzen Besprechung der Website-Struktur.

Welche Struktur sollte eine Website haben?

Wenn Sie lokal auf Websites arbeiten (auf Ihrem Computer), sollten Sie alle zu einer Website gehörenden Dateien in einem einzigen Ordner aufbewahren. Sie sollten wiederum alle Ihre Website-Ordner in einem zentralen Ordner speichern, damit sie alle leicht zu finden sind.

Früher in diesem Artikel haben wir Sie angewiesen, einen zentralen Ordner namens web-projects zu erstellen, um alle Ihre Website-Projekte zu speichern. Außerdem haben wir Sie einen Unterordner namens test-site mit einer leeren Datei index.html darin erstellen lassen.

Fügen wir innerhalb von test-site weitere Bestandteile hinzu, um eine typische Website-Struktur zu demonstrieren. Im nächsten Modul werden Sie darin ein vollständiges Website-Beispiel erstellen. Die häufigsten Bestandteile jedes Website-Projekts sind eine Index-HTML-Datei und Ordner für Bilder, Style-Dateien und Script-Dateien:

1. index.html: Diese Datei enthält in der Regel den Inhalt Ihrer Startseite, also den Text und die Bilder, die Personen sehen, wenn sie Ihre Website zum ersten Mal besuchen.
2. Ordner images: Dieser Ordner enthält alle Bilder, die Sie auf Ihrer Website verwenden.
3. Ordner styles: Dieser Ordner enthält den CSS-Code, der zum Gestalten Ihrer Inhalte verwendet wird (zum Beispiel zum Festlegen von Text- und Hintergrundfarben).
4. Ordner scripts: Dieser Ordner enthält den gesamten JavaScript-Code, der verwendet wird, um Ihrer Website interaktive Funktionen hinzuzufügen (zum Beispiel um festzulegen, was geschieht, wenn auf Schaltflächen geklickt wird).

Sie sollten bereits eine Datei index.html innerhalb von test-site haben. Erstellen Sie nun darin die Ordner images, styles und scripts.

Dateinamen

Ein Dateiname besteht im Allgemeinen aus zwei Teilen: dem Namen und der Erweiterung. Sehen Sie sich die oben erstellte Datei an: index.html:

• Der Name ist in diesem Fall index. Dateinamen können im Allgemeinen beliebige Zeichen enthalten, obwohl verschiedene Computersysteme unterschiedliche Einschränkungen für verwendbare Zeichen haben. Es ist besser, zumindest zu Beginn bei Zahlen und Buchstaben zu bleiben. Darüber hinaus können Systeme bestimmten Namen oder Teilen von Namen eine besondere Bedeutung geben – wie bereits erwähnt, werden index-Dateien häufig als Hauptdatei der Startseite einer Website erkannt.
• Die Dateierweiterung identifiziert den Dateityp und wird von Computersystemen verwendet, um zu erkennen, welche Art von Inhalt sie in der Datei erwarten können, welches Programm zum Öffnen der Datei verwendet werden sollte usw. In diesem Fall ist die Erweiterung .html, was bedeutet, dass die Datei Klartext und insbesondere HTML-Code enthalten sollte. Aufgrund der Erweiterung weiß Ihr Computer, dass er beim Versuch, die Datei zu öffnen, Ihren Standard-Texteditor verwenden sollte, der VS Code sein sollte, wenn Sie bisher alle unsere Anweisungen befolgt haben.

Das gilt nicht in allen Fällen, aber die meisten Dateien benötigen eine Erweiterung, um korrekt verarbeitet zu werden. Das Entfernen oder Ändern der Dateierweiterung führt wahrscheinlich zu Fehlern; Sie sollten sie daher nicht ändern, es sei denn, Sie wissen wirklich, was Sie tun.

Auf Windows-Computern könnten Sie Schwierigkeiten haben, die Erweiterungen einiger Dateien zu sehen, da Windows standardmäßig eine Option namens Hide extensions for known file types aktiviert hat. Sie können dies deaktivieren, indem Sie zum Datei-Explorer gehen, die Option Folder options… auswählen, das Kontrollkästchen Hide extensions for known file types deaktivieren und dann auf OK klicken. Genauere Informationen zu Ihrer Windows-Version können Sie im Web suchen.

Bewährte Praktiken für die Benennung von Dateien

Während Sie diesem Kurs folgen, werden Sie feststellen, dass wir Sie immer bitten, Ordner und Dateien vollständig in Kleinbuchstaben und ohne Leerzeichen zu benennen. Das Ignorieren dieses Ratschlags kann auf viele Arten Probleme verursachen – einige der häufigsten sind:

1. Viele Computersysteme, einschließlich der meisten Webserver, unterscheiden zwischen Groß- und Kleinschreibung. Wenn Sie beispielsweise ein Bild unter test-site/images/MyImage.jpg auf Ihrer Website ablegen und dann in einer anderen Datei versuchen, mit test-site/images/myimage.jpg auf das Bild zu verweisen, funktioniert dies möglicherweise nicht.
2. Wenn Sie Befehle in der Kommandozeile aufrufen, müssen Sie Dateinamen mit Leerzeichen in Anführungszeichen setzen, andernfalls werden sie als zwei separate Elemente interpretiert.
3. Einige Programmiersprachen (zum Beispiel Python) funktionieren unter bestimmten Umständen nicht gut mit Leerzeichen in Dateinamen (beispielsweise, wenn diese Dateien zu importierende Module sind).
4. Dateinamen werden häufig auf Webadressen/URLs abgebildet. Wenn Sie beispielsweise eine Datei namens my file.html im Stammordner Ihres Servers haben, ist sie in der Regel unter einer URL wie https://example.com/my%20file.html erreichbar. Webserver ersetzen die Leerzeichen in Dateinamen normalerweise durch %20 (weil URLs prozentkodiert sind), was bei einigen Systemen subtile Fehler verursachen kann, wenn sie davon ausgehen, dass Dateinamen und URLs exakt übereinstimmen.

Statt Leerzeichen verwenden viele Entwickler ein Trennzeichen wie einen Bindestrich (-) – zum Beispiel my-file.html statt my file.html. Dies ist eine gute Praxis.

Es ist am besten, sich anzugewöhnen, Ihre Ordner- und Dateinamen in Kleinbuchstaben ohne Leerzeichen und mit durch Bindestriche getrennten Wörtern zu schreiben, zumindest bis Sie wissen, was Sie tun. Auf diese Weise werden Sie später auf weniger Probleme stoßen.

Dateipfade

Um von einer Datei auf eine andere zu verweisen, müssen Sie einen Dateipfad angeben – im Grunde eine Route, damit eine Datei weiß, wo sich eine andere befindet. Wenn Sie beispielsweise eine Webseite mit einem Bild erstellen, muss Ihr Webseiten-Code einen Dateipfad enthalten, der den Speicherort des Bildes angibt, das Sie anzeigen möchten.

Sehen wir uns ein grundlegendes Beispiel dafür an. Möglicherweise verstehen Sie noch nicht, was das alles bedeutet, aber das ist in Ordnung.

1. Suchen Sie im Web nach einem Bild, das Ihnen gefällt (zum Beispiel mit einem Dienst wie Google Images), und laden Sie es herunter. Alternativ können Sie einfach unser Firefox-Symbolbild für dieses Beispiel verwenden.
2. Legen Sie das Bild in Ihrem Ordner images ab.
3. Stellen Sie sicher, dass die Bilddatei einen kurzen und einfachen Namen ohne Leerzeichen hat. Beispielsweise sind firefox-icon.png und cat.jpg gut, aber efregre^%^£$£@%$^&YTJgfbgfdgt54656756_ertgrth-rtgtfghhyj.png ist nicht gut. Stellen Sie außerdem sicher, dass Sie die Dateierweiterung beibehalten.

Nun fügen wir der Datei index.html Inhalt hinzu, damit sie die Bilddatei finden und anzeigen kann.

1. Öffnen Sie Ihre index.html in VS Code und fügen Sie den folgenden Inhalt genau wie unten dargestellt in die Datei ein. Dies ist HTML, die Sprache, die wir verwenden, um Webseiteninhalte zu definieren und zu strukturieren. Sie werden sehr bald viel mehr darüber lernen!

   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>
   

2. Die Zeile <img src="" alt="My test image"> ist der HTML-Code, der ein Bild in die Seite einfügt. Wir müssen HTML mitteilen, wo sich das Bild befindet. Das Bild liegt im Ordner images, der sich im selben Ordner wie index.html befindet. Um in der Dateistruktur von index.html zu unserem Bild zu gelangen, benötigen wir den Dateipfad images/your-image-filename. Wenn Ihr Bild beispielsweise firefox-icon.png hieße, wäre der Dateipfad images/firefox-icon.png.

3. Fügen Sie den Dateipfad in Ihrem HTML-Code zwischen den doppelten Anführungszeichen von src="" ein.

4. Speichern Sie Ihre HTML-Datei und laden Sie sie dann in Ihren Webbrowser. Dazu können Sie bei gedrückter Ctrl-Taste bzw. mit der rechten Maustaste auf die HTML-Datei klicken, Open With auswählen und im daraufhin angezeigten Untermenü einen Webbrowser auswählen. Sie können auch die Dateisystem-Benutzeroberfläche und ein Webbrowserfenster auf demselben Bildschirm öffnen und die HTML-Datei per Drag-and-Drop auf das Webbrowserfenster ziehen.

Sie sollten eine grundlegende Webseite sehen, die Ihr Bild anzeigt!

Allgemeine Regeln für Dateipfade

• Um auf eine Zieldatei im selben Ordner wie die aufrufende HTML-Datei zu verlinken, verwenden Sie einfach den Dateinamen, zum Beispiel my-image.jpg.
• Um auf eine Datei in einem Unterordner zu verweisen, schreiben Sie den Ordnernamen vor den Pfad, gefolgt von einem Schrägstrich, zum Beispiel subfolder/my-image.jpg.
• Um auf eine Zieldatei im Ordner über der aufrufenden HTML-Datei zu verlinken, schreiben Sie zwei Punkte. Wenn sich index.html beispielsweise in einem Unterordner von test-site und my-image.jpg in test-site befindet, können Sie von index.html aus mit ../my-image.jpg auf my-image.jpg verweisen.
• Sie können diese beliebig kombinieren, zum Beispiel ../subfolder/another-subfolder/my-image.jpg.

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