NextMindAnmelden
WebseitenSpickzettel
Inhalt0 von 8 abgehakt

Kapitel 10/8

Alle Kapitel

Deine erste Seite

Wie eine Webseite aufgebaut ist - und warum der Browser überhaupt versteht, was du meinst.

Das kannst du danach

0 von 5 abgehakt
  • Du kannst erklären, was HTML ist und wozu es dient.
  • Du kannst das Grundgerüst einer Seite aus dem Kopf aufschreiben.
  • Du kennst den Unterschied zwischen einem öffnenden und einem schließenden Tag.
  • Du kannst Überschriften und Absätze richtig auszeichnen.
  • Du hast deine erste eigene Seite geschrieben und im Browser angesehen.

Melde dich an, um deinen Stand zu speichern.

Zuerst: Wähle deine Seite

Dieser Kurs läuft auf ein Ziel zu. Am Ende hast du eine eigene, fertige Webseite gebaut — und zwar jede Zeile davon selbst.

Entscheide dich jetzt, welche Art von Seite es wird — ein Klick genügt:

Wähle deine Seite

noch nicht gewählt

Melde dich an, um deine Wahl zu speichern.

Jedes Kapitel baut einen Teil genau dieser Seite. Heute: die erste Seite mit Überschrift und Text. Deine Lehrkraft sieht deine Wahl, damit sie weiß, worauf sich deine Fragen beziehen.

Was ist HTML?

Jede Webseite, die du je gesehen hast, besteht aus HTML (HyperText Markup Language). HTML sagt dem Browser nicht, wie etwas aussehen soll, sondern was etwas ist: eine Überschrift, ein Absatz, ein Bild, ein Link.

Das geschieht mit Tags — Wörtern in spitzen Klammern:

<h1>Das ist eine Überschrift</h1>

<h1> ist der öffnende Tag, </h1> (mit Schrägstrich) der schließende Tag. Alles dazwischen gehört zu diesem Element. Vergisst du das schließende Tag, weiß der Browser nicht, wo die Überschrift aufhört — und alles Folgende wird versehentlich mit hineingezogen.

Erst überlegen

Warum reicht es nicht, dem Browser nur den Text zu schicken, ohne Tags?

Ein Tag ausprobieren

Das Grundgerüst

Genau wie ein Processing-Sketch setup() und draw() braucht, braucht jede HTML-Seite ein festes Gerüst. Erst dieses Gerüst sagt dem Browser: Hier beginnt eine vollständige Webseite.

<!DOCTYPE html>
<html>
<head>
  <title>Meine erste Seite</title>
</head>
<body>
  <h1>Willkommen</h1>
  <p>Das ist meine erste Webseite.</p>
</body>
</html>

Vier Teile, jeder mit eigener Aufgabe:

  1. <!DOCTYPE html> — steht ganz oben, ohne Schrägstrich am Ende. Sagt dem Browser: Das hier ist modernes HTML.
  2. <html> — umschließt die ganze Seite.
  3. <head> — Angaben über die Seite, die niemand sieht. Der <title> darin erscheint im Browser-Tab, nicht auf der Seite selbst.
  4. <body> — alles, was tatsächlich zu sehen ist. Hier steht der sichtbare Inhalt: Überschriften, Text, Bilder, alles.
Das vollständige Gerüst

Erst überlegen

Im <head> steht ein <title>Meine Seite</title>. Wo siehst du diesen Text?

Überschriften und Absätze

Die wichtigsten Bausteine für den Anfang:

Text auszeichnen

Probier es aus

Tags stecken ineinander

Tags dürfen ineinander verschachtelt sein — aber die Reihenfolge beim Schließen muss zur Reihenfolge beim Öffnen passen, wie bei Klammern in der Mathematik. Das Letzte, das geöffnet wurde, muss als Erstes wieder geschlossen werden.

<p>Das ist <strong>wichtig</strong>.</p>

<strong> öffnet nach <p> und schließt vor </p> — richtig verschachtelt. So herum geht es nicht:

<p>Das ist <strong>wichtig.</p></strong>

Hier schließt </p>, bevor </strong> an der Reihe wäre. Browser versuchen zwar, so etwas zu reparieren, aber das Ergebnis ist dann nicht mehr das, was du erwartest.

Erst überlegen

<p>Ein <strong>Wort</p></strong> - was ist hier falsch?

Deine erste Seite

Deine Seite: die erste Überschrift

Schreib den Anfang deiner eigenen Seite — passend zu dem, was du oben gewählt hast (Steckbrief, Verein, Rezepte, Shop oder Beauty & Style).

Du brauchst dafür nur zwei Dinge, die du in diesem Kapitel gelernt hast: eine <h1> mit dem Titel deiner Seite und mindestens zwei <p> mit Text dazu.

Deine erste Überschrift

Was noch fehlt

Deine Seite hat jetzt eine Überschrift und Text — aber noch keine Liste, keinen Link und kein Bild. Und noch färbt oder ordnet nichts: Alles sieht bisher nach der Standardvorlage des Browsers aus.

Im nächsten Kapitel kommen Listen, Links und Bilder dazu. Das Aussehen — Farben, Schriften, Abstände — ist danach ein eigenes Thema: CSS.

Sitzt das?

1 / 4

Was macht der öffnende Tag <p>?