Kostenlose Tutorials für Anfänger

Appearance

Kapitel 14: HTML mit CSS/JS Verbindung ​

🔗 Lernziel: HTML mit CSS und JavaScript verbinden - den Frontend-Zyklus schließen!

14.1 HTML + CSS Verbindung ​

CSS benötigt Selektoren, um HTML-Elemente zu stylen.

Methode 1: class-Attribut ​

html
<!-- HTML -->
<div class="container">Inhalt</div>
<p class="highlight">Wichtiger Text</p>

/* CSS */
.container { max-width: 1200px; }
.highlight { color: rot; font-weight: bold; }

Methode 2: id-Attribut ​

html
<!-- HTML -->
<section id="hero">Heldenbereich</section>

/* CSS */
#hero { background-color: blau; padding: 50px; }

Methode 3: Inline-CSS (nicht empfohlen) ​

html
<p style="color: grün; font-size: 16px;">Text</p>

Goldene Regel:

  • Verwende class für wiederverwendbare Stile
  • Verwende id für einmalige Elemente
  • Vermeide Inline-CSS (schwer zu warten)

14.2 HTML + JS Verbindung ​

JavaScript interagiert mit HTML durch DOM-Manipulation.

Methode 1: Event-Attribute (einfach) ​

html
<button onclick="alert('Geklickt!')">Klick mich</button>
<input oninput="console.log(this.value)">

Methode 2: id + getElementById (häufig) ​

html
<!-- HTML -->
<button id="meinButton">Klick mich</button>
<p id="ausgabe"></p>

<script>
  document.getElementById('meinButton').onclick = function() {
    document.getElementById('ausgabe').innerText = 'Geklickt!';
  };
</script>

Methode 3: class + querySelector (modern) ​

html
<!-- HTML -->
<div class="container">
  <button class="btn">Klick mich</button>
</div>

<script>
  document.querySelector('.btn').addEventListener('click', function() {
    alert('Button geklickt!');
  });
</script>

14.3 Häufige Verbindungs-Szenarien ​

Szenario 1: Button-Klick ​

html
<button id="farbeÄndern">Farbe ändern</button>
<div id="box" style="width: 100px; height: 100px; background: rot;"></div>

<script>
  document.getElementById('farbeÄndern').onclick = function() {
    document.getElementById('box').style.backgroundColor = 'blau';
  };
</script>

Szenario 2: Formularvalidierung ​

html
<form id="meinForm">
  <input type="email" id="email" required>
  <button type="submit">Absenden</button>
</form>

<script>
  document.getElementById('meinForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    if (!email.includes('@')) {
      alert('Ungültige E-Mail!');
    } else {
      alert('Formular gesendet!');
    }
  });
</script>

Szenario 3: Bild wechseln ​

html
<img id="bild" src="bild1.jpg" alt="Bild">
<button id="wechseln">Bild wechseln</button>

<script>
  document.getElementById('wechseln').onclick = function() {
    document.getElementById('bild').src = 'bild2.jpg';
  };
</script>

14.4 Anfänger-freundlich: Verbindungs-Code-Beispiele ​

Beispiel 1: Einfaches Hover-Effekt (CSS)

html
<!DOCTYPE html>
<html lang="de">
<head>
  <style>
    .btn {
      padding: 10px 20px;
      background: blau;
      color: weiße;
      border: none;
      cursor: pointer;
    }
    .btn:hover {
      background: dunkelblau;
    }
  </style>
</head>
<body>
  <button class="btn">Maus darüber bewegen</button>
</body>
</html>

Beispiel 2: Einfache Interaktion (JS)

html
<!DOCTYPE html>
<html lang="de">
<body>
  <button id="zählerBtn">Geklickt: 0</button>
  
  <script>
    let zähler = 0;
    document.getElementById('zählerBtn').onclick = function() {
      zähler++;
      this.innerText = 'Geklickt: ' + zähler;
    };
  </script>
</body>
</html>

14.5 Praxis: HTML-Struktur + CSS + JS ​

Aufgabe: Erstelle eine einfache Seite mit HTML, CSS und JS.

Lösung:

html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interaktive Seite</title>
  <style>
    /* CSS-Stile */
    body { font-family: Arial, sans-serif; padding: 20px; }
    
    .container { max-width: 800px; margin: 0 auto; }
    
    .card {
      border: 1px solid #ddd;
      padding: 20px;
      margin: 20px 0;
      border-radius: 8px;
    }
    
    .btn {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .btn:hover { background: #0056b3; }
    
    .hidden { display: none; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Meine interaktive Seite</h1>
    
    <div class="card" id="infoCard">
      <h2>Willkommen!</h2>
      <p>Dies ist ein interaktives Beispiel.</p>
      <button class="btn" id="toggleBtn">Info ausblenden</button>
    </div>
    
    <div class="card">
      <h2>Zähler</h2>
      <p>Klicks: <span id="zähler">0</span></p>
      <button class="btn" id="zählerBtn">Klicken</button>
    </div>
  </div>
  
  <script>
    // JavaScript-Interaktion
    
    // 1. Info-Card ausblenden/einblenden
    let infoSichtbar = true;
    document.getElementById('toggleBtn').onclick = function() {
      const card = document.getElementById('infoCard');
      if (infoSichtbar) {
        card.classList.add('hidden');
        this.innerText = 'Info einblenden';
      } else {
        card.classList.remove('hidden');
        this.innerText = 'Info ausblenden';
      }
      infoSichtbar = !infoSichtbar;
    };
    
    // 2. Zähler erhöhen
    let zähler = 0;
    document.getElementById('zählerBtn').onclick = function() {
      zähler++;
      document.getElementById('zähler').innerText = zähler;
    };
  </script>
</body>
</html>

Erklärung:

  • HTML: Struktur ( container, card, buttons)
  • CSS: Styling ( classes: container, card, btn, hidden)
  • JS: Interaktion ( button-clicks, class toggle, zähler)

✅ Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ HTML + CSS verbinden (class, id, inline)
  • ✅ HTML + JS verbinden (events, getElementById)
  • ✅ Häufige Szenarien (button-klick, formular, bild-wechsel)
  • ✅ Einfache Code-Beispiele für Anfänger
  • ✅ Eine interaktive Seite mit HTML + CSS + JS zu erstellen

🎯 Nächster Schritt: In Kapitel 15 lernst du Kommentare und Code-Richtlinien!

← Zurück zu Kapitel 13: Anpassung und KompatibilitätWeiter zu Kapitel 15: Kommentare und Code-Richtlinien →

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials