Как работает веб сайт

Как работает веб-сервер и что такое HTTP-взаимодействие?

В этой статье мы рассказываем о том, как работает веб-сервер, какие данные отправляются и принимаются между вашим браузером и веб-сервером.

Принцип работы веб-сервера

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

Сайт становится доступен на веб-сервере после того, как зарегистрировано его доменное имя и службой DNS (Domain Name System) выполнено преобразование адресов — то есть связывание IP-адреса, обозначенного набором цифр (например, 192.168.5.12), и доменного имени ( www.site.com ).

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

На веб-сервере хранятся файлы сайта, а именно все HTML-документы и связанные с ними ресурсы, включая изображения, стили CSS, файлы JavaScript, шрифты и видео.

Ресурсы представляют собой не только реальные файлы на сервере (HTML, js, png и т. д.). Часть содержимого генерируется в момент поступления запроса специальным программным кодом с помощью шаблонов и баз данных — например: список новостей, сводка погоды, результаты поиска по сайту, корзина покупок и прочее. Соответственно различают статические (неизменяемые) ресурсы и динамические (изменяемые и адаптированные под конкретного пользователя). Получив запрос на динамическое содержимое, веб-приложение извлекает данные из БД и заполняет ими указанный в запросе шаблон.

Как происходит взаимодействие между клиентом и веб-сервером?

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

Более детально этот процесс можно описать следующим образом:

1. Браузер делит запрошенный URL на три части: протокол, доменное имя, название файла. Например, URL:https:// www.site.com/ file.html будет разделен на следующие части:
   • Протокол («https»).
   • Доменное имя («www.site.com»).
   • Имя файла («file.html»).
2. Браузер при помощи сервисов DNS преобразует доменное имя в IP адрес, который используется для связи с серверной машиной.
3. Используя полученный IP адрес, браузер связывается с нужным веб-сервером и посылает на него запрос, требующий отправки файла «www.site.com / file.html».
4. Веб-сервер получает запрос и ищет указанную в нём HTML-страницу. Если страница существует, сервер отправляет браузеру ответ, в котором будет HTML-код веб-страницы и заголовок с информацией о запрошенном содержимом. Он предназначен для браузера и нужен, чтобы правильно определить размер, язык переданного файла и другие параметры. Пользователь не видит эту информацию. В заголовке передается и код ответа сервера – например, 200 ОК, когда страница найдена, или сообщение об ошибке 404, если сервер не может найти запрошенную страницу. Подробнее о кодах ответа читайте ниже — в разделе «Коды состояния http».
5. Браузер читает полученную от сервера HTML-страницу и подгружает другие необходимые ресурсы, которые с ней связаны — изображения, файлы стилей CSS и JavaScript, отвечающие за оформление и функционал страницы, и т. д.
6. После того, как браузер закончит загрузку всех этих ресурсов, веб-страница будет отображена на экране монитора.

Схематично взаимодействие между браузером и веб-сервером можно представить так:

Рассмотрим это же взаимодействие на уровне HTTP-протокола.

Что такое HTTP-взаимодействие?

Обмен данными между клиентом и веб-сервером происходит по протоколу HTTP.

HTTP (HyperText Transfer Protocol, то есть «протокол передачи гипертекста») — это протокол, предназначенный для передачи гипертекстовых документов (то есть документов, которые могут содержать ссылки, позволяющие организовать переход к другим документам). Правила HTTP лежат в основе передачи информации в сети Интернет.

Задача, которая традиционно решается с помощью протокола HTTP — обмен данными между пользовательским приложением, осуществляющим доступ к веб-ресурсам (обычно это веб-браузер) и веб-сервером.

Клиентское приложение формирует HTTP-запрос и отправляет его на сервер, после чего серверное программное обеспечение обрабатывает данный запрос, формирует HTTP-ответ и передаёт его обратно клиенту, как правило, вместе с HTML-страницей или другими запрошенными данными.

Каждое HTTP-сообщение состоит из трех частей:

