Eigene Webseite: HTML und CSS

Das lernst du

Eine Webseite mit Überschrift, Absätzen und Listen in HTML schreiben
Mit CSS Farben, Abstände und Schriftgrößen festlegen
Mit Klassen mehrere Elemente gleich gestalten

Webseiten bestehen aus drei Sprachen

Jede Webseite im Internet besteht aus drei Teilen:

Sprache	Wofür	Beispiel
HTML	Was auf der Seite steht	Überschrift, Text, Liste, Knopf
CSS	Wie es aussieht	Farben, Größen, Abstände
JavaScript	Was passiert	Klicks, Rechnen, Spiele

In dieser Lektion geht es um HTML und CSS. Rechts oben im Editor steht index.html – so heißt die Startseite fast jeder Webseite. Unter dem Code siehst du die Vorschau. Sie ändert sich, sobald du tippst.

HTML: Bausteine in spitzen Klammern

HTML besteht aus Tags. Ein Tag hat einen Anfang <h1> und ein Ende </h1>. Dazwischen steht der Inhalt. Probier es aus und ändere den Text:

<h1>Hallo, Welt!</h1>
<p>Das ist meine erste Webseite.</p>
<p>Sie hat zwei Absätze.</p>
<ul>
  <li>Punkt eins</li>
  <li>Punkt zwei</li>
</ul>

Tag	Bedeutung
`<h1>` … `<h6>`	Überschriften, von groß bis klein
`<p>`	Absatz
`<ul>` und `<li>`	Liste mit Punkten
`<strong>`	wichtiger (fetter) Text
`<button>`	Knopf

CSS: So sieht es aus

CSS steht in einem <style>-Teil. Zuerst sagst du, was du gestalten willst (zum Beispiel h1). Dann folgen in geschweiften Klammern die Eigenschaften:

<style>
  body {
    font-family: sans-serif;
    background: #fff8e7;
  }
  h1 {
    color: darkorange;
    font-size: 40px;
  }
  p {
    color: #444;
    line-height: 1.6;
  }
</style>

<h1>Pizza-Rezept</h1>
<p>Teig ausrollen, Tomatensoße drauf, Käse drüber – fertig!</p>

Jede Eigenschaft endet mit einem Semikolon ;. Probier andere Farben wie crimson, teal oder #7b2ff7.

Klassen: mehrere Elemente auf einmal

Sollen nur manche Absätze anders aussehen, gibst du ihnen eine Klasse. Im CSS steht vor dem Klassennamen ein Punkt:

<style>
  .wichtig {
    background: gold;
    padding: 8px;
    border-radius: 8px;
  }
</style>

<p>Ein ganz normaler Absatz.</p>
<p class="wichtig">Morgen ist Ausflug – Regenjacke mitbringen!</p>
<p>Noch ein normaler Absatz.</p>
<p class="wichtig">Treffpunkt: 8 Uhr am Bus.</p>

Gut zu wissen: Die Vorschau läuft in einem abgeschotteten Fenster. Deine Seite kann dort nichts aus dem Internet laden und nichts verschicken. Bilder von anderen Webseiten erscheinen deshalb nicht – Farben, Formen und Text dagegen schon.

Deine Aufgabe

Jetzt bist du dran

Bau deine eigene Steckbrief-Seite. Sie braucht eine Überschrift <h1> mit deinem Namen (oder einem Fantasienamen), einen Absatz <p> über dich und eine Liste <ul> mit mindestens drei Hobbys. Gib der Überschrift im <style>-Teil eine Farbe. Und: Alle Listenpunkte bekommen die Klasse hobby, die sie fett macht (font-weight: bold).

<style>
  body {
    font-family: sans-serif;
    background: #f4f0ff;
  }
</style>

<h1>Mein Name</h1>

Denkanstoß
Ein Absatz steht zwischen <p> und </p>.
Welcher Befehl hilft?
Eine Liste: <ul> und darin für jeden Punkt <li>Hobby</li>.
Schreib in den <style>-Teil: h1 { color: tomato; } – oder eine andere Farbe.
Im <style>-Teil: .hobby { font-weight: bold; } – der Punkt vor hobby heißt „Klasse“.

Ohne Hinweise gelöst gibt es einen ⭐ auf deiner Fortschrittsseite.

Lösung anzeigen

Versuch es erst selbst – aus Fehlern lernt man am meisten. Hier ist eine mögliche Lösung:

<style>
  body {
    font-family: sans-serif;
    background: #f4f0ff;
  }
  h1 {
    color: rebeccapurple;
  }
  .hobby {
    font-weight: bold;
  }
</style>

<h1>Robo Rita</h1>
<p>Ich baue Roboter und programmiere sie mit Python.</p>
<ul>
  <li class="hobby">Roboter bauen</li>
  <li class="hobby">Klettern</li>
  <li class="hobby">Zeichnen</li>
</ul>