Umgang mit Dateien

Es gibt viele verschiedene Möglichkeiten, die Dateien und Ordner auf Ihrem Computer zu erstellen und zu bearbeiten. Sie können dies über die Kommandozeile/Terminal Ihres Computers mit einer Reihe von Textbefehlen tun, mehr dazu im nächsten Artikel. Viele Menschen finden es jedoch einfacher, zunächst visuell über Dateisysteme zu lernen, was wir hier besprechen werden. Moderne Betriebssysteme (OS) verfügen über eine robuste Benutzeroberfläche für Dateisysteme (UI), die Sie zum Bearbeiten von Dateien und Ordnern nach Bedarf verwenden können.

Auf macOS gibt es beispielsweise das Finder-Programm:

Während Windows den Datei-Explorer hat:

Die meisten modernen Betriebssysteme haben einen Users-Ordner, der einen Ordner für jedes Benutzerkonto auf dem System enthält, auch bekannt als der Home-Ordner des Benutzers. Dieser wird normalerweise durch ein Haus-Symbol dargestellt, um ihn leichter zu finden. Im Home-Ordner befinden sich weitere wichtige Standardordner (und Dateien), die speziell für diesen Benutzer relevant sind, wie Documents, Music usw. Es gibt auch viele andere Dateien und Ordner auf Ihrem Computer, aber machen Sie sich darüber vorerst keine Sorgen.

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

Sie sollten Projektdateien, die sich auf Ihre Arbeit beziehen, irgendwo in Ihrem Home-Ordner erstellen, möglicherweise im Documents-Ordner. Das macht Sinn, da Webseiten-Dateien oft als Dokumente bezeichnet werden.

Erstellen wir einen neuen Ordner, um alle unsere Web-Projekte zu speichern.

1. Klicken Sie in Ihrer Benutzeroberfläche des Dateisystems auf Ihren Home-Ordner und dann doppelt auf Ihren Documents-Ordner.
2. Erstellen Sie an diesem Ort einen neuen Ordner namens web-projects:
   1. In Windows können Sie dies tun, indem Sie die Schaltfläche Neu im Datei-Explorer-Fenster auswählen und Ordner auswählen (oder Ctrl + Shift + N drücken), den Namen des neuen Ordners web-projects eingeben und Enter/Return drücken.
   2. In macOS können Sie dies tun, indem Sie im Finder-Menü Datei > Neuer Ordner auswählen (oder Cmd + Shift + N drücken) — Sie sehen einen neuen Ordner mit dem Namen unbenannter Ordner. 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 mit Dateien):

• In Windows klicken Sie mit der rechten Maustaste auf den Ordner, wählen Umbenennen aus dem Menü und bearbeiten den Namen. Einige Windows-Versionen haben anfangs ein vereinfachtes Menü - Sie müssen möglicherweise mit der rechten Maustaste klicken, dann Weitere Optionen anzeigen auswählen und dann Umbenennen auswählen!
• In macOS klicken/selektieren Sie den Ordnernamen, um ihn zu bearbeiten.

Während Sie Textdateien im Dateisystem-UI des OS erstellen können, ist es in der Regel einfacher und weniger fehleranfällig, diese in Ihrem Code-Editor zu erstellen. Tatsächlich hat VS Code einen eigenen Datei-Explorer, der es Ihnen ermöglicht, alle Ordner und Dateien zu erstellen, die Sie für Ihre Web-Projekte benötigen.

Warum haben wir Sie trotzdem den Ordner mit dem Dateisystem-UI des OS erstellen lassen? Weil VS Code initial auf einen übergeordneten Ordner zeigen muss!

Es ist auch nützlich, ein wenig darüber zu verstehen, wie Ihr Dateisystem des OS strukturiert ist. Dies wird nützlicher, wenn Sie später komplexere Werkzeuge verwenden.

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

1. Öffnen Sie VS Code.
2. Wählen Sie Datei > Ordner öffnen... aus dem Menü.

   Hinweis: Wenn Sie ein Tastaturbenutzer sind, können Sie den Befehl Ordner öffnen in Windows ausführen, indem Sie die Strg-Taste gedrückt halten und K und dann O drücken. Der einfachste Weg für einen macOS-Benutzer ist, die Befehlspalette mit Cmd + Shift + P zu öffnen, "Ordner öffnen" einzugeben, um die Befehlsliste zu filtern, die Pfeiltasten zu verwenden, um zu Datei: Ordner öffnen zu wechseln, und dann Enter zu drücken.