1. Стартовая строка (Starting line) — включает служебные данные, определяет тип сообщения.
2. Заголовки (Headers) — описывают клиента и сервер, содержимое сообщения, параметры передачи и др. Все заголовки HTTP разделяются на четыре основных группы:
   • General Headers («Основные заголовки») — могут включаться в любое сообщение клиента и сервера. Например, заголовок Date используется для хранения даты и времени запроса/ответа.
   • Request Headers («Заголовки запроса») — используются только в запросах клиента. Например, заголовки Host, Referer и User-Agent.
   • Response Headers («Заголовки ответа») — предназначены только для ответов от сервера. Например, заголовок Server указывает название и версию веб-сервера.
   • Entity Headers («Заголовки сущности») — могут находиться как в запросах, так и в ответах. Передают мета-информацию об объекте, отправленном в теле сообщения. Например, все заголовки с префиксом Content- предоставляют информацию о структуре, кодировке и размере тела сообщения. Заголовок Last-Modified содержит время и дату последнего изменения документа.

Больше узнать о заголовках можно в спецификации протокола HTTP.

Стартовая строка и заголовок являются обязательными элементами, а тело сообщения может отсутствовать.

Структура HTTP-запроса от клиента

Если клиент хочет загрузить, например страницу «About», HTTP-запрос может включать следующие элементы:

GET /about.html HTTP/1.1 Host: www.site.com Referer: https://www.google.com/ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) Accept-Language: en-us

GET /about.html HTTP/1.1

Стартовая строка, в которой содержатся:

GET — метод запроса, указывающий на основную операцию, которую необходимо осуществить над ресурсом;

/ about.html — запрашиваемый документ;

HTTP – протокол передачи данных;

/1.1 – версия протокола 1.1.

Заголовок Host содержит имя сайта, с которого нужно загрузить документ.

В заголовке Referer прописан URL страницы, откуда сделан запрос.

User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64)

Заголовок User-Agent включает:

Mozilla/5.0 – название и версию браузера, отправившего запрос;

Windows NT 6.3; Win64; x64 – название и версию операционной системы.

Заголовок Accept-Language указывает язык, используемый в браузере.

Структура HTTP-ответа веб-сервера

• Стартовая строка в HTTP-ответе указывает версию протокола передачи данных (HTTP/1.1), код статуса ответа (трехзначное число — например, 200), описание статуса (короткое пояснение к коду ответа – например, OK).
• Заголовки – предоставляют информацию об ответе, сервере или об объекте, отправленном в теле сообщения. Например, в заголовках Content-Type и Content-Length будут указаны тип и размер контента (в байтах).
• Тело ответа – при запросе содержимого веб-ресурса в нём содержится HTML-код запрошенной страницы или выгружаемые файлы. Отделяется от заголовков пустой строкой.

HTTP/1.1 200 OK Server: nginx/1.4.6 (Ubuntu) Date: Mon, 25 Jan 2021 16:54:33 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 98 Last-Modified: Mon, 25 Jan 2021 16:22:21 GMT

    
Hello World
  

Стартовая строка, в которой прописаны:

HTTP – протокол передачи данных;

/1.1 – версия протокола 1.1;

200 – код ответа сервера (страница доступна);

ОК — пояснение к коду ответа.

Server: nginx/1.4.6 (Ubuntu)

Заголовок Server указывает название и версию сервера, который ответил — nginx/1.4.6 (Ubuntu).

Date: Mon, 25 Jan 2021 16:54:33 GMT

Заголовок Date используется для указания даты и времени ответа.

Content-Type: text/html; charset=UTF-8

В заголовке Content-Type прописаны тип отправленного контента (text/html) и его кодировка (charset=UTF-8).

Заголовок Content-Length указывает размер контента (в байтах) – 98.

Last-Modified: Mon, 25 Jan 2021 16:22:21 GMT

Заголовок Last-Modified содержит дату и время последнего изменения документа.

Тело ответа, в котором содержится HTML-код запрошенной страницы.

Коды состояния HTTP

