Schlagwort: CSS

Veröffentlicht am

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

Veröffentlicht am

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.

        Veröffentlicht am

        Links für die AppCamps Kurs

        Veröffentlicht am

        Bewertungsgrundlagen HTML-Projekt

        1. Korrektes HTML 5P
        2. gut strukturierter, übersichtlicher Code 5P
        3. Verwendung der HTML-Elemente H1, p, img, a evtl. ul und li für die Navigation 5P
        4. funktionierende Navigation 5P
        5. sinnvolle Seiten- und Absatzstruktur 2P
        6. Gesamtkonzept der Seite 2P
        7. (Verwendung von CSS) 2P

        Veröffentlicht am

        HTML-Projekt

        Erstelle eine Website mit 4 Seiten (+Quellenseite). Die Seiten sollen durch ein gemeinsames Menü (Navigation) verbunden werden. Jeder Seite sollte min. 1 Überschrift (besser mehr), 300 Wörter Text in min. 3 Absätzen und 1 dazu passendes Bild enthalten.

        Das Thema bleibt euch überlassen. Es kann über deinen letztes Urlaubsland sein, dein Hobby oder irgendetwas Anderes sein, für das ihr euch gerade interessiert.

        Beachte bei den Bildern das Urheberrecht. D.h. Informiere dich welche Bilder du wie im Internet nutzen kannst.

        Ihr könnt gerne eine KI zum erzeugen des Textes nutzen (Erstelle eine weitere Seite mit deinen Verwendeten Quellen). Auf das Projekt gibt es zwei Noten. Eine Note für Recherche und Inhalt und eine Note für HTML & CSS Nutzung.

        Ihr habt maximal 3 Doppelstunden Zeit.

        Tipps zum Ablauf:

        1. Erstelle zunächst die Grundgerüste für die Seiten. Deine Startseite muss index.html heißen (diese wird vom Webserver automatisch zuerst aufgerufen) Alle anderen Seiten können bliebig benannt werden (verwende websichere Dateinamen, kein Leerzeichen, keine deutschen Umlaute). Alle Dateien benötigen die Endung .html
        2. Verbind die Seiten mit Links die in einer unsortierten Liste angeordnet sein.
          (Auf der Seite zu Bildern findest du ein Video zu relativen und absoluten Pfaden)
        3. Fülle die Seiten mit Inhalt (Texten und Bilder)
        4. Erstelle eine zentrales CSS-Datei für das Projekt

        Beispiel: meine kleine Seite zu KI

        Veröffentlicht am

        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
        Veröffentlicht am

        Trennung von Inhalt und Design

        Ein extrem großer Vorteil von CSS ist die Trennung des Designs vom eigentlichen Inhalt, der in HTML-Dateien steckt. Das Design wird dazu in eine eigene Datei ausgelagert und kann dann für alle Seiten eines Internetauftritts verwendet werden. Werden dann Änderungen am Design gemacht, sind durch diese gemeinsame CSS-Datei sofort alle Einzelseiten auf dem neuesten Stand.

        Beispiel

        CSS Zen Garden: The Beauty of CSS Design

        Zurück zur Übersicht

        Veröffentlicht am

        Grundlagen Webentwicklung

        Was du eigentlich lernen musst, ist HTML, CSS und evtl. JavaScript (je nachdem wir tief du in das Thema einsteigen willst.

        Ich persönlich mag den Youtube-Kanal The Morpheus Tutorials, hier findest du sehr viele fachlich gute Tutorials zum vielen IT-Themen.

        Ich nutze und schätze folgende Online-Doku zum Webentwicklungsthemen:

        Hier im Unterricht benutzen wir notepad++. Ich bevorzuge Visual Studio Code.