1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: Dateien nutzen
slug: Learn/Getting_started_with_the_web/Dealing_with_files
tags:
- Anfänger
- Datei
- Dateien
- HTML
- Pfad
- Webseite
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
original_slug: Learn/Getting_started_with_the_web/dateien_nutzen
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
<div class="summary">
<p>Eine Webseite besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn Sie eine Webseite erstellen, müssen Sie diese Dateien in einer sinnvollen Struktur speichern und sicherstellen, dass die Dateien miteinander kommunizieren können. Die Webseite sollte reibungslos funktionieren, bevor Sie alles auf einen Server hochladen. Dieser Artikel erklärt den Umgang mit Dateien, sodass Sie eine sinnvolle Dateistruktur für Ihre Website erstellen können.</p>
</div>
<h2 id="Wo_auf_Ihrem_Computer_soll_die_Webseite_liegen">Wo auf Ihrem Computer soll die Webseite liegen?</h2>
<p>Wenn Sie an der Webseite »lokal« (auf dem eigenen Computer) arbeiten, sollten Sie 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 Sie sollten ihn dort speichern, wo Sie ihn wiederfinden können - vielleicht auf ihrem Desktop oder in einem Nutzerordner.</p>
<ol>
<li>Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der <em>»webprojekte«</em> heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.</li>
<li>In diesem Ordner erstellen Sie einen weiteren Ordner, in dem Sie ein bestimmtes Projekt speichern, in diesem Fall Ihre erste Webseite. Nennen Sie den Ordner<em> »erste-webseite«.</em></li>
</ol>
<h2 id="Eine_Bemerkung_zu_Großschreibung_und_Leerzeichen">Eine Bemerkung zu Großschreibung und Leerzeichen</h2>
<p>In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:</p>
<ol>
<li>Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens <code>MeinBild.jpg</code> abspeichern und dann darauf zugreifen möchten, funktoniert <code>meinbild.jpg</code> nicht. Für den Computer sind <code>MeinBild.jpg</code> und <code>meinbild.jpg</code> ganz unterschiedliche Dateien.</li>
<li>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: <code>Mein Bild</code>.jpg würde als eine Datei namens <code>Mein</code> und eine Datei namens <code>Bild.jpg</code> interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge <code>"%20"</code> (der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen: <code>Mein Bild.jpg</code> wird nämlich zu <code>Mein%20Bild.jpg</code>.</li>
</ol>
<p>Deshalb ist es am besten, sich anzugewöhnen Namen von Ordnern und Dateien ohne Leerzeichen und nur in Kleinbuchstaben zu vergeben. So vermeidet man Probleme.</p>
<h2 id="In_welcher_Struktur_sollten_Sie_Ihre_Dateien_ablegen">In welcher Struktur sollten Sie Ihre Dateien ablegen?</h2>
<p>In dem Ordner Ihres Webseiten-Projektes (<a href="#websiteWo">siehe oben</a>) werden Sie meistens eine <code>index.html</code>-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:</p>
<ol>
<li><code><strong>index.html</strong></code>: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Datei <code>index.html</code>. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namen <code>index.html</code> in Ihrem Projektordner (der mit dem Namen »<em>erste-website«</em>) ab.</li>
<li><code><strong>Bilder-Ordner</strong></code>: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namen <code>bilder</code> in dem Projektordner (»<em>erste-website«</em>).</li>
<li><strong><code>Styles-Ordner</code></strong>: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namens <code>styles</code> in Ihrem Projektordner.</li>
<li><code><strong>Scripts-Ordner</strong></code>: Dieser Ordner wird Dateien enthalten, die interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstellen Sie einen Ordner mit den Namen <code>scripts</code> in Ihrem Projektordner.</li>
</ol>
<div class="note">
<p><strong>Hinweis</strong>: Auf Windows-Computern kann es sein, dass die Dateinamen nicht ganz zu sehen sind. Es gibt eine Option mit dem Namen »Erweiterungen bei bekannten Dateitypen ausblenden«. Diese ist normalerweise eingeschaltet. Man kann die Funktion deaktivieren, wenn man in den Windows-Explorer geht, <strong>Ordner-Optionen</strong> wählt und <strong>Erweiterungen bei bekannten Dateitypen ausblenden</strong> abwählt und dann<strong> OK</strong> drückt.</p>
</div>
<h2 id="Dateipfade">Dateipfade</h2>
<p>Damit Dateien untereinander kommunizieren können (wenn z.B. in der .html-Datei einer Seite ein Bild eingebunden ist), müssen Sie einen Dateipfad 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 <code>index.html</code>-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel (<a href="/de/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Wie soll Ihre Webseite aussehen?"</a>) ausgewählt haben, anzeigen.</p>
<ol>
<li>
<p>Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner <code>bilder</code>.</p>
</li>
<li>
<p>Öffnen Sie die Datei <code>index.html</code> in einem Texteditor und fügen den folgenden Code genau so ein. (Keine Angst, Sie werden die Bedeutung dieser Befehle später noch kennen lernen.)</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mein Testseite</title>
</head>
<body>
<img src="" alt="Mein Testbild">
</body>
</html> </pre>
</li>
<li>Die Zeile <code><img src="" alt="Mein Testbild"></code> 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 <code>bilder</code>, welcher in dem selben Ordner wie <code>index.html</code> ist. Um in diesen Unterordner zu gelangen, müssen wir <code>bilder/DeinBildName</code> eingeben. Wenn das Bild z.B. <code>firefox-icon.png</code> genannt ist, müssen wir <code>bilder/firefox-icon.png</code> eintippen.</li>
<li>Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei <code>src=""</code> ein.</li>
<li>Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.</li>
</ol>
<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
<p>Ein paar Grundregeln für Dateipfade:</p>
<ul>
<li>Um eine Zieldatei am selben Speicherort zu verlinken, können Sie einfach den Dateinamen eingeben. Beispiel: <code>mein-bild.jpg</code></li>
<li>Um eine Datei in einem Unterordner zu verlinken müssen Sie es so machen wie in dem Beispielprojekt oben. <code>Beispiel: bilder/mein-bild.jpg</code></li>
<li>Wenn Sie ein Bild in dem Ordner <strong>darüber</strong> verlinken wollen, müssen Sie zuerst zwei Punkte machen: <code>../mein-bild.jpg</code></li>
<li>Dies können Sie kombinieren, so viel Sie wollen: <code>../irgendeinordner/einandererordner/usw/mein-bild.jpg</code></li>
</ul>
<p>Momentan ist das alles, was Sie wissen müssen.</p>
<div class="note">
<p><strong>Achtung:</strong> Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. <code>C:\windows</code>. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.</p>
</div>
<h2 id="Was_sollte_sonst_noch_getan_werden">Was sollte sonst noch getan werden?</h2>
<p>Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen:</p>
<p><img alt="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" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
|
