Как работает сайт: Как работают сайты — Хекслет

Как работает Веб — Изучение веб-разработки

• Назад
• Обзор: Getting started with the web

Как работает Веб даст упрощённое представление о том, что происходит при просмотре веб-страницы в браузере на вашем компьютере или телефоне.

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

Компьютеры, подключённые к сети называются клиентами и серверами. Упрощённая схема того, как они взаимодействуют, может выглядеть следующим образом:

• Клиенты являются обычными пользователями, подключёнными к Интернету посредством устройств (например, компьютер подключён к Wi-Fi, или ваш телефон подключён к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).
• Серверы — это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.

Клиент и сервер, о которых мы рассказали выше, не раскрывают всю суть. Есть много других компонентов, и мы опишем их ниже.

А сейчас давайте представим, что Веб — это дорога. Одна сторона дороги является клиентом, который представляет собой ваш дом. Другая сторона дороги является сервером, который представляет собой магазин. Вы хотите что-то купить в нём.

Помимо клиента и сервера, мы также должны уделить внимание:

• Ваше Интернет-подключение: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.
• TCP/IP: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары.
  В нашем примере, это как автомобиль или велосипед (или собственные ноги).
• DNS: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своём браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живёт сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.
• HTTP: Протокол Передачи Гипертекста — это протокол, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.
• Файлы компонентов: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов:
  • Файлы кода: сайты построены преимущественно на HTML, CSS и JavaScript, хотя вы познакомитесь с другими технологиями чуть позже.
  • Материалы: это собирательное название для всех других вещей, составляющих сайт, такие как изображения, музыка, видео, документы Word и PDF.

Когда вы вводите веб-адрес в свой браузер (для нашей аналогии — посещаете магазин):

1. Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором «живёт» сайт (Вы находите адрес магазина).
2. Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.
3. Если сервер одобряет запрос клиента, сервер отправляет клиенту статус «200 ОК», который означает: «Конечно, вы можете посмотреть на этот сайт! Вот он», а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдаёт вам ваш товар или вам привозят его домой).
4. Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).

Реальные веб-адреса — неудобные, незапоминающиеся строки, которые вы вводите в адресную строку, чтобы найти ваши любимые веб-сайты. Эти строки состоят из чисел, например: 63.245.215.20.

Такой набор чисел называется IP-адресом и представляет собой уникальное местоположение в Интернете. Впрочем, его не очень легко запомнить, правда? Вот почему изобрели DNS. Это специальные сервера, которые связывают веб-адрес, который вы вводите в браузере (например, «mozilla.org»), с реальным IP-адресом сайта.

Сайты можно найти непосредственно через их IP-адреса. Вы можете найти IP-адрес веб-сайта, введя его домен в инструмент, как IP Checker.

Ранее мы использовали термин «пакеты», чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одновременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.

• Как работает Интернет
• HTTP — Протокол уровня приложений
• HTTP: Давайте изучим его!
• HTTP: Коды ответов

Фото улицы: Street composing, Kevin D.

• Назад
• Обзор: Getting started with the web

• Установка базового программного обеспечения
• Каким должен быть ваш веб-сайт?
• Работа с файлами
• Основы HTML
• Основы CSS
• Основы JavaScript
• Публикация вашего веб-сайта
• Как работает Веб

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 15 дек. 2022 г. by MDN contributors.

Как работает сайт? — Meduza

1

Сайт — это вообще что?

Это несколько связанных между собой страниц с текстом, картинками и всем остальным, что бывает в интернете. Если вы читаете эти карточки через браузер — значит, вы на сайте «Медузы». Ваш браузер скачал эту статью в виде страницы на языке HTML (именно на нем пишутся, а точнее — размечаются веб-страницы) и считал специальные разметки — наборы букв и символов, преобразовав их в нечто более симпатичное, чем просто текст. Поэтому вы видите аккуратно отформатированный текст с фоном, картинками, ссылками, кнопками и так далее. Например, текст вида <strong>«Медуза»</strong> преобразуется на сайте так, что слово «Медуза» становится выделено полужирным. 

2

Но по сути сайт — это просто страница с текстом?

