Как устроен веб сайт?

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

Как устроен сайт

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

Запрос из браузера

Что предшествует отображению этой страницы на экране вашего устройства? Запрос, набранный в адресной строке браузера, либо клик по ссылке, приводящий к формированию того же запроса.

Структура запроса к серверу

Название протокола передачи может не выводиться в адресной строке, но оно обязательно есть, буква s в конце названия https говорит о том, что протокол защищённый (secure), работающий через шифрованные транспортные механизмы.

После названия протокола, строка запроса содержит доменное имя сайта, однозначно указывающее на цифровой уникальный адрес в интернете.

Доменные имена и их уровни

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

Доменное имя 2-ого уровня (в примере - uckatel), может зарегистрировать любой человек, подтвердив свою личность, через сертифицированного регистратора. Хотя больше это напоминает аренду, поскольку стоимость исчисляется из расчёта на один год.

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

Регистрация доменов
Регистрация доменов 2-ого уровня

Доменное имя 2-го уровня, наподобие наших имён, может повторяться в сочетании с другими именами доменов 1-го уровня. То есть, если вы купили домен uckatel.ru, права на домены с тем же "именем", но с другой "фамилией", как uckatel.su, uckatel.com и прочие, вам не принадлежат.

Существуют ещё поддомены (или субдомены - subdomains), которые можно назвать 3-им уровнем. Это, по аналогии, имена, предшествующие имени 2-го уровня, с разделителем в виде точки. Их покупать не нужно, при помощи несложной переадресации запроса вы можете создавать их сами в любом количестве (info.uckatel.ru, dev.uckatel.ru или любое другое). А к этому поддомену можно также сделать поддомен и так далее, ограничение только в общей длине получившегося имени - 255 символов.

Где хранятся файлы сайта?

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

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

Услуги подобных серверов предоставляют фирмы под названием хостинг (от host в значении, близком к русскому "гость"). Размещая сайт на хостинге, мы указываем в настройках доменного имени предоставляемый хостингом цифровой IP адрес.

IP адрес сайта в настройках домена
IP адрес сайта в настройках домена

Теперь при отправке запроса с этим названием домена данные будут браться с указанного цифрового адреса.

Разметка html-страницы

По умолчанию браузеру в ответе отправляется содержимое файла index.html, лежащего в каталоге с вашим сайтом (как его просмотреть в вашем браузере). И выглядит это содержимое примерно так:

Пример html страницы
Пример html страницы

HTML - это стандартизированный язык разметки документов в интернете, все браузеры его "понимают" и, найдя в начале страницы тег <!DOCTYPE html>, остальное содержимое обрабатывают в соответствии со стандартами.

Парные теги и их вложенность

Основная часть HTML-тегов - парные, то есть состоят из открывающего и закрывающего тега. Таким образом структура документа получает строгую иерархию из родительских (внешних) элементов, и дочерних - вложенных. Другими словами, один тег является "обёрткой" для другого.

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

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

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

Для добавления HTML-тега достаточно набрать его название, по нажатию на клавишу Tab, тег сформируется автоматически.

Стандартные теги браузер отображает в соответствии со своими встроенными стилями. Устанавливается шрифт по умолчанию, размеры заголовков по "старшинству" (самый главный h1, следующий h2 и далее, хоть до h6). Браузер "знает", что абзац (p), выводится с новой строки, добавляет маркеры к элементам маркированного списка и цифры - для нумерованного.

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

Стили CSS

Способов задания стилей несколько:

  • непосредственное указание внутри тега разметки <p style="font-size:18px;">Текст</p>;
  • инлайн стили в коде страницы, обёрнутые в тег <style></style>;
  • подключение из внешнего файла.

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

Чтобы выделить определённые теги, либо хранить в них некую дополнительную информацию, им можно задать атрибуты - класс, id, стиль, title, либо произвольные, которые указываются после слова data через дефис.

Например:

Атрибуты тегов

Теперь, чтобы применить стиль к тегу div, мы можем задать селектор по названию класса .outer { color: green; }, либо по идентификатору #first{ color: green; }, а к вложенному тегу p - .outer p{ font-size:14px; }.

Скрипты JavaScript и jQuery

JavaScript - это язык программирования, по умолчанию поддерживаемый всеми современными браузерами. Можно прямо в коде HTML-страницы написать команду, "обернув" её тегами <script></script>, и она выполнится.

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

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

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

Следующий пример показывает, как можно подключить библиотеку jQuery с серверов CDN (распределённой сетевой структуры, позволяющей быстро загрузить популярные библиотеки, фреймворки, шрифты и проч.) и содержит простой пример функции с таймером, переключающей класс заголовка.

Простая веб-разработка

Понятие веб-разработка включает в себя весь комплекс работ по созданию веб-сайта или приложения для мобильных устройств. Насколько это сложно и с чем придётся столкнуться в процессе?

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

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

Как быть, если какой-либо функции или блока нет в шаблоне? Да, как правило, также можно найти готовое решение либо в другом шаблоне, либо найти пример на имеющемся сайте. Весь набор функций, которые могут понадобиться при разработке, как правило "закрыт", каким нибудь плагином, и не одним. Например - слайдеры (почти любые, хоть вертикальные, хоть горизонтальные или синхронизированные парой), фотогалереи, обработчики форм с загрузкой файлов, обрезка изображений и прочее.

Разработка сайтов - профессия, требующая постоянного обучения и восприятия нового, а по прошествии какого то времени, приходит понимание, какая специализация вам больше всего подходит:

  • дизайн и проектирование макета сайта;
  • вёрстка html страниц;
  • поисковое продвижение, маркетинг и настройка рекламы;
  • создание контента (написание текстов, выбор и подготовка фотографий, видео или звука);
  • интеграция веб страниц в CMS (систему управления контентом);
  • разработка своей CMS или доработка имеющейся, разработка дополнений и плагинов для них.

При перепечатке и копировании ссылка на сайт обязательна.

Опубликовано: 24.02.2020 г. 10


Похожие публикации

Инструменты разработчика

Инструменты разработчика

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

Отличия сетки Bootstrap 3 и 4

Особенности сетки Bootstrap

Фреймворк Bootstrap - это безусловный хит среди готовых решений для сайтов в силу проработанности деталей. Что такое Bootstrap? Это набор...

Псевдоэлементы CSS

Псевдоэлементы CSS

Псевдоэлементы позволяют добавить стилизацию определённой части HTML элемента (тега), либо дополнить его содержимое.