3. Ein Miniatur-UI des Dateisystems des OS erscheint. Verwenden Sie es, um Ihren web-projects-Ordner zu finden, wählen Sie ihn aus und drücken Sie die Schaltfläche Ordner auswählen.
4. Sie werden mit einem Dialogfeld mit dem Titel Vertrauen Sie den Autoren der Dateien in diesem Ordner? konfrontiert. Lesen Sie dies sorgfältig, um zu verstehen, worum es geht. Derzeit sind Sie die einzige Person, die Dateien in diesem Ordner erstellen wird, sodass Sie auf Ja, ich vertraue den Autoren klicken können.

Sie sollten Ihren web-projects-Ordner im VS Code EXPLORER-Fenster geöffnet sehen, wie unten gezeigt:

Ein Exkurs zur Navigation mit der Tastatur in VS Code

VS Code, wenn auch nicht perfekt, verfügt über eine umfangreiche Reihe von Tastenkombinationen. In diesem Artikel haben wir versucht, wo möglich, nützliche Kombinationen einzufügen, aber Sie finden umfassendere Listen im VS Code Keyboard Shortcuts Reference.

Im Allgemeinen, wenn Sie in VS Code über die Tastatur navigieren möchten, können Sie die Tab-Taste drücken, um zwischen verschiedenen Bereichen der Benutzeroberfläche zu wechseln (Shift + Tab, um zu einer vorherigen Registerkartenfokussierung zu wechseln). Wenn sich mehrere Schaltflächen in einer Registerkartenfokussierung befinden, können Sie mit den Pfeiltasten zwischen ihnen wechseln.

Wenn Sie gerade eine Datei bearbeiten, navigiert die Tabulatortaste nicht um die Benutzeroberfläche – sie fügt Tabulatorzeichen in die Datei ein. Um von der Datei, die Sie bearbeiten, zum EXPLORER-Fenster zu wechseln, können Sie auf macOS Cmd + Shift + E drücken oder auf Windows Strg + Shift + E.

Um zurück zum Dateibearbeitungsfenster zu wechseln und zwischen den verschiedenen in verschiedenen Registerkarten geöffneten Dateien zu navigieren, halten Sie die Strg-Taste gedrückt und verwenden Tab und Shift + Tab, um durch die Liste der geöffneten Registerkarten zu navigieren (sowohl auf macOS als auch auf Windows). Wenn Sie die Datei, die Sie bearbeiten möchten, hervorgehoben haben, lassen Sie die Tasten los, um zu dieser Registerkarte zu wechseln.

Erstellen einer Datei

Von hier aus können Sie neue Dateien und Ordner mit den entsprechenden Schaltflächen oben im EXPLORER-Fenster erstellen.

1. Erstellen Sie eine neue Datei, indem Sie auf das Neue Datei...-Symbol klicken (oder mit Tab dahin gehen und Enter/Return drücken).
2. Geben Sie als Dateinamen "index.html" im erscheinenden Texteingabefeld ein und drücken Sie Enter/Return.

Gehen Sie jetzt zurück zur Benutzeroberfläche des Dateisystems Ihres OS, gehen Sie in Ihren web-projects-Ordner, indem Sie darauf doppelklicken, und Sie sollten Ihre index.html-Datei dort ebenfalls sehen. VS Code verwendet das zugrunde liegende Dateisystem des OS, nicht ein eigenes.

Sie können Ordner innerhalb anderer Ordner erstellen (genannt Unterordner) so tief in der Hierarchie, wie Sie möchten. Sie können auch Dateien (und Ordner) in andere Ordner verschieben, indem Sie sie darauf ziehen und ablegen.

Lassen Sie uns dies erkunden und dabei unsere index.html-Datei in einen eigenen Unterordner verschieben. Wir möchten sie nicht wirklich im Hauptordner web-projects haben.

