diff --git a/src/components/slides/html-linking/a.astro b/src/components/slides/html-linking/a.astro
new file mode 100644
index 0000000..f09c9b1
--- /dev/null
+++ b/src/components/slides/html-linking/a.astro
@@ -0,0 +1,57 @@
+ Mithilfe des a-Tag kann man Links zu Unterseiten, anderen Websites, etc erstellen. Klassisch erscheint der Link in blauer Schrift und ist unterstrischen. Besuchte Links heben sich durch eine leichte Violet-Färbung hervor. Sofern Verlinkungen auf der eigenen Seite existieren, muss eigentlich nur der Pfad innerhalb der Website angegeben werden Angenommen sie befinden sich auf Anchor / FragmenteDas
+ a
-Tag für VerlinkungenAnatomie
+
+
+ <a
+ href="https://google.com"
+ target="_self"
+ >
+ Besuche doch mal Google!
+ </a>
+
Targets
+
+
+ Relative URL's
+ /account
:
+
+ <a href="/settings">...</a>
+
+ leitet weiter zu
+
+ /settings
+
+
+ <h1 id="the-beginning">Der Anfang</h1>
+
+ <!-- Irgendwo im Text -->
+
+ <a href="#the-beginning"> Zum Anfang </a>
+
Verlinkungen zwischen Unterseiten und zu anderen Webseiten
+
+ Wenn wir über Verlinkungen jedweder Art sprechen, beziehen wir uns dabei auf "Hyperlinks".
+
+ Verlinkt werden kann alles, was auch als "Resource" im Internet erreichbar ist.
+
+ Also nicht nur andere HTML-Seiten sondern auch Bilder, Videos und andere Datei-Typen.
+
Eine Verlinkung zu einem anderen Dokument erfolgt über eine URL (anderer Name: URI)
+Im Kontext von statischen Web-Inhalten, kann man HTML-Dateien in Ordner strukturieren, damit URL-Pfade auch einheitliche Namen haben.
+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.)
+
+ .
+ ├── 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
+
+ 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.
+Wenn reine Web-Services (API's) geschrieben werden, folgen die Regeln für URL-Pfade ähnlichen "Gesetzen", sind aber digitaler Natur.
+Eine klassische URL wird aus verschiedenen Teilstücken zusammengesetzt um eine bestimmte Resource im WWW zu referenzieren
+
+ Das Protokol definiert wie der Browser mit dem Ziel (nach dem Protokol) kommunizieren muss um an die Informationen zu gelangen.
+
+ Nach dem Protokoll erfolgt immer ein ://
(Doppelpunkt Doppelslash)
+
Beispiel:
https://
+ Verschiedene Websites sind unter verschiedenen Domänen erreichbar (Google vs Yahoo).
+
+ Dabei ist jede Domäne eindeutig identifizierbar und verweist mittels DNS-Server auf einen eindeutigen Server (genauer gesagt, dessen IP-Adresse) im Internet.
+
Beispiel:
+ https://
+ google.de
+
+ Im Vorherigen Beispiel hat man nach "google" noch ein .de
gesehen
+
+ Dies ist Teil der Domäne als sogenannte "Top-Level-Domain" (TLD).
+
+ Historisch gesehen wurde die TLD zur Länder-Identifizierung verwendet, unter .de
waren z.B. Deutsche Seiten erreichbar.
+
Weitere bekannte TLD's:
+
+ Seit den Jahren 2000 bis 2004 wurden Schrittweise neue (und generischere) TLD's durch die Internet-Verwaltung "ICANN" eingeführt.
+
+ Bis dahin gab es die klassischen Länder-TLD's in der 2-Buchstaben-Schreibweise und ein paar spezifische 3-Buchstaben TLD's.
+
Subdomains unterteilen Domains. Bei größeren Dienstanbietern kann das durchaus Sinn machen, aber die Mechanik wird auch gerne von kleineren Websites verwendet.
+
+ Beispiel
+ https://
+ myaccount.google.de
+
+ 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. +
+Beispiel
+https://
+ myaccount.google.de
+ :80
+
+ 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).
+
+ Generell wird aber während der Lokalen Entwicklung auf höheren Ports entwickelt (3000, 8080, 6006 sind oft gesehene Ports)
+
+ Nach der Domäne und dem Port folgt der Pfad zur Angefragten Resource.
+
+ Der Pfad ist in den meisten Fällen auf eine bestimmte Datei innerhalb das Betriebs-Systems gemapped. Hierzu aber gleich mehr.
+
+ Unterpfade werden wie bei Unix-basierten Betriebssystemen per Slash abgetrennt.
+
+ Beispiel +
+https://
+ myaccount.google.de
+ :80
+ /pfad/zur/resource.html
+ Pfad-Besonderheiten
+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.
+Auch muss generell bei .html-Dateien der Datentyp nicht mitgegeben werden.
+Die Query nach der Pfad-Angabe dient i.d.R. dem Server als zusätzliche Information.
+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.
+Die Parameter werden vom Pfad mittels eines Fragezeichens abgetrennt.
+Mehrere Parameter werden mit einem kaufm. "und" (&
) abgetrennt.
Parameter sind oft abgekürzt oder anderweitig kryptisch benamt (als Beispiel, Matomo)
+Beispiel
+https://
+ duckduckgo.com
+ :80
+ /Birne
+ ?iax=images&ia=images
+ Der Anker wird nur vom Browser verwendet und wird nicht zum Server mitgesendet.
+Steht ganz zum Schluss der URL, abgetrennt durch ein Hashtag (#
)
Dient dazu, dass der Browser den "verankerten" Inhalt nach dem Laden der Seite in den Sichtbaren Bereich scrollt.
+Dafür muss das "zu verankernde" Element das id-Attribut gesetzt haben, auf den sich dann der Anker bezieht.
+Beispiel
+https://
+ duckduckgo.com
+ :80
+ /Birne
+ ?iax=images&ia=images
+ #the-interesting-part
+
+ Schreiben Sie für diese Aufgabe eine kleine Kartei-Karten-Webseite.
+
+ Anforderungen:
+