На прошлом уроке мы создали первую страницу и познакомились с JavaScript в браузере. Теперь углубимся в HTML: это язык разметки, который описывает структуру веб-страницы. Документ состоит из тегов — специальных «меток», которые говорят браузеру, что такое каждый элемент: заголовок, абзац, ссылка и т.д.
<!DOCTYPE>, <html>, <head>, <body>.<h1>–<h6> и абзацы <p>.<header>, <main>, <footer>.<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название страницы</title>
</head>
<body>
<!-- Содержимое страницы здесь -->
</body>
</html><!DOCTYPE html> — сообщает браузеру, что это HTML5.<html lang="ru"> — корень документа; lang помогает поисковикам и скринридерам.<head> — служебная информация: кодировка, заголовок, подключение стилей.<body> — видимое содержимое страницы.h1–h6Заголовки задают иерархию: <h1> — главный, <h6> — самый мелкий.
<h1>Главный заголовок</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h2>Раздел 2</h2>pТекст оформляют в абзацы с помощью <p>:
<p>Первый абзац текста.</p>
<p>Второй абзац. Каждый абзац — отдельный блок.</p>Теги можно вкладывать друг в друга. Важно закрывать их в правильном порядке:
<p>Текст с <strong>выделением</strong> и <em>курсивом</em>.</p><strong> — жирный (важный текст)<em> — курсив (акцент)Чтобы размечать смысловые области страницы, используют:
<header> — шапка (логотип, навигация)<main> — основное содержимое<footer> — подвал (контакты, копирайт)<body>
<header>
<h1>Сайт о программировании</h1>
</header>
<main>
<p>Здесь основной контент.</p>
</main>
<footer>
<p>© 2025</p>
</footer>
</body><br> — перенос строки (одиночный тег, не закрывается)<hr> — горизонтальная линия-разделитель<p>Первая строка.<br>Вторая строка.</p>
<hr>
<p>Новый блок после линии.</p>Создай страницу с заголовком <h1> «Моё хобби» и тремя абзацами <p>, в которых опиши своё увлечение.
Добавь на страницу структуру: <header>, <main>, <footer>. В header — заголовок, в main — текст, в footer — «Сделано с ❤️».
Создай страницу «Рецепт» с <h1>, <h2> для разделов (Ингредиенты, Приготовление) и абзацами с текстом.
Мы изучили базовую структуру HTML и основные теги: заголовки, абзацы, выделение. На следующем уроке познакомимся со списками, ссылками и изображениями.
<p><strong>текст</p></strong>.h2 → h4).<meta charset="utf-8"> — русский текст будет отображаться некорректно.<strong> и <b>, <em> и <i> — лучше использовать семантические теги.Создай файл about.html со структурой <header>, <main>, <footer>.
В <main> добавь:
<h2>Кто я</h2> и абзац с кратким представлением<h2>Мои интересы</h2> и абзац с увлечениями<h2>Чему учусь</h2> и абзац про обучениеИспользуй <strong> и <em> для выделения ключевых слов.
Создай страницу на любую тему (книга, фильм, игра) с правильной иерархией:
<h1> — общее название<h2> — разделы<h3> — подразделы<p>Напиши короткую статью (5–7 абзацев) на тему «Почему я учу программирование». Используй:
<h1> для заголовка статьи<p> для абзацев<strong> и <em> для акцентов<br> в одном месте для переноса строки внутри абзаца<hr> перед последним абзацем как разделительСоздай страницу-конспект урока «HTML: структура и теги» с разметкой:
<h1> — название урока<h2> — каждый раздел (Структура документа, Заголовки, Абзацы и т.д.)Сделай страницу-визитку с полной семантической разметкой:
<header> — имя и должность/роль<main> — о себе, навыки, контакты<footer> — год, ссылка на соцсеть (пока просто текст, ссылки — на следующем уроке)Опиши идею своего будущего проекта (сайт, игра, приложение) в виде страницы с заголовками и абзацами. Структура: цель проекта, основные функции, технологии.