MINT lernen

Aufbau einer Website

Ein Rechtsklick genügt, und der Quelltext liegt offen: HTML liefert die Struktur, CSS das Aussehen, JavaScript das Verhalten.

1

Tags und Elemente

Hinter jeder Website steckt lesbarer Text, der Quelltext. Du siehst ihn per Rechtsklick auf „Seitenquelltext anzeigen“.

  • HTML:Auszeichnungssprache, die die Struktur einer Seite beschreibt.
  • Tag:Bezeichner in spitzen Klammern; der End-Tag hat zusätzlich einen Schrägstrich.
  • Element:Start-Tag, Inhalt und End-Tag zusammen, etwa <title>Mein Blog</title>.
  • Attribut:Zusatzangabe im Start-Tag als name="wert", zum Beispiel lang="de".
  • Grundgerüst:head enthält Angaben über die Seite, body alles Sichtbare.
2

Die Arbeitsteilung

Eine Website trennt drei Fragen: Was ist das? Wie sieht es aus? Was passiert beim Klick? Jede Frage hat ihre eigene Sprache und Datei.

  • Struktur (HTML):legt fest, was Überschrift, Absatz, Liste oder Bild ist.
  • Aussehen (CSS):Regeln aus einem Selektor und Eigenschaften wie color oder font-size — eine Datei gilt für alle Seiten.
  • Verhalten (JavaScript):eine echte Programmiersprache, die auf Klicks und Eingaben reagiert.
  • Semantik:Bereiche wie header, nav, main und footer sagen, was sie sind — wichtig für Vorleseprogramme und Suchmaschinen.
  • index.html:die Startseite, die automatisch geladen wird; daneben liegen stil.css, skript.js und ein Bilderordner.

Schalte Elemente zu oder ab: Links wächst der Quelltext, rechts entsteht die Seite, die dein Browser daraus macht. Die Knöpfe gehen auch mit Tab und Enter.

Tag-Werkstatt

Quelltext (HTML)
So zeigt der Browser es an

Halte fest: Nur der Text zwischen den Tags wird sichtbar. Alles in spitzen Klammern ist Anweisung an den Browser — und er bringt schon ohne CSS eine Grundgestaltung mit.

Merke

Element: Start-Tag + Inhalt + End-Tag; Zusatzangaben stehen als Attribut name="wert" im Start-Tag.

3

Allgemeine Hinweise

HTML programmiert nicht

HTML kennt kein „wenn“ und keine Wiederholung. Sobald etwas entschieden werden muss, ist JavaScript zuständig.

End-Tag nicht vergessen

Fehlt der End-Tag, wirkt das Element oft bis weit in die Seite hinein. Nur Elemente ohne Inhalt wie img brauchen keinen.

Einrücken hilft

Rücke verschachtelte Elemente im Quelltext ein. Dem Browser ist das egal, dir hilft es beim Lesen.

Videos