1. Erstellen Sie einen neuen Ordner innerhalb von web-projects, indem Sie im EXPLORER-Fenster von VS Code auf die Schaltfläche Neuer Ordner... klicken.
2. Benennen Sie ihn test-site.
3. Jetzt sollten Sie in der Lage sein, die index.html-Datei zu ziehen und auf den test-site-Ordner abzulegen, um die Datei in diesen Ordner zu verschieben.

   Hinweis: Wenn Sie ein Tastaturbenutzer sind, können Sie dies mit den folgenden Schritten tun:

   1. Verwenden Sie die Pfeiltasten auf und ab, um den Fokus auf die Datei index.html zu legen.
   2. Drücken Sie Cmd + X auf macOS (Strg + X auf Windows), um die Datei zum Verschieben auszuwählen.
   3. Verwenden Sie die Pfeiltasten, um den Fokus auf den Ordner zu legen.
   4. Drücken Sie Cmd + V auf macOS (Strg + V auf Windows), um die Datei in diesen Ordner zu verschieben.

Es gibt weitaus mehr, was wir über die Bedienung von Dateisystem-UIs des OS und VS Code sagen könnten, aber wir haben begrenzten Platz, daher belassen wir es dabei. Dies hat Ihnen genug Informationen gegeben, um loszulegen, und wir empfehlen Ihnen, im Internet nach Informationen zu suchen, wie man andere Dinge mit Dateien und Ordnern tut.

Lasst uns jetzt zu einer kurzen Diskussion über die Struktur von Websites übergehen.

Wenn Sie lokal (auf Ihrem Computer) an Websites arbeiten, sollten Sie alle zugehörigen Dateien für jede Website in einem einzigen Ordner aufbewahren. Umgekehrt sollten Sie alle Ihre Website-Ordner in einem zentralen Ordner aufbewahren, damit sie alle leicht zu finden sind.

Bereits früher im Artikel haben wir Sie angewiesen, einen zentralen Ordner namens web-projects zu erstellen, um alle Ihre Website-Projekte zu speichern. Wir haben Sie auch dazu veranlasst, einen Unterordner namens test-site mit einer leeren index.html-Datei darin zu erstellen.

Lassen Sie uns einige weitere Funktionen zu test-site hinzufügen, um eine typische Website-Struktur zu demonstrieren. Im nächsten Modul werden Sie ein vollständiges Website-Beispiel darin aufbauen. Die häufigsten Dinge, die jedes Website-Projekt enthalten wird, sind eine Index-HTML-Datei und Ordner zum Speichern von Bildern, Style-Dateien und Script-Dateien:

1. index.html: Diese Datei wird im Allgemeinen Ihre Homepage-Inhalte enthalten, das heißt, den Text und die Bilder, die Menschen sehen, wenn sie Ihre Website zum ersten Mal aufrufen.
2. images-Ordner: In diesem Ordner werden alle Bilder gespeichert, die Sie auf Ihrer Website verwenden.
3. styles-Ordner: In diesem Ordner wird der CSS-Code gespeichert, der zum Stylen Ihrer Inhalte verwendet wird (zum Beispiel das Festlegen von Text- und Hintergrundfarben).
4. scripts-Ordner: In diesem Ordner wird der gesamte JavaScript-Code gespeichert, der verwendet wird, um interaktive Funktionalität zu Ihrer Website hinzuzufügen (zum Beispiel das Bestimmen, was passiert, wenn Schaltflächen geklickt werden).

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

Es gibt in der Regel zwei Teile zu einem Dateinamen — den Namen und die Erweiterung. Nehmen Sie die Datei, die wir oben erstellt haben — index.html:

• Der Name in diesem Fall ist index. Dateinamen können im Allgemeinen beliebige Zeichen enthalten, obwohl verschiedene Computersysteme unterschiedliche Einschränkungen zu den verwendbaren Zeichen haben. Es ist besser, sich vorerst nur mit Zahlen und Buchstaben zu beschäftigen. Darüber hinaus können Systeme bestimmten Namen oder Namensanteilen eine besondere Bedeutung zuweisen — wie wir bereits gesagt haben, werden index-Dateien in der Regel als Hauptstartdatei einer Website erkannt.
• Die Dateierweiterung identifiziert den Dateityp, mit dem wir arbeiten, und wird von Computersystemen verwendet, um zu identifizieren, welche Art von Inhalt die Datei enthält, welches Programm sie zum Öffnen der Datei verwenden sollen usw. In diesem Fall lautet die Erweiterung .html, was bedeutet, dass die Datei einfachen Text und insbesondere HTML-Code enthalten sollte. Aufgrund der Erweiterung weiß Ihr Computer, dass er beim Öffnen der Datei Ihren Standard-Text-Editor verwenden soll, der VS Code sein sollte, wenn Sie alle unsere Anweisungen befolgt haben.

