Основные понятия веб страницы

Основные понятия веб-страницы

Веб-страница — это документ, отображаемый в браузере, который состоит из трёх взаимосвязанных технологий: HTML, CSS и JavaScript. Каждая из них выполняет свою уникальную роль, и только их совместное использование позволяет создавать полноценные, интерактивные и визуально привлекательные приложения.

Что такое HTML, CSS

HTML (HyperText Markup Language) — это язык гипертекстовой разметки, созданный для описания структуры веб-документов. Он не выполняет вычислений, не обрабатывает логику и не управляет поведением — его задача: обозначить смысл содержимого. Каждый элемент HTML — это маркер, который говорит браузеру: «Это заголовок», «Это абзац», «Это ссылка», «Это изображение».

HTML работает на основе тегов — специальных ключевых слов, заключённых в угловые скобки: <tag>. Теги могут быть:

  • Парными — имеют открывающий и закрывающий тег: 
    <p>Это параграф</p>
  • Самозакрывающимися — не содержат содержимого и закрываются сразу: 
    <img src="image.jpg" alt="Описание изображения" />
<br />

Каждый тег может иметь атрибуты — дополнительные параметры, уточняющие поведение или свойства элемента. Например:

<a href="https://example.com" target="_blank">Перейти</a>

Здесь href указывает адрес ссылки, а target="_blank" — открывать её в новой вкладке.

HTML5 — современная версия стандарта — ввела семантические теги, которые не только описывают внешний вид, но и передают значение контента:

  • <header> — шапка страницы или раздела
  • <nav> — навигационное меню
  • <main> — основное содержимое страницы
  • <section> — логический блок тематически связанного контента
  • <article> — самостоятельная сущность (например, статья, пост)
  • <footer> — подвал

Использование семантики улучшает:

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

CSS (Cascading Style Sheets) — это язык, предназначенный для оформления HTML-документов. Он отвечает за то, как выглядит страница: цвета, размеры, расположение элементов, анимации, адаптивность под разные устройства.

CSS работает через селекторы — правила, определяющие, к каким элементам применяются стили. Пример:

h1 {
    color: #2c3e50;
    font-size: 2rem;
    text-align: center;
}

Здесь h1 — селектор, { ... } — набор свойств и их значений.

CSS обладает ключевыми особенностями:

  • Каскадность (Cascading) — стили могут переопределяться. Если два правила влияют на один элемент, приоритет определяется по специфичности селектора, порядку объявления и использованию !important.
  • Наследование — некоторые свойства (например, font-family, color) автоматически передаются дочерним элементам.
  • Медиа-запросы — позволяют применять стили в зависимости от характеристик устройства: ширины экрана, ориентации, разрешения. Это основа адаптивного дизайна: 
    @media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

CSS можно подключать тремя способами:

  1. Внутренний стиль — внутри <style> в <head> (не рекомендуется для больших проектов).
  2. Внешний файл — через <link rel="stylesheet" href="styles.css"> — лучшая практика.
  3. Встроенный стиль — атрибут style внутри тега (<p style="color:red;">) — используется крайне редко, только для экстренных случаев.

Важно: HTML отвечает за что — CSS — за как выглядит. Их разделение — фундаментальный принцип веб-разработки. Это позволяет:

  • Менять дизайн без трогания структуры,
  • Одинаковый HTML отображать по-разному на разных устройствах,
  • Ускорять загрузку за счёт кэширования CSS-файлов,
  • Облегчать командную разработку (дизайнеры работают с CSS, разработчики — с HTML и JS).

В рамках дисциплины мы не будем изучать свойства CSS, поэтому они остаются на самообучение

Структура HTML

Каждый валидный HTML-документ должен начинаться с DOCTYPE, чтобы браузер знал, какой стандарт использовать. Без него он может перейти в режим "quirks mode", где поведение становится непредсказуемым.

<!DOCTYPE html>

— единственное объявление, необходимое для HTML5. Не требует закрывающего тега.

<html>

Корневой элемент. Атрибут lang обязателен для доступности и SEO:

<html lang="ru">

Указывает язык содержимого — помогает экранной речи, переводчикам и поисковикам.

<head>

