Что такое веб-сайт и как он работает

Что такое веб-сайт?

Возьмите книгу. У неё есть страницы с текстом и картинками. Открываете, читаете, всё понятно. Автор написал текст, типография напечатала, вы взяли с полки в библиотеке или книжном.

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

Каждый сайт живёт на сервере. Сервер это обычный компьютер, который работает круглосуточно без выходных и праздников. Представьте, что это библиотекарь, который никогда не спит и готов отдать вам книгу в любой момент. На нём хранятся файлы сайта, эти файлы как строительные блоки конструктора. Один файл содержит текст и заголовки. Другой хранит цвета и размеры. Третий отвечает за движение и кнопки.

Теперь разберёмся с этими блоками подробнее. Первый блок называется HTML. Это скелет страницы, её каркас. HTML описывает, что на странице есть и в каком порядке расположено. Заголовок, параграф, кнопка, картинка. Всё это HTML. Как план дома на бумаге: тут будет комната, тут коридор, тут кухня.

Второй блок это CSS. Если HTML это скелет, то CSS это одежда, обои, мебель и вся красота. CSS отвечает за внешний вид. Заголовок становится большим и красным. Кнопка получает округлые углы и тень. Текст располагается по центру с красивыми отступами. Всё это делает CSS. Как дизайнер интерьера, который превращает голые стены в уютную квартиру.

Третий блок это JavaScript. Это мышцы и мозг страницы. JavaScript делает сайт живым и реагирующим на действия. Нажимаете кнопку, появляется окно. Скролите страницу, картинка плавно въезжает сбоку. Вводите текст в поле поиска, выскакивают подсказки. Это всё работа JavaScript. Как нервная система в теле, которая заставляет всё двигаться и реагировать.

HTML, CSS и JS

Но тут возникает вопрос. Как эти три блока превращаются в то, что видим на экране?

Открываете сайт. Браузер отправляет запрос на сервер. Сервер находит нужные файлы HTML, CSS и JavaScript, упаковывает их в одну посылку и отправляет обратно. Браузер получает файлы и начинает колдовать. Сначала читает HTML, чтобы понять структуру: где что должно стоять. Потом применяет CSS, чтобы раскрасить и расставить всё красиво. Наконец запускает JavaScript, чтобы добавить интерактивность. После этого видите готовую страницу.

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

Теперь представьте большой город. Дома это сайты. В каждом доме живут данные. Ищете информацию, приходите в нужный дом, стучитесь. Жильцы открывают дверь и выдают вам то, что нужно. Как соседи, которые подскажут, где ближайшая аптека или как пройти в библиотеку.

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

Всё построено на одном принципе взаимодействия. Сервер это помощник, готовый ответить на любой вопрос. Браузер это посланник, который задаёт вопросы и получает ответы. HTML, CSS и JavaScript это инструменты, которые вместе создают то, что видим на экране. Как оркестр, где каждый инструмент играет свою партию, но вместе получается симфония.