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

  • HTML (структура)
  • CSS (стилизация)
  • JavaScript (интерактивность)

Соответственно, можно выделить следующие уровни:

  1. Структурный уровень — организация контента на странице с использованием тегов (<header>, <section>, <article>, <footer>).
  2. Представление — стилизация содержимого с использованием CSS, но HTML предоставляет базовые возможности через теги, такие как <b>, <i>, <h1>, <p>.
  3. Интерактивность — хотя HTML сам по себе не обеспечивает интерактивность, он работает в связке с JavaScript, который добавляет динамическое поведение страницам.

Как работает веб-страница?

  1. Запрос и загрузка страницы

    • Пользователь вводит URL-адрес (например, https://bsuir.by) в адресной строке браузера.
    • Браузер отправляет HTTP-запрос на веб-сервер, где находится сайт.

  2. Ответ от веб-сервера

    • Веб-сервер обрабатывает запрос и отправляет HTML-файл (и другие ресурсы, такие как изображения, стили и скрипты) обратно в браузер.

  3. Обработка браузером

    • HTML-файл парсится (разбирается) браузером, который строит DOM-дерево (Document Object Model) — это внутренняя структура страницы.
    • Браузер запрашивает дополнительные файлы (CSS для стилей, JavaScript для интерактивности, изображения и мультимедиа).

  4. Отображение страницы

    • После построения DOM и загрузки всех ресурсов браузер рендерит страницу — преобразует HTML-код и стили в визуальное представление.
    • Пользователь видит страницу на экране и может взаимодействовать с ней.

Простая схема работы веб-страницы

  1. Пользователь → Вводит URL → Запрос к серверу
  2. Сервер → Отправляет HTML + CSS + JS → Браузер
  3. Браузер → Создаёт DOM (на основе HTML) + CSSOM (на основе CSS) → Объединяет их → Отображает страницу

HTML (HyperText Markup Language) — Структура

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

Основные функции HTML:

  • Определяет структуру страницы: Заголовки, абзацы, списки, таблицы, формы и другие элементы.
  • Семантика: Использование правильных тегов (<header>, <footer>, <article>, <section>) улучшает читаемость кода и помогает поисковым системам.
  • Встраивание медиа: Поддерживает добавление изображений (<img>), видео (<video>) и аудио (<audio>).
  • Ссылки и навигация: Использование тега <a> для создания ссылок на другие страницы.

Пример HTML-кода:

Объяснение:

  • <html> — корневой тег.
  • <head> — метаданные страницы (название, кодировка и т.д.).
  • <body> — содержимое страницы, видимое пользователю.

CSS (Cascading Style Sheets) — Стилизация

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

Основные функции CSS:

  • Стилизация элементов: Цвет текста, фоновое изображение, шрифт, размер, отступы и границы.
  • Макет страницы: Размещение элементов (расположение блоков, сетки и адаптивный дизайн).
  • Анимации и переходы: Создание анимаций и плавных эффектов при наведении мыши или прокрутке страницы.
  • Адаптивность: Позволяет создавать страницы, которые корректно отображаются на разных устройствах (мобильных, планшетах и компьютерах).

Пример CSS-кода:

Объяснение:

  • body — задаёт стиль для всего тела страницы (фон, шрифт).
  • h1 — изменяет цвет и положение заголовка.
  • p — изменяет размер и интервал текста для абзацев.

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

  • Внешний файл: Через тег <link> в <head>.
  • Встроенный стиль: Внутри тега <style> в HTML.
  • Встроенный стиль элемента: Используя атрибут style прямо в HTML-теге.

JavaScript — Интерактивность

JavaScript — это язык программирования, который добавляет интерактивные элементы на страницу. Он позволяет динамически изменять контент страницы без её перезагрузки.

Основные функции JavaScript:

  • Интерактивные элементы: Кнопки, всплывающие окна, выпадающие меню.
  • Обработка событий: Действия при нажатии кнопки, наведении курсора или прокрутке страницы.
  • Взаимодействие с сервером: Загрузка данных без перезагрузки страницы (AJAX, Fetch API).
  • Анимации и динамическое изменение контента: Добавление или изменение содержимого на странице без её перезагрузки.

Пример JavaScript-кода:

Объяснение:

  • document.getElementById('myButton') — находит элемент по ID myButton.
  • addEventListener('click', callback) — запускает функцию при клике на кнопку.
  • alert() — выводит сообщение пользователю.

Где используется JavaScript?

  • Создание динамических интерфейсов (всплывающие окна, слайдеры).
  • Работа с формами (проверка полей перед отправкой).
  • Подгрузка данных без перезагрузки страницы (AJAX, Fetch API).
  • Создание игр и интерактивных приложений (например, SPA — одностраничные приложения).

Как работают HTML, CSS и JavaScript вместе?

  1. HTML — это "скелет" веб-страницы.
  2. CSS — "одежда" для веб-страницы, которая делает её визуально привлекательной.
  3. JavaScript — "мозг", который делает страницу интерактивной и живой.

Процесс работы браузера:

  1. Сначала загружается и обрабатывается HTML (структура).
  2. Затем загружается и применяется CSS (оформление).
  3. В последнюю очередь запускается JavaScript (интерактивность).

Пример объединения HTML, CSS и JavaScript

Что произойдёт?

  1. HTML создаёт заголовок (<h1>) и кнопку (<button>).
  2. CSS делает текст центрированным и меняет цвет фона.
  3. JavaScript выводит сообщение, когда пользователь нажимает кнопку.
Последнее изменение: понедельник, 17 февраля 2025, 23:05