From 3b08016c0b0d6324f082096e6aec4bd2cd20e453 Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Fri, 4 Oct 2024 07:56:07 +0200 Subject: [PATCH] feat(slides): add slides (de) for document linking --- src/components/slides/html-linking/a.astro | 57 +++++ .../slides/html-linking/index.astro | 15 ++ .../slides/html-linking/introduction.astro | 20 ++ .../slides/html-linking/structuring.astro | 32 +++ .../slides/html-linking/title.astro | 3 + src/components/slides/html-linking/url.astro | 200 ++++++++++++++++++ .../moving-between-html-documents.astro | 8 + src/pages/tasks/html-2/index.astro | 29 +++ 8 files changed, 364 insertions(+) create mode 100644 src/components/slides/html-linking/a.astro create mode 100644 src/components/slides/html-linking/index.astro create mode 100644 src/components/slides/html-linking/introduction.astro create mode 100644 src/components/slides/html-linking/structuring.astro create mode 100644 src/components/slides/html-linking/title.astro create mode 100644 src/components/slides/html-linking/url.astro create mode 100644 src/pages/slides/moving-between-html-documents.astro create mode 100644 src/pages/tasks/html-2/index.astro 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 @@ +
+
+

Das a-Tag für Verlinkungen

+
+ +
+

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.

+
+ +
+

Anatomie

+ 

+      <a
+        href="https://google.com"
+        target="_self"
+      >
+        Besuche doch mal Google!
+      </a>
+
+
+ +
+

Targets

+
    +
  • _self - Öffnet den Link im gleichen Browser-Context (gleicher Tab)
    • +
  • _blank - Öffnet den Link in einem neuen Browser-Context (neuer Tab)
    • +
+
+ +
+

Relative URL's

+

Sofern Verlinkungen auf der eigenen Seite existieren, muss eigentlich nur der Pfad innerhalb der Website angegeben werden

+
+ +
+

Angenommen sie befinden sich auf /account:

+ 

+      <a href="/settings">...</a>
+
+
+ leitet weiter zu +
+ /settings +
+ +
+

Anchor / Fragmente

+ 

+      <h1 id="the-beginning">Der Anfang</h1>
+
+      <!-- Irgendwo im Text -->
+
+      <a href="#the-beginning"> Zum Anfang </a>
+
+
+
\ No newline at end of file diff --git a/src/components/slides/html-linking/index.astro b/src/components/slides/html-linking/index.astro new file mode 100644 index 0000000..9058730 --- /dev/null +++ b/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' +--- + +
+ + + + + +
\ No newline at end of file diff --git a/src/components/slides/html-linking/introduction.astro b/src/components/slides/html-linking/introduction.astro new file mode 100644 index 0000000..60c18d2 --- /dev/null +++ b/src/components/slides/html-linking/introduction.astro @@ -0,0 +1,20 @@ +
+
+

Was das Internet ausmacht

+

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)

+
+
\ No newline at end of file diff --git a/src/components/slides/html-linking/structuring.astro b/src/components/slides/html-linking/structuring.astro new file mode 100644 index 0000000..7ad6699 --- /dev/null +++ b/src/components/slides/html-linking/structuring.astro @@ -0,0 +1,32 @@ +
+
+

Strukturieren von HTML-Dateien

+
+ +
+

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.)

+
+ +
+

Erreichbarkeit über die Ordnerstruktur

+ 

+      .
+      ├── 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.

+
+
\ No newline at end of file diff --git a/src/components/slides/html-linking/title.astro b/src/components/slides/html-linking/title.astro new file mode 100644 index 0000000..310e0c0 --- /dev/null +++ b/src/components/slides/html-linking/title.astro @@ -0,0 +1,3 @@ +
+

Verlinkungen zwischen HTML-Seiten

+
\ No newline at end of file diff --git a/src/components/slides/html-linking/url.astro b/src/components/slides/html-linking/url.astro new file mode 100644 index 0000000..1a16e73 --- /dev/null +++ b/src/components/slides/html-linking/url.astro @@ -0,0 +1,200 @@ +
+
+

Wie ist eine URL aufgebaut?

+
+ +
+

Eine klassische URL wird aus verschiedenen Teilstücken zusammengesetzt um eine bestimmte Resource im WWW zu referenzieren

+
+ +
+

Protokol

+

+ 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) +

+
+ +
+

Gängige Protokolle

+
    +
  • HTTP
    • +
  • HTTPS
    • +
  • FTP
    • +
  • mailto
    • +
  • file
    • +
+
+ +
+

Beispiel:

https://

+
+ +
+

Domäne

+

+ 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 +

+
+ +
+

Subdomains & Top-Level-Domain

+

+ 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:

+
    +
  • .com ("Commercial", eigentlich aber eher für den US-Raum verwendet)
    • +
  • .org (Organization)
    • +
  • .co.uk ("Commercial" + "United Kingdom")
    • +
  • .tv (Tuvalu, die polynesische Insel profitiert stark von dieser TLD)
    • +
  • .net ("Network")
    • +
  • .edu ("Educational")
    • +
  • .gov ("Government")
    • +
+
+ +
+

+ 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. +

+
+ +
+
    +
  • .berlin
    • +
  • .online
    • +
  • .shop
    • +
  • .dev
    • +
  • .edeka
    • +
+
+ +
+

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 +

+
+ +
+

Port

+

+ 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. +

+
    +
  • Port 80 - für das HTTP-Protokoll reserviert
    • +
  • Port 443 - für das HTTPS-Protokoll reserviert
    • +
+
+ +
+

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) +

+
+ +
+

Pfade

+

+ 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.

+
+ +
+

Query / Parameter

+

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 +
+ +
+

Anchor / Fragment

+

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 +
+
\ No newline at end of file diff --git a/src/pages/slides/moving-between-html-documents.astro b/src/pages/slides/moving-between-html-documents.astro new file mode 100644 index 0000000..b93969b --- /dev/null +++ b/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' +--- + + + + \ No newline at end of file diff --git a/src/pages/tasks/html-2/index.astro b/src/pages/tasks/html-2/index.astro new file mode 100644 index 0000000..b1c7852 --- /dev/null +++ b/src/pages/tasks/html-2/index.astro @@ -0,0 +1,29 @@ +--- +import Layout from '../../../layouts/Layout.astro'; +--- + + +
+

Aufgabe 2 zu HTML

+

+ Schreiben Sie für diese Aufgabe eine kleine Kartei-Karten-Webseite. +
+ Anforderungen: +

    +
  1. Karteikarten sind per Ordner Thematisch abgegrenzt (z.B. Web-Engineering, Mathematik, etc...)
    2. +
  2. Jede "Karteikarte" liegt in einem Themenordner in seinem eigenen Ordner (z.B. web-engineering/p-tag)
    3. +
  3. Innerhalb jedes Karteikarten-Ordners existieren die HTML-Dateien "front.html" und "back.html", diese Stellen jeweils die Vorder- sowie Rückseite der Karteikarte dar.
    4. +
  4. + Im "root" als auch in den Themen-Ordnern existieren index.html Dateien, die jeweils die Inhalte des Ordners anzeigen +
      +
    • In index.html innerhalb des root-Verzeichnisses werden alle Themen aufgelistet und verlinkt
      • +
    • Innerhalb der index.html eines Themen-Ordnes werden die einzelnen Karteikarten aufgelistet und verlinkt
      • +
    +
    5. +
+

+
+
+ "Lösung" +
+ \ No newline at end of file