Трехзначный код, возвращаемый сервером в стартовой строке ответа, называется кодом состояния HTTP. Он определяет результат совершения запроса. Коды состояния HTTP разработаны в соответствии со стандартами, определенными Инженерным советом Интернета (IETF).

Первая цифра кода указывает на класс состояния. В настоящее время выделено пять классов состояния:

1. 1xx — Информационное сообщение (информирует о процессе передачи).
2. 2xx — Сообщение об успехе (запрос получен и обработан).
3. 3xx — Сообщение о перенаправлении (запрашиваемый ресурс был перемещен на другой адрес).
4. 4xx — Сообщения об ошибках со стороны клиента (запрос содержит ошибки или не отвечает протоколу).
5. 5xx — Сообщения об ошибках, относящихся к серверу (сервер не смог обработать запрос, хотя тот был составлен правильно).

Вторая и третья цифры в коде детализируют статус ответа. Например:

• 200 OK — запрос получен и успешно обработан.
• 201 Created — запрос получен и успешно обработан, в результате чего создан новый ресурс или его экземпляр.
• 301 Moved Permanently — запрашиваемый ресурс был перемещен навсегда, и последующие запросы к нему должны происходить по новому адресу. Адрес, по которому клиенту следует произвести запрос, сервер указывает в заголовке Location.
• 302 Moved Temporarily — ресурс перемещен временно.
• 401 Unauthorized (Неавторизованный запрос) — для доступа к документу необходимо вводить пароль или быть зарегистрированным пользователем.
• 404 Not Found — сервер не нашел ресурс по этому адресу.
• 500 Internal Server Error — сервер столкнулся с непредвиденным условием, которое не позволяет ему выполнить запрос.
• 503 Service Unavailable — сервис недоступен из-за временной перегрузки или отключения на техническое обслуживание.

Набор кодов состояния описан в соответствующих документах RFC («Request for Comments»), содержащих технические спецификации и стандарты, установленные IETF.

Вы можете проверить код статуса ответа страниц вашего сайта на сервисе Labrika в таблице «Свойства страниц сайта», расположенной в разделе «Инструменты».

Что такое куки (сookie)?

Куки или cookie (от англ. «печенье») — это небольшой текстовый файл с набором служебных данных о посещении сайтов, который веб-сервер отправляет для сохранения в браузере пользователя.

Браузер всякий раз при попытке открыть страницу сайта пересылает cookie обратно веб-серверу.

Примеры использования cookie:

• Автоматическая авторизация — с помощью cookie будут «запоминаться» логин и пароль.
• Для сохранения информации о товарах, добавленных в корзину.
• Для персонализации страниц с помощью cookie сохраняются личная информация и персональные настройки пользователя.
• В инструментах веб-аналитики — для отслеживания действий пользователей и сбора статистики.

От сервера браузеру cookie передаются в составе HTTP-ответа с помощью заголовка Set-Cookie:

HTTP/1.1 200 OK Content-type: text/html Set-Cookie: имя=значение

Браузер отправляет их серверу в HTTP-запросе в заголовке Cookie:

GET /spec.html HTTP/1.1 Host: www.example.org Cookie: имя=значение

Например, cookie могут содержать пароль, если пользователь авторизован на данном сайте:

GET /cart HTTP/1.1 Host: www.site.com Referer: https://www.google.com/ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) Accept-Language: en-us Cookie: login=joe@example.com; password=a497f4d4h7b956

Параметры HTTP-заголовков Cookie и Set-Cookie определяются в спецификации RFC 6265.

Без cookie каждый просмотр веб-страницы является изолированным действием, не связанным с другими просмотрами страниц того же сайта. Сookie позволяют выявить связь между просмотрами веб-страниц одним и тем же пользователем.

Аутентификация пользователей (то есть проверка их подлинности) с помощью cookie происходит следующим образом:

1. Пользователь вводит логин и пароль в соответствующих полях на странице входа и отправляет их на сервер.
2. Сервер получает имя пользователя и пароль, проверяет их и, если они верные, отправляет страницу успешного входа, прикрепив cookie с неким идентификатором сессии. Эти cookie могут быть действительны не только для текущей сессии браузера, но и быть настроены на длительное хранение.
3. Каждый раз, когда пользователь запрашивает страницу с сервера, браузер автоматически отправляет cookie с идентификатором сессии серверу. Сервер проверяет идентификатор по своей базе и, при наличии в ней такого идентификатора, «узнаёт» пользователя.

