Struktur, Stil & Logik

HTML · CSS · JavaScript

Dozent: Daniel Schlecht
Kurstag 2 – Building Blocks (HTML, CSS, JS)

Lernziele 🎯

• Grundlegende CSS-Regeln anwenden: Schriftarten, Farben, Abstände, Hintergrundfarben (K3)
• HTML- & CSS-Code analysieren und Zusammenhänge erkennen (K4)
• Fehler in HTML oder CSS identifizieren und korrigieren (K4)
• Kontrollfluss in JavaScript steuern (K3)

Was ist CSS?

CSS (Cascading Style Sheets) beschreibt das Aussehen von HTML-Elementen.

• Trennung von Struktur (HTML) und Design (CSS)
• Wird vom Browser interpretiert
• Kann im <style>-Tag oder in externer Datei stehen

CSS-Grundsyntax

selector {
  property: value;
}
          

Beispiel:

h1 {
  color: darkblue;
  font-family: Arial, sans-serif;
  background-color: lightgray;
  padding: 10px;
}
          

Beispielseite: HTML + CSS

<h1>Willkommen</h1>
<p>Dies ist meine erste gestaltete Seite.</p>
              

h1 {
  color: #0044cc;
  text-align: center;
}
p {
  color: #333;
  line-height: 1.6;
}
              

→ Beobachte, wie sich Änderungen in CSS auf das Erscheinungsbild auswirken.

Übung 1 🧩

Gestalte deine HTML-Seite mit CSS:

• Schriftart ändern (z. B. Arial oder sans-serif)
• Hintergrundfarbe der Seite anpassen
• Abstand zwischen Überschrift und Absatz hinzufügen
• Farbe einzelner Elemente ändern

Speichere als style.css und binde sie ein:

<link rel="stylesheet" href="style.css">
          

HTML & CSS analysieren

Nutze die Browser DevTools (Rechtsklick → „Element untersuchen“), um:

• Zu sehen, welche CSS-Regeln aktiv sind
• Vererbungen und Überschreibungen zu erkennen
• Fehler (z. B. Tippfehler, falsche Selektoren) zu finden

Fehler in HTML & CSS erkennen

<p>Textabsatz
<h2>Titel</h2>
</p>
              

h1 {
  color: blue
  font-weight: bold;
}
              

<h2>Titel</h2>
<p>Textabsatz</p>
              

h1 {
  color: blue;
  font-weight: bold;
}
              

→ Achte auf geschlossene Tags und fehlende Semikolons!

Kontrollfluss in JavaScript

Kontrollfluss bedeutet, wie Anweisungen im Programm nacheinander oder bedingt ausgeführt werden.

• if / else – Bedingungen
• for – Zählschleifen
• while – Wiederholungen

let age = 20;

if (age >= 18) {
  console.log("Erwachsen");
} else {
  console.log("Minderjährig");
}

for (let i = 1; i <= 3; i++) {
  console.log("Zähler: " + i);
}
          

Übung 2 🧩

Steuere den Ablauf deines Programms mit Bedingungen und Schleifen:

• Frage mit prompt() das Alter ab
• Wenn über 18 → „Zugang erlaubt“
• Wenn unter 18 → „Zugang verweigert“
• Wiederhole eine Ausgabe 3× mit for-Schleife

let alter = prompt("Wie alt bist du?");
if (alter >= 18) {
  console.log("Zugang erlaubt");
} else {
  console.log("Zugang verweigert");
}

for (let i = 0; i < 3; i++) {
  console.log("Willkommen Versuch " + (i + 1));
}
          

Zusammenfassung

• CSS = Gestaltungssprache für Layout & Design
• Analyse mit DevTools hilft beim Verständnis & Debugging
• Fehler sind normal – sie zeigen Lernfortschritt!
• JavaScript steuert den Programmfluss mit Bedingungen & Schleifen

Nächste Sitzung

Thema: Interaktivität & DOM-Manipulation

Wir lernen, wie JavaScript mit HTML-Elementen interagiert und Benutzeraktionen verarbeitet.

Fragen?

Was war heute neu? Wo gab es Stolpersteine?