Der Code erklärt

📖 Diese Seite ist euer Nachschlagewerk

Hier findet ihr alle wichtigen HTML- und CSS-Befehle – immer mit Code und direkt daneben der Ausgabe, damit ihr genau seht, was passiert. Schaut hier nach, wenn ihr nicht mehr wisst wie etwas geht!

🏷️ HTML – Überschriften

Überschriften gehen von <h1> (größte) bis <h6> (kleinste). <h1> nur einmal pro Seite!

<h1>Größte Überschrift</h1>
<h2>Zweitgrößte – für Abschnittstitel</h2>
<h3>Drittgrößte – für Unterabschnitte</h3>

Größte Überschrift

Zweitgrößte – für Abschnittstitel

Drittgrößte – für Unterabschnitte

🏷️ HTML – Absätze & Textformatierung

Normaler Text kommt immer in <p>-Tags. Einzelne Wörter könnt ihr mit <strong> oder <em> hervorheben.

<p>Ein normaler Absatz.</p>

<p>Text kann <strong>fett</strong> oder <em>kursiv</em> sein.</p>

<p>Zeile 1<br />
Zeile 2 – selber Absatz, neue Zeile</p>

Ein normaler Absatz.

Text kann fett oder kursiv sein.

Zeile 1
Zeile 2 – selber Absatz, neue Zeile

🔗 HTML – Links

Mit <a href="..."> erstellt ihr Links. target="_blank" öffnet den Link in einem neuen Tab.

<!-- Link zu eigener Seite im selben Ordner -->
<a href="seite1.html">Zu Seite 1</a>

<!-- Externer Link – öffnet neuen Tab -->
<a href="https://www.google.com" target="_blank">Google</a>

Zu Seite 1 Google ↗

← blauer Link = interne Seite | grüner Link = externe Website (neuer Tab)

🖼️ HTML – Bilder einbinden

Bilder speichert ihr im bilder/-Ordner. Das alt-Attribut ist Pflicht!

<!-- Einfaches Bild -->
<img
  src="bilder/meinbild.jpg"
  alt="Beschreibung – PFLICHT!"
/>

<!-- Bild mit Beschriftung darunter -->
<figure>
  <img src="bilder/foto.jpg" alt="Mein Foto" />
  <figcaption>Das steht unter dem Bild</figcaption>
</figure>

🖼️ meinbild.jpg

Das steht unter dem Bild

⚠️ Fehlt der alt-Text, gibt es Punkteabzug!

📋 HTML – Listen

<ul> = Punkte-Liste | <ol> = Nummerierte Liste. Jeder Eintrag ist ein <li>.

<!-- Ungeordnet = Punkte -->
<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ul>

<!-- Geordnet = Nummern -->
<ol>
  <li>Schritt 1</li>
  <li>Schritt 2</li>
  <li>Schritt 3</li>
</ol>

<ul> – Punkte:

Erster Punkt
Zweiter Punkt
Dritter Punkt

<ol> – Nummern:

Schritt 1
Schritt 2
Schritt 3

📦 HTML – Boxen mit <section>

Inhalte werden in <section>-Tags verpackt. Mit class="..." verbindet ihr sie mit einer CSS-Klasse – so bekommt jede Box ihr eigenes Aussehen.

<section class="box-info">
  <h2>Info-Box</h2>
  <p>Inhalt...</p>
</section>

<section class="box-tipp">
  <h2>Tipp-Box</h2>
  <p>Inhalt...</p>
</section>

Info-Box

Blauer Rand links → class="box-info"

💡 Tipp-Box

Grüner Rand + heller Hintergrund → class="box-tipp"

🎨 CSS – Farben & Hintergrund

Farben schreibt man als Hex-Code (6 Zeichen nach dem #), als RGB-Wert oder als englisches Wort.

body {
  background-color: #f0f5fa;  /* Hex – am häufigsten */
  color: #1a2a3a;             /* Textfarbe */
}

header {
  background-color: rgb(30, 60, 90);  /* RGB */
  color: white;                       /* Farbname */
}

#f0f5fa
Hintergrund

#1e3c5a
Header

#2e6a8a
Mittel

#96b4d2
Hell

#b4d296
Akzent

💡 Auf coolors.co findet ihr eure eigene Farbpalette!

📐 CSS – Abstände: margin & padding

margin = Außenabstand – Abstand zu anderen Elementen (orange)
padding = Innenabstand – Abstand zwischen Rand und Inhalt (blau)

section {
  margin: 20px 0;      /* außen: 20px oben+unten */
  padding: 24px 30px;  /* innen: 24px oben+unten, 30px links+rechts */
}

/* Zentrieren mit auto: */
main {
  max-width: 900px;
  margin: 0 auto;  /* auto = automatisch zentriert */
}

margin = Außenabstand (orange)

padding = Innenabstand (blau)

📄 Inhalt des Elements

✏️ CSS – Schriften gestalten

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;   /* Zeilenabstand */
}

