HTML - URL-Encoding

Hallo ihr zukünftigen Web-Entwickler! Heute tauchen wir in die faszinierende Welt der URL-Encoding ein. Keine Sorge, wenn ihr neu seid; wir beginnen mit den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials werdet ihr wie ein Profi URL-Encodieren!

Was ist URL-Encoding?

Bevor wir zu Beispielen übergehen, lassen uns verstehen, was URL-Encoding ist und warum es wichtig ist.

URL-Encoding ist eine Methode, Zeichen in ein Format umzuwandeln, das über das Internet übertragen werden kann. Es ist, als würde dein Text ein spezielles Visum erhalten, um sicher durch das Web zu reisen!

Stellt es euch so vor: Stellt euch vor, ihr wollt einen Brief mit einer aufwendigen Adresse, die Symbole und Leerzeichen enthält, versenden. Die Post könnte verwirrt sein! URL-Encoding ist so, als würde man diese Adresse so umschreiben, dass jeder Postbote (oder in unserem Fall jeder Webserver) sie verstehen kann.

Beispiel

Lassen wir mit einem einfachen Beispiel beginnen:

https://www.example.com/my file.html

Diese URL enthält ein Leerzeichen, das Probleme verursachen kann. Wenn wir es codieren, wird es zu:

https://www.example.com/my%20file.html

Seht ihr das %20? Das ist die URL-encodierte Version eines Leerzeichens. Cool, oder?

ASCII-Control-Zeichen-Encoding

Nun sprechen wir über ASCII-Control-Zeichen. Das sind besondere Zeichen, die bestimmen, wie Text verarbeitet wird. In der URL-Encoding müssen wir mit diesen besonders vorsichtig sein.

Hier ist eine Tabelle mit einigen häufigen ASCII-Control-Zeichen und ihren codierten Versionen:

Zeichen	Codiert
NUL	%00
SOH	%01
STX	%02
ETX	%03

Zum Beispiel, wenn ihr ein NUL-Zeichen in einer URL einfügen müsstet (was selten ist), würdet ihr %00 verwenden.

Non-ASCII-Control-Zeichen-Encoding

Non-ASCII-Zeichen sind diejenigen außerhalb des Standard-ASCII-Satzes, wie Akzentzeichen oder Symbole aus anderen Alphabeten. Diese müssen ebenfalls besonders behandelt werden.

Schauen wir uns ein Beispiel an:

https://www.example.com/café

Wenn codiert, wird es zu:

https://www.example.com/caf%C3%A9

Das é wurde durch %C3%A9 ersetzt. Dies stellt sicher, dass Server auf der ganzen Welt dieses Zeichen korrekt interpretieren können.

Reserved-Character-Encoding

Einige Zeichen haben in URLs besondere Bedeutungen. Wir nennen diese reserved characters, und sie müssen codiert werden, wenn wir sie als reguläre Zeichen verwenden möchten.

Hier ist eine Tabelle der reserved characters und ihrer codierten Versionen:

Zeichen	Codiert
!	%21
#	%23
$	%24
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C

Schauen wir uns ein Beispiel an:

https://www.example.com/search?q=fish&chips

Diese URL verwendet das & als Trennzeichen zwischen Parametern. Wenn wir tatsächlich nach "fish & chips" suchen wollten, müssten wir es so codieren:

https://www.example.com/search?q=fish%26chips

Jetzt weiß der Server, dass wir nach "fish & chips" suchen und nicht nach zwei separaten Suchbegriffen!

Unsafe-Character-Encoding

Zuletzt sprechen wir über unsafe characters. Das sind Zeichen, die von verschiedenen Systemen missverstanden werden könnten und stets codiert werden sollten.

Hier ist eine Tabelle einiger unsafe characters:

Zeichen	Codiert
Leerzeichen	%20
"	%22
<	%3C
>	%3E
#	%23
%	%25
{	%7B
}	%7D
\	%5C
^	%5E
~	%7E

Schauen wir uns ein Beispiel an:

https://www.example.com/search?q=C++ Programming

Wenn korrekt codiert, wird es zu:

https://www.example.com/search?q=C%2B%2B%20Programming

Wir haben die + Zeichen und das Leerzeichen codiert, um sicherzustellen, dass sie korrekt interpretiert werden.

Alles zusammenfügen

Jetzt, da wir all diese Arten der Codierung abgedeckt haben, lassen uns ein komplexeres Beispiel versuchen:

https://www.example.com/search?q=Where's the café? (It's urgent!)

Wenn vollständig codiert, wird es zu:

https://www.example.com/search?q=Where%27s%20the%20caf%C3%A9%3F%20%28It%27s%20urgent%21%29

Das sieht ganz anders aus! Aber jetzt ist es sicher, um ohne das Risiko einer Fehlinterpretation über das Internet zu übertragen.

Schlussfolgerung

Und da habt ihr es, Leute! Ihr habt die ersten Schritte in die Welt der URL-Encoding unternommen. Denkt daran, während es am Anfang vielleicht komplex erscheinen mag, geht es darum, sicherzustellen, dass eure URLs korrekt interpretiert werden können, egal wo sie im Web hingehen.

Denkt an URL-Encoding als den universellen Übersetzer des Internets. Es hilft euren URLs, klar mit Servern auf der ganzen Welt zu kommunizieren, egal welche speziellen Zeichen oder Leerzeichen sie enthalten.

Während ihr eure Reise im Web-Entwickeln fortsetzt, werdet ihr feststellen, dass das Verständnis von URL-Encoding äußerst nützlich ist. Es wird euch helfen, robuste Links zu erstellen, Benutzerinput sicher zu handhaben und sogar knifflige URL-bezogene Probleme zu debuggen.

Übt weiter, und bald wird URL-Encoding für euch zur zweiten Natur. Frohes Coden und mögen alle eure URLs sicher durch das Web reisen!

Credits: Image by storyset