Das Grundgerüst – HTML

Zuletzt bearbeitet am 5. August 2023 Gepostet am 19. Juli 2023

Sarah Gosch (sargosch@tsn.at)

Allgemein

Um die unterschiedlichen Technologien der Webentwicklung besser zu verstehen, werden wir in den kommenden Unterbeiträgen gemeinsam eine kleine Website erstellen. Dabei legen wir zunächst das Grundgerüst – den HTML-Code. Du kannst aktiv mitmachen, indem Du den Tryit Editor von W3Schools nutzt. In der realen Welt bräuchtest Du für den Betrieb einer Website einen Server, aber für unsere Übung reicht dieser Editor vollkommen aus. Du kannst den Code einfach in das linke Fenster des Editors eingeben und auf „Run“ klicken, um deine Seite im rechten Fenster zu sehen.

Das ist unser Ziel – so sollte unsere fertige Website aussehen. Die benötigten HTML-Elemente stellen wir Dir gleich vor.

<title>: Dieses Element definiert den Titel der Webseite, den man in der Titelleiste des Browsers sieht („Meine erste Website“; hier nicht ersichtlich).
<h1>: Dies ist die Überschrift erster Ordnung und repräsentiert die wichtigste Überschrift auf der Seite („Willkommen auf meiner ersten Website!“).
<h2>: Das ist eine Überschrift zweiter Ordnung, die wir für den Titel des Hauptinhalts verwenden („Über diese Website“).
<p>: Dieses Absatzelement verwenden wir, um einen informativen Text über die Webseite zu schreiben („Diese Website ist ein einfaches Beispiel…“).
<button>: Dieser Button ist so programmiert, dass er beim Klicken eine JavaScript-Funktion auslöst („Klick mich!“; auf das werden wir später noch genauer eingehen).

Es gibt noch weitere Elemente, die für die Erstellung einer Website unverzichtbar sind. Ohne diese Elemente wäre es nicht möglich, eine funktionsfähige Website zu erstellen. Hier sind sie:

<!DOCTYPE html>: Dies teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. Es sollte immer an der Spitze eines jeden HTML-Dokuments stehen.
<html>: Dies ist das Wurzelelement, in dem sich alle anderen HTML-Elemente befinden.
<head>: Hier stehen die Metainformationen über das Dokument. In unserem Code enthält es das <title>-Element.
<body>: Innerhalb dieses Elements befindet sich der Hauptinhalt der Webseite, den die Nutzer sehen.
<header>: Dies ist ein Container für einleitenden Inhalt oder einen Satz von Navigationslinks. In unserem Beispiel befindet sich hier der Haupttitel (<h1>).
<main>: Dieses Element repräsentiert den Inhalt des Dokuments. In unserem Beispiel befinden sich das <h2>-Element, das <p>-Element und das <button>-Element.

Falls Dich diese Begriffe im Moment noch verwirren, keine Sorge! Du wirst im Laufe des Unterrichts am IT-Kolleg Imst alles über sie lernen.

Jetzt schauen wir uns den vollständigen Code an:

Du kannst diesen Code in den Tryit Editor von W3Schools einfügen und auf „Run“ klicken. Du solltest nun eine einfache, unformatierte Version unserer Website sehen. Wenn Du auf den Button „Klick mich!“ klickst, passiert noch nichts – aber keine Sorge, das werden wir im Laufe unserer Lektionen beheben.