E-Learning-Module für Lehrkräfte

Geordnete Moodle-Vorlagen zu Mathematik, Informatik und Chemie mit Vorschau, Quelltext und Exportmöglichkeit.

Informatik · E-Phase

Rechnernetzwerke, das Internet und die Sprache des Internets

Webentwicklung: Internet und HTML

← Zur ModulübersichtEinzelnen Quelltext herunterladen

Hinweis für Moodle

In Moodle ein Text- und Medienfeld anlegen, über Ansicht → Quellcode wechseln, den Quelltext einfügen und anschließend Bilder/Abschnitte anpassen. Bildplatzhalter markieren Stellen, an denen eigenes Material, GeoGebra-Screenshots oder Buchausschnitte eingefügt werden können.

Vorschau

So wirkt das Modul ungefähr in Moodle

Rechnernetzwerke, das Internet und die Sprache des Internets

Lehrkräfte-Hinweis zum Einsatz

Dieses Modul ist als Lehrkräfte-Ansicht vorbereitet. Die Inhalte können in Moodle als Text- und Medienfeld eingefügt und anschließend an Lerngruppe, Buchseite, Aufgabenstellung und vorhandene Materialien angepasst werden.

InformatikE-PhaseWebentwicklung: Internet und HTML

  • Einsatz: als Lernpfad, Übungsmodul, Wiederholung oder vorbereitete Unterrichtssequenz.
  • Anpassung: Abschnitte, Aufgaben und Lösungen können direkt im Quellcode ergänzt oder gekürzt werden.
  • Assets: Bildplatzhalter bewusst durch eigenes Material, GeoGebra-Screenshots oder lizenzrechtlich passende Abbildungen ersetzen.

Differenzierte Hilfen

Die Hilfen sind bewusst sichtbar als feste Sections angelegt, damit sie in Moodle ohne JavaScript, Buttons oder Aufklappfunktionen funktionieren.

Hilfe A – Einstieg

Formuliere zuerst in eigenen Worten, worum es in Rechnernetzwerke, das Internet und die Sprache des Internets geht. Markiere Schlüsselbegriffe, bekannte Größen, Operatoren und unklare Stellen.

Hilfe B – Vorgehen

Arbeitsprozess strukturieren: Problem verstehen, Eingaben/Strukturen identifizieren, Lösung in kleine Teilschritte zerlegen und Ergebnis testen.

Hilfe C – Vertiefung

Vertiefung: Lösung erweitern, Fehlersuche dokumentieren, Code/Struktur erklären und eine alternative Umsetzung vergleichen.

Schritt-für-Schritt-Vorgehen / Erwartungshorizont

Diese Vorlage kann als Erwartungshorizont, Musterlösung oder Hilfekarte genutzt werden.

  1. Aufgabe lesen und Zielprodukt bestimmen.
  2. Eingaben, Daten, HTML-Struktur, Klassen oder Objekte identifizieren.
  3. Lösung in kleine Teilschritte zerlegen.
  4. Zwischenergebnisse testen, Fehler systematisch suchen und korrigieren.
  5. Endergebnis erklären und mögliche Erweiterung notieren.
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Logo.

Ursprünglicher interner Verweis: /img/hnr.png. Bitte selbst einfügen und Lizenzrechte beachten.

Rechnernetzwerke, das Internet und die Sprache des Internets
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Header.

Ursprünglicher interner Verweis: img/Student Guid-04.png. Bitte selbst einfügen und Lizenzrechte beachten.

🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox Symbol.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Arbeitsauftrag: Dies ist dein Arbeitsauftrag für die nächsten 2 Unterrichtswoche (4×45 Minuten + Eigenarbeitsanteil). Starte eine Stoppuhr jetzt (z.B. am Handy) und übernimm jede Erläuterung in eigenen Worten in deine Unterlagen. Bearbeite jeweils erst einmal eine Übung und die KI-Aufgabe pro Abschnitt (markiert durch blaue Schrift) und prüfe danach die Zeit. Pausiere die Stoppuhr bei Unterbrechungen. Bei insgesamt ~200 Minuten kannst du deine Arbeit beenden; ansonsten arbeite weiter. Schließe nach Beendigung der Aufgaben das Feedbackmodul ab und sende mir deine Antworten aus dem Feedbackmodul im Schulportal. Dies ist der Nachweis für deine Mitarbeit. Bei Fragen kannst du dich jederzeit im Schulportal oder per Mail bei mir melden. Wenn du konkrete Nachfragen zu einer Aufgabe/Rechnung hast, dann sende mir gerne ein Screenshot/Foto von der Aufgabe per Mail.

