Введение в веб-технологии и подготовка рабочего пространства
Создание любого сайта начинается с понимания базовой архитектуры Всемирной паутины (WWW). Когда вы открываете браузер и вводите адрес, ваш компьютер отправляет запрос удаленному серверу, который присылает в ответ набор текстовых файлов. Основным среди них является файл разметки. Инструмент, с помощью которого мы описываем логическую структуру веб-страницы, называется HTML (HyperText Markup Language). Он не является языком программирования — на нем нельзя написать логические вычисления, он служит исключительно разметчиком элементов, сообщающим браузеру назначение той или иной информации.
Для создания полноценного сайта вам не требуются платные или сложные специализированные программы. На этапе обучения достаточно использовать любой продвинутый текстовый редактор кода (например, VS Code, Sublime Text или Notepad++). Важно усвоить ключевое правило файловой системы: главная (стартовая) страница любого сайта всегда должна называться строго index.html. Браузерные сервера по умолчанию настроены искать именно этот файл при обращении к папке проекта. Расширение файла обязательно должно быть .html, а кодировка — строго UTF-8, чтобы русские буквы не превращались в нечитаемые символы (кракозябры).
Базовая структура документа
HTML-документ строится по принципу матрешки: одни элементы строго вкладываются в другие. Любой тег (команда) состоит из ключевого слова, заключенного в угловые скобки. Большинство тегов являются парными, то есть требуют закрывающего тега со слэшем в начале. Давайте подробно рассмотрим фундаментальный каркас страницы, без которого сайт не сможет правильно открыться ни в одном браузере мира:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Первый сайт своими руками</title>
</head>
<body>
<!-- Контент пишется только внутри body -->
</body>
</html>
Справочник корневых команд и их назначение
| Команда (Тег) |
Описание и техническая функция |
| <!DOCTYPE html> | Декларация, указывающая браузеру, что документ написан по современному стандарту HTML5. |
| <html> | Корневой контейнер, оборачивающий все содержимое страницы. Атрибут lang="ru" указывает язык контента. |
| <head> | Технический раздел. Содержит мета-данные, информацию для поисковиков, кодировку и подключение стилей. |
| <meta charset="UTF-8"> | Команда, устанавливающая единую мировую кодировку символов. Защищает от искажения текста. |
| <meta name="viewport"> | Инструкция управления масштабированием на мобильных дисплеях. Задает ширину страницы под размер экрана телефона. |
| <title> | Заголовок вкладки. Текст внутри отображается на панели браузера и является главным для поискового робота. |
| <body> | Тело страницы. Сюда помещается вся видимая пользователю текстовая и графическая информация. |
Золотое правило синтаксиса: Теги не должны пересекаться при закрытии. Если вы открыли первый тег, а внутри него открыли второй, то сначала нужно обязательно закрыть второй, а только затем — первый. Нарушение этого правила ломает отображение сайта в мобильных браузерах.
Текстовая разметка, организация ссылок и списков
После создания каркаса документа, его необходимо наполнить осмысленным содержанием. Текст на сайте не может быть написан "просто так", он должен подчиняться чёткой иерархии, напоминающей структуру сложной научной статьи или книги. Для создания заголовков в HTML применяется семейство тегов от h1 до h6. Главное правило поисковой оптимизации (SEO) гласит: заголовок уровня h1 должен встречаться на странице строго один единственный раз — это название всей страницы. Для разделов используются h2, для подразделов — h3, и так далее. Обычный связный текст всегда оборачивается в абзацы с помощью тега p.
Внутри абзацев часто возникает необходимость логически выделить определенные термины или фразы. Для этого используются инструменты физического и логического форматирования. Простой перенос строки без создания нового длинного абзаца реализуется с помощью одиночного тега br, а для проведения горизонтальной разделительной линии используется тег hr. Важно помнить, что обычные пробелы и переносы строк, сделанные клавишей Enter внутри кода, браузер полностью игнорирует, сжимая их до одного пробела. Любой перенос должен быть задан тегом в явном виде.
Перекрестные ссылки и списки данных
Связующим звеном всего интернета являются гиперссылки, создаваемые тегом a. Чтобы ссылка знала, куда именно перенаправить пользователя, применяется обязательный атрибут href. Ссылки могут вести на внешние сайты (тогда указывается полный адрес, например, https://site.ru) или на внутренние страницы текущего проекта (указывается относительный путь, например, о-нас.html). Также существуют списки двух типов: маркированные (элементы выводятся в виде точек) и нумерованные. Каждый элемент любого списка обязан лежать в индивидуальном контейнере li.
| Тег |
Тип |
Действие и правила применения |
| <h1> ... </h1> | Парный | Главный заголовок сайта. Пишется самым крупным жирным шрифтом. |
| <p> ... </p> | Парный | Создает абзац текста со стандартными отступами сверху и снизу. |
| <strong> ... </strong> | Парный | Выделяет текст полужирным начертанием, обозначая важность для поисковиков. |
| <em> ... </em> | Парный | Наклоняет текст (курсив), используется для логического акцента в речи. |
| <a href="УРЛ"> ... </a> | Парный | Создает кликабельную ссылку. При добавлении target="_blank" ссылка откроется в новой вкладке. |
| <ul> ... </ul> | Парный | Объявляет начало маркированного списка. Внутри могут быть только теги li. |
| <ol> ... </ol> | Парный | Объявляет начало списка с автоматической нумерацией (1, 2, 3...). |
| <li> ... </li> | Парный | Пункт списка. Работает только внутри родительских контейнеров ul или ol. |
<h2>План изучения веб-технологий</h2>
<p>Для быстрого старта вам <strong>обязательно</strong> нужно изучить:</p>
<ul>
<li>Базовые теги разметки</li>
<li>Стилизацию через CSS</li>
</ul>
<p>Подробности читайте на <a href="https://w3.org" target="_blank">официальном сайте консорциума W3C</a>.</p>
Семантическая разметка макета и табличные данные
Раньше веб-страницы верстались хаотично, с использованием безликих универсальных блоков общего назначения. В современной веб-индустрии этот подход считается неприемлемым. На смену ему пришла семантическая верстка, введенная в стандарте HTML5. Её суть в том, что каждый блок макета должен быть обернут в специализированный тег, соответствующий его роли на странице. Это критически необходимо для поисковых роботов (чтобы они понимали, где находится статья, а где сквозное меню рекламы) и для программ чтения экрана (экранных дикторов), помогающих людям с нарушениями зрения ориентироваться в пространстве сайта.
Семантическая структура делит страницу на логические зоны. Верхняя часть сайта оформляется тегом header, навигация — nav, основной контент — main, подвал — footer. Помимо этого, на сайтах часто требуется представлять упорядоченные структурированные данные. Для этого служит табличная модель HTML. Любая таблица состоит из строгого набора вложенных рядов и ячеек, которые формируют сетку данных.
Справочник структурных семантических тегов
| Тег |
Назначение блока в макете сайта |
| <header> | Шапка сайта. Содержит логотип, название компании, слоган или главную навигацию. |
| <nav> | Навигационный блок. Оборачивает списки главных ссылок для перемещения по страницам. |
| <main> | Основное уникальное содержимое конкретной страницы. Должен быть один на странице. |
| <section> | Крупный тематический раздел или глава внутри основного содержимого документа. |
| <article> | Самостоятельный, независимый блок информации (новость, статья блога, карточка товара). |
| <aside> | Боковая панель (сайдбар). Содержит второстепенный контент: банеры, ссылки, архивы. |
| <footer> | Подвал (низ сайта). Здесь размещают копирайты, контакты, юридические ссылки. |
Построение таблиц в HTML
Для создания таблицы используется тег table. Внутри него данные разбиваются построчно при помощи тега tr (table row). Каждая строка наполняется ячейками: th используется для заглавных ячеек шапки таблицы (текст в них автоматически становится жирным и выравнивается по центру), а td — для стандартных информационных ячеек.
<table>
<tr>
<th>Язык</th>
<th>Роль</th>
</tr>
<tr>
<td>HTML</td>
<td>Каркас страницы</td>
</tr>
</table>
Создание интерактивных форм и элементов сбора данных
Сайт не должен быть просто статичным документом для чтения; современный веб требует активного взаимодействия с пользователем. Сбор отзывов, регистрация, оформление заказов, отправка комментариев — все эти действия осуществляются при помощи интерфейса форм. Форма в HTML — это выделенная область страницы, содержащая различные поля ввода, переключатели и кнопки, данные из которых могут быть сгруппированы и отправлены на сервер.
Главным контейнером для организации такого блока является тег form. Внутри него располагаются элементы управления. Самым гибким и многофункциональным является тег input. Его поведение кардинально меняется в зависимости от значения ключевого атрибута type. Например, если задать тип как "text", мы получим стандартную строку для ввода имени, а если сменить его на "checkbox" — элемент превратится в квадратный флажок выбора («галочку»). Обязательным спутником любого поля ввода является текстовая метка label, которая связывает поясняющий текст с самим полем, увеличивая площадь кликабельности, что невероятно важно для удобства пользователей смартфонов.
Таблица основных элементов управления формами
| Элемент (Тег / Атрибут) |
Функционал и визуальное отображение |
| <form> ... </form> | Оборачивает всю группу интерактивных полей. Содержит параметры отправки данных. |
| <input type="text"> | Однострочное текстовое поле для ввода стандартных данных (имя, логин, город). |
| <input type="email"> | Специализированное поле для адреса электронной почты. Проверяет корректность знака "@". |
| <input type="password"> | Поле ввода пароля. Скрывает вводимые пользователем знаки за точками или звездочками. |
| <input type="checkbox"> | Флажок (чекбокс). Позволяет выбрать несколько независимых вариантов из предложенных. |
| <input type="radio"> | Радиокнопка. Объединяется в группу по атрибуту name. Разрешает выбрать только один вариант из всех. |
| <textarea> ... </textarea> | Многострочное текстовое поле с возможностью растягивания. Идеально для отзывов и писем. |
| <button type="submit"> | Кнопка отправки формы. Собирает данные всех полей и инициализирует отправку. |
<form action="#" method="POST">
<div>
<label for="userName">Ваше имя:</label>
<input type="text" id="userName" required>
</div>
<div>
<label for="userMessage">Сообщение:</label>
<textarea id="userMessage"></textarea>
</div>
<button type="submit">Отправить форму</button>
</form>
Основы CSS: Подключение, Синтаксис, Архитектура селекторов и Каскад
После того как вы освоили разметку контента, перед вами встает задача придания сайту визуальной привлекательности. Для этого используется технология CSS (Cascading Style Sheets) — каскадные таблицы стилей. Код CSS пишется по совершенно иным правилам, нежели HTML. Если задача HTML — создать объект на странице, то задача CSS — детально описать правила его внешнего вида. Стили могут храниться внутри тега head в контейнере style, однако правильным подходом является создание отдельного чистого текстового файла (например, style.css) и его подключение к HTML с помощью одиночной команды связи link, прописываемой в техническом блоке head.
Инструкция стилей состоит из селектора (указателя, к какому элементу мы обращаемся) и фигурных скобок, внутри которых пишутся пары свойств и значений через двоеточие. Чтобы стилизовать элементы избирательно, используются классы. В HTML-теге пишется атрибут class="название", а в файле CSS к этому названию обращаются через символ точки. Понятие "каскадность" определяет правила приоритета: если к одному элементу применены противоречащие друг другу стили, браузер рассчитывает силу селектора (специфичность). Самый слабый — селектор тега, класс сильнее тега, а идентификатор сильнее класса.
Базовые свойства оформления и селекторы
| CSS Свойство / Селектор |
Действие и сфера применения |
| p { ... } | Селектор тега. Применяет указанные стили абсолютно ко всем абзацам на странице. |
| .my-block { ... } | Селектор класса. Применяется к элементам, у которых задан атрибут class="my-block". Основной рабочий инструмент. |
| :hover | Псевдокласс. Активирует стили только в тот момент, когда пользователь навел мышь на элемент. |
| color | Задает цвет текста. Значение можно писать словами (red), HEX-кодом (#ffffff) или RGB. |
| background-color | Устанавливает цвет заднего фона элемента или всей страницы. |
| font-size | Определяет размер шрифта. Может измеряться в пикселях (px) или относительных единицах (rem). |
| text-align | Выравнивание текста внутри блока (left — по левому краю, center — по центру, justify — по ширине). |
| font-family | Задает семейство шрифтов (название гарнитуры), которая будет использоваться для отображения текста. |
/* Пример написания CSS файла */
body {
background-color: #0b0f19;
font-family: Arial, sans-serif;
}
.main-title {
color: #38bdf8;
font-size: 24px;
text-align: center;
}
.main-title:hover {
color: #ffffff;
}
Блочная модель CSS, правила позиционирования и свойство Display
Абсолютно каждый элемент на HTML-странице воспринимается браузером как невидимая прямоугольная коробка (Box Model). Понимание устройства этой коробки — ключ к успешному размещению элементов на макете без сдвигов и багов. Любой блок состоит из четырех уровней, идущих изнутри наружу: область непосредственного контента, внутренний отступ (padding) от контента до рамки, сама рамка (border), очерчивающая контур, и внешний отступ (margin) — невидимая буферная зона, расталкивающая соседние элементы в стороны.
Критически важно в самом начале написания стилей переопределить стандартную математику расчетов размеров. По умолчанию добавление внутренних отступов (padding) увеличивает общую физическую ширину блока, что ломает верстку. Чтобы этого избежать, для всех элементов применяется глобальное правило box-sizing: border-box, которое заставляет браузер вжимать любые внутренние отступы внутрь заданной ширины, не расширяя блок наружу.
Свойство Display и типы элементов
Поведение элемента на странице координируется свойством display. Все элементы делятся на два базовых типа: блочные (block) — занимают всю доступную ширину строки, всегда начинаются с новой строки (например, div, p, h1); и строчные (inline) — занимают ровно столько места, сколько требует их контент, выстраиваются в одну линию и не реагируют на явное задание ширины или высоты (например, a, strong, em).
Таблица геометрических свойств блочной модели и позиционирования
| CSS Свойство |
Функциональное назначение геометрического параметра |
| width / height | Задает ширину и высоту области контента. Может измеряться в пикселях или процентах. |
| padding | Внутренний отступ. Создает свободное пространство вокруг контента внутри рамки. |
| margin | Внешний отступ. Создает пустую зону безопасности вокруг элемента, отодвигая соседей. |
| border | Задает параметры рамки (толщину, стиль линии, цвет). Пример: 2px solid red. |
| position: relative | Относительное позиционирование. Оставляет блок в потоке, но разрешает сдвигать его со сдвигом координат. |
| position: absolute | Абсолютное позиционирование. Вырывает блок из общего потока. Позиционируется относительно первого родителя со стилем relative. |
| position: fixed | Фиксированное положение. Блок намертво привязывается к экрану монитора и не двигается при прокрутке. |
| position: sticky | Плавающее фиксирование. Блок ведет себя как обычный, но при прокрутке до заданной точки «прилипает» к краю экрана. |
/* Пример настройки блочной модели */
.card-box {
width: 300px;
padding: 20px;
margin: 15px;
border: 1px solid #334155;
background-color: #131c2e;
box-sizing: border-box;
position: relative;
}
Современная раскладка макетов через Flexbox, адаптивность и CSS-анимация
Для того чтобы выстроить элементы в красивый адаптивный ряд (например, три карточки услуг или меню шапки сайта), применяется передовая технология раскладки Flexbox Layout. Она активируется одной единственной командой display: flex, прописываемой для родительского контейнера. Как только родитель получил это свойство, все его прямые дочерние элементы мгновенно превращаются во флекс-элементы, послушно встают в один ровный горизонтальный ряд и получают мощнейшие инструменты автоматического распределения свободного места и выравнивания.
Флекс-модель оперирует понятием двух осей: главной (по умолчанию горизонтальной) и поперечной (вертикальной). Свойство justify-content отвечает за распределение блоков вдоль главной оси, позволяя сцентровать их или раздвинуть по краям. Свойство align-items выравнивает элементы по высоте. Если элементам становится тесно на экране мобильного телефона, свойство flex-wrap со значением wrap разрешает им красиво переноситься на следующие строки макета, предотвращая появление горизонтальной полосы прокрутки.
Адаптивный дизайн и Медиа-запросы
Чтобы сайт динамически перестраивал свой внешний вид под разные экраны, используются медиа-запросы @media. Они позволяют поставить условие: если ширина экрана устройства становится меньше определенного порога (например, 768 пикселей), то стандартные правила CSS отменяются и в силу вступают новые, мобильные стили.
Справочник свойств Flexbox и адаптивной анимации
| Свойство |
Действие при построении адаптивного интерфейса |
| display: flex | Превращает элемент в гибкий контейнер, выстраивая дочерние блоки в ряд. |
| flex-direction | Направление осей. Значение column разворачивает горизонтальный ряд элементов в вертикальную колонку. |
| justify-content | Выравнивание по горизонтали (center, space-between — прижать к краям, space-around). |
| align-items | Выравнивание по вертикали. Центрирует элементы разной высоты по одной оси. |
| gap | Задает фиксированные расстояния (зазоры) между элементами внутри флекс-контейнера. |
| @media (max-width: 768px) | Директива проверки ширины экрана. Оборачивает стили, предназначенные только для смартфонов. |
| transition | Устанавливает плавность переходов. Пример: transition: all 0.3s — любое изменение цвета произойдет плавно. |
| @keyframes / animation | Создает сложную покадровую программную анимацию графических объектов на чистом CSS. |
/* Пример гибкой адаптивной флекс-сетки */
.cards-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.single-card {
flex: 1 1 calc(33.333% - 20px);
background-color: #1e293b;
transition: transform 0.3s ease;
}
.single-card:hover {
transform: translateY(-5px);
}
@media (max-width: 768px) {
.single-card {
flex: 1 1 100%;
}
}