HTTP и HTTPS

При передаче по протоколу HTTP данные не защищаются и передаются в открытом виде.

Расширение HTTPS (аббр. от англ. HyperText Transfer Protocol Secure) создано для того, чтобы соединение было безопасным, а данные передавались в зашифрованном виде по криптографическому протоколу SSL (secure sockets layer) или TLS (transport layer security). Это специальная «обертка» поверх HTTP, которая шифрует данные, делая их недоступными для злоумышленников.

Чтобы сайт стал работать по протоколу безопасного соединения HТТPS, нужен SSL-сертификат, который содержит криптографические ключи, а также данные о веб-сайте и подтверждает его подлинность. Надежные сертификаты выдаются специальными удостоверяющими центрами. Подробнее о том, как получить SSL-сертификат, вы можете прочитать в отдельной статье на нашем сайте.

Схема передачи данных по протоколу HTTPS

1. Браузер пользователя просит сайт предоставить SSL-сертификат для подтверждения подлинности веб-ресурса.
2. Сайт, поддерживающий HTTPS, отправляет сертификат.
3. Браузер проверяет легальность сертификата в центре сертификации.
4. Браузер и сайт договариваются о секретном ключе для шифрования данных. Они делают это при помощи асимметричного шифрования, которое предполагает использование двух ключей — открытого (для шифровки отправляемого сообщения) и закрытого (для расшифровки полученного сообщения).
5. Браузер и сайт передают информацию, используя симметричное шифрование, при котором данные зашифровываются и расшифровываются с помощью одного и того же общего ключа.

Синтаксически HTTPS идентичен протоколу HTTP, то есть использует те же стартовые строки и заголовки.

Значение HTTPS для SEO

Использование протокола HTTPS является значимым фактором ранжирования сайтов в результатах поиска. Ещё в 2015 году специалист Google Гэри Иллис заявил, что повышение рейтинга компании по протоколу HTTPS может стать решающим фактором, когда в остальном сигналы качества для двух результатов поиска равны. Если поисковый робот обнаружит две одинаковые страницы — одну с HTTP, а вторую с HTTPS, он добавит в индекс страницу с безопасным протоколом.

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

Кроме того, в строке браузера, например, Google Chrome, рядом с адресом сайта без HTTPS ставится отметка «Не защищено».

Тогда как сайты, использующие безопасный протокол HTTPS, помечаются значком в виде замка.

Посмотреть данные о наличии на вашем сайте протокола HTTPS и SSL-сертификата, позволяющего использовать зашифрованное соединение, вы можете на сервисе Labrika в отчете «Безопасность» раздела «Технический аудит».

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

Читать дальше подобные статьи

• Проверка сайта на ошибки 404. Как исправить ссылки на страницу?
• Что такое внутренние ошибки сервера 500 Internal server error и как их исправить?
• Веб-страница сайта временно недоступна или перемещена — что делать с долгим ответом сервера?
• Зачем нужны SSL и TLS сертификаты для SEO сайта?

Как работают сайты

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

Доменные имена

Помимо сервера веб-хостинга, вам также потребуется доменное имя. Доменное имя — это удобный для человека адрес, который позволяет любому подключиться к вашему конкретному IP-адресу и, таким образом, получить доступ к вашему веб-сайту. IP-адрес сам по себе представляет собой серию чисел и десятичных знаков, которые трудно запомнить, особенно с учетом количества веб-сайтов, которые в среднем посещает человек за день!

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

Как посетители подключаются к вашему сайту:

• Посетитель введет ваше доменное имя в свой браузер
• Сервер доменных имен переводит это доменное имя в IP-адрес сервера веб-хостинга, на котором хранится ваш сайт
• Затем сервер веб-хостинга отправляет веб-сайт обратно на компьютер посетителя, где он загружается в его браузер

