HTML/CSS-Klasse – Aufschlüsselung von Lektion 1

Lektion 1: Wiederholung von grundlegendem HTML und Einführung in fortgeschrittene HTML-Elemente

Ziel:

• Grundlegende HTML-Tags aktualisieren.
• Führen Sie HTML-Elemente mittlerer Ebene ein, um funktionellere Webseiten zu erstellen.

1. Einführung in die HTML-Struktur

Beginnen Sie mit einer kurzen Erklärung, wie HTML Webseiteninhalte mithilfe von Tags organisiert. Betonen Sie, dass HTML (HyperText Markup Language) zum Strukturieren von Webseiten verwendet wird, während CSS für das Styling verwendet wird.

Zu überprüfende Schlüsselkonzepte:

• , , : Erklären Sie, dass jedes HTML-Dokument eine definierte Struktur hat:
  • : Root-Element, das die gesamte Webseite umfasst.
  • : Enthält Metainformationen wie den Titel, Links zu CSS, Skripten usw.
  • : Enthält alle sichtbaren Inhalte wie Text, Bilder und Elemente, mit denen Benutzer interagieren.

2. Zusammenfassung der grundlegenden HTML-Tags

• Überschriften (

  bis

  ):

  Erklären Sie, dass Überschriften den Inhalt hierarchisch strukturieren, vom größten (

  ) zum kleinsten (

  ).

Beispiel:

    
Main Heading
    
Sub Heading

• Absätze (

  ):

  Wird zum Definieren von Textblöcken oder Absätzen verwendet.

Beispiel:

    
This is a paragraph.

• Anker (Click here
  • Bilder (): Wird zum Anzeigen von Bildern verwendet. Erklären Sie das src-Attribut für die Verknüpfung mit der Bilddatei und alt für die Barrierefreiheit.

  Beispiel:
  

  3. Einführung in fortgeschrittene HTML-Elemente

  3.1. Formulare (

  , , )

  • Formulare werden zum Sammeln von Benutzereingaben verwendet.

  • Grundlegende Formularstruktur:

    • :
      Ein Container für Formularelemente. Kann Attribute wie Aktion (wohin die Formulardaten gesendet werden) und Methode (GET/POST) enthalten.
    • : Definiert eine Beschriftung für Eingabeelemente und verbessert die Zugänglichkeit.
    • : Definiert verschiedene Arten von Eingabefeldern wie Text, Passwort, Kontrollkästchen, Radio usw.

  Beispiel für ein einfaches Formular mit Texteingabe:
  

  Name: Email:

  3.2. Listen (

  ,
  ,
  1. )
  • Ungeordnete Listen (
    )
    und Geordnete Listen (
    )
    helfen beim Organisieren von Daten in Aufzählungspunkten oder nummerierten Listen.
  • Listenelemente (
  • )
  definieren jedes Element in der Liste.

  Beispiel für eine ungeordnete und geordnete Liste:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. Tabellen (

  , ,

  ,

  ) Tabellen ermöglichen die Anzeige strukturierter Daten in Zeilen und Spalten. : Der Container für die Tabelle. : Definiert eine Zeile in der Tabelle. : Definiert eine Zelle in der Tabelle. : Definiert eine Kopfzelle in der Tabelle (optional). Beispiel einer einfachen Tabelle: Name Age John 25 4. Unterrichtsaktivitäten 4.1. Aktivität zusammenfassen: Bitten Sie die Schüler, eine einfache Webseite zu erstellen, die Folgendes umfasst: Eine Überschrift ( ) Ein Absatz ( ) Ein Bild () Beispiel: Welcome to My Website This is my first webpage. 4.2. Geführte Übung: Erstellen Sie ein einfaches Formular: Führen Sie die Schüler durch die Erstellung eines einfachen Formulars zum Sammeln von Benutzereingaben (Name und E-Mail). Enthalten Sie , und . 4.3. Listen und Tabellen: Bitten Sie die Schüler, eine ungeordnete Liste ( ) ihrer Lieblingssachen und eine einfache Tabelle mit einigen Datenzeilen (Name, Alter, Lieblingsfarbe) zu erstellen. Beispiel: Reading Coding Traveling Name Age Alice 30 5. Hausaufgaben Studenten sollten ihre Webseite erweitern um: Formularelemente hinzufügen wie Kontrollkästchen, Optionsfelder und eine Schaltfläche zum Senden. Anpassen des Formulars zum Sammeln zusätzlicher Benutzerinformationen (z. B. Geschlecht, Hobbys). Beispiel: Gender: Male Female 6. Zusätzliche Tipps Ermutigen Sie die Schüler, ihr HTML mithilfe von Tools wie dem W3C Markup Validation Service zu validieren Erklären Sie die Bedeutung von semantischem HTML und warum die Verwendung der richtigen Tags für Barrierefreiheit und SEO wichtig ist. Zusammenfassung Die Schüler werden grundlegende HTML-Tags wie Überschriften, Absätze, Bilder und Links überprüfen. Sie werden mit HTML-Elementen mittlerer Ebene vertraut gemacht: Formulare, Listen und Tabellen. Praktische Übungen und Hausaufgaben vermitteln ihnen praktische Erfahrungen beim Erstellen einer strukturierteren Webseite.