Relative und absolute Pfade

Der Link zu eurem KI Pfad-Couch

Übung

Ladet dir das ZIP-File herunter. Du findest es dann im Ordner Downloads.

Kopiere die Datei auf dein H-Laufwerk in den Ordner für dieses Schuljahr (der sollte Info 10 oder Informatik 10 heißen) und entpacke sie dort.

Wenn du nicht weißt wie man eine Zip-Datei entpackt besuche folgende Seite: Dateien entpacken

Rufe die Datei index.html durch doppelklicken in deinem Browser auf.

Du siehst sehr einfache Website mit einigen Fehlern. Sie besteht aus zwei Seiten und jede Seite sollte ein Bild enthalten.

Untersuche alle Link- und BildTags und korrigiere die Fehler.

Zusatzaufgabe KI – für alle, die ihre Note verbessern wollen oder noch keine Note haben

Schau dir das folgende Video zum Thema „GenAI Dreieck“ an.

  1. Erstelle mit einer KI deiner Wahl (du kannst gerne auch paddy.app nutzen) eine Website zum Thema des Videos. Überlege, ob du alles auf einer Seite haben möchtest oder mehre Unterseiten entstehen sollen. Dokumentiere deine Entscheidung in Word und überlege wie du der KI sagst, was du haben willst.
  2. Dokumentiere alles in einem Word-Dokument (doku.docx) und es sollten die folgenden Fragen beantwortet werden:
    • Welche KI habe ich wozu benutz?
    • Wie habe ich meine Prompts formuliert? (Prompt kopieren und kenntlich machen)
    • Denk dran! Unterhalte dich mit der KI bis du mit dem Ergebnis zufrieden bist.
    • Wie gut gibt die Seite den Inhalt des Videos wieder?

Schick mir deine Website und deine doku.docx in einem zip-Archiv (KIUebung_nachname_vorname.zip) komprimiert per Mail. Wenn du nicht weißt, wie das geht, frag die KI!

Hier könnt ihr euch Notepadd++ kostenlos herunterladen und installieren

Abgabetermin: 15.12.2025

Besser lernen mit KI

Spaced Repetition-Lernplan

Erstelle mir einen Lernplan, um das Thema [Thema] auf Niveau der [10].Klasse [Oberschule] in Sachsen unter Verwendung der Spaced Repetition Technik zu lernen. Stelle den Lernplan in Tabellenform dar und kalkuliere die Abstände der Lerneinheiten basierend darauf, dass ich noch [x] Wochen bis zur Prüfung Zeit habe.

Feyman-Technik mit ChatGPT

Stell dir vor, Du bist ein achtjähriges Kind und liebst es Fragen zu stellen. Ich werde dir ein Thema erklären und versuche, die Fenyman-Technik zu nutzen, um dir das Thema gut verständlich zu erklären. Bittel stelle mit Fragen, wenn etwas unklar ist. Sollte ich etwas falsch erklärt haben, korrigiere mich bitte.

Einbinden fiktionaler Charaktere

Binde einen Experten als Lern-Buddy ein

Du bist mein HTML‑Lern‑Buddy und trittst als Tim Berners-Lee auf. Deine Aufgabe ist es, mir HTML Schritt für Schritt verständlich zu machen. Bitte erkläre Inhalte so, dass sie für eine Person der 10. Klasse leicht nachvollziehbar sind. Gib mir kurze Beispiele im Codeblock, lasse mich kleine Übungen lösen und gib mir Feedback. Wenn ich Fehler mache, erkläre freundlich, was ich verbessern kann. Thema zum Start: Grundaufbau einer HTML-Seite.

Du bist mein HTML‑Lern‑Buddy und trittst als Iron-Man auf. Deine Aufgabe ist es, mir HTML Schritt für Schritt verständlich zu machen. Bitte erkläre Inhalte so, dass sie für eine Person der 10. Klasse leicht nachvollziehbar sind. Gib mir kurze Beispiele im Codeblock, lasse mich kleine Übungen lösen und gib mir Feedback. Wenn ich Fehler mache, erkläre freundlich, was ich verbessern kann. Thema zum Start: Grundaufbau einer HTML-Seite.

