From 6cd482258e2094a0ba37f2e78783c60f06ebf528 Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Sat, 21 Sep 2024 20:15:31 +0200 Subject: [PATCH] feat(slides): Basic HTML Tags --- src/components/slides/html-tags/index.astro | 11 ++ .../slides/html-tags/structure/index.astro | 102 ++++++++++++++++++ .../slides/html-tags/tags/div-p.astro | 27 +++++ .../slides/html-tags/tags/extras.astro | 20 ++++ .../slides/html-tags/tags/heading.astro | 38 +++++++ .../slides/html-tags/tags/index.astro | 15 +++ .../slides/html-tags/tags/inline-text.astro | 82 ++++++++++++++ .../slides/html-tags/tags/listings.astro | 87 +++++++++++++++ src/components/slides/html-tags/title.astro | 6 ++ src/layouts/Reveal.astro | 3 + src/pages/slides/html-tags.astro | 8 ++ 11 files changed, 399 insertions(+) create mode 100644 src/components/slides/html-tags/index.astro create mode 100644 src/components/slides/html-tags/structure/index.astro create mode 100644 src/components/slides/html-tags/tags/div-p.astro create mode 100644 src/components/slides/html-tags/tags/extras.astro create mode 100644 src/components/slides/html-tags/tags/heading.astro create mode 100644 src/components/slides/html-tags/tags/index.astro create mode 100644 src/components/slides/html-tags/tags/inline-text.astro create mode 100644 src/components/slides/html-tags/tags/listings.astro create mode 100644 src/components/slides/html-tags/title.astro create mode 100644 src/pages/slides/html-tags.astro diff --git a/src/components/slides/html-tags/index.astro b/src/components/slides/html-tags/index.astro new file mode 100644 index 0000000..3c1a4ea --- /dev/null +++ b/src/components/slides/html-tags/index.astro @@ -0,0 +1,11 @@ +--- +import TitleSlide from './title.astro' +import TagSlides from './tags/index.astro' +import Structure from './structure/index.astro' +--- + +
+ + + +
\ No newline at end of file diff --git a/src/components/slides/html-tags/structure/index.astro b/src/components/slides/html-tags/structure/index.astro new file mode 100644 index 0000000..0b6e777 --- /dev/null +++ b/src/components/slides/html-tags/structure/index.astro @@ -0,0 +1,102 @@ +
+
+

Äußere Struktur eines HTML Dokumentes

+
+ +
+

+ Bisher haben wir mehr generische und wiederverwendbare Elemente in einem HTML-Dokument gesehen +
+ Aber eine wichtige Sache fehlt dem noch: +

+
    +
  • Menü?
    • +
  • Navigationselemente wie Breadcrumbs?
    • +
  • Normalerweise gibt es auch einen Footer
    • +
  • Wo fängt der "eigentliche" Content an?
    • +
+
+ +
+

Der "Kopf" einer Website

+
    +
  • Ein Logo
    • +
  • Navigation zu Unterseiten
    • +
  • Bei größeren Anwendungen: Eine "User-Section"
    • +
  • Ggf Suche?
    • +
+
+ +
+

+ Das <header> Element existiert zu diesem Zweck +
+ Zusätzlich wertvoll für die Accessibility einer Website +

+
+ +
+

Wo der eigentliche Content liegt

+

+ Innerhalb des <main> Elementes wird der eigentliche Website-Inhalt präsentiert. +
+ Es darf nicht mehr als ein <main> auf einer Website befindlich sein. +

+
+ +
+

Das Ende einer Seite

+

+ Meistens befindet sich am Ende einer Website zusätzliche, aber zunächst nicht relevante Informationen für den Besucher. +
+
+ Beispielsweise befinden sich hier Social-Media Links, eine Copyright-Info und Funktionen/Weiterleitungen zu ggf rechtlich notwendigen Unterseiten. +
+
+ Hierfür wird das <footer> Element verwendet +

+
+ +
+

Inhalte innerhalb einer Seite strukturieren

+
+ +
+

<article>