Вуаля, ваша тетя, бабушка и подруга из Венеции теперь просматривают ваш собственноручно написанный сайт на своем компьютере!

выбор доменного имени

Доменное имя должно подчеркивать, о чем ваш сайт. Например, если вы продаете роботов-белок, robosquirrels.com может быть подходящим названием для вашего сайта. Но вам придется решать, было ли уже занято доменное имя вашей мечты — у всех регистраторов доменных имен есть панель поиска, которая определяет доступность доменного имени.

Поскольку .com существует так долго, многие доменные имена .com недоступны или недоступны. Для своего сайта попробуйте использовать новый домен второго уровня, например .tech, .world или .website.

Доменное имя должно быть коротким, запоминающимся и легко произносимым. Когда вы выберете свое имя, поделитесь им с друзьями или коллегами. Смогут ли они правильно написать это? Если возможно, избегайте использования цифр, дефисов или сокращений вместо реальных слов в именах доменов, поскольку пользователь может легко неверно истолковать и орфографировать ваш домен (например, doughnuts4u или ready2d8).

Какой домен первого уровня мне выбрать? (TLD — top-level-domain)

Все домены первого уровня равны с точки зрения поиска Google, поэтому независимо от того, используете ли вы .world, .me, .tech или .rocks, это не окажет общего влияния на производительность вашего сайта в поисковой системе. В последнее время выбор TLD значительно расширился за счет новых опций, таких как .store, .space и даже .ninja!

Что такое веб-сайт, как он работает и как создают сайты

Ликбез для тех, кто интересуется диджиталом и вебом. Рассказываем об основах.

Фото: Tim Graham Photo Library / Getty Images

Роман Панов

Редактор и иллюстратор. Перепробовал пару десятков профессий — от тестировщика до модели, но нашёл себя в удалёнке. Учится в Skillbox и делится в своих текстах новыми знаниями.

Если вы часто посещаете сайты, но пока путаете хедер с футером, то эта статья — для вас. Рассказываем:

• что такое веб-сайт;
• какие есть виды сайтов;
• из чего состоит сайт;
• какие элементы есть в интерфейсе сайта;
• как работают сайты;
• как сделать сайт самостоятельно.

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

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

Для просмотра веб-страниц используют веб-браузеры. Чтобы открыть сайт в веб-браузере, нужно ввести в его адресную строку веб-адрес сайта. Подробно о браузерах — в отдельной статье.

Когда люди ищут не конкретный сайт, а информацию, они попадают на сайт не с помощью прямого адреса, а через поисковую систему: «Яндекс», Google или другие. Поисковой системе дают запрос — например, «что такое веб-сайт». Система ищет среди страниц сайтов те, на которых есть ответ, и выводит список таких страниц.

По данным Internet Live Stats, в 2021 году в Сети было 1,88 миллиарда сайтов. На сайтах продают товары и услуги, публикуют информацию, играют в игры, общаются, созваниваются по видеосвязи, учатся, смотрят видео. В следующем разделе опишем распространённые типы сайтов.

Какие есть типы сайтов

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

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

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

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

Интернет-магазин — сайт, на котором продаёт товары один продавец. В интернет-магазине есть каталог товаров, корзина и система оплаты. Интернет-магазины заводят производители, дистрибьюторы, торговые компании.

На интернет-магазины похож другой тип сайтов — маркетплейсы. Это онлайн-площадки, где торгует множество продавцов. Владелец сайта при этом не сам продавец, а компания-посредник.

Новостной сайт — ресурс, на котором размещают новости. Новостной сайт может быть узкотематическим — например, только с новостями спорта.

Новостные сайты создают, например, СМИ, которые раньше существовали в офлайне. Чтобы заработать, владельцы таких ресурсов размещают на них рекламу.

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

Блоги обычно посвящены одной теме. Чтобы заработать, владельцы блогов могут размещать в них рекламу.

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

Из чего состоит сайт

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

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

Хостинг — это размещение файлов сайта на сервере. Без хостинга сайт никто не увидит.

