mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 13:18:49 +00:00
feat(slides): Basic HTML Tags
This commit is contained in:
Denis Ergin
parent
2c101ad768
commit
6cd482258e
11 changed files with 399 additions and 0 deletions
11
src/components/slides/html-tags/index.astro
Normal file
11
src/components/slides/html-tags/index.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import TitleSlide from './title.astro'
|
||||
import TagSlides from './tags/index.astro'
|
||||
import Structure from './structure/index.astro'
|
||||
---
|
||||
|
||||
<div class="slides">
|
||||
<TitleSlide />
|
||||
<TagSlides />
|
||||
<Structure />
|
||||
</div>
|
||||
102
src/components/slides/html-tags/structure/index.astro
Normal file
102
src/components/slides/html-tags/structure/index.astro
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Äußere Struktur eines HTML Dokumentes</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Bisher haben wir mehr generische und wiederverwendbare Elemente in einem HTML-Dokument gesehen
|
||||
<br>
|
||||
Aber eine wichtige Sache fehlt dem noch:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Menü?</li>
|
||||
<li>Navigationselemente wie Breadcrumbs?</li>
|
||||
<li>Normalerweise gibt es auch einen Footer</li>
|
||||
<li>Wo fängt der "eigentliche" Content an?</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Der "Kopf" einer Website</h3>
|
||||
<ul>
|
||||
<li>Ein Logo</li>
|
||||
<li>Navigation zu Unterseiten</li>
|
||||
<li>Bei größeren Anwendungen: Eine "User-Section"</li>
|
||||
<li>Ggf Suche?</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Das <header> Element existiert zu diesem Zweck
|
||||
<br>
|
||||
Zusätzlich wertvoll für die Accessibility einer Website
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Wo der eigentliche Content liegt</h3>
|
||||
<p>
|
||||
Innerhalb des <code><main></code> Elementes wird der eigentliche Website-Inhalt präsentiert.
|
||||
<br>
|
||||
Es darf nicht mehr als ein <code><main></code> auf einer Website befindlich sein.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Das Ende einer Seite</h3>
|
||||
<p>
|
||||
Meistens befindet sich am Ende einer Website zusätzliche, aber zunächst nicht relevante Informationen für den Besucher.
|
||||
<br>
|
||||
<br>
|
||||
Beispielsweise befinden sich hier Social-Media Links, eine Copyright-Info und Funktionen/Weiterleitungen zu ggf rechtlich notwendigen Unterseiten.
|
||||
<br>
|
||||
<br>
|
||||
Hierfür wird das <footer> Element verwendet
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Inhalte innerhalb einer Seite strukturieren</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code><article></code></h4>
|
||||
<ul>
|
||||
<li>Enthält ein alleinstehendes "etwas"</li>
|
||||
<li>Beispielsweise einen Foren-Post, Zeitungsartikel, Blog-Post, einen Nutzer-Kommentar, etc...</li>
|
||||
<li>Kann auch ein alleinstehendes interaktives Element sein (Formular)</li>
|
||||
<li>Kann geschachtelt vorkommen (z.B einen Nuzter-Kommentar innerhalb eines Blog-Post)</li>
|
||||
<li>Sollte eine Überschrift beinhalten</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code><section></code></h4>
|
||||
<ul>
|
||||
<li>Generischer als ein <code><article></code></li>
|
||||
<li>Falls ein styling-wrapper benötigt wird, lieber ein <code><div></code> verwenden</li>
|
||||
<li>Eine section sollte auch eine Überschrift beinhalten</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code><aside></code></h4>
|
||||
<ul>
|
||||
<li>Präsentiert Inhalt der indirekt mit dem Eigentlichen Seiteninhalt zusammenhängt</li>
|
||||
<li>Wird oft zum Beispiel als Sidebar angezeigt</li>
|
||||
<li>Alternativ auch als "Callout"-Box</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code><nav></code>igation</h3>
|
||||
<ul>
|
||||
<li>Dient als container für Navigations-Links innerhalb der (Web)Seite</li>
|
||||
<li>Repräsentiert nur die "Sektion", eigentliche Links innerhalb dieses Elementes können weiter verschachtelt sein (zum Beispiel mit <code>ul</code>)</li>
|
||||
<li>Neben der Hauptnavigation auch für Unter-Navigation gedacht</li>
|
||||
<li>Inhaltsverzeichnisse, Breadcrumbs, etc.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
27
src/components/slides/html-tags/tags/div-p.astro
Normal file
27
src/components/slides/html-tags/tags/div-p.astro
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>
|
||||
<strong>p</strong>aragraph & div
|
||||
</h2>
|
||||
<p>Zwei der fundamentalsten Baublöcke</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Das <p>aragraph Tag</h3>
|
||||
<ul>
|
||||
<li>Das p-Tag repräsentiert einen Paragraphen im HTML-Dokument</li>
|
||||
<li>Es ist ein Block-Element (es nimmt die volle Breite das Parents ein)</li>
|
||||
<li>Es bietet minimales Styling: Abstände über und unter dem Paragraphen</li>
|
||||
<li>Kann kein geschachteltes Block-Element beinhalten</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Das <div> Tag</h3>
|
||||
<ul>
|
||||
<li>Ist ein ungestyltes Block-Element</li>
|
||||
<li>Dient zur Gruppierung von Inhalten</li>
|
||||
<li>In der Regel zum Layout von Kind-Elementen verwendet</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
20
src/components/slides/html-tags/tags/extras.astro
Normal file
20
src/components/slides/html-tags/tags/extras.astro
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Hilfreiche Tags</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code><br/></code></h3>
|
||||
<ul>
|
||||
<li>Ein selbstschließendes Tag</li>
|
||||
<li>Erzeugt einen Zeilenumbruch in HTML</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code><hr></code></h3>
|
||||
<ul>
|
||||
<li>Erzeugt in visuelles Trennelement in Form eines Striches</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
38
src/components/slides/html-tags/tags/heading.astro
Normal file
38
src/components/slides/html-tags/tags/heading.astro
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Überschriften</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Überschriften in HTML werden in 6 Ebenen deklariert:
|
||||
</p>
|
||||
<ol>
|
||||
<li><code>h1</code></li>
|
||||
<li><code>h2</code></li>
|
||||
<li><code>h3</code></li>
|
||||
<li><code>h4</code></li>
|
||||
<li><code>h5</code></li>
|
||||
<li><code>h6</code></li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Überschriften werden von h1 zu h6 von einer großen Auffälligen, zu einer kleinen (Unter)-Überschrift dargstellt.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>"Regeln" für Überschriften</h3>
|
||||
<ol>
|
||||
<li>Jede Seite sollte nur ein <h1> besizten (und ähnlich bzw. gleich zum Dokumenten-Titel sein)</li>
|
||||
<li>Es sollte auf die Reihenfolge der Überschriften geachtet werden (kein h3 nach einem h1, sondern ein h2)</li>
|
||||
<li>Oft sollten die Überschriften mit einer <code>id</code> versehen werden (dies hilft, Verlinkungen auf Untersektionen zu kreiren)</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
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))
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
15
src/components/slides/html-tags/tags/index.astro
Normal file
15
src/components/slides/html-tags/tags/index.astro
Normal file
|
|
@ -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'
|
||||
---
|
||||
|
||||
<>
|
||||
<DivP />
|
||||
<Inline />
|
||||
<Heading />
|
||||
<Listings />
|
||||
<Extras />
|
||||
</>
|
||||
82
src/components/slides/html-tags/tags/inline-text.astro
Normal file
82
src/components/slides/html-tags/tags/inline-text.astro
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Inline Text Style Tags</h2>
|
||||
<p>
|
||||
Einfaches formattieren von Texten (z.B. innerhalb von Paragraphen)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><strong>Ein Vorwort</strong></p>
|
||||
<p>
|
||||
Die inline-text Tags haben <em>eigentlich nicht den Sinn,</em> einzelne Texte zu stylen.
|
||||
<br>
|
||||
Hierzu sollte normal ein <code><span></code> mit CSS-Styling verwendet werden.
|
||||
<br>
|
||||
Die hier angesprochenen Tags haben einen semantischen Hintergrund der, zum Beispiel von Screen Readern verwendet wird.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Das <code><span></code> als "Styling"-Container</h3>
|
||||
<ul>
|
||||
<li>Das <code><span></code> Element besitzt kein eigenes Styling</li>
|
||||
<li>Das Element dient lediglich als inline-container für Texte</li>
|
||||
<li>Via Klassen sollte dem <code><span></code> Element ein Styling verliehen werden</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code><strong></code> & <code><b></code></h3>
|
||||
<ul>
|
||||
<li>Beide Tags sorgen für einen <b>fettgedruckten</b> Text</li>
|
||||
<li>Das b-Tag hat weniger semantisches gewicht</li>
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
Das strong-Tag sollte wichtige Inhalte hervorheben oder dann verwendet werden wenn dringlichkeit Vermittelt werden soll.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code><em></code>phasize & <code><i></code></h3>
|
||||
<ul>
|
||||
<li>Textinhalte in diesen Tags werden als <i>kursiv</i> dargestellt</li>
|
||||
<li>Das <i> ist semantisch schwächer als das <em> Element</li>
|
||||
<li>Das <em>lässt <em>nesting</em></em> zu um den "Effekt" zu verstärken</li>
|
||||
<li>In Screen Readern wird das <em> Element semantisch hervorgehoben</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Weitere spezielle Inline-Style Tags</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code><code></code></h4>
|
||||
<ul>
|
||||
<li>Dient zum stylen von Texten der (Programmier)-Code darstellen soll</li>
|
||||
<li>Styled den Text für gewöhnlich in einem <b><code>Monospaced Font</code></b></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code><mark></code></h4>
|
||||
<ul>
|
||||
<li>Soll <mark>markierten</mark> beziehungsweise <mark>Hervorgehobenen</mark> Text darstellen</li>
|
||||
<li>Styled den Text für gewöhnlich mit einem auffälligen Hintergrund</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code><u></code>nderline</h4>
|
||||
<ul>
|
||||
<li>Dient als Anmerkung zu einem Text</li>
|
||||
<li>Wird normalerweise als <u>Unterstreichung</u> dargestellt</li>
|
||||
<li>Zum Beispiel zur Anzeige von <u style="text-decoration: #f00 wavy underline;">synatkatischen</u> Fehlern</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
87
src/components/slides/html-tags/tags/listings.astro
Normal file
87
src/components/slides/html-tags/tags/listings.astro
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
<section>
|
||||
<section>
|
||||
<h2>Auflistungen und Aufzählungen</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Nummerierte Aufzählungen</h3>
|
||||
<ul>
|
||||
<li>Das Element <ol> definiert eine Nummerierte/Sortierte Liste (Ordered List)</li>
|
||||
<li>Jedes Listenelement innerhalb von <code>ol</code> muss sich in einem <code><li></code> Element befinden</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<b>Beispiel</b>
|
||||
<pre class="html"><code data-trim data-line-numbers>
|
||||
<ol>
|
||||
<li>Erstes Element</li>
|
||||
<li>Zweites Element</li>
|
||||
<li>Drittes Element</li>
|
||||
</ol>
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<b>Attribute</b>
|
||||
<dl>
|
||||
<dt><code>reversed</code></dt>
|
||||
<dd>Gibt an, dass die Elemente in Abzählender Reihe aufgelistet werden (ohne den Inhalt zu vertauschen)</dd>
|
||||
<dt><code>start</code></dt>
|
||||
<dd>Gibt an, ab welcher Nummer der Aufzählung beginnen soll</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<b>Nummerierungs-Typen</b>
|
||||
<p>Die Art der Nummerierung wird normal per CSS gesteuert. <code>(list-style-type)</code></p>
|
||||
<ul>
|
||||
<li><code>lowercase-alpha</code> (a, b, c, ...)</li>
|
||||
<li><code>uppercase-alpha</code> (A, B, C, ...)</li>
|
||||
<li><code>decimal</code> (1, 2, 3, ...)</li>
|
||||
<li><code>lowercase/uppercase-roman</code> (I, II, III, ...)</li>
|
||||
<li>Viele Weitere...</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Aufzählungs-Listen</h3>
|
||||
<ul>
|
||||
<li>Das Element <code><ul></code> definiert eine unsortierte Liste (Unordered List)</li>
|
||||
<li>Jedes Listenelement innerhalb von <code>ul</code> muss ich in einem <code><li></code> befinden</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<b>Beispiel</b>
|
||||
<pre class="html"><code data-trim data-line-numbers>
|
||||
<ul>
|
||||
<li>Erstes Element</li>
|
||||
<li>Zweites Element</li>
|
||||
<li>Drittes Element</li>
|
||||
</ul>
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<b>Aufzählungstypen</b>
|
||||
<p>Mit CSS lässt sich der Stil der Aufzählung ändern <code>(list-item-style)</code></p>
|
||||
<ul>
|
||||
<li><code>circle</code></li>
|
||||
<li><code>disc</code></li>
|
||||
<li><code>square</code></li>
|
||||
<li>Ein beliebiger String</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Schachtelung von Aufzählungen</h3>
|
||||
<ul>
|
||||
<li>Aufzählungen und Nummerierungen lassen sich beliebig Schachteln</li>
|
||||
<li>Der Aufzählungstyp innerhalb einer Verschachtelung ändert sich automatisch</li>
|
||||
<li>Es können nummerierte Listen und Aufzählungspunkte ineinander beliebig verschachtelt werden</li>
|
||||
<li>Verschachtelte Listen werden automatisch eingerückt</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
6
src/components/slides/html-tags/title.astro
Normal file
6
src/components/slides/html-tags/title.astro
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<section>
|
||||
<h1>
|
||||
HTML-Tags
|
||||
</h1>
|
||||
<p>Geläufige und spezielle</p>
|
||||
</section>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
8
src/pages/slides/html-tags.astro
Normal file
8
src/pages/slides/html-tags.astro
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
import Reveal from "../../layouts/Reveal.astro";
|
||||
import HtmlTagSlides from '../../components/slides/html-tags/index.astro'
|
||||
---
|
||||
|
||||
<Reveal title="HTML Tags most commonly used">
|
||||
<HtmlTagSlides />
|
||||
</Reveal>
|
||||
Loading…
Add table
Add a link
Reference in a new issue