+
    +
  • Enthält ein alleinstehendes "etwas"
    • +
  • Beispielsweise einen Foren-Post, Zeitungsartikel, Blog-Post, einen Nutzer-Kommentar, etc...
    • +
  • Kann auch ein alleinstehendes interaktives Element sein (Formular)
    • +
  • Kann geschachtelt vorkommen (z.B einen Nuzter-Kommentar innerhalb eines Blog-Post)
    • +
  • Sollte eine Überschrift beinhalten
    • +
+
+ +
+

<section>

+
    +
  • Generischer als ein <article>
    • +
  • Falls ein styling-wrapper benötigt wird, lieber ein <div> verwenden
    • +
  • Eine section sollte auch eine Überschrift beinhalten
    • +
+
+ +
+

<aside>

+
    +
  • Präsentiert Inhalt der indirekt mit dem Eigentlichen Seiteninhalt zusammenhängt
    • +
  • Wird oft zum Beispiel als Sidebar angezeigt
    • +
  • Alternativ auch als "Callout"-Box
    • +
+
+ +
+

<nav>igation

+
    +
  • Dient als container für Navigations-Links innerhalb der (Web)Seite
    • +
  • Repräsentiert nur die "Sektion", eigentliche Links innerhalb dieses Elementes können weiter verschachtelt sein (zum Beispiel mit ul)
    • +
  • Neben der Hauptnavigation auch für Unter-Navigation gedacht
    • +
  • Inhaltsverzeichnisse, Breadcrumbs, etc.
    • +
+
+
\ No newline at end of file diff --git a/src/components/slides/html-tags/tags/div-p.astro b/src/components/slides/html-tags/tags/div-p.astro new file mode 100644 index 0000000..5020f61 --- /dev/null +++ b/src/components/slides/html-tags/tags/div-p.astro @@ -0,0 +1,27 @@ +
+
+

+ paragraph & div +

+

Zwei der fundamentalsten Baublöcke

+
+ +
+

Das <p>aragraph Tag

+
    +
  • Das p-Tag repräsentiert einen Paragraphen im HTML-Dokument
    • +
  • Es ist ein Block-Element (es nimmt die volle Breite das Parents ein)
    • +
  • Es bietet minimales Styling: Abstände über und unter dem Paragraphen
    • +
  • Kann kein geschachteltes Block-Element beinhalten
    • +
+
+ +
+

Das <div> Tag

+
    +
  • Ist ein ungestyltes Block-Element
    • +
  • Dient zur Gruppierung von Inhalten
    • +
  • In der Regel zum Layout von Kind-Elementen verwendet
    • +
+
+
\ No newline at end of file diff --git a/src/components/slides/html-tags/tags/extras.astro b/src/components/slides/html-tags/tags/extras.astro new file mode 100644 index 0000000..fe919e9 --- /dev/null +++ b/src/components/slides/html-tags/tags/extras.astro @@ -0,0 +1,20 @@ +
+
+

Hilfreiche Tags

+
+ +
+

<br/>

+
    +
  • Ein selbstschließendes Tag
    • +
  • Erzeugt einen Zeilenumbruch in HTML
    • +
+
+ +
+

<hr>

+
    +
  • Erzeugt in visuelles Trennelement in Form eines Striches
    • +
+
+
\ No newline at end of file diff --git a/src/components/slides/html-tags/tags/heading.astro b/src/components/slides/html-tags/tags/heading.astro new file mode 100644 index 0000000..0805517 --- /dev/null +++ b/src/components/slides/html-tags/tags/heading.astro @@ -0,0 +1,38 @@ +
+
+

Überschriften

+
+ +
+

+ Überschriften in HTML werden in 6 Ebenen deklariert: +

+
    +
  1. h1
    2. +
  2. h2
    3. +
  3. h3
    4. +
  4. h4
    5. +
  5. h5
    6. +
  6. h6
    7. +
+
+ +
+

Überschriften werden von h1 zu h6 von einer großen Auffälligen, zu einer kleinen (Unter)-Überschrift dargstellt.

+
+ +
+

"Regeln" für Überschriften

