Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Сейчас вы читаете этот урок на сайте Хекслета - для вас это просто текст, изображения, ссылки, кнопки. В этом уроке мы рассмотрим, что такое сайт с технической точки зрения: из чего он состоит, как формируется адрес сайта и как в этом помогают DNS и серверы.</p>

2 <h2>Из чего состоит сайт</h2>

3 <p>Современный сайт похож на клиент-серверную архитектуру. Как и в ней, сайты и приложения в интернете разбиваются на две основные составляющие:</p>

4 <ul><li>Frontend (фронтенд) - клиентская часть</li>

5 <li>Backend (бекенд) - серверная часть</li>

6 </ul><p>Разберем каждую составляющую сайта подробнее.</p>

7 <h3>Frontend</h3>

8 <p>Клиентская часть сайта обрабатывается на стороне клиента, то есть нас с вами. Браузеры самостоятельно обрабатывают:</p>

9 <ul><li>Разметку сайта на языке HTML</li>

10 <li>Стили сайта на языке CSS</li>

11 <li>Различные анимации и обработку данных на языке JavaScript</li>

12 </ul><p>Все это называется<strong>frontend</strong>приложения - часть, которая видна пользователю и обрабатывается у него на компьютере. На странице этого урока вы видите боковую панель с кнопками, текст, заголовки, изображения, ссылки - все это обрабатывает ваш браузер. Поэтому один и тот же сайт может по-разному отображаться на разных устройствах.</p>

13 <h3>Backend</h3>

14 <p>Сайт это не только красивый внешний вид, но и сами данные, их сохранение и получение, возможность регистрации. Логическая часть сайта, которая скрыта от взгляда пользователя, называется<strong>backend</strong>или<strong>серверная часть</strong>.</p>

15 <p>Backend часто представлен двумя компонентами:</p>

16 <ul><li>Логические обработчики</li>

17 <li>База данных</li>

18 </ul><p>Например, на странице этого урока backend часть обработала:</p>

19 <ul><li>Статус курса - платный или бесплатный</li>

20 <li>Зарегистрированы вы на сайте или нет</li>

21 <li>В каком уроке вы сейчас находитесь. После этого посылается запрос на получение текста урока</li>

22 <li>Есть ли в этом уроке тесты и упражнения</li>

23 <li>Проходили ли вы этот урок ранее</li>

24 </ul><p>Backend обработает информацию и, если нужно, пришлет данные, которые нужны, чтобы показать ту или иную дополнительную информацию. Например, чтобы выполнить упражнения, нужно вступить в курс.</p>

25 <p>Когда backend обработает данные, они передаются во frontend часть, где они выводятся для пользователя. Backend только передает данные, а за их вывод отвечает frontend часть.</p>

26 <p>Когда мы знаем, как сайт устроен с технической стороны, разберем, где он хранится.</p>

27 <h2>Где хранятся сайты и как на них попасть</h2>

28 <p>Интернет по большей части работает по модели клиент-сервер. Это значит, что сайты хранятся на сервере, к которому клиенты обращаются через браузер.</p>

29 <p>Сервер это тоже компьютер и ему нужно где-то находиться. Он может стоять как дома у создателя сайта, так и у компаний, которые за определенную плату предоставляют доступ к этому компьютеру. Такие компании называются<strong>хостерами</strong>, а предлагают они услугу<strong>хостинга</strong>.</p>

30 <p>Использовать хостинг - самый простой способ создать свою страницу в интернете. Когда вы оплачиваете услуги хостинга, вы получаете доступ к компьютеру, техподдержку, обслуживание сервера, его настройку и функционирование. Все это ложится на плечи компании, которая предоставляет услуги. Вам нужно только создать сайт и положить его на хостинг.</p>

31 <p>Чтобы попасть на сайт, который находится на хостинге, используют уникальный адрес. Для Хекслета это адрес hexlet.io. Разберем, откуда берется это имя, из чего оно состоит и как браузер понимает, что этот адрес обозначает сайт Хекслета.</p>

32 <h3>Домен</h3>

