Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>2 окт 2023</li>

3 <li>0</li>

4 </ul><h2>Что такое веб-сайт, как он работает и как создают сайты</h2>

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

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

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

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

9 <ul><li>что такое<a>веб-сайт</a>;</li>

10 <li>какие есть<a>виды сайтов</a>;</li>

11 <li>из чего<a>состоит</a>сайт;</li>

12 <li>какие<a>элементы</a>есть в интерфейсе сайта;</li>

13 <li>как<a>работают</a>сайты;</li>

14 <li><a>как сделать</a>сайт самостоятельно.</li>

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

16 Так выглядит страница сайтаСкриншот: Skillbox MediaДля просмотра веб-страниц используют веб-браузеры. Чтобы открыть сайт в веб-браузере, нужно ввести в его адресную строку веб-адрес сайта. Подробно о браузерах -<a>в отдельной статье</a>.

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

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

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

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

21 На этом сайте-визитке есть информация о компании, контактные данные и каталог продукции, который можно скачатьСкриншот: "Текс Казань" / Skillbox MediaКорпоративный сайт - сайт с подробной информацией о компании, её товарах или услугах. Также на сайте могут быть разделы с новостями, документами, вакансиями.

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

23 На корпоративном сайте часто есть раздел с новостями компанииСкриншот: RSGroup / Skillbox MediaИнтернет-магазин - сайт, на котором продаёт товары один продавец. В интернет-магазине есть каталог товаров, корзина и система оплаты. Интернет-магазины заводят производители, дистрибьюторы, торговые компании.

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

25 Маркетплейс Wildberries: на нём представлены товары от разных продавцовСкриншот: Wildberries / Skillbox MediaНовостной сайт - ресурс, на котором размещают новости. Новостной сайт может быть узкотематическим - например, только с новостями спорта.

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

27 Сайт "Российской газеты"Скриншот: "Российская газета" / Skillbox MediaБлог, или информационный сайт, - сайт, на котором автор или группа авторов регулярно размещает информационные статьи. Статьи в блогах могут быть посвящены жизни автора, хобби, узкой области знаний, профессиональным или практическим вопросам - например, тому, как ухаживать за горшечными растениями.

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

29 Блог travel-журналиста и фотографа Ольги РастегаевойСкриншот: Orange Traveler / Skillbox MediaТипов веб-сайтов гораздо больше - например, выделяют ещё форумы, социальные сети, лендинги. Существуют также сайты, совмещающие элементы разных форматов. Например, на сайте Skillbox есть и информационные статьи, и витрина бесплатных вебинаров, и каталог онлайн-курсов.

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

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

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

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

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

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

36 Так можно посмотреть доменное имя сайта в браузереСкриншот: Skillbox MediaФункциональность - набор возможностей, которые предоставляет сайт. У каждого ресурса он свой в зависимости от того, зачем сайт сделали.

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

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

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

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

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

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

43 В шапке сайта Skillbox размещён баннер с информацией о скидках. При прокрутке страницы баннер всегда вверхуСкриншот: Skillbox MediaФутер - нижний модуль сайта. В футере обычно размещают справочную информацию: контакты, ссылки на соцсети, номер телефона службы поддержки. Ещё в футере иногда располагают ссылки на разделы сайта.

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

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

46 Так выглядит меню сайта: при нажатии на раздел открывается список страниц, на которые можно попастьСкриншот: Skillbox MediaКроме перечисленных элементов интерфейса, на сайте могут быть формы для отправки данных, кнопки социальных сетей, галереи изображений, строка поиска.

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

48 <ul><li>DNS-запрос. Получив имя сайта, браузер отправляет на сервер доменных имён - DNS-сервер - запрос. Сервер отвечает, какому IP-адресу соответствует домен сайта.</li>

49 <li>Установка соединения.Браузер устанавливает соединение с сервером по полученному IP-адресу. Для этого браузер отправляет запрос, а сервер отвечает на него.</li>

50 <li>Запрос страницы.После того как соединение с сервером установлено, браузер отправляет запрос на получение нужной веб-страницы. Сервер отправляет эту страницу в виде HTML-документа.</li>

