Что такое сайт

Понятие «сайт» сильно укрепилось в современном мире. Большинство людей и не задумываются о том, из чего он состоит и как работает. Если нам нужен какой-нибудь сайт, мы просто открываем браузер и в поисковой строке набираем его название. Часто даже имя сайта не набираем, а просто пишем название компании или нужного ресурса. Например, для того чтобы перейти на свою страничку во Вконтакте, достаточно в поиске набрать один из ключевых запросов – «вконтакте», «вк вход» или просто «вк»:

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

Сайт — это одна или несколько веб-страниц, связанных ссылками и имеющими общий домен в адресе страницы.

Из определения можно выделить четыре понятия, вникнув в которые, уже не останется вопросов в понимании — что такое сайт. Итак, термины:

• веб-страница;
• ссылка;
• домен;
• адрес страницы.

Начнем с самого простого понятия – ссылка.

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

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

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

Другое название адреса сайта или страницы — URL (Uniform Resource Locator).

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

У любой страницы в интернете всегда есть адрес. Его можно увидеть в самом верху любого браузера в адресной строке.

В самом начале адреса обозначается домен сайта, до первой косой черты. В данном случае это — gustuspr.com.

Домен — это уникальный адрес сайта.

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

Если в адресной строке написать только домен, то браузер выведет главную страницу сайта. Главная страница – это лицо сайта. По ней можно понять основную тематику всего сайта. Главная страница отличается от других страниц только содержанием. Но это тоже web-страница, просто называется по-другому.

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

После того как пользователь ввел адрес сайта или страницы в адресной строке, браузер находит в интернете место расположения конкретной страницы. Далее браузер получает код страницы, преобразует его в контент и показывает на экране. Исходный код частично можно подсмотреть так же в браузере. Для этого на компьютере нужно одновременно нажать две клавиши — Ctrl + U. В новой вкладке браузер откроет исходный код страницы.

Примитивный сайт можно легко создать, используя стандартную программу – блокнот. Для этого откройте блокнот и напишите в нем, к примеру, – Привет! Я твой сайт!

Теперь важно правильно сохранить файл. В меню блокнота выберите – Файл > Сохранить как. И дайте название файлу – index.html.

Компьютер создаст файл index с расширением html и сохранит его в виде иконки браузера, установленного по умолчанию в вашей системе. Я сохранил документ на рабочий стол и у меня файл выглядит вот так:

Теперь, если два раза кликнуть на файл, то откроется не блокнот, а браузер. Расширение html указывает компьютеру, что это web-документ. Поэтому такой файл по умолчанию запускает браузер.

Конечно, до настоящего сайта еще далеко. Необходимо использовать несколько языков web-программирования, чтобы сделать красивый и правильный сайт. Тем не менее, за несколько секунд мы сделали web-страницу, и она уже работает в браузере. Но адрес в браузере будет указывать на страничку, которая размещена на компьютере. Здесь сразу напрашивается вопрос, как показать эту страничку всему миру и сделать так, чтобы она была доступна 24 часа в сутки и 365 дней в году?

Для этого необходимо выполнить несколько условий:

1. Обеспечить компьютер бесперебойным интернетом.
2. Держать компьютер всегда включенным.
3. Установить на компьютер специальное программное обеспечение.
4. Все правильно настроить.

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

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

Сервер – это компьютер со специальным программным обеспечением и круглосуточным доступом в сети Интернет.

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

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

Лендинг (landing page) – это одностраничный сайт, где размещается вся необходимая информация об услугах или товарах. Главная цель – привлечение внимания посетителей и мотивация совершить заказ. Чтобы быстро заинтересовать клиента, лендинг должен быть:

• ярким;
• грамотно продуманным;
• с интересным дизайном;
• с цепляющим, продающим текстом.

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

Сайт-визитка – это «рекламный буклет», размещенный в сети Интернет с информацией об услуге, товаре и компании. Основная задача – коротко передать информацию, чтобы максимально привлечь внимание. Сайт-визитка помогает успешно взаимодействовать. Чаще всего состоит 3-5 страниц страниц:

• главной страницы, которая должна содержать основную информацию о компании, а также ее логотип;
• страница «О компании» может создаваться отдельно;
• страницы с краткой информацией об услугах или товарах;
• страница-портфолио выполненных работ или услуг;
• на последней странице указываются контактные данные, карты проезда и другая информация для связи.

