Как работает Веб

Все компьютеры, подключенные к интернету и взаимодействующие между собой, можно разделить на две большие группы — серверы и клиенты. Клиенты это обыкновенные пользователи, использующие браузер своего домашнего компьютера, телефона или любого другого устройства для просмотра веб-страниц. Серверы это компьютеры, на которых установлено специальное программное обеспечение для обработки запросов от клиентов. На серверах хранятся файлы и код сайтов, который они исполняют при обращении клиентов к ним, генерируя и возвращая веб-страницу.

Однако это ещё не всё, что нужно знать о сети.

То, каким образом данные передаются между всеми участниками сети, определяется протоколом TCP/IP. Это целый набор различных сетевых протоколов (правил), определяющих, как данные в интернете пакетируются, обрабатываются, передаются, маршрутизируются и принимаются. Эта модель организации передачи данных происходит ещё от первой сети APRANET, о которой было сказано в предыдущей статье.

Система доменных имён (DNS) это своеобразный справочник айпи адресов, в котором ваш провайдер ищет запрашиваемый сервер. Например, вы вводите в строку запроса браузера социальную сеть medium.com. Ваш провайдер в этот момент ещё не знает, на каком сервере находится этот сайт. Он обращается к системе доменных имён и ищет там сперва доменную зону (.com в названии запроса), а затем внутри этой доменной зоны по алфавитному порядку необходимую запись, указывающую на какой-либо айпи адрес. В результате он получает искомый адрес и направляет запрос непосредственно к этому компьютеру, а затем полученный ответ — вам. Ниже приведён скриншот с настройками записей DNS для домена myfirstsite.com. A-запись (записи бывают разных типов, А, MX, CNAME и пр.), возможно, самая важная, поскольку именно она отвечает за соответствие нашего доменного имени конкретному IP адресу. Указание правильного адреса сервера приведёт клиента на наш сайт при запросе myfirstsite.com.

Пока что этого достаточно, более подробно о DNS пойдёт разговор в уроке про хостинги.

HTTP — это, возможно, самый важный компонент сети для веб-разработчика. Расшифровывается как HyperText Transfer Protocol, т.е. протокол передачи гипертекста. Гипертекст — это непосредственно HTML-разметка любой из веб страниц, которую мы будем как верстальщики создавать и затем передавать пользователям, желающим просмотреть наш сайт. С момента своего создания в 1991 году протокол претерпел лишь незначительные изменения, текущая версия — 1.1 (почитать про версионность программного обеспечения можно здесь). Стоит отметить, однако, что хотя задумывался протокол именно для передачи гипертекста, сейчас он используется для передачи произвольных данных. Существует также расширеная версия этого протокола — HTTPS, которая обеспечивает шифрование передаваемых данных. В настоящее время почти все сайты используют https протокол, а сайты, которые его не используют, даже блокируются браузерами и поисковыми системами.

Файлы сайта — каждый сайт в интернете представляет собой комплекс файлов, обеспечивающих его работу. Если говорить просто, то мы помещаем на нашем сервере то, что хотим показать клиентам, и они запрашивают эти файлы через адресную строку браузера. Это может быть например страница home.html, содержащая в себе текст и фотографии с нашей последней поездки к бабушке. Сервер может быть настроен таким образом, чтобы при обращении на наш сайт babulya.ru он отдавал клиенту содержимое этой страницы. Так клиенты из любой точки мира смогут увидеть то, что мы хотим им показать. Вышеприведённый пример это так называемый статичный сайт. Он состоит из файлов формата .html, которые отдаются сервером по определённому запросу. Чтобы изменить какой-то текст на сайте, разработчику сайта необходимо изменить этот текст в соответствующем файле html. Подобный способ работы вебсайтов применяется и в настоящее время, но гораздо более популярным является создание сайтов с автоматически генерируемым содержимым, или динамических сайтов. Такие сайты уже организованы сложнее, но и возможности у них значительно больше. Динамические сайты создаются как правило на «движках», или CMS (системы управления контентом), которые в свою очередь создаются на серверных языках программирования (ЯП) (php, python, perl). В работе подобных сайтов задействуется ещё одна сущность веба, которая называется базой данных (БД). Это хранилище информации (на простом языке — набор таблиц с данными), которую может запрашивать и редактировать сам сервер, а также клиенты-пользователи при совершении определённых действий. Например, пользователи могут оставлять комментарии на форуме, отзывы о товаре и пр. Всё это будет обрабатываться и попадать в БД, а затем эту информацию будут видеть другие пользователи. Таким образом, при обращении клиента к нашему сайту mysite.com «движок» сам проанализирует запрос и сгенерирует для клиента необходимую страницу, например с каталогом товаров, с отзывами на конкретный товар, страницу для оценки качества обслуживания и т.д. Если будет необходимо, ЯП обратится к БД, возьмёт оттуда 10 последних отзывов о понравившихся нам ботинках, «упакует» всё это в HTML разметку и вернёт нам в виде простого HTML кода. Хотя мы увидим ту же самую HTML разметку с информацией, прежде на сервере будет проделано довольно много работы. Настройка серверов, описание серверной логики, работа с базой данных, разделение информации для обработки запроса и пр. относится к компетенции backend-разработчиков. Нам как верстальщикам, frontend-разработчикам необходимо знать эти процессы, но не углублённо.

URL — это унифицированный указатель ресурса. Это единообразная система адресов электронных ресурсов (не только сайтов!). Чаще всего мы будем упоминать URL при разговоре о сайтах, однако это также относится и к электронной почте, мессенджерам, социальным сетям. Многие из них имеют собственные веб-протоколы и схемы URL (браузер будет переадресовывать такие запросы соответствующим приложениям). Простой пример веб-URL это https://mail.ru. Он состоит из протокола (https), доменного имени (mail) и доменной зоны (.ru). Такой запрос приведёт нас на всем известный в Рунете информационно-развлекательный портал. Если мы обратимся на какую-нибудь страницу на этом ресурсе, выполнив запрос https://mail.ru/latest-news, то в данном случае в URL появится ещё строка запроса, или путь\path (/latest-news). Мы можем также сразу передать параметры запроса, обратившись на https://mail.ru/latest-news?category=17&date=20112021. То, что следует в запросе после знака вопроса, называется параметрами. Параметры имеют имя и значение, которые разделяет знак равно. Несколько параметров в запросе объединяются знаком амперсанд &. В нашем запросе мы хотим увидеть последние новости из категории №17 за дату 20.11.2021. Весь наш запрос и будет являться URL. Это не исчерпывающая информация об URL, но та, которая вам необходима на данном этапе. Мы будем возвращаться к URL ещё много раз в процессе обучения.
Другие примеры URL:

• Скайп:
  skype:echo123?call
• Электронная почта:
  mailto:hello@world.com
• FTP соединение
  ftp://172.0.2.235
  ftp://somesite.com