Любой сайт — набор файлов, причём не только файлов кода, но и файлов изображений, документов и текста. Чтобы люди могли увидеть их и взаимодействовать с ними, сайт должен быть загружен на компьютер со специальным программным обеспечением и круглосуточным доступом в интернет. Такие компьютеры называют серверами. Узнать об этом подробнее можно в статье о хостинге.

Доменное имя, или домен, — это уникальное название сайта, адрес, по которому его можно найти. Домены есть у всех сайтов. Например, у сайта Skillbox это skillbox.ru.

В Skillbox Media есть статья о доменах. Прочитайте её, чтобы узнать, какие бывают домены, как их выбирают и регистрируют.

Функциональность — набор возможностей, которые предоставляет сайт. У каждого ресурса он свой в зависимости от того, зачем сайт сделали.

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

Дизайн — визуальное оформление сайта. Цвета, шрифты и изображения, используемые на странице, расстояние между элементами и их порядок — всё это компоненты дизайна. Дизайн разрабатывают и для элементов самого сайта, и для контента — его наполнения. Дизайн нужен, чтобы сайт выглядел привлекательно, а людям было удобно им пользоваться.

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

Какие элементы есть в интерфейсе сайта

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

Шапка сайта, или хедер, — это верхний модуль сайта. На нём обычно располагают логотип, контакты, кнопки навигации, корзину для покупок, кнопку для входа в аккаунт. Логотип часто кликабельный: нажав на него, пользователь попадает на главную страницу сайта.

Обычно шапка видна на всех страницах. Часто её фиксируют — она остаётся вверху страницы даже при прокрутке.

Футер — нижний модуль сайта. В футере обычно размещают справочную информацию: контакты, ссылки на соцсети, номер телефона службы поддержки. Ещё в футере иногда располагают ссылки на разделы сайта.

Элементы навигации сайта — это элементы, которые упрощают перемещение по ресурсу. Например, меню — список страниц, сгруппированных в разделы. Иногда его обозначают символом в виде трёх горизонтальных линий, который называют бургером. Меню часто добавляют в хедер и фиксируют вместе с ним.

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

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

Как работает веб-сайт

Пользователь находит сайт в поисковой системе или вводит его название в браузере, а тот открывает нужную страницу. После этого пользователь может взаимодействовать с ресурсом: читать статьи, скачивать файлы, покупать товары. За этим стоит сложный процесс. Опишем его пошагово:

• DNS-запрос. Получив имя сайта, браузер отправляет на сервер доменных имён — DNS-сервер — запрос. Сервер отвечает, какому IP-адресу соответствует домен сайта.
• Установка соединения. Браузер устанавливает соединение с сервером по полученному IP-адресу. Для этого браузер отправляет запрос, а сервер отвечает на него.
• Запрос страницы. После того как соединение с сервером установлено, браузер отправляет запрос на получение нужной веб-страницы. Сервер отправляет эту страницу в виде HTML-документа.
• Загрузка страницы. Браузер загружает HTML-документ, который отправил ему сервер, и начинает обрабатывать его содержимое.
• Разбор страницы. Браузер разбирает HTML-документ на заголовки, абзацы, изображения, ссылки и строит структуру страницы.
• Загрузка ресурсов. Браузер загружает всё наполнение, которое указано в HTML-документе: изображения, видео, шрифты и прочее.
• Отображение страницы. Браузер отображает страницу в своём окне, и пользователь может начинать работу с сайтом.

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

Как создать сайт самостоятельно

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

Также можно создать сайт самостоятельно с помощью конструктора или CMS. Разберём эти способы подробнее.

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

В Skillbox Media есть подборка из 6 бесплатных конструкторов — можно собрать первый сайт на любом из них.

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

Чтобы создать сайт на CMS, нужно:

