Веб-страница: структура и технология¶
Веб-страница — это документ, предназначенный для просмотра в веб-браузере и доступный по сетевому протоколу HTTP или HTTPS. Веб-страницы являются основными единицами содержимого Всемирной паутины (World Wide Web) и, как правило, ссылаются друг на друга гиперссылками, образуя единую информационную структуру. Большинство веб-страниц написано на языке разметки HTML; они могут включать ресурсы других типов — изображения, стили оформления CSS, скрипты на языке JavaScript, аудио- и видеоматериалы.
¶Состав и структура
Типичная веб-страница состоит из двух основных частей: заголовка (head) и тела (body). В заголовке размещается служебная информация: заголовок документа в окне браузера, метаданные, подключение внешних файлов стилей и скриптов, описание кодировки. В теле размещается видимое содержимое: текст, изображения, таблицы, формы, мультимедийные элементы.
Минимальный документ HTML имеет вид:
``html <!DOCTYPE html> <html lang="ru"> <head> <meta (организация признана экстремистской, деятельность запрещена в РФ) charset="UTF-8"> <title>Название страницы</title> </head> <body> <h1>Заголовок</h1> <p>Текст страницы.</p> </body> </html> ``
¶Технологии создания
¶HTML
HTML (HyperText Markup Language) — основной язык разметки веб-страниц. Стандарт разрабатывается консорциумом World Wide Web Consortium (W3C) под руководством Тима Бернерса-Ли. Актуальная версия — HTML5, принятая в 2014 году. HTML описывает структуру документа с помощью тегов: заголовки, абзацы, списки, ссылки, изображения, формы и другие элементы.
¶CSS
CSS (Cascading Style Sheets) — язык описания внешнего вида документа. С помощью CSS задаются шрифты, цвета, отступы, расположение элементов на странице, оформление для различных размеров экрана. Использование CSS отделено от HTML-разметки, что позволяет изменять оформление без изменения содержимого.
¶JavaScript
JavaScript — язык программирования, выполняющийся в браузере. Позволяет делать веб-страницы интерактивными: обрабатывать действия пользователя, динамически изменять содержимое, отправлять запросы к серверу без перезагрузки страницы (AJAX), анимировать элементы.
¶Статические и динамические страницы
Веб-страницы делятся на два основных типа:
- Статические — содержимое хранится на сервере в неизменном виде и отдаётся браузеру одинаково всем посетителям. Создаются заранее и не зависят от действий пользователя.
- Динамические — содержимое формируется на сервере в момент запроса с учётом данных пользователя, параметров запроса, времени, содержимого базы данных. Примеры — страницы поисковых результатов, личные кабинеты, страницы интернет-магазинов.
Динамические страницы генерируются с использованием серверных языков программирования (PHP, Python, Ruby, JavaScript на платформе Node.js) и систем управления контентом (CMS) — WordPress, Drupal, Joomla, 1С-Битрикс.
¶Адресация
Каждая веб-страница доступна по уникальному адресу — URL (Uniform Resource Locator). URL состоит из схемы (http или https), доменного имени сервера, пути к файлу на сервере и, при необходимости, параметров запроса. Пример: https://example.com/index.html`. Страница может быть представлена отдельным файлом на диске сервера или сгенерирована динамически по запросу.
¶Рендеринг в браузере
Процесс преобразования HTML-разметки и связанных ресурсов в видимую страницу называется рендерингом. Браузер последовательно выполняет следующие шаги:
- Получает HTML-документ по URL.
- Строит DOM-дерево (Document Object Model) — объектное представление структуры документа.
- Загружает и обрабатывает ресурсы: стили, скрипты, изображения.
- Строит CSSOM-дерево — объектное представление стилей.
- Объединяет DOM и CSSOM в дерево рендеринга.
- Вычисляет координаты и размеры элементов (layout).
- Выводит пиксели на экран (paint).
Основные браузеры — Google Chrome, Mozilla Firefox, Safari, Microsoft Edge — используют движки Blink, Gecko, WebKit и Chromium соответственно.
¶История
Первая веб-страница в истории была создана Тимом Бернерсом-Ли 6 августа 1991 года на сервере CERN (Европейская организация по ядерным исследованиям) в Швейцарии. Она описывала сам проект World Wide Web и содержала объяснения, что такое гипертекст, как создать веб-страницу и как искать информацию. Адрес первой страницы — http://info.cern.ch/hypertext/WWW/TheProject.html` — до сих пор работает.
В первые годы веб-страницы создавались вручную в текстовых редакторах. Затем появились визуальные редакторы (Microsoft FrontPage, Macromedia Dreamweaver), системы управления контентом и фреймворки, упростившие создание сложных сайтов.
¶Роль в современном интернете
Веб-страницы остаются основным способом представления информации в интернете. По данным статистики, в середине 2020-х годов в сети насчитывается более 1,5 миллиардов сайтов, состоящих из десятков миллиардов страниц. Развитие адаптивного дизайна позволяет страницам корректно отображаться на различных устройствах — от смартфонов до настольных компьютеров и телевизоров.
¶Исторические источники
- Бернерс-Ли Т. «Далее: Будущее Всемирной паутины». — М.: Вильямс, 2005.
- Макфарленд Д. «HTML5 и CSS3. Разработка для современных браузеров». — СПб.: Питер, 2014.
- Дакетт Дж. «HTML и CSS. Разработка и дизайн веб-сайтов». — СПб.: Питер, 2013.
- Документация World Wide Web Consortium (W3C) по стандартам HTML и CSS.