HTML - URL Encoding

Здравствуйте, будущие веб-разработчики! Сегодня мы окунёмся в fascинирующий мир URL-кодирования. Не волнуйтесь, если вы новички; мы начнём с основ и постепенно перейдём к более сложному. К концу этого урока вы будете кодировать URL как профи!

HTML - URL Encoding

Что такое URL-кодирование?

Прежде чем мы перейдём к примерам, давайте поймём, что такое URL-кодирование и почему оно важно.

URL-кодирование — это метод преобразования символов в формат, который можно передать через Интернет. Это как дать вашему тексту специальный паспорт для безопасного путешествия по вебу!

Представьте себе: вы пытаетесь отправить письмо с замысловатым адресом, включающим символы и пробелы. Почтовая служба может запутаться! URL-кодирование — это как переписать этот адрес так, чтобы каждый почтовый работник (или в нашем случае, каждый веб-сервер) мог его понять.

Пример

Давайте начнём с простого примера:

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

Этот URL содержит пробел, который может вызвать проблемы. Когда мы его кодируем, он становится:

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

Смотрите %20? Это URL-кодированная версия пробела. Круто, правда?

Кодирование ASCII-управляющих символов

Теперь давайте поговорим о ASCII-управляющих символах. Это специальные символы, которые управляют обработкой текста. В URL-кодировании нам нужно быть особенно осторожными с ними.

Вот таблица некоторых.common ASCII-управляющих символов и их закодированных версий:

Символ	Закодировано
NUL	%00
SOH	%01
STX	%02
ETX	%03

Например, если вам нужно включить символ NUL в URL (хотя это редкость), вы будете использовать %00.

Кодирование некорректных ASCII-символов

Некорректные ASCII-символы — это те, которые находятся за пределами стандартного набора ASCII, такие как accented буквы или символы из других алфавитов. Эти也需要 особого обращения.

Давайте рассмотрим пример:

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

Когда закодирован, это становится:

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

é был заменён на %C3%A9. Это обеспечивает правильную интерпретацию этого символа серверами по всему миру.

Кодирование зарезервированных символов

Some символы имеют особое значение в URL. Мы называем их зарезервированными символами, и их нужно кодировать, если мы хотим использовать их в качестве обычных символов.

Вот таблица зарезервированных символов и их закодированных версий:

Символ	Закодировано
!	%21
#	%23
$	%24
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C

Давайте рассмотрим пример:

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

Этот URL использует & в качестве разделителя между параметрами. Если бы мы действительно хотели искать "fish & chips", мы бы закодировали его так:

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

Теперь сервер знает, что мы ищем "fish & chips", а не два отдельных поисковых запроса!

Кодирование небезопасных символов

Lastly, давайте поговорим о небезопасных символах. Это символы, которые могут быть неправильно поняты различными системами и должны всегда кодироваться.

Вот таблица некоторых небезопасных символов:

Символ	Закодировано
Space	%20
"	%22
<	%3C
>	%3E
#	%23
%	%25
{	%7B
}	%7D
\|	%7C
\	%5C
^	%5E
~	%7E

Давайте используем их в примере:

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

Когда правильно закодирован, это становится:

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

Мы закодировали знаки + и пробел, чтобы они были интерпретированы правильно.

Объединение всего вместе

Теперь, когда мы рассмотрели все эти типы кодирования, давайте попробуем более сложный пример:

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

Когда полностью закодирован, это становится:

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

Вот это да! Но теперь он безопасен для передачи через Интернет без риска неправильной интерпретации.

Заключение

И вот вы, люди! Вы только что сделали свои первые шаги в мир URL-кодирования. Помните, хотя это может показаться сложным сначала, это всё о том, чтобы убедиться, что ваши URL могут быть правильно интерпретированы где бы они ни пошли в вебе.

Смотрите на URL-кодирование как на universal translator Интернета. Он помогает вашим URL clearly общаться с серверами по всему миру, несмотря на то, какие special символы или пробелы они содержат.

Пока вы продолжаете своё путешествие в веб-разработке, вы обнаружите, что понимание URL-кодирования очень полезно. Оно поможет вам создавать robust ссылки, обрабатывать пользовательский ввод безопасно и даже отлаживать сложные URL-связанные проблемы.

Продолжайте практиковаться, и скоро URL-кодирование将成为 для вас second nature. Счастливого кодирования, и пусть все ваши URL безопасно путешествуют по вебу!

Credits: Image by storyset