DCV 2024 09/HTML

HTML / CSS Übungen

Das Ziel des Moduls ist, eine Responsive Webseite mithilfe von HTML und CSS zu erstellen. Eine responsive Seite, kann auf unterschiedlichen Display Größen (zB: Monitor, Smartphone) vernünftig angezeigt.

Die Prioritäten sind:

• klare Code-Struktur
• Angenehmes Design

Pädagogische Konzept

Als HTML / CSS viel einfacher ist, als zB: Datenbankanbindung in Java, werden wir den Fokus auf Selbststudium setzen. Dies bedeutet, dass ihr einen Hinweis erhalten werdet, was-wo beschrieben ist und ihr musst die notwendige Information selbst zusammentragen.

HTML Sprache

Konzept der HTML-Sprache kennenlernen.

Fragen:

• Was ist ein Tag?
• Wo beginnt ein Tag, wo endet es?
• Was ist ein Attribut?
• Was sind die Pflicht Tags für eine minimale Webseite?

Literatur: HTML Basics

Hello World! in HTML

Erstelle ein HTML Dokument, die als minimal HTML dient und nichts anderes als "Hello World!" beinhaltet.

Erstelle ein Dokument mit mehreren Absätzen

Verwende Paragraf für eine strukturierte Form für längere Texte.

Struktur eines Dokuments mit Headline H1 bis H6

Erstelle ein Fan Page für deine Lieblings-TV-Serie (Fußballklub). Strukturiere die Information in Kapiteln.

Verwende Liste

Liste der Schauspieler / Fußballspieler kann auch als Liste dargestellt werden. Welche Formen der Listen existieren.

Weitere Dokumente verknüpfen

Erstelle Detail-Seite für die wichtigen Personen. Verlinke die Seiten auf die Hauptseite. Achte darauf, dass du auch zurücknavigieren musst.

Verwende verschiedene Farben

Das Aussehen kannst du mit Inline CSS ändern. Verwende Farben, um das Aussehen deiner Webseite zu verbessern.

Verwende Farben:

• mit Namen
• mit HEX Code
• mit RGB Code
• mit HSL

Was ist der Unterschied zwischen diese Methoden? Was bedeutet A in RGBA oder in HSLA?

Wie finde ich zusammenpassenden Farben? Verwende Google (oder ChatGPT) für deine Recherche!

Worauf muss man bei Textfarben besonders achten? Welche Werkzeuge können da uns behilflich sein?

Überarbeite dein Inline CSS mit Anwendung von style Tage.

Erkenne das spezielle Format der CSS Sprache.

Was sind Selektoren? Welche Selektoren kennst du schon? Eine längere Liste findest du hier!

Anwendung externe CSS Dokument

Wenn wir eine harmonische, vergleichbare Aussehen zwischen verschiedenen Unterseiten brauchen, ist es ratsam eine externe CSS Dokument verwenden und anknüpfen.

Bilder

Nur Text macht keinen guten ersten Eindruck für eine Webseite. Füge Bilder zu der Seite ein.

Textformatierung

Für mehr visuelle Möglichkeiten kannst du die Schriftgröße, Gewicht und Schriftart ändern.

Fragen, die mithilfe von Google (ChatGPT) zu beantworten sind:

• Wie wählen wir Schriftarten aus?
• Welche Schriftarten passen gut zusammen?
• Worauf muss man mit Schriftarten aufpassen?

Absolute / Relative Größe

Verwende unterschiedliche Techniken, Größenverhältnisse anzupassen

• px
• cm
• em
• %
• vw
• vh

Du kannst auch die clamp() CSS Funktionen gut brauchen...

Wiederholung CSS Selektor

Schau noch einmal die CSS Selektoren an!

Verwende Google (ChatGPT) für die Recherge:

• Welche CSS Anweisungen sind aktiv?
• Ab wann, bis wann gelten diese Anweisungen?

Favicon und Title

Was ist ein Favicon und wo wird es angezeigt?

Füge eine Favicon zu deiner Seite!

Füge einen Titel zu deiner Seite!

Daten tabellarisch darstellen

Füge eine Tabelle mit Headline und Datenzeilen zu deiner Webseite.

Verwenden von Schriftarten

Neue Schriftart laden

Lade eine neue Schriftart ein und verwende es in Headline 1.

Fallback Mechanismus

Definiere Fallback für die Schriftart.

Block und Inline Elemente

Was ist der Unterschied zwischen block und inline Elemente? Welche sind die von bisher verwendeten Elementen Block-Elementen, welche sind Inline?

DIV und SPAN

Was ist die Rolle von div und span Elementen? Verwende in deiner Webseite beide!

Layout

Organisiere deine Webseite in verschiedene div's. Probiere unterschiedliche Layouts aus.

Float

Erstelle ein Layout durch Float Technik.

Flex

Erstelle ein Layout mit Flexbox.

Grid

Erstelle ein Layout mit Grid.

Fancy Gadgets

Probiere aus verschiedene Werkzeuge:

• Transition (Verzögerte Aktion)
• Animation
• Transformation
• Gradient
• Schatten
• CSS Variablen