+
    +
  1. Jede Seite sollte nur ein <h1> besizten (und ähnlich bzw. gleich zum Dokumenten-Titel sein)
    2. +
  2. Es sollte auf die Reihenfolge der Überschriften geachtet werden (kein h3 nach einem h1, sondern ein h2)
    3. +
  3. Oft sollten die Überschriften mit einer id versehen werden (dies hilft, Verlinkungen auf Untersektionen zu kreiren)
    4. +
+
+ +
+

+ Die korrekte Verwendung von Überschriften dient Nutzern zum zurechtfinden innerhalb einer Website (besonders für Nutzer von assistiven Technologien, hilft aber auch für Suchrankings (Stichwort: SEO)) +

+
+
\ No newline at end of file diff --git a/src/components/slides/html-tags/tags/index.astro b/src/components/slides/html-tags/tags/index.astro new file mode 100644 index 0000000..393aa9a --- /dev/null +++ b/src/components/slides/html-tags/tags/index.astro @@ -0,0 +1,15 @@ +--- +import DivP from './div-p.astro' +import Inline from './inline-text.astro' +import Heading from './heading.astro' +import Listings from './listings.astro' +import Extras from './extras.astro' +--- + +<> + + + + + + \ No newline at end of file diff --git a/src/components/slides/html-tags/tags/inline-text.astro b/src/components/slides/html-tags/tags/inline-text.astro new file mode 100644 index 0000000..07c0e69 --- /dev/null +++ b/src/components/slides/html-tags/tags/inline-text.astro @@ -0,0 +1,82 @@ +
+
+

Inline Text Style Tags

+

+ Einfaches formattieren von Texten (z.B. innerhalb von Paragraphen) +

+
+ +
+

Ein Vorwort

+

+ Die inline-text Tags haben eigentlich nicht den Sinn, einzelne Texte zu stylen. +
+ Hierzu sollte normal ein <span> mit CSS-Styling verwendet werden. +
+ Die hier angesprochenen Tags haben einen semantischen Hintergrund der, zum Beispiel von Screen Readern verwendet wird. +

+
+ +
+

Das <span> als "Styling"-Container

+
    +
  • Das <span> Element besitzt kein eigenes Styling
    • +
  • Das Element dient lediglich als inline-container für Texte
    • +
  • Via Klassen sollte dem <span> Element ein Styling verliehen werden
    • +
+
+ +
+

<strong> & <b>

+
    +
  • Beide Tags sorgen für einen fettgedruckten Text
    • +
  • Das b-Tag hat weniger semantisches gewicht
    • +
  • + Das b-Tag sollte z.B. verwendet werden für Stichwörter oder Produkt-Namen. + Es soll Aufmerksamkeit auf sich ziehen ohne eine Notwendigkeit zu suggerieren. +
    • +
  • + Das strong-Tag sollte wichtige Inhalte hervorheben oder dann verwendet werden wenn dringlichkeit Vermittelt werden soll. +
    • +
+
+ +
+

<em>phasize & <i>

+
    +
  • Textinhalte in diesen Tags werden als kursiv dargestellt
    • +
  • Das <i> ist semantisch schwächer als das <em> Element
    • +
  • Das lässt nesting zu um den "Effekt" zu verstärken
    • +
  • In Screen Readern wird das <em> Element semantisch hervorgehoben
    • +
+
+ +
+

Weitere spezielle Inline-Style Tags

+
+ +
+

<code>

+
    +
  • Dient zum stylen von Texten der (Programmier)-Code darstellen soll
    • +
  • Styled den Text für gewöhnlich in einem Monospaced Font
    • +
+
+ +
+

<mark>

+
    +
  • Soll markierten beziehungsweise Hervorgehobenen Text darstellen
    • +
  • Styled den Text für gewöhnlich mit einem auffälligen Hintergrund
    • +
+
+ +
+

<u>nderline

+
    +
  • Dient als Anmerkung zu einem Text
    • +
  • Wird normalerweise als Unterstreichung dargestellt
    • +
  • Zum Beispiel zur Anzeige von synatkatischen Fehlern
    • +
