Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03362.jsonl.gz/346

Lektion 01: Grundgerüst einer HTML-Datei
Link zu SELFHTML
Dieser Link führt zu einer Site, wo Du alles über HTML erfährst.
Du kannst hier selbständig weiterlernen, wenn Du möchtest.
Eine HTML-Datei besteht grundsätzlich aus 4 Teilen
- Dokumenttyp-Deklaration
<!DOCTYPE html>
- HML-Wurzelelement
<html>
- head
<head>
- body
<body>
Die Elemente in einem HTML-Dokument sind auf hierarchischen Ebenen angeordnet, ähnlich den Ordnern und Dateien auf Deiner Festplatte. Das erste Element
in dieser Hierarchie (und damit das hierarchisch höchste Element) ist das
<html>-Element.
Alle darunterliegenden Elemente sind von ihm abhängig. Die
Dokumenttyp-Deklaration steht zwar immer zuoberst auf einer
HTML-Seite, ist aber noch nicht Teil der Hierarchie. Die Hierarchie
beginnt erst mit dem nächsten Element
<html>. Man nennt es das Wurzelelement oder Root-Element. Alle anderen
Elemente (hier also
<head> und <body>)sind diesem
<html>-Root-Element untergeordnet und hängen von ihm
ab.
Deine erste HTML- Webseite
Lege in Deinem persönlichen Dokumenten-Ordner (zB. Eigene Dateien) auf Deinem Computer einen
Ordner mit dem Namen JPO_Website (beachte den Unterstrich)
an. In diesem Ordner platzierst Du einen weiteren Ordner mit dem
Namen adinterim und in diesem Ordner platzierst Du einen
dritten Ordner mit dem Namen ausbildung.
Der Unterstrich beim Ordnernamen JPO_Website wäre auf Deinem
Computer nicht notwendig. Wir bereiten uns aber bereits jetzt darauf
vor, dass unsere Website unter Umständen auf einem Server mit einem anderen
Betriebssystem laufen wird. Und da gibt es
Betriebssysteme, die erlauben kein Leerzeichen im Namen von Ordnern
und Dateien. Statt des Leerzeichens setzen wir also den Unterstrich.
Wir taufen den Ordner übrigens ganz bewusst mit dem englischen
Namen Website. Eine Website ist die Bezeichnung für
einen vollständigen Web-Auftritt. Eine Website besteht also aus
einer Sammlung von Ordnern und HTML-Webseiten
(beachte den Unterschied von site und seite)
Dann öffnest Du einen Texteditor (zum Beispiel Word), legst ein
neues Dokument an und speicherst es leer, so wie es jetzt ist. Achte
darauf, dass Du das Dokument im Textformat und nicht
etwa im Word-Format mit der Endung .doc oder .docx speicherst. Das
Dokument hat also die Endung ".txt". Gib ihm den Namen "index". Der
vollständige Name des Dokuments ist: index.txt.
Das ergibt auf meiner Festplatte folgende Struktur. Je nach
Betriebssystem (etwa bei Windows XP oder auf dem Mac) kann es bei
Dir beim obersten Ordner
Abweichungen geben.
Hier siehst Du eine hierarchische Anordnung von Ordnern auf
meiner Festplatte.Der oberste Ordner JPO_Website ist der Root-Ordner
(Wurzel-Ordner) unserer
Website.
Weil der Ordner mit dem Namen JPO_Website auf meiner
Festplatte nicht alleine ist, ist er wiederum Teil einer
Baumstruktur, ist also selber ein Unterordner auf einem Laufwerk und
von anderen Ordnern.
Der grau unterlegte Text
C:\Users\Felix Baumgartner\Documents\JPO_Website beschreibt
einen Pfad. C: meint das Laufwek C. Auf diesem Laufwerk hat es einen
Ordner Users. Darin hat es einen Unterordner Felix
Baumgartner. Darin hat es wiederum einen Unterordner
Documents. Darin hat es wiederum einen Unterordner
JPO_Website". Dann folgen die weiteren Unterordner, die Du
vorhin selber angelegt hast. Im Unterordner ausbildung liegt das
Dokument index.txt.
Ich beschreibe das jetzt so ausführlich, weil bei HTML ein
ähnliches System von hierarchisch angeordneten Elementen besteht.
Diese Hierarchie bedeutet auch Abhängigkeit. Die Abhängigkeit
besteht von unten nach oben. Das Dokument index.txt ist abgelegt im
Ordner ausbildung. Wenn Du diesen Ordner löschen würdest, dann
würde mit ihm auch die Datei index.txt gelöscht. Wenn Du den Ordner
adinterim löschen würdest, würde mit ihm auch der Unterordner
ausbildung und mit diesem auch das File index.txt gelöscht.
Diese Abhängigkeit wird bei HTML im Zusammenhang mit CSS genutzt.
Ohne jetzt näher auf CSS einzugehen: Wenn Du in CSS bestimmst, dass die
Schriftfarbe im
<html>-Element, also im Wurzel-Element
rot sein soll, dann wird die
Schrift automatisch auch in allen Unterelementen rot sein. Hier also auch im
<body>-Element.
Das <head>-Element enthält (mit Ausnahme des Seitentitels)
keinen Text, der im Broser ausgegeben wird, In späteren Lektionen erfährst Du mehr darüber.
Hallo Welt!
Jetzt aber zu Deiner ersten Webseite. Du hast ein einfaches
Textdokument mit dem Namen index.txt angelegt. Öffne dieses Dokument
wiederum mit dem Textprogramm, mit welchem Du es angelegt hattest.
Bei unserem Beispiel war es Word. Es kann aber auch ein ganz
einfacher Text-Editor sein, der in jedem Betriebssystem zur
Verfügung steht (in Windows zum Beispiel Notepad. Ab Windows 7
heisst dieses kleine Programm schlicht "Editor".)
Tippe jetzt folgendes ein. Beachte dabei, dass
Du wirklich jeden Buchstaben und jedes Zeichen ganz genau so
schreibst, wie es hier steht, also auch die Gross- oder
Kleinschreibung sowie die Einzüge, die Du mit dem Tabulator machen
kannst:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hallo Welt!
</body>
</html>
Du könntest diesen obenstehenden Text auch mit Ausschneiden und
Einfügen in Dein index.txt-Dokument hineinkopieren und Dir dabei die
Tipparbeit ersparen. Ich rate Dir jedoch dringend, jedes Zeichen und
jeden Buchstaben selber zu tippen. So lernen auch Deine Augen und
Deine Finger HTML und Du machst Erfahrungen damit, wie es ist, wenn
ein Zeichen wie zum Beispiel ein < vergessen worden ist. Mit der
Zeit bekommst Du einen Blick für diese Schrift und die Fehlersuche
(mit der die Programmierer einen grossen Teil ihrer Arbeitszeit
verbringen) fällt
dem Auge leichter.
Schliesse dieses Dokument und öffne den Datei-Explorer (in
Windows meistens "Explorer" genannt, bei Mac "Finder"). Gehe zu
Deinem Ordner JPO_Website und dort in den Unterordner ausbildung,
wo Du das vorher redigierte Dokument index.txt wieder findest.
Ändere jetzt die Dateiendung von txt zu html. Falls Du keine
Dateiendung siehst, google mit folgendem Suchbegriff: "Windows XP
Dateiendungen anzeigen". Oder: "Windows 7 Dateiendungen anzeigen."
Du weisst, was ich meine...
Das Dokument heisst
jetzt also index.html. Klicke doppelt darauf. Es wird vom
Internetbrowser geöffnet und zeigt Deine erste Webseite. Dort heisst
es: Hallo Welt! Ich gratuliere Dir zu Deiner ersten Webseite. Wenn
Du sie mit meiner Hallo-Welt-Seite vergleichen möchtest, folge diesem Link. Im Webbrowser findest Du beim Klick auf die
rechte Maustaste ein Untermenue, das Dir den Code der aktuellen
Seite anzeigt. Im Internet-Explorer heisst dieser Menue-Punk zum
Beispiel "Quellcode anzeigen". So kannst Du jede beliebige Webseite
studieren und viel über HTML lernen.
Nebenbei: Es ist Tradition bei Programmiererinnen und Programmierern,
dass die erste Textausgabe, die sie mit den neu zu erlernenden
Programmierkenntnissen auf einem Medium ausgeben, "Hallo Welt!"
heisst...
In der nächsten Lektion werden wir Deine erste Website näher
anschauen und weitere Inhalte dazufügen.
©
Felix Baumgartner | Graben 111 | 3673 Linden | www.lebensart.me