Erste Seite erstellen

Ziele

• Ich weiss, wie ich eine HTML-Seite erstellen kann.
• Ich weiss, wie ich meine erstellte HTML-Seite im Browser anschauen kann.

Eine HTML-Seite mit formatiertem Text erstellen

Wir beginnen ganz unkompliziert. Erstellen wir zuerst eine Text-Datei. Dafür erstellen wir zuerst ein Ordner, in dem wir später unsere Projekt-Dateien speichern. Anschliessend kannst du diesen Ordner mit der IDE (Integrated Development Environment = Entwicklungsumgebung) deiner Wahl öffnen (hier VS Code). Erstelle nun eine neue HTML-Datei im soeben erstellten Ordner. In VS Code kannst du das z.B. wie folgt machen:

Fülle diese Datei nun mit einem beliebigen Text. Speichere diese Datei. Kopiere nun den Pfad zu dieser Datei. In VS Code kannst du den Pfad mit einem Rechtsklick auf die Datei kopieren:

Gib diesen Pfad im Browser deiner Wahl ein. Du solltest nun einen unformatierten Text im Browser sehen:

Obwohl du vorher evtl. Zeilenumbrüche und mehrere Leerschläge hattest, sind diese im Browser verschwunden. Willst du deinen Text strukturieren, kannst du den Text mit Hilfe von HTML-Tags formatieren. Der HTML-Code könnte dann z.B. dann so aussehen:

1
2
3
4
5
6

<h1>Kleiner Witz</h1>

<p>Wie viele Softwareentwickler braucht man, 
um eine Glühbirne auszuwechseln?</p>

<p>Keinen, das ist ein Hardware-Problem!</p>

Nun hast du eine Seite mit formatiertem Text:

Was haben wir hier genau gemacht? Das erfährst du auf der nächsten Seite.