Не отображается на странице, но содержит метаданные, необходимые для работы браузера и поисковых систем:

  • <meta charset="UTF-8"> — задаёт кодировку символов. UTF-8 поддерживает все языки мира — обязательный элемент.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — критически важен для мобильных устройств. Без него страница будет масштабироваться как на десктопе, что делает её нечитаемой на телефоне.
  • <title> — название вкладки браузера и заголовок в результатах поиска. Должен быть уникальным и описательным.
  • <link> — подключение внешних ресурсов: CSS, favicon, шрифтов.
  • <script> — подключение JavaScript (может находиться и в <head>, и в <body>, но это отдельная тема).

Пример полного <head>:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя первая страница</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>

Содержит всё, что видит пользователь. Внутри могут быть любые элементы, включая:

  • Заголовки: <h1> до <h6> — иерархия важности. <h1> — главный заголовок страницы, только один.
  • Параграфы: <p> — для текстовых блоков.
  • Списки:
    • <ul> — неупорядоченный (с точками),
    • <ol> — упорядоченный (с номерами),
    • <li> — элемент списка.
  • Изображения: <img src="..." alt="..."> — alt обязателен для доступности и SEO.
  • Ссылки: <a href="...">текст</a> — href — адрес перехода.
  • Кнопки: <button>...</button> — для взаимодействия.
  • Формы: <form>, <input>, <label> — для сбора данных.

Пример минимальной, но корректной структуры <body>:

<body>
    <header>
        <h1>Добро пожаловать!</h1>
    </header>

    <main>
        <p>Это основной текст страницы.</p>
        <button id="myButton">Нажми меня</button>
    </main>

    <footer>
        <p>&copy; 2025 Моя компания</p>
    </footer>
</body>

Вложенность и иерархия

HTML — дерево. Элементы должны быть правильно вложены:
✅ Правильно:

<p><strong>Жирный текст</strong> внутри параграфа</p>

❌ Неправильно:

<p><strong>Жирный текст</p></strong> <!-- Нарушена вложенность -->

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

Рекомендации по структуре

  • Используйте семантические теги вместо <div> там, где это возможно.
  • Не используйте <h1>–<h6> исключительно для изменения размера шрифта — используйте CSS.
  • Все изображения должны иметь alt — даже если пустой (alt=""), если они декоративные.
  • Для кнопок и ссылок используйте правильные теги: <button> — для действий, <a> — для переходов.
  • Поддерживайте чистую и читаемую структуру: отступы, переносы, комментарии (если нужно).
  • Всегда проверяйте валидность кода через validator.w3.org.

Что такое DOM

DOM (Document Object Model — Модель объектов документа) — это программное представление веб-документа (обычно HTML или XML), созданное браузером в виде иерархического дерева объектов, где каждый элемент документа — это объект, доступный для манипуляций через JavaScript.

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

Структура DOM как дерева

Каждый элемент HTML становится узлом (node) в DOM-дереве:

  • Элементные узлы — теги (<div>, <p>, <button> и т.д.)
  • Текстовые узлы — текст внутри тегов
  • Атрибутные узлы — атрибуты элементов (id, class, href)
  • Корневой узел — <html>
  • Дочерние и родительские узлы — элементы связаны отношениями «родитель–ребёнок»

Пример HTML:

<div id="container">
    <h1>Привет, мир!</h1>
    <p>Это параграф.</p>
</div>

Соответствующее DOM-дерево:

html
└── body
    └── div#container
        ├── h1
        │   └── #text: "Привет, мир!"
        └── p
            └── #text: "Это параграф."

Каждый узел имеет свойства и методы, позволяющие взаимодействовать с ним. Например:

  • element.tagName — имя тега,
  • element.textContent — содержимое текста,
  • element.id, element.className — значения атрибутов,
  • element.appendChild(), element.removeChild() — управление дочерними узлами.

Зачем нужен DOM?

JavaScript не может напрямую работать с HTML-кодом файла. Он работает только с DOM-представлением, которое браузер создал в памяти. Это позволяет:

  • Динамически изменять содержимое страницы без перезагрузки (например, обновлять список задач, менять текст кнопки),
  • Реагировать на действия пользователя — клики, ввод текста, скроллинг,
  • Изменять стили элементов — через element.style,
  • Добавлять и удалять элементы — например, создавать новые карточки товаров по запросу,
  • Получать информацию о состоянии страницы — размер окна, положение элементов, состояние форм.

Без DOM JavaScript был бы бесполезен на веб-странице — он просто не имел бы «точки входа» в контент.