[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 5: Datei- und Ordnernamen, Sonderzeichen, Pfadangaben

Hier lernst du was man bei den Dateinamen einer HTML - Datei, Bezeichnungen von Ordnern in denen HTML - Dateien gespeichert, der Verwendung von Sonderzeichen und Pfadangaben beachten sollte.

⇑Festlegung des Ordnernamens

Webseiten sollten nur in Ordnern gespeichert werden die KEINE Umlaute, Sonderzeichen, Beistriche und Leerzeichen beinhalten, da ansonsten deine Webseiten vielleicht nicht aufgerufen werden können.!
Verwende z.B. anstelle eines Leerzeichens oder Beistrichs einen Unterstrich und anstelle eines Umlautes wie ö ein oe:
falsch: mein erster, zweiter Lösungsordner
richtig: meine_erste_zweite_Loesungsordner

⇑Festlegung des Dateinamens

HTML - Dateien haben in der Regel immer die Endung .html oder viel seltener .htm
Die Startseite bzw. Einstiegsseite einer Homepage sollte immer in einer Datei mit dem Dateinamen index.html bzw. index.htm gespeichert werden.
Darüberhinaus würde ich dir empfehlen bei der Wahl eines Dateinamens darauf zu achten, dass
* alles klein geschrieben wird
* KEINE Leerzeichen enthalten sind
* KEINE Sonderzeichen wie z.B. Umlaute, Punkte, Backslash (/) etc. enthalten sind

⇑Verwendung von Sonderzeichen / Codierung

Damit die Texte deiner Webseite in allen Ländern und Browser richtig dargestellt werden müssen Sonderzeichen wie etwa Umlaute oder das "scharfe S" (ß) in einer HTML - Datei "richtig" eingegeben werden - man spricht in diesem Zusammenhang von der korrekten Codierung.
Bei unserem HTML5 - Grundgerüst verwenden wird die so genannte UTF-8 Codierung (englisch: charset):
<meta charset="UTF-8">
Dein Quelltext wird normalerweise vom Visual Stuio Code (VSC) automatisch im UTF-8 - Format in einer Datei gespeichert wenn du als Dateityp .html im Editor gewählt hast. Man kann rechts unten im VSC - Editor überpüfen welche Codierung eingestellt ist - es müsste hier bei dir "UTF-8" stehen - siehe hierzu die untere Abbildung:
UTF-8 Kontrolle

⇑Pfadangaben

Wenn man in HTML auf eine andere Seite einen Link erstellen möchte oder eine Grafik in eine Webseite einbinden möchte muss man als Programmierer den Pfad zur anderen Webseite oder der Grafik angeben.
(Stark vereinfacht) können wir Pfade in der folgenden Art und Weise angeben:
* vollständiger Pfad - Beispiele:
https://www.wirlernen.at
https://www.oppitz.org/index.html
Im obigen Beispiel wird der vollständige Pfad zur Datei incl. Protokolle (https) incl. :// angegeben. Solche vollständigen Angaben sind innerhalb der eigenen Homepage in der Regel NICHT notwendig.
* Hier folgen Beispiele für Verweise auf Dateien in z.T. UNTERSCHIEDLICHEN Ordner des GLEICHEN Servers:

* Verweis auf eine Datei im gleichen Ordner - siehe obige Abbildung - Fall 1
(1) Pfad von index.html auf urlaub.html - es reicht die Angabe des Dateinamens: urlaub.html
* Verweis auf eine Datei in einem Unterordner - siehe obige Abbildung - Fall 2
(2) Pfad von index.html auf wels.html im Unterordner oberoesterreich - es erfolgt VOR Angabe des Dateinamens der Namen des Ordners: oberoesterreich/wels.html
* Verweis auf eine Datei in einem Unter- Unter - Ordner - siehe obige Abbildung - Fall 3
(3) Pfad von index.html auf katsdorf.html im Ordner gemeinde welcher sich Unterordner oberoesterreich befindet - es erfolgen VOR Angabe des Dateinamens die Namen der Ordner: oberoesterreich/gemeinde/katsdorf.html
* Verweis auf eine Datei in den 2ten übergeordneten Ordner - siehe obige Abbildung - Fall 4
(4) Pfad von katsdorf.html auf hobbys.html in den 2ten übergeordneten Ordner - es erfolgt VOR Angabe des Dateinamens die Angabe von ../../ - jedes ../ steht für einen übergeordneten Ordner: ../../hobbys.html
* Verweis auf eine Datei in den übergeordneten Ordner - siehe obige Abbildung - Fall 5
(5) Pfad von katsdorf.html auf wels.html in den übergeordneten Ordner oberoesterreich - es erfolgt VOR Angabe des Dateinamens die Angabe ../ : ../wels.html
Für mehr Infos klicke hier OBEN auf der Seite auf das Video - Symbol...
⇑ Augabenstellung:
1. Erkläre mit eigenen Worten (also nicht irgendwo abschreiben :-) was man bei der Wahl eines Ordner- und Dateinamens beachten sollte!
2. Beurteile die folgenden Ordnernamen:
   * überaschungs - ordner
   * übungsordner html
3. Beurteile die folgenden Dateinamen:
   * räuber .html
   * über raschung mit html .html
4. Erkläre mit eigenen Worten (also nicht irgendwo abschreiben :-) was man überhaupt unter einem Sonderzeichen versteht!
5. Welche Codierung wird bei HMTL5 verwendet?
6. Wie wird im HTML - Grundgerüst die Codierung für HTML5 angegeben?
7. Erkläre mit eigenen Worten (also nicht irgendwo abschreiben :-) was man unter einer Pfadangabe versteht!
8. Wenn du die obige Abbildung zum Thema Pfadangabe betrachtest:
   * Nenne den Pfad eines Verweises von urlaub.html auf wels.html
   * Nenne den Pfad eines Verweises von urlaub.html auf katsdorf.html
   * Nenne den Pfad eines Verweises von wels.html auf katsdorf.html
   * Nenne den Pfad eines Verweises von wels.html auf index.html