33 <p>Сейчас вы на сайте с адресом ru.hexlet.io. Такой адрес называется домен, и он состоит из нескольких уровней.</p>

34 <p>Проще определять уровень домена по количеству точек в нем. Уровни идут справа налево:</p>

35 <ul><li>io - домен первого уровня</li>

36 <li>hexlet - домен второго уровня</li>

37 <li>ru - домен третьего уровня. Обычно их называют поддоменами, так как связку домена первого и второго уровня воспринимают как единое целое. Например, домен<em>hexlet.io</em>и его поддомен<em>ru</em></li>

38 </ul><p>Домен первого и второго уровня всегда есть в адресе сайта. Домены первого уровня знакомы многим, например, .com.</p>

39 <p>Домен второго уровня относится к определенному лицу: физическому или юридическому. Например, hexlet, yandex, google, mail, vk, youtube.</p>

40 <p>Остальные уровни домена называются поддоменами, они относятся к домену третьего уровня. Например, поддомен ru у сайта Хекслета. Это русскоязычная версия сайта. Некоторые компании располагают мобильную версию на поддомене и тогда адрес сайта может быть таким m.site.ru</p>

41 <p>Чтобы получить домен, его нужно зарегистрировать. Это платная услуга, которую предоставляют компании-регистраторы. Домен оплачивается раз в год и закрепляется за определенным человеком или компанией. Иногда хостер и регистратор - одна и та же компания. Тогда домен и сервер связываются одновременно. Иначе нужно производить определенные настройки на стороне сервера и подтверждать свое право владения доменом.</p>

42 <p>Теперь у нас есть хостинг и есть домен, которые знают друг о друге. Разберем, как компьютер понимает, куда именно нужно обращаться, когда в адресную строку вводится ru.hexlet.io. Тут в дело вступает DNS.</p>

43 <h3>DNS</h3>

44 <p>Мы уже знаем, что DNS позволяет связать IP-адрес компьютера с его именем. В современном интернете DNS связывает IP-адрес сервера с его доменом.</p>

45 <p>Так как устройств в сети много, а количество сайтов почти два миллиарда, то хранить все данные на одном DNS-сервере невозможно. Он не выдержит такой нагрузки.</p>

46 <p>DNS-серверы разбиты по уровням, где каждый уровень знает только о своем доменном уровне. Схема работы выглядит так:</p>

47 <ol><li>Компьютер посылает запрос на ближайший DNS-сервер. Обычно это сервер провайдера, который поставляет интернет в квартиру</li>

48 <li>Если записи о таком доменном имени нет, то посылается запрос на корневой DNS-сервер. Этот сервер хранит информацию о DNS-серверах, которые ответственны за домены первого уровня</li>

49 <li>DNS-сервер зоны знает обо всех доменах второго уровня, которые являются поддоменами его зоны, например зоны .ru</li>

50 <li>Если нужен домен третьего уровня, то посылается нужный IP-адрес. Иначе цикл продолжается до тех пор, пока не будет получен нужный адрес</li>

51 </ol><p>Подробнее об этом процессе вы можете прочитать в нашем гайде<a>Что такое DNS-сервер простыми словами</a>.</p>

52 <h2>Выводы</h2>

53 <p>В этом уроке мы рассмотрели, что такое сайт с технической точки зрения: из чего он состоит, как формируется адрес сайта и как в этом помогают серверы и DNS. Повторим важные моменты:</p>

54 <ul><li>Сайты в интернете похожи по своей структуре на клиент-серверную архитектуру и делятся на frontend и backend</li>

55 <li>Frontend часть отвечает за вывод данных на страницу. Разметка, стили и некоторые части кода на JavaScript исполняются в браузере пользователя</li>

56 <li>Backend часть отвечает за логику приложения и часто разбивается на две составляющие: логика и база данных</li>

57 <li>В большинстве случаев сайты располагаются у хостеров - организаций, которые предоставляют доступ к серверам</li>

58 <li>Чтобы попасть на сайт у него есть домен - имя, которое связано с сервером на хостинге</li>

59 <li>Для связи домена и IP адреса хостинга используется DNS</li>

60 </ul>