📚 Unterricht bei KiberOne

Hier findest du die Unterrichtsinhalte und Notizen zu den einzelnen Stunden. Wähle einen Unterricht aus dem Dropdown-Menü.

🚀 1. Einführung in die Webentwicklung

In diesem ersten Unterricht lernen wir die Grundlagen der Webentwicklung kennen. Wir werden verstehen, wie Webseiten aufgebaut sind und wie wir sie mit HTML und CSS erstellen können.

💻 Was ist HTML?

HTML (HyperText Markup Language) ist die Grundstruktur jeder Webseite. Es ist wie das Skelett eines Körpers - es gibt allem seine grundlegende Form und Struktur.

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>Dies ist mein erster HTML-Code.</p>
  </body>
</html>
💡 Wichtig: Jedes HTML-Element wird durch Tags definiert, die in spitzen Klammern stehen. Die meisten Elemente haben einen öffnenden und einen schließenden Tag.

🎨 Was ist CSS?

CSS (Cascading Style Sheets) ist für das Aussehen der Webseite zuständig. Es ist wie die Kleidung und das Make-up für unser HTML-Skelett.

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
  text-align: center;
}

p {
  color: #333333;
  line-height: 1.6;
}

🌟 Einfache Übung: Erste HTML-Seite

Lasst uns gemeinsam eine einfache HTML-Seite erstellen:

  • Öffne Visual Studio Code
  • Erstelle eine neue Datei namens "index.html"
  • Füge die HTML-Grundstruktur ein
  • Erstelle eine Überschrift und einen Absatz
  • Speichere die Datei und öffne sie im Browser

🏆 Mittlere Übung: Meta-Tags und Dokumentenstruktur

Erweitere deine HTML-Seite um wichtige Meta-Informationen:

  • Füge einen aussagekräftigen Titel hinzu
  • Setze den Viewport für mobile Geräte
  • Definiere die Zeichenkodierung
  • Füge eine Seitenbeschreibung hinzu
  • Teste die Seite in verschiedenen Browsern

💎 Schwere Übung: Mehrsprachige Seite

Erstelle eine mehrsprachige HTML-Struktur:

  • Nutze das lang-Attribut für verschiedene Sprachen
  • Implementiere hreflang für Sprachversionen
  • Füge Sprachumschalter hinzu
  • Stelle sicher, dass Sonderzeichen korrekt angezeigt werden
  • Teste die Barrierefreiheit der Sprachumschaltung

📝 2. Grundlegende HTML-Elemente

📌 Überschriften

HTML bietet sechs Ebenen von Überschriften, von h1 (wichtigste) bis h6 (unwichtigste).

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Noch kleinere Überschrift</h3>

📄 Absätze und Textformatierung

Text wird in HTML hauptsächlich mit dem p-Element (Paragraph) strukturiert.

<p>Dies ist ein normaler Absatz.</p>
<p>Hier ist <strong>wichtiger Text</strong> und 
   <em>betonter Text</em>.</p>

🌟 Einfache Übung: Text formatieren

Erstelle eine Seite über dein Hobby:

  • Verwende eine h1-Überschrift für den Titel
  • Füge mehrere Absätze mit p-Tags hinzu
  • Markiere wichtige Wörter mit strong
  • Betone bestimmte Phrasen mit em

🏆 Mittlere Übung: Erweiterte Textformatierung

Erstelle einen Blog-Artikel:

  • Nutze verschiedene Überschriftenebenen (h1-h3)
  • Füge Zitate mit blockquote ein
  • Erstelle Fußnoten mit sup und Referenzen
  • Formatiere Code-Beispiele mit pre und code

💎 Schwere Übung: Dynamische Textanpassung

Erstelle einen interaktiven Text-Editor:

  • Implementiere verschiedene Textformatierungen
  • Füge Schriftgrößenanpassung hinzu
  • Erstelle eine Vorschau der Formatierung
  • Mache die Formatierung responsiv

🎨 3. Erste Schritte mit CSS

🔗 CSS einbinden

CSS kann auf drei Arten eingebunden werden:

<!-- 1. Extern (bevorzugt) -->
<link rel="stylesheet" href="style.css">

<!-- 2. Intern -->
<style>
  p { color: blue; }
</style>

<!-- 3. Inline (vermeiden) -->
<p style="color: blue;">Blauer Text</p>

🎯 Grundlegende CSS-Eigenschaften

/* Textfarbe und Schriftart */
p {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Hintergrund und Abstände */
div {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px;
}

🌟 Einfache Übung: Styling hinzufügen

Gestalte deine Hobby-Seite:

  • Erstelle eine style.css Datei
  • Ändere die Schriftart der Überschrift
  • Gib dem Text eine andere Farbe
  • Füge Abstände zwischen den Absätzen hinzu

🏆 Mittlere Übung: Animierte Elemente

Füge Bewegung zu deiner Seite hinzu:

  • Erstelle einen Hover-Effekt für Links
  • Animiere die Farbänderung von Buttons
  • Füge eine Einblendanimation für Bilder hinzu
  • Implementiere einen Scroll-Effekt

💎 Schwere Übung: Responsives Layout

Erstelle ein komplexes responsives Design:

  • Implementiere ein Grid-Layout
  • Nutze Flexbox für die Navigation
  • Erstelle ein Hamburger-Menü für mobile Geräte
  • Optimiere die Performance der Animationen

📚 Hausaufgaben

  1. HTML Grundstruktur und Textformatierung:
    • Erstelle eine HTML-Datei mit der korrekten Grundstruktur (DOCTYPE, html, head, body)
    • Füge einen aussagekräftigen title und die UTF-8 Zeichenkodierung hinzu
    • Erstelle eine h1-Überschrift "Mein Lieblingshobby"
    • Schreibe 3 Absätze über dein Hobby, nutze dabei:
      • Verschiedene Überschriftenebenen (h1 bis h3)
      • Texthervorhebungen mit strong für wichtige Begriffe
      • Betonungen mit em für besondere Aspekte
      • Mindestens einen Zeilenumbruch mit br wo sinnvoll
  2. CSS Styling der Seite:
    • Erstelle eine externe style.css Datei und verlinke sie
    • Gestalte die Überschriften:
      • h1: Zentriert, mit einer Farbe deiner Wahl
      • h2: Mit einer anderen Schriftart und Größe
      • h3: Mit einer passenden Hintergrundfarbe
    • Formatiere die Absätze:
      • Wähle eine gut lesbare Schriftart
      • Setze einen angemessenen Zeilenabstand (line-height)
      • Füge Abstände zwischen den Absätzen hinzu (margin)
    • Gestalte die strong und em Elemente:
      • strong: Andere Farbe und größere Schrift
      • em: Kursiv und leicht andere Farbe
    • Experimentiere mit dem Box-Model:
      • Füge einen Rahmen um die Absätze hinzu
      • Setze innere Abstände (padding)
      • Gestalte die Rahmenecken abgerundet
  3. Zusatzaufgabe (Optional):
    • Füge einen hover-Effekt zu den Überschriften hinzu
    • Erstelle eine Navigation mit mindestens 3 Links
    • Gestalte die Links mit verschiedenen Zuständen (:hover, :active)
    • Mache die Seite für mobile Geräte responsive
💡 Tipp: Nutze die im Unterricht gezeigten Beispiele als Referenz. Experimentiere mit verschiedenen Werten und beobachte die Änderungen im Browser.

🔍 Zusätzliche Ressourcen