feat(slides): add slides (de) for document linking

src/components/slides/html-linking/a.astro

@@ -0,0 +1,57 @@
+<section>
+  <section>
+    <h2>Das <code>a</code>-Tag für Verlinkungen</h2>
+  </section>
+
+  <section>
+    <p>Mithilfe des a-Tag kann man Links zu Unterseiten, anderen Websites, etc erstellen.</p>
+    <p>Klassisch erscheint der Link in blauer Schrift und ist unterstrischen. Besuchte Links heben sich durch eine leichte Violet-Färbung hervor.</p>
+  </section>
+
+  <section>
+    <h3>Anatomie</h3>
+    <pre class="html"><code data-trim data-line-numbers="1,4,6|5|2|3">
+      &lt;a
+        href="https://google.com"
+        target="_self"
+      &gt;
+        Besuche doch mal Google!
+      &lt;/a&gt;
+    </code></pre>
+  </section>
+
+  <section>
+    <h3>Targets</h3>
+    <ul>
+      <li>_self - Öffnet den Link im gleichen Browser-Context (gleicher Tab)</li>
+      <li>_blank - Öffnet den Link in einem neuen Browser-Context (neuer Tab)</li>
+    </ul>
+  </section>
+
+  <section>
+    <h3>Relative URL's</h3>
+    <p>Sofern Verlinkungen auf der eigenen Seite existieren, muss eigentlich nur der Pfad innerhalb der Website angegeben werden</p>
+  </section>
+
+  <section>
+    <p>Angenommen sie befinden sich auf <code>/account</code>:</p>
+    <pre class="html"><code data-trim data-line-numbers>
+      &lt;a href="/settings"&gt;...&lt;/a&gt;
+    </code></pre>
+    <br>
+    leitet weiter zu
+    <br>
+    <code>/settings</code>
+  </section>
+
+  <section>
+    <p><strong>Anchor / Fragmente</strong></p>
+    <pre class="html"><code data-trim data-line-numbers>
+      &lt;h1 id="the-beginning"&gt;Der Anfang&lt;/h1&gt;
+
+      &lt;!-- Irgendwo im Text --&gt;
+
+      &lt;a href="#the-beginning"&gt; Zum Anfang &lt;/a&gt;
+    </code></pre>
+  </section>
+</section>

src/components/slides/html-linking/index.astro

@@ -0,0 +1,15 @@
+---
+import TitleSlide from './title.astro'
+import Introduction from './introduction.astro'
+import UrlSlide from './url.astro'
+import ATag from './a.astro'
+import Structure from './structuring.astro'
+---
+
+<div class="slides">
+  <TitleSlide />
+  <Introduction />
+  <UrlSlide />
+  <ATag />
+  <Structure />
+</div>

src/components/slides/html-linking/introduction.astro

@@ -0,0 +1,20 @@
+<section>
+  <section>
+    <h2>Was das Internet ausmacht</h2>
+    <p>Verlinkungen zwischen Unterseiten und zu anderen Webseiten</p>
+  </section>
+
+  <section>
+    <p>
+      Wenn wir über Verlinkungen jedweder Art sprechen, beziehen wir uns dabei auf "Hyperlinks".
+      <br><br>
+      Verlinkt werden kann alles, was auch als "Resource" im Internet erreichbar ist.
+      <br><br>
+      Also nicht nur andere HTML-Seiten sondern auch Bilder, Videos und andere Datei-Typen.
+    </p>
+  </section>
+
+  <section>
+    <p>Eine Verlinkung zu einem anderen Dokument erfolgt über eine URL (anderer Name: URI)</p>
+  </section>
+</section>

src/components/slides/html-linking/structuring.astro