• Зарегистрировать домен. Для этого нужно выбрать свободное доменное имя и оформить его у регистратора доменов. В России популярен регистратор Reg.ru.
• Заказать хостинг. Разместить сайт на сервере можно платно и бесплатно. В Skillbox Media есть подборка бесплатных хостингов: они подходят для размещения простых сайтов.
• Выбрать CMS. Самая популярная CMS в мире — WordPress. Для работы с новостными порталами, блогами, многостраничными сайтами также часто выбирают Joomla, Drupal, MODX. Для интернет-магазинов — OpenCart, InSales, Magento, «1С-Битрикс».
• Привязать домен к хостингу. Это делают в личном кабинете на сайте компании, которая оказывает услуги хостинга. Большинство компаний дают инструкции по привязке — например, вот инструкция Reg.ru.
• Разместить сайт на сервере. Для этого нужно зайти в панель управления хостингом, создать сайт и задать базовые настройки. Подробнее об этом можно узнать в инструкциях компании, оказывающей услуги хостинга, или у специалистов технической поддержки этой компании.

После этого нужно создать страницы сайта и наполнить их контентом. Логика настройки и наполнения зависит от того, ресурс какого типа вы создаёте и с помощью какой CMS им управляете.

Можно не создавать сайт, а купить готовый на бирже сайтов. При покупке нужно учитывать возраст и историю домена, наличие санкций от поисковых систем, тематику и функциональность сайта, его CMS. Если вы не эксперт в сайтостроении, оценить все эти параметры будет трудно. Лучше попросить консультации у специалиста, который занимается разработкой сайтов.

Главное о веб-сайтах в 4 пунктах

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

Как узнать больше о сайтах и сайтостроении

• Если вы только начали изучать тему, прочитайте статью о хостингах и статью о доменах. В них мы разобрали, как работают хостинги и домены, как их выбирать и регистрировать.
• Также в Skillbox Media есть материалы о языках разметки и программирования, которые нужны для создания сайтов. Прочитайте о HTML, CSS и JavaScript, чтобы понять, за что они отвечают на сайте и как с ними работать.
• Если вы хотите научиться зарабатывать на создании и продвижении сайтов, обратите внимание на курс Skillbox «Профессия Интернет-маркетолог». На нём учат создавать посадочные страницы на конструкторе Tilda и продвигать их — запускать контекстную и таргетированную рекламу, заниматься SEO и SMM.

Материалы Skillbox Media о работе в Сети, написанные нейросетью

• Сетевой этикет: как правильно вести себя в интернете
• Зачем нужны баннеры и как справиться с баннерной слепотой
• Что такое фавикон, почему он нужен каждому сайту и как его создать
• Ошибка 404 на странице: что она означает и как её исправить

Веб, или Всемирная паутина, — это распределённая система информационных ресурсов, связанных гиперссылками. Веб составляют все сайты, доступные в интернете.

IP-адрес — это строка из четырёх чисел (октетов), разделённых точками. В этих числах зашифрована информация о местоположении сервера с файлами сайта.

Курс

Защита интеллектуальной собственности

Вы научитесь управлять правами на продукты интеллектуальной собственности. Сможете защитить объекты интеллектуальной собственности, превратить их в актив компании и монетизировать.

Узнать про курс

Профессии с трудоустройством

• Графический дизайнер
• Python-программист
• Инженер по тестированию
• Бизнес-аналитик
• Интернет-маркетолог 2023

Как работает веб, или что происходит, когда вы сёрфите в интернете

Каждый раз, когда вы открываете на компьютере или телефоне google.com, ваш браузер незаметно для вас отправляет множество запросов в интернет. Что это за запросы? Кто на них отвечает? Где хранятся страницы социальных сетей и статьи медиа-проектов?

Браузер и веб-сервер

Для базового понимания работы веба можно провести аналогию с телевидением.

Браузеры — Google Chrome, Firefox, Safari, Internet Explorer / Edge — это всего лишь экраны телевизоров, которые показывают программу, записанную и транслируемую откуда-то из далёких телестудий. В вебе такие студии называются веб-серверами.

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

У каждого веб-сервера подобно телеканалу есть свой номер, который называется IP. Чаще всего он выглядит как четыре группы трёхзначных чисел, разделённых точкой — XXX.XXX.XXX.XXX, но может выглядеть иначе — см. IPv6.

