Bitte aktivieren Sie JavaScript in Ihren Browsereinstellungen, damit die Seiten korrekt dargestellt werden können.

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