Geschichten erzählen

langweilige Inhalte werden in eine Geschichte verpackt

Ich muss das langweilige Thema XY lernen. Bitte verpacke das Thema in eine lustige Geschichte, sodass ich mir die wichtigsten Punkte besser merken kann. Verwende dafür die gleiche art von Homor wie aus der Serie Z, meiner Lieblingsserie.

Selbsttests mit ChatGPT

Erstelle mir ein kurzes Quiz zu [Thema], um meine Kenntnisse zu testen. Erstelle 10 Fragen, wovon du für 5 Fragen 4 Antwortmöglichkeiten gibst. wovon mehrere oder eine Antwort richtig sein können. Die übrigen Fragen sollen nicht Multiple-Choice, sondern offen formuliert sein, sodass ich in mehreren Sätzen schriftlich darauf Antworten kann. Gib mir Punkte von 0 bis 5 für diese Antworten und erkläre mir, was ich falsch beantwortet habe.
  • Testformat an den realen Test anpassen
  • Mustertest hochladen

Analogien

Kannst du eine Analogie für [komplexes Konzept] im [Thema] entwickeln, um es leichter verständlich zu machen?

Programmier-Übung

Aufgabe:
Baue in HTML und CSS eine Mini-Webseite mit den folgenden Elementen:

Teil A: HTML-Struktur

1. HTML-Grundaufbau:

Erstelle eine HTML-Datei mit:

  • Einem Titel (z. B. <title>Übung Klassen und IDs</title>)
  • Einer Überschrift (<h1>) mit einer ID „main-title“
  • Einem Absatz (<p>) mit einer Klasse „intro-text“

2. Tabelle mit 10 Zeilen und 5 Spalten

Die Tabelle soll darstellen, wie Daten strukturiert werden. Beispielsweise könnte sie eine Liste von Kunden enthalten:
Inhalt der Tabelle:

      3. Verwendung von Klassen-Selektoren:

      • Wechsle die Farbe der Hintergrundzeilen in der Tabelle:
        • Unterscheide zwischen geraden und ungeraden Zeilen (bspw. eine Farbe für gerade Zeilen, eine andere für ungerade).
        • Nutze dazu Klassen (z. B. .odd und .even).

      Teil B: CSS-Regeln

      1. ID- und Klassenselektoren:

      • Die Überschrift (#main-title) soll fett und unterstrichen (mit einer Linie) sein und einen orangefarbenen Hintergrund haben.
      • Der Absatz (.intro-text) soll eine gelbe Schriftfarbe und eine andere Schriftgröße haben.

      2. Tabellen-Design mit Klassen-Selektoren:

      Definiere zwei CSS-Klassen:

      • .odd: Hintergrundfarbe hellgrau (#f2f2f2)
      • .even: Hintergrundfarbe weiß

      3. Zusatzaufgabe:

      Nutze eine Pseudoklasse wie :hover, damit die Tabellenzeile beim Überfahren mit der Maus blau markiert wird.

        Links für die AppCamps Kurs

        HTML-Einführung

        HTML(HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache und wurde von Tim Bernes-Lee 1990 entwickelt. Eine Auszeichnungssprache hat die Aufgabe, logische Bestandteile eines textorientierten Dokuments zu beschreiben. Das ursprüngliche HTML enthielt nur 18 Elemente. Einige davon, wie h1-h6, p, a, ol, ul und li benutzen wir noch heute.

        HTML

        1. Dokumentation
        2. Was braucht man um HTML-Dokumente zu schreiben?
        3. Grundgerüst einer HTML-Seite
        4. HTML-Elemente und Tags
        5. Inline- und Blockelemente
        6. Bilder in Webseiten (ausführlich)

        CSS

        1. Trennung von Inhalt und Design
        2. Wie kommt das CSS ins HTML?
        3. CSS-Syntax
        4. Ausblick