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 und erstellen eine Seite, welchen einen simplen Text darstellt. Dafür musst du zuerst einen Ordner erstellen, in dem du später deine Projekt-Dateien speichern kannst. 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 und speichere deine Änderungen (beispielsweise mit “ctrl” + “s”. Kopiere jetzt 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 vielleicht Zeilenumbrüche und mehrere Leerschläge hattest, sind diese im Browser nun nicht sichtbar. Willst du deinen Text strukturieren, kannst du den Text mithilfe von HTML-Tags formatieren. Der HTML-Code könnte dann zum Beispiel so aussehen:

1
2
3
4
5
6
7

<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 wir hier genau gemacht haben, erfährst du auf der nächsten Seite.