@@ -0,0 +1,32 @@
+<section>
+  <section>
+    <h2>Strukturieren von HTML-Dateien</h2>
+  </section>
+
+  <section>
+    <p>Im Kontext von statischen Web-Inhalten, kann man HTML-Dateien in Ordner strukturieren, damit URL-Pfade auch einheitliche Namen haben.</p>
+    <p>Website-Generatoren wie PHP, React (Server-Side-Rendering) oder andere halten sich auch zu großen Teilen an dieses Konstrukt, der Entwickler kann aber davon abweichen (Aber nicht weiter notwendig für diese Vorlesung.)</p>
+  </section>
+
+  <section>
+    <h3>Erreichbarkeit über die Ordnerstruktur</h3>
+    <pre class="bash"><code data-trim data-line-numbers="">
+      .
+      ├── index.html               # /
+      ├── blog/
+      │   ├── index.html           # /blog
+      │   └── was-ist-html.html    # /blog/was-ist-html
+      └── ueber-mich/
+          ├── index.html           # /ueber-mich
+          ├── hobbies.html         # /ueber-mich/hobbies
+          └── lebenslauf/
+              ├── index.html       # /ueber-mich/lebenslauf
+              └── alternativ.html  # /ueber-mich/lebenslauf/alternativ
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Das Konzept der Ordnerstruktur wird, wie bereits erwähnt, nur für statische Dateien und in bestimmten Fällen von dynamischen System angelehnt daran verwendet.</p>
+    <p>Wenn reine Web-Services (API's) geschrieben werden, folgen die Regeln für URL-Pfade ähnlichen "Gesetzen", sind aber digitaler Natur.</p>
+  </section>
+</section>

src/components/slides/html-linking/title.astro

@@ -0,0 +1,3 @@
+<section>
+  <h1>Verlinkungen zwischen HTML-Seiten</h1>
+</section>

src/components/slides/html-linking/url.astro

@@ -0,0 +1,200 @@
+<section>
+  <section>
+    <h2>Wie ist eine URL aufgebaut?</h2>
+  </section>
+
+  <section>
+    <p>Eine klassische URL wird aus verschiedenen Teilstücken zusammengesetzt um eine bestimmte Resource im WWW zu referenzieren</p>
+  </section>
+
+  <section>
+    <h3>Protokol</h3>
+    <p>
+      Das Protokol definiert wie der Browser mit dem Ziel (nach dem Protokol) kommunizieren muss um an die Informationen zu gelangen.
+      <br><br>
+      Nach dem Protokoll erfolgt immer ein <code>://</code> (Doppelpunkt Doppelslash)
+    </p>
+  </section>
+  
+  <section>
+    <h4>Gängige Protokolle</h4>
+    <ul>
+      <li>HTTP</li>
+      <li>HTTPS</li>
+      <li>FTP</li>
+      <li>mailto</li>
+      <li>file</li>
+    </ul>
+  </section>
+
+  <section>
+    <p>Beispiel: <br><br> <code style="background-color: #99f;">https://</code></p>
+  </section>
+
+  <section>
+    <h3>Domäne</h3>
+    <p>
+      Verschiedene Websites sind unter verschiedenen Domänen erreichbar (Google vs Yahoo).
+      <br>
+      Dabei ist jede Domäne eindeutig identifizierbar und verweist mittels DNS-Server auf einen eindeutigen Server (genauer gesagt, dessen IP-Adresse) im Internet.
+    </p>
+  </section>
+
+  <section>
+    <p>Beispiel: <br><br>
+      <code style="background-color: #99f;">https://</code>
+      <code style="background-color: #9f9;">google.de</code>
+    </p>
+  </section>
+
+  <section>
+    <h4>Subdomains & Top-Level-Domain</h4>
+    <p>
+      Im Vorherigen Beispiel hat man nach "google" noch ein <code>.de</code> gesehen
+      <br><br>
+      Dies ist Teil der Domäne als sogenannte "Top-Level-Domain" (TLD).
+      <br>
+      Historisch gesehen wurde die TLD zur Länder-Identifizierung verwendet, unter <code>.de</code> waren z.B. Deutsche Seiten erreichbar.
+    </p>
+  </section>
+
+  <section>
+    <p>Weitere bekannte TLD's:</p>
+    <ul>
+      <li>.com ("Commercial", eigentlich aber eher für den US-Raum verwendet)</li>
+      <li>.org (Organization)</li>
+      <li>.co.uk ("Commercial" + "United Kingdom")</li>
+      <li>.tv (Tuvalu, die polynesische Insel profitiert stark von dieser TLD)</li>
+      <li>.net ("Network")</li>
+      <li>.edu ("Educational")</li>
+      <li>.gov ("Government")</li>
+    </ul>
+  </section>
+
+  <section>
+    <p>
+      Seit den Jahren 2000 bis 2004 wurden Schrittweise neue (und generischere) TLD's durch die Internet-Verwaltung "ICANN" eingeführt.
+      <br><br>
+      Bis dahin gab es die klassischen Länder-TLD's in der 2-Buchstaben-Schreibweise und ein paar spezifische 3-Buchstaben TLD's.
+    </p>
+  </section>
+
+  <section>
+    <ul>
+      <li>.berlin</li>
+      <li>.online</li>
+      <li>.shop</li>
+      <li>.dev</li>
+      <li>.edeka</li>
+    </ul>
+  </section>
+
+  <section>
+    <p><strong>Subdomains</strong> unterteilen Domains. Bei größeren Dienstanbietern kann das durchaus Sinn machen, aber die Mechanik wird auch gerne von kleineren Websites verwendet.</p>
+  </section>
+
+  <section>
+    <p>
+      Beispiel <br><br>
+      <code style="background-color: #99f;">https://</code>
+      <code style="background-color: #9f9;">myaccount.google.de</code>
+    </p>
+  </section>
+
+  <section>
+    <h3>Port</h3>
+    <p>
+      Jede Website im Internet ist durch einen sogenannten Port erreichbar.
+      Da die Port's aber eine gewisse "Standardisierung" haben, ist dies in 99% der Fällen aber nicht notwendig im Alltag, der Browser fügt den Port im Hintergrund selber ein.
+      Port-Angaben sind nummerisch.
+    </p>
+    <ul>
+      <li>Port 80 - für das HTTP-Protokoll reserviert</li>
+      <li>Port 443 - für das HTTPS-Protokoll reserviert</li>
+    </ul>
+  </section>
+
+  <section>
+    <p>Beispiel</p>
+    <code style="background-color: #99f;">https://</code>
+    <code style="background-color: #9f9;">myaccount.google.de</code>
+    <code style="background-color: #ff9;">:80</code>
+  </section>
+
+  <section>
+    <p>
+      Da die Ports bis 1024 ein geschüzter Bereich sind, muss eine Applikation auf diesen Ports mit Administrativen Rechten gestartet werden (Zumindest unter Unix-OS).
+      <br><br>
+      Generell wird aber während der Lokalen Entwicklung auf höheren Ports entwickelt (3000, 8080, 6006 sind oft gesehene Ports)
+    </p>
+  </section>
+
+  <section>
+    <h3>Pfade</h3>
+    <p>
+      Nach der Domäne und dem Port folgt der Pfad zur Angefragten Resource.
+      <br><br>
+      Der Pfad ist in den meisten Fällen auf eine bestimmte Datei innerhalb das Betriebs-Systems gemapped. Hierzu aber gleich mehr.
+      <br><br>
+      Unterpfade werden wie bei Unix-basierten Betriebssystemen per Slash abgetrennt.
+    </p>
+  </section>
+
+  <section>
+    <p>
+      Beispiel
+    </p>
+    <code style="background-color: #99f;">https://</code>
+    <code style="background-color: #9f9;">myaccount.google.de</code>
+    <code style="background-color: #ff9;">:80</code>
+    <code style="background-color: #f99">/pfad/zur/resource.html</code>
+  </section>
+
+  <section>
+    <p><strong>Pfad-Besonderheiten</strong></p>
+    <p>Wenn eine HTML Datei "index.html" benannt wird, so muss das "index.html" nicht im Pfad vorliegen. Der Webserver liefert diese Datei "von selbst aus" aus.</p>
+    <p>Auch muss generell bei .html-Dateien der Datentyp nicht mitgegeben werden.</p>
+  </section>
+
+  <section>
+    <h3>Query / Parameter</h3>
+    <p>Die Query nach der Pfad-Angabe dient i.d.R. dem Server als zusätzliche Information.</p>
+    <p>Bei statischen Inhalten (also reinen HTML-Seiten) macht dies keinen Sinn. Sobald aber HTML-Inhalte dynamisch gesendet werden, kann der bearbeitende Server auf die Query zugreifen um Inhalte beispielsweise zu filtern.</p>
+  </section>
+
+  <section>
+    <p>Die Parameter werden vom Pfad mittels eines Fragezeichens abgetrennt.</p>
+    <p>Mehrere Parameter werden mit einem kaufm. "und" (<code>&amp;</code>) abgetrennt.</p>
+    <p>Parameter sind oft abgekürzt oder anderweitig kryptisch benamt (als Beispiel, <a href="https://developer.matomo.org/api-reference/tracking-api">Matomo</a>)</p>
+  </section>
+
+  <section>
+    <p>Beispiel</p>
+    <code style="background-color: #99f;">https://</code>
+    <code style="background-color: #9f9;">duckduckgo.com</code>
+    <code style="background-color: #ff9;">:80</code>
+    <code style="background-color: #f99">/Birne</code>
+    <code style="background-color: #9ff;">?iax=images&ia=images</code>
+  </section>
+
+  <section>
+    <h3>Anchor / Fragment</h3>
+    <p>Der Anker wird nur vom Browser verwendet und wird nicht zum Server mitgesendet.</p>
+    <p>Steht ganz zum Schluss der URL, abgetrennt durch ein Hashtag (<code>#</code>)</p>
+    <p>Dient dazu, dass der Browser den "verankerten" Inhalt nach dem Laden der Seite in den Sichtbaren Bereich scrollt.</p>
+  </section>
+
+  <section>
+    <p>Dafür muss das "zu verankernde" Element das id-Attribut gesetzt haben, auf den sich dann der Anker bezieht.</p>
+  </section>
+
+  <section>
+    <p>Beispiel</p>
+    <code style="background-color: #99f;">https://</code>
+    <code style="background-color: #9f9;">duckduckgo.com</code>
+    <code style="background-color: #ff9;">:80</code>
+    <code style="background-color: #f99">/Birne</code>
+    <code style="background-color: #9ff;">?iax=images&ia=images</code>
+    <code style="background-color: #f9f">#the-interesting-part</code>
+  </section>
+</section>

src/pages/slides/moving-between-html-documents.astro

@@ -0,0 +1,8 @@
+---
+import Reveal from '../../layouts/Reveal.astro';
+import HtmlLinkSlides from '../../components/slides/html-linking/index.astro'
+---
+
+<Reveal title="Moving between HTML documents">
+  <HtmlLinkSlides />
+</Reveal>

src/pages/tasks/html-2/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from '../../../layouts/Layout.astro';
+---
+
+<Layout title="HTML Aufgabe 2">
+  <section>
+    <h1>Aufgabe 2 zu HTML</h1>
+    <p>
+      Schreiben Sie für diese Aufgabe eine kleine Kartei-Karten-Webseite.
+      <br>
+      <strong>Anforderungen:</strong>
+      <ol>
+        <li>Karteikarten sind per Ordner Thematisch abgegrenzt (z.B. Web-Engineering, Mathematik, etc...)</li>
+        <li>Jede "Karteikarte" liegt in einem Themenordner in seinem eigenen Ordner (z.B. web-engineering/p-tag)</li>
+        <li>Innerhalb jedes Karteikarten-Ordners existieren die HTML-Dateien "front.html" und "back.html", diese Stellen jeweils die Vorder- sowie Rückseite der Karteikarte dar.</li>
+        <li>
+          Im "root" als auch in den Themen-Ordnern existieren index.html Dateien, die jeweils die Inhalte des Ordners anzeigen
+          <ul>
+            <li>In index.html innerhalb des root-Verzeichnisses werden alle Themen aufgelistet und verlinkt</li>
+            <li>Innerhalb der index.html eines Themen-Ordnes werden die einzelnen Karteikarten aufgelistet und verlinkt</li>
+          </ul>
+        </li>
+      </ol>
+    </p>
+  </section>
+  <section>
+    <b>"Lösung"</b>
+  </section>
+</Layout>