Inhalte

Disclaimer: Achtung! In den Aufgaben wirst du dazu aufgefordert, KI-Sprachmodelle zu nutzen. Wenn du das nicht möchtest oder darfst, kannst du diese Aufgaben überspringen. Bitte kläre dies vorher mit deinen Erziehungsberechtigten und lies die Datenschutzerklärungen sowie AGB.

🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Wie funktioniert das Internet?

Das Internet ist kein einzelner Ort, sondern ein Netz aus vielen Netzen, die miteinander Daten austauschen. Damit zwei Geräte (z. B. dein Smartphone und ein Webserver) miteinander „reden“ können, brauchen sie gemeinsame Regeln (Protokolle wie HTTP/HTTPS), eindeutige Adressen (IP) und Wege, die Datenstücke (Pakete) sicher ans Ziel bringen.

Wichtig für dich: Ab dem WLAN-Router oder dem Mobilfunkmast laufen die Signale immer über Kabel – meist Glasfaser. Und bevor dein Browser eine Seite anzeigen kann, wird der Name (z. B. example.org) über das DNS in eine IP-Adresse übersetzt. Die Videos unten zeigen Historie, grundlegende Abläufe und echte Netzinfrastruktur – schaue sie dir an und beantworte die Fragen dazu.

🎬
[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube-nocookie.com/embed/EKm6pJSI-aQ

Video 1 · Geschichte & Prinzipien

  1. Warum wechselten die Entwickler von einem zentralen Rechner zu einem dezentralen Netz? Erkläre den Vorteil bei Ausfällen.
  2. Was bedeutet Paketvermittlung im Video – und warum macht das die Übertragung schneller/effizienter als ein großes Datenpaket?
  3. Was passierte bei der ersten Internet-Nachricht am 29.10.1969 („LO/LOGIN“)? In welchem Experiment/Netz fand das statt?
  4. Welche Rolle spielten die zwischengeschalteten Prozessoren/IMPs und später das TCP/IP-Protokoll? Warum ist TCP/IP bis heute grundlegend?
  5. Worin unterscheidet sich das Internet vom World Wide Web? Was hat Tim Berners-Lee erfunden, das das „Surfen“ möglich machte?
🎬
[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube-nocookie.com/embed/D_Xx8527kAw

Video 2 · Client/Server & DNS

  1. Erkläre kurz den Unterschied zwischen Client (z. B. Browser/Smartphone) und Server. Was tauschen sie aus?
  2. Warum „geht ab Router/Mobilfunkmast nichts mehr ohne Kabel“? Nenne zwei genannte Kabelstrecken (z. B. Glasfaser unter Straßen/Meeren).
  3. Welche Aufgabe hat das DNS im Ablauf URL → Website? Beschreibe die Umwandlung von Namen in IP-Adressen und warum jedes Gerät eine IP braucht.
  4. Wofür steht HTTPS und welchen Vorteil bringt das „S“ gegenüber HTTP bei der Übertragung deiner Daten?
  5. Wie gelangen die Dateien der Website vom Server zu dir? Nutze die Stichworte Lichtimpulse, Glasfaser und Zeit (Millisekunden).
🎬
[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube-nocookie.com/embed/cyROBOQ6Ybg

Video 3 · Netzinfrastruktur & Sicherheit

  1. Skizziere den Weg deiner Daten vom Handy bis zum Hausanschluss anhand der Stationen im Video (z. B. Funkmast/Richtfunk → Glasfaser → Netzknoten/WDM → Backbone → Vermittlungsstelle/OLT → Straßenverteiler → Haus).
  2. Was macht die WDM-Einheit im Netzknoten, und warum vergleicht der Experte sie mit einer „fünfspurigen Autobahn“?
  3. Warum ist der Netzausbau in Deutschland teils langsam? Nenne zwei Gründe aus dem Video (z. B. Tiefbau/Vorschriften, lange Nutzung von Kupfer/Vectoring).
  4. Was bedeutet FTTH und welche konkreten Maßnahmen nennt die Telekom, um den Ausbau zu beschleunigen (z. B. Ziel Haushalte/Jahr, eigene Monteure/Tiefbaufirma, digitalisierte Planung/LiDAR-Auto)?
  5. Nenne zwei Ursachen für Störungen (z. B. Bagger/physische Schäden, Cyberangriffe) und jeweils eine Gegenmaßnahme (Redundanzen, Einmessen/Reparatur, Cyber Defense/SOC, Disaster-Recovery).

KI-Aufgaben (wähle eine oder bearbeite alle)

Video 1 · Merksätze mit Fehlern:
Aufgabe: Öffne ein KI-Sprachmodell deiner Wahl (ChatGPT, Gemini, Claude, …) und tippe:
„Sieh dir das Video https://www.youtube.com/watch?v=EKm6pJSI-aQ an (nutze ggf. das Transkript). Formuliere zum Thema ‘Entstehung des Internets, dezentrale Netze & Paketvermittlung’ vier Merksätze. Drei dieser Merksätze sollen kleine inhaltliche Fehler enthalten, die ich selbst korrigieren möchte. Wenn du nicht auf das Video/Transkript zugreifen kannst, sag mir Bescheid und ich sende dir einen Screenshot oder schreibe das relevante Zitat ab.“
Video 2 · „Wer wird Millionär?“-Quiz:
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Nutze das Video https://www.youtube.com/watch?v=D_Xx8527kAw (Client/Server, DNS, IP, HTTPS, Glasfaser). Erstelle fünf Quizfragen im Stil von ‘Wer wird Millionär?’ und stelle sie mir nacheinander wie ein Showmaster. Wenn ich etwas falsch beantworte, korrigiere mich kurz und verständlich. Wenn du nicht auf das Video zugreifen kannst, sag Bescheid – ich sende dir ein Bild/Screenshot.“
Video 3 · Wahr/Falsch (10 Aussagen):
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Nutze das Video https://www.youtube.com/watch?v=cyROBOQ6Ybg (WDM/Backbone, OLT, FTTH, SOC). Formuliere dazu 10 ‘Wahr oder Falsch’-Aussagen. Stelle mir die Aussagen nacheinander. Wenn ich eine Aussage falsch bewerte, erkläre sie mir und fahre mit der nächsten fort. Wenn du nicht zugreifen kannst, gib mir kurz Bescheid (ich liefere Screenshots).“
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Rechnernetze und Netzwerke

In einem Rechnernetz sind viele Geräte über Leitungen oder Funk verbunden, damit sie Daten austauschen können. Dazu gehören Endgeräte (PC, Smartphone, Drucker) und Komponenten, die den Datenverkehr leiten: Router (zwischen Netzen), Switches (innerhalb eines Netzes) und Netzwerkkarten (Anschluss eines Geräts ans Netz).

Lies die Inhalte der Seite „Rechnernetze und Grundlagen des Internets“ und bearbeite die Fragen. Die Struktur der Fragen folgt der Seite: Aufbau & Bestandteile, Funktionen, Netzwerkarten/Topologien, Grundlagen des Internets (IP, DNS, TCP/IP), Client-Server, Sicherheitsaspekte.

🎬
[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube-nocookie.com/embed/yS3XkCGLwg8

Recherche- & Verständnisfragen zur Seite

Quelle: harzenetter.eu/info/rechnernetze/

  1. Aufbau & Bestandteile: Liste die im Text genannten Geräte eines Netzes (z. B. Server, PC, Drucker) sowie die Netzkomponenten Router, Switch, Netzwerkkarte auf. Beschreibe für jede Komponente kurz ihre Funktion.
  2. Funktionen der Komponenten: Erkläre am Beispiel deines Heimnetzes, welche Aufgaben Router, Switch (falls vorhanden) und Netzwerkkarte übernehmen. Nenne zu jeder Komponente ein konkretes Gerät oder eine Stelle in deinem Setup.
  3. Netzwerkarten/Topologien: Charakterisiere die Topologien Bus, Stern und Ring: Skizziere den Verkabelungsaufbau in einem Satz und nenne je einen Vorteil/Nachteil.
  4. Einordnung: Welche der genannten Topologien ist heute in Heimnetzen am verbreitetsten? Begründe kurz mit einem Praxisargument.
  5. IP-Adresse: Erkläre den Unterschied zwischen privater IP-Adresse in deinem Heimnetz und öffentlicher IP-Adresse am Internetanschluss. Wozu dient diese Trennung?
  6. DNS: Formuliere in 2–3 Sätzen, wie das Domain Name System menschenlesbare Namen in IP-Adressen umwandelt. Warum wäre das Internet ohne DNS unpraktisch?
  7. TCP/IP-Referenzmodell: Ordne die im Text genannten Protokolle den Schichten zu: Anwendungsschicht (HTTP, SMTP), Transportschicht (TCP), Internetschicht (IP), Netzwerkzugangsschicht (physische Übertragung). Ergänze je Schicht eine sehr kurze Aufgabe in eigenen Worten.
  8. Client-Server: Definiere Client, Server, Dienst und Protokoll jeweils in einem Satz. Beschreibe den Ablauf einer Webanfrage inkl. DNS und HTTPS.
  9. Sicherheit: Was leistet HTTPS für Vertraulichkeit/Integrität? Nenne zwei weitere Schutzmaßnahmen (z. B. Firewall, Authentifizierung) kurz erläutert.
  10. Reflexion: Welche zwei Aspekte waren dir neu oder unklar? Erkläre, was du jetzt daran verstehst.
  11. Bonus (KI-Aufgabe): Bitte ein KI-Tool um eine 60–80-Wörter-Analogie, die das Zusammenspiel von Client, Server und Protokoll erklärt. Prüfe die Antwort kritisch und verbessere sie ggf.
Rechnernetze · „Wer wird Millionär?“-Quiz:
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Durchsuche https://harzenetter.eu/info/rechnernetze/index.html. Formuliere fünf Quizfragen im Stil von ‘Wer wird Millionär?’ (Aufbau/Bestandteile, Router/Switch/NIC, Topologien, IP/DNS/TCP-IP, Client-Server, Sicherheit). Stelle mir die Fragen nacheinander wie ein Showmaster und erkläre falsche Antworten kurz. Falls du nicht auf die Website zugreifen kannst, sag Bescheid, dann sende ich ein Foto/Screenshot.“
Rechnernetze · Wahr/Falsch (10 Aussagen):
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Nutze die Inhalte von https://harzenetter.eu/info/rechnernetze/index.html. Erstelle 10 ‘Wahr oder Falsch’-Aussagen zu Router/Switch/NIC, Topologien (Bus/Stern/Ring), IP privat/öffentlich, DNS, TCP-IP-Schichten, Client-Server, HTTPS/Firewall/Authentifizierung. Stelle sie mir nacheinander und erkläre mir falsche Antworten. Wenn du die Seite nicht öffnen kannst, gib Bescheid (ich sende Screenshots).“
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Was ist HTML?

HTML (HyperText Markup Language) ist die Sprache, mit der wir den Aufbau von Webseiten beschreiben. Sie sagt dem Browser: „Hier ist eine Überschrift“, „das ist ein Absatz“, „hier kommt ein Bild“, „dies ist ein Link“. HTML ist dabei keine Programmiersprache (sie enthält z. B. keine Berechnungen oder Entscheidungen), sondern eine Auszeichnungssprache (engl. Markup): Inhalte werden mit Tags ausgezeichnet, damit sie verständlich strukturiert sind.

Stell dir eine Zeitung vor: Die Inhalte (Artikel, Bilder) entsprechen dem HTML. Das Layout (Farben, Schriften, Spalten) macht das CSS. Interaktive Funktionen (Formular prüfen, Menü auf/zu) liefert JavaScript. Zusammen ergeben diese drei Bausteine das, was du als Webseite wahrnimmst.

Wenn du eine Adresse (URL) im Browser aufrufst, fragt dein Gerät (der Client) bei einem entfernten Server die Seite an. Der Server schickt die HTML-Datei über das Webprotokoll HTTP/HTTPS zu dir. Dein Browser wandelt den Code in eine Baumstruktur (DOM) um und zeigt sie an. Genau deshalb ist eine saubere Struktur in HTML so wichtig: Menschen und Maschinen (z. B. Screenreader, Suchmaschinen) verstehen die Seite besser.

Moderne HTML-Versionen (HTML5) bieten viele semantische Elemente wie <header>, <nav>, <main>, <article>, <section>, <footer>. Sie beschreiben die Bedeutung eines Bereichs. Das verbessert Barrierefreiheit, Suchmaschinen-Verständnis und Teamarbeit.

KI-Aufgabe: Merksätze mit kleinen Fehlern
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Nutze https://developer.mozilla.org/de/docs/Web/HTML (MDN, HTML-Grundlagen). Formuliere vier Merksätze zu ‘HTML ist Markup, nicht Programmierung’, ‘Rolle von HTML/CSS/JS’, ‘Semantische Elemente’, ‘DOM’. Drei Merksätze sollen kleine Fehler enthalten, die ich selbst korrigiere. Wenn du die Seite nicht öffnen kannst, sag bitte Bescheid; ich sende dir ein Foto/Screenshot.“
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Wie ist HTML aufgebaut?

Ein HTML-Dokument folgt immer einem ähnlichen Muster: Oben steht die Dokumenttyp-Deklaration <!DOCTYPE html>. Sie sagt dem Browser: „Nutze den modernen Darstellungsmodus“. Unter dem Wurzelelement <html lang="de"> findest du zwei Bereiche:

  • <head>: Unsichtbare Informationen über die Seite, z. B. <meta charset="UTF-8"> (Zeichensatz), <meta name="viewport"> (Mobile-Ansicht), <title> (Titel im Tab), Verweise auf CSS/JS.
  • <body>: Der sichtbare Inhalt der Seite – Texte, Bilder, Videos, Links, Formulare usw.

HTML besteht aus Tags (meist öffnend und schließend), z. B. <p>...</p>. Tags können Attribute tragen, die Details ergänzen (z. B. alt für Bilder, href für Links). Elemente werden verschachtelt, um Struktur auszudrücken. Gute Praxis: einheitliche Einrückung, sinnvolle Semantik, korrekt geschlossene Tags.

Der Browser baut daraus das DOM (Dokument-Objekt-Modell). CSS „bemalt“ das DOM (Aussehen), JavaScript kann es verändern (Interaktion). Je sauberer dein HTML, desto verlässlicher funktioniert Styling und Interaktion – und desto leichter findest du später Fehler.

Merke: HTML beschreibt Struktur und Bedeutung, nicht Design. Für Farben und Layout ist CSS zuständig. Trenne beides – das macht deine Seiten stabil, barrierefrei und besser wartbar.

KI-Aufgabe: „Wer wird Millionär?“-Quiz
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Durchsuche https://developer.mozilla.org/de/docs/Web/HTML (Grundlagen, Struktur, Doctype, Kopf/Body, Tags/Attribute). Erstelle fünf Quizfragen im Stil von ‘Wer wird Millionär?’ zu Doctype, <head> vs. <body>, Attributen (z. B. lang, alt), Semantik (<main>, <nav>), DOM. Stelle mir die Fragen nacheinander und korrigiere falsche Antworten kurz. Wenn du nicht zugreifen kannst, sag Bescheid (ich sende ein Bild/Screenshot).“
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Textbox.

Ursprünglicher interner Verweis: /img/Stift.png. Bitte selbst einfügen und Lizenzrechte beachten.

Verstehen und Erstellen der ersten HTML-Datei

Starte mit einem kleinen, gültigen Grundgerüst und erweitere es schrittweise: erst Struktur, dann Inhalte, dann (optional) Styling. Lege dir einen Ordner an (z. B. projekt/) und speichere deine Datei als index.html. Bilder kommen in einen Unterordner img/, CSS in styles.css. So bleiben Pfade überschaubar. 


<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header><h1>Hallo Welt</h1></header>
    <main>
      <p>Willkommen im Informatik-Unterricht!</p>
      <img src="bild.jpg" alt="Beispielmotiv">
      <p>Mehr unter <a href="https://example.org">example.org</a>.</p>
    </main>
  </body>
</html>

Aufgabe 1: Markiere dir bekannte Elemente im Code, benenne und beschreibe sie (z. B. <!DOCTYPE html> – Dokumenttyp).

Aufgabe 2: Trenne Head/Body-Elemente: Welche Tags gehören wohin? Woran erkennt man das?

Aufgabe 3: Ergänze semantische Tags (z. B. <nav>, <section>, <footer>) und beschreibe kurz ihren Zweck.

Aufgabe 4: Füge ein Bild mit sinnvollem alt-Text ein. Erkläre, warum der alt-Text wichtig ist.

Aufgabe 5: Öffne deinen Editor (z. B. Notepad/Notepad++/VS Code), speichere als .html, und beobachte Syntax-Highlighting und Einrückung.

Aufgabe 6: Recherchiere drei neue HTML-Elemente auf w3schools.com und baue sie ein. Beschreibe Wirkung/Kontext kurz.

Aufgabe 7: Validiere deine Datei (z. B. schließende Tags, verschachtelte Struktur) und notiere den finalen Code ordentlich eingerückt.

Hinweis: Öffne die Datei im Browser, um die Darstellung schnell zu prüfen. Häufige Fehler am Anfang: fehlender Schlusstag, Tippfehler im Dateinamen (.html!), falscher Bildpfad, Umlaute ohne UTF-8.

KI-Aufgabe: Wahr/Falsch (10 Aussagen)
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Erstelle 10 ‘Wahr oder Falsch’-Aussagen zur Erstellung einer ersten HTML-Datei: Doctype, <html lang>, <meta charset>, <meta viewport>, <title>, semantische Tags, <img alt>, Links, saubere Einrückung/Validierung. Stelle sie mir nacheinander; erkläre mir falsche Antworten kurz. Nutze bei Bedarf MDN als Quelle (HTML-Grundlagen).“

HTML-Glossar

Vervollständige die Lücken – nutze bei Bedarf deine Notizen. Tipp: Lies die Sätze laut vor. Wenn sie Sinn ergeben und du konkrete Beispiele nennen kannst, liegst du richtig. Achte darauf, ob ein Element sichtbar ist (gehört meist in den <body>) oder die Seite beschreibt (gehört in den <head>).

  • <html>...</html>: Definiert den Beginn ____________________________.
  • <head>...</head>: Enthält ____________________________ und den ____________________________ der Webseite.
  • <body>...</body>: Der ____________________________ der Webseite wird hier eingefügt.
  • <h1>...<h6>: ____________________________ in verschiedenen Größen.
  • <p>...</p>: Absätze für ____________________________.
  • <img>: ____________________________ einfügen (mit alt-Text).
  • <a>...</a>: ____________________________ zu anderen Seiten/Dokumenten.
  • <br>: ____________________________ (Zeilenumbruch, leer).
KI-Aufgabe: Merksätze mit kleinen Fehlern (Glossar)
Aufgabe: Öffne ein KI-Sprachmodell … und tippe:
„Nutze https://developer.mozilla.org/de/docs/Web/HTML/Element (MDN, Elemente-Referenz). Formuliere vier Merksätze zu den Tags <html>, <head>, <body>, <h1>…<h6>, <p>, <img alt>, <a href>, <br>. Drei der Sätze sollen kleine Fehler enthalten, die ich identifiziere und korrigiere. Wenn du nicht zugreifen kannst, sag Bescheid (Screenshot möglich).“
🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Hilfenbox.

Ursprünglicher interner Verweis: /img/Student Guid-07.png. Bitte selbst einfügen und Lizenzrechte beachten.

Quellen

Hier sind einige nützliche Quellen, die dir beim Lernen von HTML und Netzwerktechnik helfen können:

🖼️
[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Lösungs-Modul (interaktiv)

Nutze die Musterlösungen erst nach deiner eigenen Bearbeitung zur Selbstkontrolle. Lies die Lösung aufmerksam und vergleiche: Habe ich die Schlüsselbegriffe verwendet? Ist meine Begründung nachvollziehbar? Passe deine Antworten ggf. an.

Alle Lösungen anzeigen
Alle Lösungen ausblenden

Wie funktioniert das Internet · Video 1

Lösung anzeigen
Ausblenden

Quelle: Transkript Video 1 (Geschichte, Paketvermittlung, ARPANET, TCP/IP, WWW).

Wie funktioniert das Internet · Video 2

Lösung anzeigen
Ausblenden

Quelle: Transkript Video 2 (Client/Server, Kabel, DNS, IP, HTTPS, Glasfaser/Lichtimpulse).

Wie funktioniert das Internet · Video 3

Lösung anzeigen
Ausblenden

Quelle: Transkript Video 3 (WDM/Backbone, OLT, FTTH, Ausbaustrategie, SOC/Redundanz).

Rechnernetze & Netzwerke (Seite)

Lösung anzeigen
Ausblenden

Hinweise passend zur Seite „Rechnernetze und Grundlagen des Internets“.

Erste HTML-Datei · Aufgaben

Lösung anzeigen
Ausblenden

Musterantworten zu Aufgaben 1–7 (Semantik, alt-Text, Struktur, Validierung).

HTML-Glossar

Lösung anzeigen
Ausblenden

Vervollständigte Lücken inkl. kurzer Erläuterung.

Feedbackmodul

Beantworte die Fragen und sende deine Antworten im Schulportal mit dem Betreff:
„E HNR – Feedback E-Learning: Internet und HTML“.

    Erstelle einen Ordner "Informatik". Erstelle darin einen Unterordner mit deinem Namen. Lade deine Website in diesen Ordner auf deiner WK-Schulcloud hoch. Teile den Ordner mit deinem Namen mit mir.

  1. Freitext: Welche Teile hast du bearbeitet? (z. B. Videos 1–3, Rechnernetze-Seite, „Was ist HTML?“, „Aufbau von HTML“, „Erste HTML-Datei“, Glossar, Lösungs-Modul, KI-Aufgaben)
    ______________________________
  2. Freitext (Merksätze): Formuliere zwei eigene Merksätze:
    • 1× zu den Internet-Grundlagen (z. B. Client-Server, DNS/IP, HTTPS).
    • 1× zu HTML (Struktur vs. Design vs. Interaktivität).
    ______________________________
  3. Multiple-Choice: Welche Methoden/Werkzeuge hast du genutzt? (Mehrfachauswahl möglich)
    ☐ Lernvideos (V1–V3)
    ☐ Webseite harzenetter.eu/info/rechnernetze
    ☐ Eigene Notizen/Skizzen
    ☐ Code-Editor (z. B. VS Code/Notepad++)
    ☐ Browser-Test/Ansicht (ggf. DevTools)
    ☐ W3C-Validator/HTML-Checker
    ☐ KI-Aufgaben: Merksätze mit Fehlern
    ☐ KI-Aufgaben: „Wer wird Millionär?“-Quiz
    ☐ KI-Aufgaben: Wahr/Falsch (10 Aussagen)
    ☐ Sonstiges: ____________________________
  4. Single-Choice: Wie schwierig fandest du die Inhalte insgesamt?
    ○ sehr einfach ○ einfach ○ mittel ○ schwierig ○ sehr schwierig
  5. Skalafrage (1–5): Wie zufrieden bist du mit diesem Modul?
    1 (sehr unzufrieden) … 5 (sehr zufrieden): __
  6. Ja/Nein: Hast du alle Übungen inkl. mindestens einer KI-Aufgabe pro Kapitel bearbeitet?
    ○ Ja ○ Nein
  7. Likert + Zusatz: „Ich habe die Musterlösungen erst nach eigener Bearbeitung angesehen.“
    1 … 5: __   Falls nein: Warum? ___________________________________________
  8. Zeitangabe: Geschätzte Arbeitszeit gesamt: ______ Minuten
  9. Selbsteinschätzung (je 1–5):
    • Internet-Grundlagen (Client-Server, DNS/IP, HTTPS): __
    • HTML-Grundlagen (Struktur, semantische Tags, erste Datei): __
  10. Freitext: Was hat dir am meisten geholfen? (z. B. ein Video, eine Aufgabe, eine Erklärung, ein Tool)
    ______________________________
  11. Offene Frage: Was soll ich verbessern (Inhalte, Tempo, Aufgaben, Technik)?
    ______________________________
Copy-Paste

Moodle-Quelltext