Как работает сайт? Что происходит, когда вы вводите адрес веб-сайта в браузер?

Представьте: вы берёте телефон, открываете браузер, вводите jetschool.az и нажимаете Enter. Меньше чем за секунду на экране появляется яркая страница с кнопками и загруженными изображениями. Это выглядит настолько естественно, что большинство из нас даже не задумывается об этом.

Но за эту одну секунду устанавливается связь с компьютером, который может находиться на другом конце света, ему отправляется запрос, приходит ответ, и этот ответ превращается на экране в страницу. Как же это происходит? Давайте проследим этот путь шаг за шагом.

Разговор двух сторон: клиент и сервер

Работу веб-сайта проще всего объяснить на примере похода в ресторан. Вы заходите в ресторан и делаете заказ. Официант относит заказ на кухню, повар готовит блюдо, и официант приносит его к вашему столу. Вы не заходите на кухню и не видите, как готовится еда. Вы просто делаете заказ и получаете результат.

В интернете всё работает точно так же. Сторона, которая делает заказ, называется клиентом. Это ваш браузер: Chrome, Safari, Firefox или любой другой браузер на вашем телефоне. Клиент сам ничего не хранит, он просто спрашивает: «Можешь отправить мне эту страницу?»

Отвечает же сервер, то есть «кухня» интернета. Сервер — это мощный компьютер, который работает круглосуточно и постоянно подключён к интернету. Его задача — хранить файлы сайта и отвечать на поступающие запросы. Сервер также отвечает только тому, кто спрашивает: если вы ничего не запросили, он ничего не отправит.

Таким образом, главный секрет веб-сайта на самом деле прост: это диалог, в котором клиент спрашивает, а сервер отвечает. Всё остальное лишь объясняет, как этот диалог происходит.

Что такое хостинг?

Хорошо, сервер есть. А где хранятся файлы сайта: тексты, изображения, видео и код? Они хранятся на сервере, в специальном месте, выделенном для вашего сайта. Это место называется хостингом. Если вернуться к нашему примеру с рестораном, хостинг — это здание, в котором находится ресторан: кухня, склад и залы с столиками, всё расположено там. Тот, кто создаёт сайт, либо покупает собственный сервер, либо арендует место у готовых хостинг-компаний. Без хостинга сайту нечего было бы показывать, ведь файлы должны где-то находиться.

IP-адрес и домен

Теперь возникает новый вопрос. В интернете миллионы серверов. Ваш браузер знает, что вам нужен jetschool.az, но как он понимает, какой именно это сервер?

У каждого сервера есть свой IP-адрес. Это адрес из чисел, разделённых точками, например 185.199.108.153. Для компьютеров такой адрес подходит идеально. Но представьте, что вам пришлось бы запоминать числовой адрес каждого любимого сайта. Это почти невозможно. Именно поэтому был придуман домен. Домен — это название сайта на человеческом языке: jetschool.az, google.com, youtube.com. Его можно сравнить с адресом дома. Адрес вроде «улица Низами, 15» запомнить легко, а GPS-координаты не зубрит никто.

Так мы разобрали два основных понятия. Домен — это название и адрес сайта, а хостинг — место, где хранятся файлы этого сайта. Они дополняют друг друга: и сайт, у которого есть адрес, но нет «дома», и сайт, у которого есть «дом», но неизвестен адрес, остаются пустыми.

Телефонная книга интернета: DNS

Здесь возникает ещё одна проблема. Мы вводим в браузере jetschool.az, а компьютеры работают только с IP-адресами. Кто же связывает эти два мира?

Эту работу выполняет DNS (Domain Name System). DNS — это телефонная книга интернета. Когда вы звоните знакомому, вы не помните его номер наизусть: вы находите имя в контактах, и телефон сам набирает номер. DNS работает так же: браузер передаёт ему имя jetschool.az, а DNS находит, какому IP-адресу соответствует это имя, и возвращает его.

Теперь браузер знает, где находится сервер. Пора отправляться в путь.

Путешествие длиной в одну секунду

Давайте соберём все части вместе и ещё раз проследим тот момент, когда вы нажимаете Enter.

Первый шаг: поиск адреса. Вы вводите jetschool.az и нажимаете Enter. Браузер спрашивает у DNS IP-адрес этого имени и получает ответ.

Второй шаг: отправка запроса. Браузер отправляет на сервер по этому IP-адресу HTTP-запрос. Простыми словами: «Привет, отправь мне главную страницу». Если в адресной строке вы видите https:// и маленький значок замка, это означает, что запрос отправлен в зашифрованном виде и безопасно. Даже если кто-то перехватит сообщение по пути, прочитать его он не сможет.

Третий шаг: сервер приступает к работе. Сервер получает запрос и начинает готовить ответ. Если вы вошли в аккаунт на сайте и, например, нужно показать ваше имя, для этого сервер обращается к базе данных. На этом этапе включается код, работающий за сервером, то есть бэкенд. Бэкенд подобен повару на кухне: клиент его не видит, но приготовление блюда находится в его руках.

Четвёртый шаг: приход ответа. Сервер отправляет подготовленные файлы в браузер. Их три основных вида: HTML, CSS и JavaScript.

Пятый шаг: построение страницы. Браузер берёт полученные файлы и превращает их на экране в страницу. При этом каждый файл выполняет свою задачу:

1. HTML строит скелет страницы: где будут заголовки, тексты, изображения и кнопки.
2. CSS украшает этот скелет: цвета, шрифты, расположение и размеры.
3. JavaScript оживляет страницу: определяет, что произойдёт при нажатии на кнопку, как будет открываться меню и как будут работать анимации.

Эта часть называется фронтендом, потому что именно её мы видим на экране. Бэкенд же остаётся за кулисами.

Итог

Когда вы вводите в браузере название сайта, на самом деле запускается целая цепочка: домен даёт сайту имя, DNS превращает это имя в IP-адрес, браузер, то есть клиент, отправляет запрос на сервер по этому адресу, файлы, хранящиеся на хостинге, возвращаются в качестве ответа, и браузер превращает их на экране в страницу.

Знание этих понятий — очень важная основа для тех, кто только начинает изучать веб-программирование.

Ведь все последующие темы, такие как фронтенд, бэкенд, API и базы данных, строятся именно на этом фундаменте. В JET School дети учатся именно такому образу мышления: работая над реальными проектами, самостоятельно находя и исправляя «баги» в собственном коде. Начните учиться шаг за шагом на нашем курсе «IT и компьютерная инженерия».

Подробнее читайте по ссылке: Курс «IT и компьютерная инженерия»