h1 {
  font-size: 2rem;          /* 2rem = 32px */
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;     /* Buchstabenabstand */
  color: #1e3c5a;
}

Großer Titel

Das ist normaler Fließtext mit angenehmen Zeilenabstand von 1.7. Man sieht, dass die Zeilen nicht zu eng zusammen sind – das macht es viel besser lesbar.

🖱️ CSS – Hover-Effekte

:hover wirkt, wenn die Maus über dem Element ist. transition macht den Wechsel weich. Fahrt mit der Maus über die Buttons unten!

nav a {
  background-color: #2e6a8a;
  color: white;
  padding: 7px 20px;
  border-radius: 22px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #b4d296;
  color: #1e3c5a;
}

👇 Fahrt mit der Maus über die Buttons:

Grün = aktuelle Seite (class="aktiv") | Blau → Grün beim Hover

🃏 CSS – Klassen erstellen & verwenden

Im CSS schreibt ihr einen Punkt vor den Klassennamen. Im HTML kommt der Name ohne Punkt ins class-Attribut.

/* CSS: Klasse definieren (mit Punkt) */
.box-info {
  border-left: 6px solid #1e3c5a;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.box-tipp {
  border-left: 6px solid #7aaa50;
  background: #f5faf0;
  padding: 20px;
  border-radius: 10px;
}

<!-- HTML: Klasse verwenden (ohne Punkt) -->
<section class="box-info"> ... </section>
<section class="box-tipp"> ... </section>

class="box-info"

Blauer Rand links, weißer Hintergrund

class="box-tipp"

Grüner Rand links, hellgrüner Hintergrund

↔️ CSS – Bild links oder rechts neben Text

Mit display: flex legt ihr Bild und Text nebeneinander. Die Klasse .bild-links stellt das Bild links, .bild-rechts stellt es rechts.

/* CSS – in style.css */
.bild-links {
  display: flex;       /* Bild und Text nebeneinander */
  gap: 24px;           /* Abstand dazwischen */
  align-items: flex-start;
}

.bild-links .bild-spalte {
  flex: 0 0 280px;     /* Bild bekommt 280px Breite */
}
.bild-links .bild-spalte img {
  width: 100%;
  border-radius: 10px;
}

.bild-links .text-spalte {
  flex: 1;             /* Text nimmt den Rest ein */
}

<!-- HTML – Bild LINKS, Text rechts daneben -->
<div class="bild-links">
  <div class="bild-spalte">
    <img src="bilder/beispiel.jpg" alt="Beschreibung" />
  </div>
  <div class="text-spalte">
    <h3>Überschrift</h3>
    <p>Dieser Text steht rechts neben dem Bild.</p>
  </div>
</div>

<!-- HTML – Bild RECHTS, Text links daneben -->
<div class="bild-rechts">
  <div class="bild-spalte">
    <img src="bilder/beispiel.jpg" alt="Beschreibung" />
  </div>
  <div class="text-spalte">
    <h3>Überschrift</h3>
    <p>Dieser Text steht links neben dem Bild.</p>
  </div>
</div>

Bild LINKS – Text rechts daneben:

Überschrift

Dieser Text steht rechts neben dem Bild. Auf dem Handy rutscht er automatisch darunter!

Bild RECHTS – Text links daneben:

Überschrift

Dieser Text steht links neben dem Bild. Einfach bild-rechts statt bild-links verwenden!

💡 CSS – Bild im Vordergrund & Hintergrund

Normales Bild im Vordergrund – einfach mit <img>:

<!-- So zeigt ihr ein Bild ganz normal im Vordergrund -->
<img
  src="bilder/beispiel.jpg"
  alt="Mein Bild"
  style="width: 100%; border-radius: 10px;"
/>

Das Bild liegt ganz normal im Vordergrund – über allem anderen.

Bild im Hintergrund mit background-image im CSS:

/* CSS – Hintergrundbild */
.hero {
  background-image: url("bilder/beispiel.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
}

<!-- HTML -->
<div class="hero">
  <p>Dieser Text liegt ÜBER dem Hintergrundbild</p>
</div>

Dieser Text liegt ÜBER dem Hintergrundbild

Tipp: Dunkler Hintergrund beim Text → besser lesbar!

Bild mit z-index – steuert wer vorne und wer hinten ist:

/* CSS */
.container { position: relative; }

.bild-hinten {
  position: absolute;
  z-index: -1;       /* hinter allem anderen */
  width: 100%; height: 100%;
  object-fit: cover;
}

.text-vorne {
  position: relative;
  z-index: 1;        /* vor dem Bild */
  color: white;
}

Text (z-index: 1) liegt VOR dem Bild (z-index: -1)

z-index -1 = ganz hinten | z-index 1+ = vorne | Größere Zahl = weiter vorne