51 <li>Загрузка страницы.Браузер загружает HTML-документ, который отправил ему сервер, и начинает обрабатывать его содержимое.</li>

52 <li>Разбор страницы.Браузер разбирает HTML-документ на заголовки, абзацы, изображения, ссылки и строит структуру страницы.</li>

53 <li>Загрузка ресурсов.Браузер загружает всё наполнение, которое указано в HTML-документе: изображения, видео, шрифты и прочее.</li>

54 <li>Отображение страницы.Браузер отображает страницу в своём окне, и пользователь может начинать работу с сайтом.</li>

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

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

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

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

59 Так выглядит визуальный редактор: он позволяет добавлять новые блоки на страницу, перемещать элементы, редактировать текст, менять дизайнСкриншот: Tilda / Skillbox MediaВ Skillbox Media есть подборка из <a>6 бесплатных конструкторов</a> - можно собрать первый сайт на любом из них.

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

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

62 <ul><li>Зарегистрировать домен.Для этого нужно выбрать свободное доменное имя и оформить его у регистратора доменов. В России популярен регистратор<a>Reg.ru</a>.</li>

63 <li>Заказать хостинг.Разместить сайт на сервере можно платно и бесплатно. В Skillbox Media есть<a>подборка бесплатных хостингов</a>: они подходят для размещения простых сайтов.</li>

64 <li>Выбрать CMS.Самая популярная CMS в мире - WordPress. Для работы с новостными порталами, блогами, многостраничными сайтами также часто выбирают Joomla, Drupal, MODX. Для интернет-магазинов - OpenCart, InSales, Magento, "1С-Битрикс".</li>

65 <li>Привязать домен к хостингу.Это делают в личном кабинете на сайте компании, которая оказывает услуги хостинга. Большинство компаний дают инструкции по привязке - например, вот<a>инструкция</a> Reg.ru.</li>

66 <li>Разместить сайт на сервере. Для этого нужно зайти в панель управления хостингом, создать сайт и задать базовые настройки. Подробнее об этом можно узнать в инструкциях компании, оказывающей услуги хостинга, или у специалистов технической поддержки этой компании.</li>

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

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

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

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

71 <li>Основные компоненты сайта - файлы кода, хостинг, доменное имя, функциональность, дизайн и контент.</li>

72 <li>Создать сайт самостоятельно можно с помощью конструктора или CMS. Конструктор - платформа с визуальным редактором, позволяющим создавать страницы из готовых элементов. CMS - платформа для управления контентом: CMS сложнее конструкторов, но дают больше возможностей.</li>

73 </ul>Как узнать больше о сайтах и сайтостроении

74 <ul><li>Если вы только начали изучать тему, прочитайте<a>статью о хостингах</a>и <a>статью о доменах</a>. В них мы разобрали, как работают хостинги и домены, как их выбирать и регистрировать.</li>

75 <li>Также в Skillbox Media есть материалы о языках разметки и программирования, которые нужны для создания сайтов. Прочитайте о <a>HTML</a>,<a>CSS</a>и <a>JavaScript</a>, чтобы понять, за что они отвечают на сайте и как с ними работать.</li>

76 <li>Если вы хотите научиться зарабатывать на создании и продвижении сайтов, обратите внимание на курс Skillbox "<a>Профессия Интернет-маркетолог</a>". На нём учат создавать посадочные страницы на конструкторе Tilda и продвигать их - запускать контекстную и таргетированную рекламу, заниматься SEO и SMM.</li>

77 </ul>Интернет-маркетинг на практике

78 Вы изучите SMM, копирайтинг, таргетинг и продвижение в интернете. На примере кафе с доставкой еды вы разберёте, как продвигать бизнес в интернете, и соберёте сильное портфолио.

79 <a>Пройти бесплатно</a>

80 <a>Бесплатный курс по digital-маркетингуРазбираемся в SMM, копирайтинге, таргетинге и не только. Все участники получат доступ к телеграм-каналу о маркетинге, где смогут искать проекты и обмениваться опытом. Пройти курс</a>