1.1/2: Hallo Welt

Eine Webseite besteht im einfachsten Fall aus einem oder mehreren HTML-Dokumenten. Dabei handelt es sich im Grunde um einfache Textdateien. Einfache HTML-Dokumente können von jedem erstellt werden, der mindestens einen Texteditor zur Verfügung hat. Hierfür können sogar ganz einfache Texteditoren verwendet werden, wie sie jedes Betriebssystem vorinstalliert hat. Unter Microsoft Windows kommt Editor zum Einsatz, während auf Mac-Systemen TextEdit genutzt werden kann. Für erste Schritte sind also keine professionellen Werkzeuge wie eine vollständige Entwicklungsumgebung oder der Einsatz eines Webservers erforderlich, sondern es genügt ein Computer mit einem Webbrowser.

Ein HTML-Dokument ist zunächst eine einfache Textdatei mit der spezifischen Dateierweiterung .html, die unterschiedliche Textpassagen und codierte Auszeichnungen enthält. Bevor wir uns aber die genauen Strukturen eines solchen HTML-Dokuments ansehen, beginnen wir mit einem ersten einfachen Beispiel.

Praxisaufgabe

Öffnen Sie ein neues Fenster im Windows Explorer, indem Sie die "Windows"-Taste gedrückt halten und gleichzeitig die "E"-Taste drücken. Unter Mac OS drücken Sie die Tastenkombination "cmd" und "N".

Erstellen Sie ein neues Verzeichnis (in unserem Beispiel verwenden wir C:\html, bzw. /html für Mac OS und Linux), indem Sie mit der rechten Maustaste auf das Laufwerk C klicken und neu -> Ordner wählen. Geben Sie nun als Namen für das neu erstellte Verzeichnis html ein.

So sieht es aus (Windows)

So sieht es aus (Mac OS)

Erstellen Sie im Verzeichnis html eine Textdatei mit dem Namen hello_world.html. Dazu klicken Sie unter Microsoft Windows mit der rechten Maustaste auf das Verzeichnis html und wählen Neu -> Textdokument.

So sieht es aus

Unter Mac OS müssen Sie zunächst das Programm TextEdit öffnen, indem Sie "cmd" + "Leertaste" drücken und im daraufhin erscheinenden Dialog TextEdit eingeben. Drücken Sie nun die "Enter"-Taste, um den Texteditor zu starten. Zum Speichern der leeren Datei drücken Sie nun "cmd" + "s". Geben Sie anschließend den Dateinamen hello_world ein, wählen das Dateiformat Webseite (.html) aus und selektieren das Verzeichnis html. Klicken Sie jetzt auf Sichern.

So sieht es aus

Öffnen Sie diese Datei nun unter Windows mit dem Texteditor, indem Sie mit der rechten Maustaste auf die Datei klicken und unter Öffnen mit das Programm Editor wählen. Unter Mac OS haben Sie den Editor bereits geöffnet und können in diesem Fenster fortfahren. Tragen Sie nun den folgenden Inhalt in die Datei ein und speichern die Datei anschließend.

<!DOCTYPE html>
<html>
   <head>
      <title>Kapitel 1 - Hallo Welt</title>
   </head>

   <body>
      <h1>Hallo Welt</h1>
      <p>Herzlich willkommen zum Kurs 
         "Webtechnologien - HTML, CSS, JavaScript"!</p>
   </body>
</html>

Wenn Sie die Datei nun mit einem Doppelklick öffnen, sollten Sie die folgende Ansicht in Ihrem Standard-Browser sehen.

Abbildung: Inhalt der Datei <em>hello_world.html</em>

Beschreibung zur Abbildung

Abbildung: Inhalt der Datei hello_world.html

Hinweis

Die vollständige HTML-Datei finden Sie im Kursverzeichnis unter work/Kapitel1/hello_world.html.

Damit haben Sie Ihre erste einfache HTML-Seite erstellt!