Не всегда. Бывают статические и динамические сайты. Статические — это готовые HTML-страницы: например, сайты-визитки с контактами, прайс-листом и другой информацией, которую не нужно часто менять. Когда прайс-лист устареет, придется зайти на сервер и обновить файл. А если у сайта сотня страниц, которые нужно обновить, тогда придется заменить сто файлов, даже если некоторые из них одинаковые. Чтобы упростить этот процесс, были придуманы динамические сайты. В их основе — веб-сервер, специальная программа, которая принимает запрос пользователя и каждый раз генерирует для него новый файл с той страницей, запрос к которой он отправил. Веб-сервер может предоставить хостинг-компания, или вы должны установить программу на сервер сами (о хостинге и сервере мы расскажем ниже). Потом эту программу можно менять, подключать к ней базу данных (например, с пользователями или товарами), выносить повторяющиеся элементы в отдельные шаблоны. Именно так сейчас делаются все большие сайты — онлайн-магазины, медиа, да что угодно. В том числе и сайт «Медузы».

3

Хорошо.

Но как управлять информацией на этом веб-сервере?

С помощью системы управления контентом (CMS — Content Management System) — в простонародье админки. Они различаются в зависимости от задач, для которых предназначены. Для блогов это одни (например, WordPress), для интернет-магазинов — другие (такие как «1С-Битрикс»). Бывают ситуации, когда компания не может найти на рынке готовое решение под свои задачи, тогда им приходится создавать CMS самостоятельно. По этому пути пошла и «Медуза». У нас есть собственная система «Монитор» — она же и внутренний редактор. Через нее загружаются и публикуются тексты, здесь работает вся редакция. 

4

Для сайта нужно установить здоровенный сервер?

Сервер нужен. Но обычно владельцы сайта покупают вычислительные мощности у сторонних компаний. Эта услуга называется хостингом, ее предоставляет множество компаний с различными ценами, оборудованием и скоростью интернета в дата-центрах — специальных зданиях, где установлено серверное оборудование. Если нужен хостинг для простого сайта, обычно покупается так называемый виртуальный сервер — это когда на одном физическом сервере находится сразу несколько сайтов, не связанных друг с другом, при этом каждый из них получает ограниченный доступ к мощности сервера. Если сайт сложный, то берется в аренду физический сервер — тогда вся его мощность будет в вашем распоряжении, но вам же придется заниматься его настройкой. «Медуза» берет в аренду серверы в нескольких компаниях и дата-центрах сразу. Так мы, во-первых, страхуем себя от ситуаций, когда с одним дата-центром что-то случится (например, выключится электричество), а во-вторых, так мы можем находиться ближе к читателю. То есть наш сервер может быть неподалеку от вас, что позволяет данным перемещаться до вашего компьютера быстрее.

5

То есть сайты медленно работают из-за того, что их серверы далеко?

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

6

Понятно. Но в целом все сайты устроены одинаково? Есть какой-то базовый набор страниц?

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

7

Как насчет мобильной версии сайта? Ее нужно делать отдельно?

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

8

Какие еще внутри сайта есть хитрости, которые не видит пользователь?

Существуют разные служебные разделы. Например, файл robots.txt позволяет сайту попадать в выдачу результатов поиска «Яндекса» и Google или, наоборот, запрещает поисковикам индексировать некоторые страницы. Еще есть .htaccess — он регулирует разные правила: например, перенаправляет пользователя на главную, если он вдруг зашел на несуществующую страницу. 

9

А есть у сайта «Медузы» что-то особенное? 

Мы в «Медузе» любим экспериментальные технологии — пусть они недоработанные и с ними приходится сложнее, зато они дают технологические преимущества. Например, мы пользуемся языком Elixir. Он молодой и непопулярный, но на нем можно очень быстро писать realtime-системы, например наши чаты, — такие мало где есть. Но, конечно, не везде допустимы эксперименты. Те части сайта, которые должны работать предсказуемо и надежно, пишутся на проверенных технологиях и языках. CMS написана на Ruby on Rails — этому фреймворку уже больше десяти лет, и непонятных ситуаций с ним возникает куда меньше, чем с более новыми разработками.

10

С надежностью понятно, а что с безопасностью сайта?

Безопасность бывает разной. Нужно стремиться к тому, чтобы сайт нельзя было взломать, но достичь этого на 100% практически невозможно. Если вас очень захотят «хакнуть», то сделают это — вопрос только в цене. Именно на это стоит делать расчет и приложить все усилия к тому, чтобы стоимость взлома была очень высокой. Есть несколько способов этого достичь. Во-первых, стоит провести независимый аудит безопасности. Это дорого, но дешевле, чем последствия взлома. Во-вторых, нужно обновлять не только код, но и все программное обеспечение администраторов сайта. В-третьих, нужно проводить тренинги для сотрудников и обучать их правилам безопасности. В-четвертых, нужно позаботиться и о безопасности посетителей вашего сайта — использовать HTTPS, проверять партнёров, рекламные сети, сторонние скрипты. Наконец, контролируйте среду, в которой работают ваши программисты — настройте доступы таким образом, чтобы разработчики имели доступ только к тем частям системы, которые нужны для их работы. Соблюдение этих правил позволит вашему сайту жить долго и счастливо, а вашим посетителям — быстро и качественно получать то, за чем они пришли.

