## 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`