+
+
\ No newline at end of file diff --git a/src/components/slides/html-tags/tags/listings.astro b/src/components/slides/html-tags/tags/listings.astro new file mode 100644 index 0000000..17ab4cc --- /dev/null +++ b/src/components/slides/html-tags/tags/listings.astro @@ -0,0 +1,87 @@ + +
+
+

Auflistungen und Aufzählungen

+
+ +
+

Nummerierte Aufzählungen

+
    +
  • Das Element <ol> definiert eine Nummerierte/Sortierte Liste (Ordered List)
    • +
  • Jedes Listenelement innerhalb von ol muss sich in einem <li> Element befinden
    • +
+
+ +
+ Beispiel + 

+      
    
+        
  1. Erstes Element
    2. 
+        
  2. Zweites Element
    3. 
+        
  3. Drittes Element
    4. 
+      

+
+
+ +
+ Attribute +
+
reversed
+
Gibt an, dass die Elemente in Abzählender Reihe aufgelistet werden (ohne den Inhalt zu vertauschen)
+
start
+
Gibt an, ab welcher Nummer der Aufzählung beginnen soll
+
+
+ +
+ Nummerierungs-Typen +

Die Art der Nummerierung wird normal per CSS gesteuert. (list-style-type)

+
    +
  • lowercase-alpha (a, b, c, ...)
    • +
  • uppercase-alpha (A, B, C, ...)
    • +
  • decimal (1, 2, 3, ...)
    • +
  • lowercase/uppercase-roman (I, II, III, ...)
    • +
  • Viele Weitere...
    • +
+
+ +
+

Aufzählungs-Listen

+
    +
  • Das Element <ul> definiert eine unsortierte Liste (Unordered List)
    • +
  • Jedes Listenelement innerhalb von ul muss ich in einem <li> befinden
    • +
+
+ +
+ Beispiel + 

+      
    
+        
  • Erstes Element
    • 
+        
  • Zweites Element
    • 
+        
  • Drittes Element
    • 
+      

+
+
+ +
+ Aufzählungstypen +

Mit CSS lässt sich der Stil der Aufzählung ändern (list-item-style)

+
    +
  • circle
    • +
  • disc
    • +
  • square
    • +
  • Ein beliebiger String
    • +
+
+ +
+

Schachtelung von Aufzählungen

+
    +
  • Aufzählungen und Nummerierungen lassen sich beliebig Schachteln
    • +
  • Der Aufzählungstyp innerhalb einer Verschachtelung ändert sich automatisch
    • +
  • Es können nummerierte Listen und Aufzählungspunkte ineinander beliebig verschachtelt werden
    • +
  • Verschachtelte Listen werden automatisch eingerückt
    • +
+
+
\ No newline at end of file diff --git a/src/components/slides/html-tags/title.astro b/src/components/slides/html-tags/title.astro new file mode 100644 index 0000000..9fe4ec7 --- /dev/null +++ b/src/components/slides/html-tags/title.astro @@ -0,0 +1,6 @@ +
+

+ HTML-Tags +

+

Geläufige und spezielle

+
\ No newline at end of file diff --git a/src/layouts/Reveal.astro b/src/layouts/Reveal.astro index 2f9eb59..0eb1608 100644 --- a/src/layouts/Reveal.astro +++ b/src/layouts/Reveal.astro @@ -40,6 +40,9 @@ const { title } = Astro.props; import Highlight from 'reveal.js/plugin/highlight/highlight.esm' import Notes from 'reveal.js/plugin/notes/notes.esm' + // ToDo: Do I need the Notes Plugin? + // ToDo: Do I need the Markdown Plugin? + let deck = new RevealJS({ plugins: [Markdown, Highlight, Notes], slideNumber: true, diff --git a/src/pages/slides/html-tags.astro b/src/pages/slides/html-tags.astro new file mode 100644 index 0000000..d782916 --- /dev/null +++ b/src/pages/slides/html-tags.astro @@ -0,0 +1,8 @@ +--- +import Reveal from "../../layouts/Reveal.astro"; +import HtmlTagSlides from '../../components/slides/html-tags/index.astro' +--- + + + + \ No newline at end of file