1. Введение в веб-технологии: структура HTML и стилизация CSS
Введение в веб-технологии: структура HTML и стилизация CSS
Веб-разработка — это процесс создания веб-сайтов и приложений, которые работают в браузере. Чтобы понять, как создается любой современный сайт, необходимо разобраться в трех фундаментальных технологиях: HTML, CSS и JavaScript. В этой статье внимание будет сосредоточено на первых двух компонентах, отвечающих за структуру и внешний вид.
Роль технологий в веб-разработке
Для наглядности можно представить веб-сайт как жилой дом. Этот пример помогает четко разделить зоны ответственности каждой технологии.
!Аналогия веб-технологий: HTML как каркас, CSS как отделка, JavaScript как функциональность
* HTML (HyperText Markup Language) — это каркас. Он определяет, где будет стена, где дверь, а где окно. Без него дома не существует. * CSS (Cascading Style Sheets) — это отделка. Он определяет цвет обоев, размер окон, расстановку мебели. Без него дом будет серым и неуютным. * JavaScript — это коммуникации и функциональность. Он заставляет работать лифт, включаться свет и течь воду. Без него дом статичен.
HTML: Язык гипертекстовой разметки
HTML не является языком программирования в классическом понимании, так как в нем нет переменных, циклов или логических операций. Это язык разметки. Его задача — сообщить браузеру, чем является тот или иной кусок текста: заголовком, абзацем, ссылкой или изображением.
Синтаксис тегов
Основа HTML — это теги. Тег — это ключевое слово, заключенное в угловые скобки. Большинство тегов являются парными: у них есть открывающая часть и закрывающая часть (со слэшем /).
Пример структуры элемента:
* Открывающий тег: <p> (начало абзаца).
* Контент: Текст внутри.
* Закрывающий тег: </p> (конец абзаца).
* Атрибуты: Дополнительная информация, которая пишется в открывающем теге (например, class, id, src).
Существуют и одиночные теги, которые не требуют закрытия, так как не содержат текста внутри себя. Примером служит тег изображения <img> или переноса строки <br>.
Базовая структура документа
Любой HTML-файл должен иметь строгую иерархию. Браузер читает код сверху вниз.
<!DOCTYPE html> — инструкция браузеру, что используется современный стандарт HTML5.<html> — корневой элемент, контейнер для всего кода.<head> — «голова» документа. Здесь хранится техническая информация: кодировка, заголовок вкладки браузера, подключение стилей. Пользователь не видит содержимое этого тега на странице.<body> — «тело» документа. Всё, что находится здесь (текст, картинки, кнопки), отображается в окне браузера.Вложенность и родительские отношения
В HTML элементы вкладываются друг в друга, образуя древовидную структуру (DOM — Document Object Model). Элемент, в который вложен другой тег, называется родителем, а вложенный элемент — дочерним.
> Важно соблюдать правильную вложенность: тег, открытый последним, должен быть закрыт первым. Принцип «матрёшки».
CSS: Каскадные таблицы стилей
Если HTML отвечает за то, что отображается, то CSS отвечает за то, как это выглядит. CSS позволяет менять цвета, шрифты, размеры, отступы и расположение элементов.
Синтаксис CSS
Правило CSS состоит из селектора и блока объявлений.
* Селектор: указывает, к какому элементу HTML применить стиль (например, p для всех абзацев или h1 для заголовков).
* Свойство: что именно мы хотим изменить (например, color — цвет текста).
* Значение: как именно изменить (например, red — красный).
Пример окрашивания всех заголовков первого уровня в синий цвет:
Способы подключения CSS
Существует три способа добавить стили на страницу, но профессиональным стандартом является только один.
style. Плохая практика, так как смешивает структуру и оформление.<head> внутри тега <style>. Подходит для маленьких одностраничных сайтов..css (например, style.css) и подключаются к HTML через тег <link>. Это лучшая практика, так как позволяет использовать один файл стилей для множества страниц.Блочная модель (Box Model)
Это одна из самых важных концепций в верстке. В глазах браузера каждый элемент HTML — это прямоугольный ящик (box). Даже если вы видите круглую кнопку или текст, технически они находятся внутри прямоугольной области.
!Структура Box Model: контент, внутренние отступы, границы и внешние отступы
Размер элемента складывается из четырех компонентов:
Расчет ширины элемента
Частая ошибка новичков — думать, что свойство width задает полную ширину элемента. В стандартной модели width задает только ширину контента. Полная ширина элемента на странице рассчитывается по формуле:
Где:
* — полная ширина, занимаемая элементом на странице.
* — ширина контента (значение свойства width).
* — внутренние отступы слева и справа (padding).
* — толщина границ слева и справа (border).
* — внешние отступы слева и справа (margin).
Например, если вы задали блоку width: 100px, padding: 10px и border: 2px (без отступов margin), то реальная ширина блока будет:
Чтобы избежать сложных расчетов, в современной верстке часто используют свойство box-sizing: border-box, которое заставляет браузер включать padding и border в общую ширину width.
Итоги
* HTML отвечает за структуру и смысловое содержание страницы (каркас), а CSS — за визуальное оформление (дизайн).
* HTML состоит из тегов, которые могут быть вложены друг в друга, образуя дерево документа. Основные части документа: <head> (служебная информация) и <body> (видимый контент).
* CSS использует селекторы для выбора элементов и пары «свойство-значение» для изменения их вида.
* Любой элемент на странице подчиняется блочной модели (Box Model), состоящей из контента, внутренних отступов (padding), границ (border) и внешних отступов (margin).
* Лучшая практика организации кода — разделение HTML и CSS по разным файлам.