Es trifft nicht in allen Fällen zu, aber die meisten Dateien benötigen eine Erweiterung, um ordnungsgemäß behandelt zu werden. Das Entfernen oder Ändern der Dateierweiterung wird wahrscheinlich Fehler verursachen, also sollten Sie sie 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 Erweiterungen für bekannte Dateitypen ausblenden aktiviert hat. Sie können dies deaktivieren, indem Sie den Datei-Explorer öffnen, die Option Ordneroptionen… auswählen, das Kontrollkästchen Erweiterungen für bekannte Dateitypen ausblenden deaktivieren und dann auf OK klicken. Für detailliertere Informationen, die Ihre Windows-Version betreffen, können Sie im Internet nachschlagen.

Im Verlauf dieses Kurses werden Sie feststellen, dass wir Sie immer bitten, Ordner- und Dateinamen vollständig in Kleinbuchstaben ohne Leerzeichen zu schreiben. Es gibt viele Arten, in denen das Ignorieren dieses Rats Probleme verursacht – einige der häufigsten sind:

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

Anstelle von Leerzeichen verwenden viele Entwickler ein Trennzeichen wie ein Bindestrich (-) anstelle eines Leerzeichens — 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 Bindestrichen zwischen den Wörtern zu schreiben, zumindest bis Sie wissen, was Sie tun. Auf diese Weise werden Sie auf weniger Probleme stoßen.

Um von einer Datei auf eine andere zu verweisen, müssen Sie einen Datei-Pfad angeben — im Wesentlichen eine Route, damit eine Datei weiß, wo sich eine andere befindet. Zum Beispiel, wenn Sie eine Webseite erstellen, die ein Bild enthält, muss Ihr Webseiten-Code einen Datei-Pfad enthalten, der den Speicherort des anzuzeigenden Bildes angibt.

Lassen Sie uns ein einfaches Beispiel dazu durchgehen. Es ist in Ordnung, wenn Sie jetzt nicht alles verstehen.

1. Suchen Sie im Internet nach einem Bild, das Ihnen gefällt (zum Beispiel, indem Sie einen Dienst wie Google Bilder verwenden), und laden Sie es herunter. Alternativ können Sie einfach unser Firefox-Logo-Bild für dieses Beispiel verwenden.
2. Legen Sie das Bild in Ihren images-Ordner.
3. Stellen Sie sicher, dass die Bilddatei kurz und einfach benannt ist, ohne Leerzeichen. Zum Beispiel ist firefox-icon.png gut, und cat.jpg ist gut, aber efregre^%^£$£@%$^&YTJgfbgfdgt54656756_ertgrth-rtgtfghhyj.png ist nicht gut. Stellen Sie auch sicher, dass Sie die Dateierweiterung beibehalten.

Nun fügen wir der index.html-Datei Inhalt hinzu, damit sie die Bilddatei findet und anzeigt.

1. Öffnen Sie Ihre index.html in VS Code und fügen Sie den folgenden Inhalt genau wie unten gezeigt in die Datei ein. Dies ist HTML, die Sprache, die wir verwenden, um Webseiteninhalte zu definieren und zu strukturieren. Darüber werden Sie bald viel mehr 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 dem HTML sagen, wo sich das Bild befindet. Da sich das Bild im Ordner images befindet, der im selben Ordner wie index.html liegt, ist der Datei-Pfad, den wir benötigen, images/Ihr-Bild-Dateiname. Wenn Ihr Bild beispielsweise firefox-icon.png genannt wird, wäre der Datei-Pfad images/firefox-icon.png.

3. Fügen Sie den Datei-Pfad in Ihren HTML-Code zwischen die doppelten Anführungszeichen von src="".

4. Speichern Sie Ihre HTML-Datei und laden Sie sie dann in Ihrem Webbrowser. Sie können dies tun, indem Sie mit Ctrl/Rechtsklick auf die HTML-Datei klicken und dann Öffnen mit auswählen und einen Webbrowser aus dem erscheinenden Untermenü wählen. Sie könnten auch das Datei-Explorer-UI und ein Browserfenster auf demselben Bildschirm öffnen und die HTML-Datei einfach in das Browserfenster ziehen.

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

• Um auf eine Zieldatei im gleichen Ordner wie die aufrufende HTML-Datei zu verweisen, 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 in dem Ordner über der aufrufenden 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 Kombinationen so oft verketten, wie Sie möchten, zum Beispiel ../subfolder/another-subfolder/my-image.jpg.

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