DCV 2024 09/HTML: Unterschied zwischen den Versionen

Aus CCWiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Gyula (Diskussion | Beiträge)
288 Bearbeitungen
Gyula (Diskussion | Beiträge)
288 Bearbeitungen
Gyula (Diskussion | Beiträge)
288 Bearbeitungen
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 93: Zeile 93:


Du kannst auch die [https://developer.mozilla.org/en-US/docs/Web/CSS/clamp clamp()] CSS Funktionen gut brauchen...
Du kannst auch die [https://developer.mozilla.org/en-US/docs/Web/CSS/clamp 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 ===
=== Favicon und Title ===
Zeile 105: Zeile 113:


Füge eine [https://www.w3schools.com/html/html_tables.asp Tabelle] mit Headline und Datenzeilen zu deiner Webseite.
Füge eine [https://www.w3schools.com/html/html_tables.asp Tabelle] mit Headline und Datenzeilen zu deiner Webseite.
=== Verwenden von Schriftarten ===
==== Neue Schriftart laden ====
Lade eine neue [https://www.w3schools.com/css/css_font.asp Schriftart] ein und verwende es in Headline 1.
Neue Fonts kann man auch in [https://fonts.google.com/ Google Fonts] finden.
==== Fallback Mechanismus ====
Definiere [https://www.w3schools.com/css/css_font_fallbacks.asp Fallback] für die Schriftart.


=== Block und Inline Elemente ===
=== Block und Inline Elemente ===
Zeile 129: Zeile 149:


Erstelle ein Layout mit [https://www.w3schools.com/css/css_grid.asp Grid].
Erstelle ein Layout mit [https://www.w3schools.com/css/css_grid.asp Grid].
== Fancy Gadgets ==
Probiere aus verschiedene Werkzeuge:
* [https://www.w3schools.com/css/css3_transitions.asp Transition] (Verzögerte Aktion)
* [https://www.w3schools.com/css/css3_animations.asp Animation]
* [https://www.w3schools.com/css/css3_2dtransforms.asp Transformation]
* [https://www.w3schools.com/css/css3_gradients.asp Gradient]
* [https://www.w3schools.com/css/css3_shadows.asp Schatten]
* [https://www.w3schools.com/css/css3_variables.asp CSS Variablen]

Aktuelle Version vom 9. Dezember 2024, 07:53 Uhr

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. Neue Fonts kann man auch in Google Fonts finden.

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:

Abgerufen von „https://ccwiki.digitalcampusvorarlberg.at/index.php?title=DCV_2024_09/HTML&oldid=3740“