HTML – это основа любой веб-страницы. Начать стоит с изучения структуры документа: теги <html>, <head> и <body> определяют каркас сайта. Для практики достаточно создать файл с расширением .html и прописать минимальный шаблон с заголовком и абзацем текста.
CSS отвечает за оформление страниц. Освойте подключение стилей через <link> в <head> или встроенные стили через <style>. Начните с базовых свойств: color, background-color, font-size и margin/padding. Практическая рекомендация – сразу экспериментировать с разными значениями и наблюдать изменения в браузере.
Комбинируя HTML и CSS, вы сможете создавать простые макеты. Используйте <div> для группировки элементов и назначайте им классы или идентификаторы. Рекомендуется разделять структуру и стили: HTML отвечает за содержание, CSS – за внешний вид. Такой подход упрощает редактирование и масштабирование проекта.
Для закрепления материала создайте мини-проект: простую страницу с заголовком, абзацами, списком и кнопкой. Добавьте к каждому элементу стили и наблюдайте, как изменения в CSS мгновенно отражаются на странице. Этот метод позволяет быстрее освоить фундамент и переходить к более сложным техникам, таким как сетки и адаптивная верстка.
Создаем первую веб-страницу: базовая структура HTML
Каждая веб-страница начинается с определения типа документа. Для HTML5 используйте строку <!DOCTYPE html>, которая сообщает браузеру, что страница написана на современном HTML.
Главный контейнер страницы обозначается тегом <html>. Внутри него разделяют две основные части: <head> и <title> внутри него, а также <body> для контента.
Тег <head> хранит метаинформацию: кодировку (<meta charset="UTF-8">), заголовок страницы (<title>Название страницы</title>), подключение CSS-файлов (<link rel="stylesheet" href="style.css">) и шрифты.
Тег <body> содержит весь видимый контент: текстовые блоки (<p>), заголовки (<h1>–<h6>), списки (<ul>, <ol>), ссылки (<a href="url">) и элементы формы (<form>, <input>).
Простейший шаблон первой страницы выглядит так:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это первый текст на моей веб-странице.</p>
</body>
</html>
Рекомендуется соблюдать вложенность тегов, закрывать каждый открытый элемент и использовать понятные имена файлов. Это облегчает чтение кода и последующее подключение CSS и JavaScript.
При работе с HTML полезно проверять страницу в разных браузерах и использовать валидатор HTML для выявления ошибок структуры и синтаксиса.
Форматируем текст и добавляем списки с помощью HTML
Для форматирования текста в HTML применяются семантические теги. <strong> делает текст жирным и указывает на его важность, <em> выделяет слова курсивом и показывает акцент на них. Для заголовков используются теги от <h1> до <h6>, где <h1> обозначает самый высокий уровень важности.
Абзацы создаются с помощью тега <p>, который автоматически добавляет вертикальные отступы. Для разрыва строки без создания нового абзаца используют <br>.
HTML поддерживает два типа списков. Нумерованные списки оформляются через <ol>, а каждый элемент списка заключают в <li>. Пример:
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>
Маркированные списки создаются с помощью <ul>, а элементы также заключаются в <li>. Пример:
<ul>
<li>Элемент A</li>
<li>Элемент B</li>
</ul>
Для улучшения читабельности текста используют вложенные списки и комбинации <ol> и <ul>. Каждое новое <li> может содержать как текст, так и другой список. Такая структура помогает логически разделять информацию и делает контент наглядным.
Рекомендация: всегда используйте семантические теги, чтобы текст был понятен не только пользователям, но и поисковым системам. Избегайте чрезмерного применения <b> и <i> для визуального эффекта, если нет необходимости подчеркнуть смысл.
Вставка изображений и ссылок на страницы
Для добавления изображения в HTML используется тег <img> с атрибутами src и alt. Атрибут src указывает путь к файлу, который может быть относительным (images/photo.jpg) или абсолютным (https://example.com/photo.jpg), а alt обеспечивает текстовую альтернативу для пользователей с ограниченными возможностями или при недоступности файла.
Для оптимальной загрузки изображений рекомендуется использовать форматы JPEG для фотографий и PNG для графики с прозрачным фоном. Размер файла лучше держать в пределах 100–300 КБ для быстрой загрузки страницы.
Чтобы сделать изображение кликабельным и вести на другую страницу, применяется тег <a> с атрибутом href, который оборачивает <img>. Пример: <a href="https://site.com"><img src="images/logo.png" alt="Логотип"></a>.
Ссылки на страницы создаются исключительно через <a> с указанием адреса в href. Для открытия в новой вкладке используется атрибут target="_blank". Например: <a href="https://example.com" target="_blank">Перейти на сайт</a>. Всегда добавляйте описательный текст в ссылку, чтобы пользователю было понятно, куда она ведет.
Для удобного управления файлами изображений используйте структуру папок, где все картинки хранятся в отдельной директории, например images/, а пути указываются относительно корня сайта. Это упрощает поддержку и обновление контента.
Также стоит учитывать атрибут title для ссылок и изображений, чтобы при наведении показывалась подсказка. Например: <a href="page.html" title="Подробнее о продукте">Продукт</a>.
Применяем стили к элементам с помощью CSS
Выбор селекторов влияет на точность применения стилей. Теговые селекторы (p, h1) изменяют все элементы данного типа. Классовые селекторы (.classname) позволяют выделять группы элементов, а идентификаторы (#idname) уникально нацелены на один элемент. Можно комбинировать селекторы для точной настройки, например: div.content p.highlight применяет стиль только к параграфам с классом highlight внутри блока div.content.
Основные свойства для оформления текста: color (цвет), font-size (размер шрифта), font-family (гарнитура), line-height (межстрочный интервал), text-align (выравнивание). Для блоков используются width, height, margin, padding, border и background-color. Использование box-shadow добавляет тени и глубину, а border-radius – закругленные углы.
Практическая рекомендация: создавая CSS, сначала определяйте глобальные стили для body и основных заголовков, затем уточняйте стили для отдельных элементов. Это упрощает поддержку и предотвращает дублирование. Всегда используйте консистентные единицы измерения: пиксели (px) для точной верстки, проценты (%) или em/rem для адаптивного дизайна.
CSS также поддерживает псевдоклассы и псевдоэлементы. Например, a:hover меняет внешний вид ссылки при наведении, p::first-letter позволяет стилизовать первую букву параграфа. Эти инструменты повышают интерактивность и визуальную структуру страницы без добавления лишнего HTML.
Работа с блоками и расположение элементов на странице
В HTML каждый элемент относится к блочному или строчному типу. Блочные элементы (