Например, Вконтакте имеет IP 87.240.137.158, Facebook — 31.13.72.36, данный блог — 5.63.155.79.

Чтобы нам не пришлось запоминать адреса в виде 87.240.137.158 для посещения контакта, были придуманы доменные имена — это как раз тот понятный и лёгкий для запоминания адрес, что мы вбиваем в браузере: vk.com, facebook.com, maxkuznetsov.ru.

Поскольку таких пар «IP — домен» по всему интернету огромное количество, то браузер не может все их знать и поэтому он обращается за помощью к DNS-серверу, который работает как адресная книга — по домену выдаёт IP, на который нужно слать запросы, и перенаправляет запрос на нужный веб-сервер в интернете.

Получив запрос от браузера, веб-сервер отправляет в ответ запрошенную веб-страницу или ошибку, если что-то пошло не так.

Если такой страницы не существует, браузер покажет ошибку.

Из чего состоит веб-страница

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

Вы можете посмотреть из чего состоит любая веб-страница, кликнув по ней в браузере правой кнопкой мыши и выбрав пункт View Page Source / Посмотреть исходную страницу или что-то аналогичное в зависимости от браузера и языка интерфейса. Скорее всего вы ничего не поймёте, так как помимо HTML-разметки современные веб-страницы включают в себя кучу CSS и Javascript. Первая технология позволяет создавать красивый вид страниц (дизайн), а вторая — анимировать их и расширять функционал: всплывающие окна, проигрыватели аудио и видео, слайдеры, счётчики, метрики, обработка картинок, анимированная галерея фотографий и много чего ещё.

Кратко:
HTML — это разметка статического контента, задание его структуры
CSS — наведение красоты, включая простую анимацию
Javascript — более сложная анимация и дополнительный функционал поверх контента

Вы можете создавать свои веб-страницы прямо у себя на компьютере. Но чтобы другие люди их увидели, вам нужен веб-сервер, доступный через интернет. Попробуйте создать на своём компьютере файл index.html (скачать готовый пример), внутри которого написать

Сохраните и перетащите файл прямо в браузер — вы увидите ваш первый, хоть и не публичный, сайт.

Статические и динамические страницы

Все веб-страницы можно условно разделить на два вида — статичные и динамичные.

• Статичные — это уже готовый HTML, CSS, Javascript, который веб-сервер сразу же отдаёт по запросу браузера. Пример с index.html выше является статичной страницей. Её контент зафиксирован и будет отображаться одинаково для всех браузеров.
• Динамичные (и их сейчас большинство) страницы можно представить себе как шаблоны итоговых страниц, но с вкраплениями серверного кода. Такой код при выполнении может проверять авторизован пользователь или нет, обращаться к базе данных или сторонним сервисам (например, за курсом валют) и даже полностью менять содержимое страницы, но в конечном итоге он всё равно превращается в HTML, CSS и Javascript, которые веб-сервер отдаёт браузеру.

Так, разные пользователи видят страницу https://youtube.com по-разному. Красным выделены те блоки, что «вставляются» серверным кодом, остальная часть страницы имеет одинаковый вид для всех пользователей.
Серверный код определяет вас по логину и выстраивает контент из ваших предпочтений. При этом шаблон страницы один для всех, что очень удобно, например, при редизайне — можно менять представление сайта без изменения самого контента. Это довольно важный принцип в программировании — разделять логику, данные и их визуальное представление.

Браузеру вся эта кухня не видна, он лишь делает запрос и получает в ответ HTML, CSS и Javascript. Каждый клик по ссылке или отправка формы делает новый запрос на веб-сервер, который начинает весь процесс заново.

Чтобы посмотреть на запросы, которые отправляет ваш браузер и что он получает в ответ, можно воспользоваться инструментом инспекции кода в браузере. Правый клик в любом месте страницы, выберите пункт «Inspect / Инспектировать элемент» или подобный, а потом перейдите в таб «Netword / Сеть». Перезагрузите страницу и вы увидите, как браузер общается с веб-сервером (или даже несколькими).