1. Введение в веб-технологии: семантическая верстка HTML и стилизация CSS
Введение в веб-технологии: семантическая верстка HTML и стилизация CSS
Добро пожаловать в курс «Основы веб-программирования: Полный цикл разработки». Это первая статья нашего путешествия, в которой мы заложим фундамент для всех будущих знаний. Сегодня мы разберем два кита, на которых держится весь визуальный интернет: HTML и CSS.
Когда вы открываете любой сайт — будь то социальная сеть, новостной портал или интернет-магазин — ваш браузер получает набор инструкций. Эти инструкции говорят ему, что показать и как это должно выглядеть. Именно этим мы и займемся: научимся создавать структуру контента и придавать ей красивый внешний вид.
Как работает веб: краткий обзор
Прежде чем писать код, важно понять, как информация попадает на ваш экран. Интернет работает по модели «Клиент-Сервер».
!Простая схема обмена данными между пользователем и сервером
Файлы, которые приходят с сервера, обычно делятся на три типа:
HTML: Скелет вашего сайта
HTML — это язык гипертекстовой разметки. Важно понимать: это не язык программирования в классическом понимании (здесь нет переменных или циклов), это язык структуры.
Представьте, что вы строите дом. HTML — это бетонные плиты, кирпичи, балки и перекрытия. Без них у вас не будет дома, а будет просто куча стройматериалов.
Синтаксис тегов
HTML состоит из элементов, которые мы называем тегами. Большинство тегов являются парными: у них есть открывающая часть и закрывающая часть.
<p> — открывающий тег.Это параграф текста. — контент.</p> — закрывающий тег (обратите внимание на слэш /).Существуют и одиночные теги, например, <img> для изображений или <br> для переноса строки, которым не нужно закрытие, так как у них нет текстового содержимого внутри.
Семантическая верстка: почему это важно?
В прошлом веб-разработчики использовали универсальный тег <div> для всего подряд. Код выглядел примерно так:
Это работает, но это плохая практика. Браузер не понимает, что внутри первого div находится именно шапка сайта, а не просто текст.
Семантическая верстка подразумевает использование тегов, которые своим названием говорят о предназначении контента. Это критически важно для:
Вот как выглядит тот же пример с использованием семантических тегов HTML5:
Основные семантические теги
<header>: Вводная часть страницы или секции (логотип, заголовок).<nav>: Блок навигации с ссылками.<main>: Основное уникальное содержимое страницы. На странице должен быть только один main.<section>: Тематическая группировка контента (например, секция «О нас» или «Отзывы»).<article>: Самодостаточный контент, который имеет смысл даже в отрыве от сайта (статья в блоге, новость).<aside>: Контент, косвенно связанный с основным (боковая панель, реклама).<footer>: Подвал сайта (копирайт, контакты).!Структура веб-страницы, построенная на семантических тегах HTML5
CSS: Одежда для вашего кода
Если HTML — это скелет, то CSS — это кожа, одежда и макияж. CSS отвечает за цвета, шрифты, отступы и расположение элементов.
Как работает CSS
CSS использует правила, состоящие из селектора и блока объявлений.
p — это селектор. Он говорит браузеру: «Найди все параграфы на странице».color: red; — это свойство и значение. Оно говорит: «Сделай текст красным».Подключение CSS
Лучший способ подключить стили — создать отдельный файл (например, style.css) и связать его с HTML-файлом через тег <link> внутри секции <head>:
Классы и Идентификаторы
Стилизовать все параграфы одинаково — редкость. Чаще нам нужно выделить конкретный элемент. Для этого используются атрибуты class и id.
.classname): Можно использовать многократно на одной странице. Идеально для групп элементов.#idname): Должен быть уникальным на странице (встречаться только один раз).> Хорошим тоном считается использование классов для стилизации, а идентификаторов — преимущественно для якорей ссылок или привязки JavaScript, чтобы избежать конфликтов специфичности стилей.
Блочная модель (Box Model)
Это самая важная концепция в CSS, которую новички часто понимают неправильно. Каждый элемент на веб-странице — это прямоугольный ящик (box).
Даже если вы видите круглую кнопку или текст, для браузера это прямоугольник, который состоит из четырех слоев:
!Визуальное представление блочной модели: контент, внутренние отступы, границы и внешние отступы
Рассмотрим пример:
Вопрос: какова полная ширина этого элемента на экране?
Многие ответят 100px, но это неверно (в стандартной модели браузера). Давайте посчитаем:
Где — полная ширина элемента, — ширина контента, заданная в CSS, — внутренние отступы, а — толщина границ.
Подставим наши значения:
Итого элемент займет 150 пикселей в ширину, плюс по 30 пикселей внешнего отступа (margin) с каждой стороны, которые будут отталкивать другие элементы.
Чтобы избежать этой математики и сделать верстку более предсказуемой, профессионалы используют свойство:
С этим свойством width: 100px будет означать полную ширину элемента, включая padding и border, а браузер сам уменьшит место под контент.
Практический пример
Давайте соберем всё вместе. Мы создадим карточку товара.
HTML (index.html):
CSS (style.css):
В этом примере мы использовали семантический тег <article>, так как карточка товара — это самостоятельная единица контента. Мы использовали классы для стилизации, задали внутренние отступы (padding), чтобы текст не прилипал к краям, и добавили интерактивности через псевдокласс :hover.
Заключение
Сегодня мы познакомились с языком разметки HTML и языком стилей CSS. Мы узнали, что:
В следующей статье мы углубимся в создание сложных макетов и узнаем, как располагать элементы на странице не просто друг под другом, а в виде сеток и колонок.
> Для дополнительного чтения рекомендую ознакомиться с документацией MDN Web Docs — это «библия» веб-разработчика.