Этот материал мы подготовили вместе с DataLine. Узнать больше о хостинге и поддержке веб-проектов на аутсорсинге можно на сайте компании.

Как работает сеть — Изучите веб-разработку

• Предыдущий
• Обзор: Начало работы в Интернете

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

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

Компьютеры, подключенные к Интернету, называются клиентов и серверов . Упрощенная схема их взаимодействия может выглядеть так:

• Клиенты — это подключенные к Интернету устройства типичного веб-пользователя (например, ваш компьютер, подключенный к вашей сети Wi-Fi, или ваш телефон, подключенный к вашей мобильной сети) и программное обеспечение для доступа в Интернет, доступное на этих устройствах (обычно веб-браузер, такой как Firefox или Chrome).
• Серверы — это компьютеры, на которых хранятся веб-страницы, сайты или приложения. Когда клиентское устройство хочет получить доступ к веб-странице, копия веб-страницы загружается с сервера на клиентский компьютер для отображения в веб-браузере пользователя.

Клиент и сервер, которые мы описали выше, не рассказывают всей истории. Есть много других задействованных частей, и мы опишем их ниже.

А пока представим, что паутина — это дорога. На одном конце дороги находится клиент, который как ваш дом. На другом конце дороги находится сервер, который является магазином, в котором вы хотите что-то купить.

Помимо клиента и сервера, нам также необходимо передать привет:

• Ваше интернет-соединение : Позволяет отправлять и получать данные в Интернете. Это в основном как улица между вашим домом и магазином.
• TCP/IP : Протокол управления передачей и Интернет-протокол — это протоколы связи, которые определяют, как данные должны передаваться через Интернет. Это как транспортные механизмы, которые позволяют сделать заказ, пойти в магазин и купить товар. В нашем примере это машина или велосипед (или что-то еще, что вы можете передвигаться).
• ДНС : Система доменных имен похожа на адресную книгу для веб-сайтов. Когда вы вводите веб-адрес в своем браузере, браузер просматривает DNS, чтобы найти IP-адрес веб-сайта, прежде чем он сможет получить веб-сайт. Браузеру необходимо выяснить, на каком сервере находится веб-сайт, чтобы он мог отправлять HTTP-сообщения в нужное место (см. ниже). Это похоже на поиск адреса магазина, чтобы вы могли получить к нему доступ.
• HTTP : Протокол передачи гипертекста — это прикладной протокол, определяющий язык, на котором клиенты и серверы общаются друг с другом. Это похоже на язык, который вы используете для заказа товаров.
• Файлы компонентов : Веб-сайт состоит из множества различных файлов, которые подобны различным частям товаров, которые вы покупаете в магазине. Эти файлы бывают двух основных типов:
  • Файлы кода : веб-сайты создаются в основном с использованием HTML, CSS и JavaScript, хотя чуть позже вы познакомитесь с другими технологиями.
  • Активы : это собирательное название для всех других материалов, из которых состоит веб-сайт, таких как изображения, музыка, видео, документы Word и PDF-файлы.

Когда вы вводите веб-адрес в свой браузер (по аналогии с походом в магазин):

1. Браузер обращается к DNS-серверу и находит реальный адрес сервера, на котором живет веб-сайт (вы находите адрес магазина).
2. Браузер отправляет HTTP-запрос на сервер с просьбой отправить копию сайта клиенту (вы идете в магазин и заказываете товар). Это сообщение и все другие данные, передаваемые между клиентом и сервером, отправляются через ваше интернет-соединение с использованием TCP/IP.
3. Если сервер одобряет запрос клиента, сервер отправляет клиенту сообщение «200 OK», что означает «Конечно, вы можете посмотреть этот веб-сайт! Вот он», а затем начинает отправлять файлы веб-сайта в браузер как серия небольших фрагментов, называемых пакетами данных (магазин дает вам ваши товары, и вы приносите их обратно к себе домой).
4. Браузер собирает небольшие фрагменты в полноценную веб-страницу и отображает ее вам (товары доставляются к вашей двери — новые блестящие вещи, круто!).

Когда браузеры отправляют запросы на серверы для файлов HTML, эти файлы HTML часто содержат элемент , ссылающихся на внешние таблицы стилей CSS, и элемент <тело>

Моя страница

Абзац с ссылкой

<дел>