§ 6. Веб-конструирование. Основные понятия

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

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

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

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

<!DOCTYPE html> включает современный режим разбора. Корневой элемент html объединяет head и body; lang="ru" обозначает язык. В head обычно записывают meta charset="utf-8", title и настройки области просмотра. title задаёт название вкладки, но не заменяет заголовок h1 внутри страницы.

В body располагаются заголовки, абзацы, ссылки и другие элементы. Комментарий записывают между <!-- и -->: он не виден в обычном представлении, но доступен в исходном коде. Комментарии не подходят для хранения секретов. Вложенные элементы образуют дерево, поэтому границы контейнеров должны соответствовать замыслу.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Учебный проект</title>
</head>
<body>
  <h1>Главная тема</h1>
  <p>Первое объяснение.</p>
</body>
</html>

Парный элемент часто имеет начальный и конечный теги: <p>Текст</p>. Существуют пустые элементы, например img, br и meta: закрывающий тег для них не пишут. Атрибуты размещают в начальном теге, их значения удобно заключать в кавычки. Не путайте HTML-атрибут с CSS-свойством.

У ссылки <a href="about.html">О проекте</a> видимый указатель — «О проекте», адрес — about.html. Относительный адрес зависит от положения текущего документа. Ссылка #practice ведёт к элементу с id="practice" в том же документе. Каждый id должен быть уникальным внутри страницы.