Какие особенности должны быть у сайта:

• краткая презентация с лаконичным содержанием;
• UX дизайн должен быть обдуманным и удобным;
• сайт должен быть адаптирован под все устройства;
• необходима высокая скорость загрузки;
• стабильная работа ресурса.

Сайт-визитка должен привлекать потенциального клиента с первой минуты.

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

Корпоративный сайт – это самый выгодный и современный инструмент, который помогает сделать бизнес успешным. Он содержит:

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

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

Интернет-магазин помогает организовывать каналы сбыта товаров. К факторам успеха продажи в Интернете относят:

• удобную организацию электронной торговли;
• простоту управления;
• быстрое обновление ассортимента.

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

В каталоге интернет-магазина должны быть:

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

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

Это далеко не все виды сайтов. Есть еще форумы, блоги, агрегаторы, соцсети, доски объявлений, каталоги организаций и другие.

Дополнительно все сайты можно разделить на две категории: коммерческие и некоммерческие.

Коммерческий сайт рекламирует свои услуги и товары, а также решает задачи:

• привлечения новых партнеров и клиентов;
• географическое расширение бизнеса;
• продвижение продукции и услуг;
• оценки поведения на сайте посетителей;
• организацию анкетирования и опросов.

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

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

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

Все современные сайты всегда используют 3 основных языка программирования, без которых не обходится ни один сайт. Это — html, css и JavaScript. Эти языки используются для фронтенд-разработки.

Фронтенд (front-end) – визуальное отображение сайта в окне браузера.

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

Но есть и невидимая часть, которая спрятана «под водой». Эту часть кода пишет бэкенд разработчик.

Бэкенд (back-end) – программный код, отвечающий за работу сайта на сервере хостинга.

Этот код, как правило, значительно больше фронтенда. Бэкенд отвечает за большое количество функций и операций сайте на стороне сервера. Для бэкенда используются другие языки программирования. Их достаточно много. Перечислим лишь несколько популярных языков: SQL, PHP, JavaScript, Python, Go, Java, Ruby.

Первые сайты были очень простыми и писались в блокноте именно так, как было описано выше в статье. Для каждой страницы сайта создавался отдельный файл с кодом и с расширением html.

За отображение такого сайта отвечали примерно такие файлы, которые изображены на фото выше. В папку img помещались изображения, которые потом отображались на страницах сайта. В файловой структуре четко видны файлы страниц: index.html — всегда главная страница, o-kompanii.html — страница «О компании», uslugi.html — страница «Услуги», ceny.html — страница «Цены», kontakty.html — страница «Контакты». В файле style.css написаны стили на языке программирования css. Этот файл отвечает за визуальное отображение контента: размеры и цвет шрифта, отступы, расположение и другие элементы.

У таких сайтов был серьезный недостаток. Если возникала необходимость исправить меню сайта или скажем изменить номер телефона, приходилось исправлять это в каждом файле. Поскольку на каждой странице есть меню и телефон, и они были одинаковыми в каждом файле. Для сайта визитки с несколькими страницами это приемлемо. Объем работы небольшой для правок. А что если на сайте 1000 страниц? Или 100 тысяч страниц.

Одна маленькая правка может вылиться в часы, а то и дни работы специалиста. Кроме этого, с увеличением количества страниц, сайт мог занимать очень много места на диске сервера. Да и работать с большим объемом страниц не удобно. С развитием технологий появилось много дополнительных языков web-программирования, которые позволили сначала изменить принцип хранения информации на сайте. Взамен потребности в создании файла под каждую страницу, пришли скрипты, которые генерируют страницы на лету. А вся текстовая информация теперь хранится в базах данных сайта.

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

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

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

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

Вот небольшой перечень CMS: WordPress, 1С-Битрикс, Joomla, OpenCart, Drupal. На самом деле движков намного больше, но это самые популярные в России.

Прогресс не стоит на месте и относительно недавно появились новые сервисы по созданию сайтов — конструкторы сайтов.

Конструктор сайтов — это сервис по созданию сайтов без знания языков web-программирования.

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

Самые популярные конструкторы — Tilda, Nethouse, Wix.

Теперь давайте рассмотрим полную цепочку создания сайта с нуля в веб-студии.

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

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