Struktur, Stil & Logik

HTML · CSS · JavaScript

Dozent: Daniel Schlecht

Kurstag 2 - Building Blocks

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)

Facts zum World Wide Web

Umgangssprachlich wird das World Wide Web oft mit dem Internet gleichgesetzt, es ist jedoch jünger und stellt nur eine von mehreren möglichen Nutzungen des Internets dar.

Es basiert auf drei zentralen Technologien:

• HTML - Struktur der Inhalte
• HTTP - Protokoll zum Datenaustausch
• URL - eindeutige Adressen für Ressourcen

Erste Website der Welt (1991)

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;
    }
              

Teste, 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 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;
    }
          

Tipp: Achte auf geschlossene Tags und fehlende Semikolons!

Fehler in CSS erkennen

    button {
      background-color: #3498db;
      color: white;
      padding: 10px
      border: none;
      border-radius: 5px;
    }
          

Tipp: Achte auf fehlende Semikolons zwischen CSS-Eigenschaften!

Fehler in HTML-Struktur

    <ul>
      <li>Erster Punkt
      <li>Zweiter Punkt</li>
    </ul>
          

Jedes <li>-Element muss geöffnet und geschlossen werden.

Fehler in Attributen

    <img src=images/logo.png alt=Logo>
          

Denke an die Anführungszeichen bei den Attributwerten:
<img src="images/logo.png" alt="Logo">

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("Volljährig");
    } 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:

Zugangskontrolle:

• Frage mit prompt() das Alter ab
• Wenn über 18 „Zugang erlaubt“
• Wenn unter 18 „Zugang verweigert“

Wiederholungen:

• Wiederhole eine Ausgabe 3× mit for-Schleife

Bonus:

• Kombiniere beide Aufgaben auf sinnvoller Weise

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?