Интернет состоит из большого числа сайтов, приложений и разнообразных систем. В данном цикле статей произведём разбор, что такое веб-сайт, из чего он состоит, произведём создание каркаса сайта и так далее, вплоть до создания полноценного сайта, который можно будет опубликовать в интернете.
Для начала разберёмся, что такое веб-сайт. Веб-сайт - набор веб-страниц, связанных одной или несколькими тематиками. Каждый веб-сайт имеет своё уникальное имя (доменное имя), по которому пользователи могут перейти на него. Все веб-сайты доступны по интернету или в локальной сети посредством протокола HTTP или его защищённой версии HTTPS. Что это за протоколы будет разобрано в следующей статье.
Любой современный веб-сайт состоит из нескольких составляющих:
- HTML - язык гипертекстовой разметки, позволяющий создавать каркас любой страницы;
- CSS - каскадная таблица стилей, позволяющая задавать любому html-элементу свою позицию, размеры, цвет, фон и многое другое.
- JavaScript - полноценный язык программирования, позволяющий создавать интерактивные сайты, создавать динамическое поведение любому элементу, создавать сложную логику любой странице от получения данных до создания 3D-эффектов на сайте.
- Изображение. Музыка, видео - обычные медиа-данные, позволяющие сделать сайте более привлекательным.
Выше были описаны самые базовые составляющие сайтов, которые вы можете найти на любом сайте.
Для того, чтобы посмотреть структуру любого сайта, нам понадобится любой браузер и любой сайт, для примера возьмём страницу google.com. Просмотреть структуру сайта можно, используя контекстное меню (нажатие на пкм) и выбрав там «просмотр кода», рисунок 1.
Перейдя в «просмотр кода», можно увидеть большое число вспомогательных меню для разработки, рисунок 2.
Сейчас нас будет интересовать только вкладка «Элементы». Если у вас под элементами тоже появилась вторая консоль, то ее можно закрыть нажатием на escape или крестиком справа.
Теперь мы можем увидеть большое число div или любых других dom-элементов страницы. Пролистните их вверх до элемента body и скройте их (напротив большинства элементов есть стрелочка, которая сворачивает все дочерние/вложенные элементы).
Свернув компонент body, видно базовую структуру любой страницы, рисунок 3.
Любая страница состоит из нескольких базовых тегов, doctype, html и вложенных в них head и body. Это и есть так называемый язык разметки HTML. HTML состоит из набора тегов, имеющих свою роль в структуре сайта. Такая структура называется DOM-деревом, так как почти все теги имеют вложенность друг в друга (исключением является только doctype и html, о них мы поговорим в следующей статье). Вложенные данные в html можно отнести к двум типам: служебные, которые находятся в head, и данные, которые видит пользователь - то, что находится в body.
Каждый тег имеет не только вложенные параметры, а также свои свойства для конкретного поведения, свои уникальные идентификаторы (свойство id) и подключаемые стили к данному элементу (свойство class).
Более подробно мы остановимся самых распространённых тегах и их свойствах в следующей статье.