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.

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.

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.