(продолжение)
Часть 8: Закрепляющее упражнение
Найдите и исправьте ошибки в коде:
html
<!DOCTYPE html>
<html>
<head>
<title>Упражнение</title>
</head>
<body>
<p>Первая строка<br>
Вторая строка</br>
Третья строка<br><br>
Четвертая строка</p>
<p>Это должен быть отдельный абзац<br>
Но здесь лишний перенос</p>
</body>
</html>
Правильный вариант:
html
<!DOCTYPE html>
<html>
<head>
<title>Упражнение</title>
</head>
<body>
<p>Первая строка<br>
Вторая строка<br>
Третья строка<br>
Четвертая строка</p>
<p>Это должен быть отдельный абзац</p>
<p>Но здесь лишний перенос</p>
</body>
</html>
Заключение
Тег <br> — это простой, но очень полезный инструмент для точного контроля над расположением текста.
Что Вы теперь умеете:
✅ Создавать переносы строк внутри абзацев
✅ Правильно оформлять адреса и стихи
✅ Отличать ситуации для <br> и <p>
✅ Избегать частых ошибок новичков
Золотое правило:
Используйте <p> для логических абзацев (с отступами)
Используйте <br> для принудительных переносов внутри абзаца (без отступов)
Теперь Вы можете создавать тексты любой сложности с точным контролем над их внешним видом! Поздравляю с освоением этого полезного тега!
- * * * -
4.4. Горизонтальная линия <hr> для разделения содержимого
Введение: Визуальный разделитель контента
Представьте книгу, где главы разделены не только заголовками, но и декоративными элементами. Тег <hr> (от "horizontal rule" — горизонтальная линия) выполняет именно эту роль в HTML — он создает визуальный разделитель между различными блоками контента.
Часть 1: Что такое тег <hr> и зачем он нужен?
<hr> — это одиночный HTML-тег, который создает горизонтальную линию-разделитель.
Основные задачи:
Визуальное разделение смысловых блоков контента
Акцентирование внимания на смене темы
Улучшение читаемости за счет структурирования
Декоративное оформление страницы
Особенности:
Это одиночный тег (не требует закрывающего </hr>)
По умолчанию занимает всю доступную ширину
Имеет небольшие отступы сверху и снизу
Отображается как простая серая линия
Часть 2: Базовое использование тега <hr>
Простой пример:
html
<p>Текст первого раздела</p>
<hr>
<p>Текст второго раздела</p>
Пример с заголовками:
html
<h2>Мои достижения</h2>
<p>В этом году я вырастил лучший урожай помидоров...</p>
<hr>
<h2>Планы на будущее</h2>
<p>В следующем сезоне хочу попробовать вырастить арбузы...</p>
Часть 3: Внешний вид <hr> по умолчанию в разных браузерах
Браузеры могут немного по-разному отображать линию:
Браузер
Толщина
Цвет
Стиль
Отступы
Chrome
1px
#ccc
inset
margin: 0.5em 0
Firefox
1px
#ccc
inset
margin: 0.5em 0
Edge
1px
#ccc
inset
margin: 0.5em 0
Часть 4: Практические примеры использования
Пример 1: Разделение разделов статьи
html
<article>
<h1>Выращивание роз для начинающих</h1>
<p>Розы — одни из самых красивых садовых цветов...</p>
<hr>
<h2>Выбор места для посадки</h2>
<p>Розы любят солнечные, защищенные от ветра места...</p>
<hr>
<h2>Полив и уход</h2>
<p>Поливайте розы утром или вечером, избегая попадания воды на листья...</p>
</article>
Пример 2: Разделение комментариев
html
<div class="comment">
<p><strong>Мария:</strong> Отличная статья! Спасибо за советы.</p>
</div>
<hr>
<div class="comment">
<p><strong>Иван:</strong> Попробовал Ваши рекомендации — работает!</p>
</div>
<hr>
<div class="comment">
<p><strong>Ольга:</strong> А когда лучше обрезать розы?</p>
</div>
Пример 3: Разделение контактной информации
html
<h2>Контактная информация</h2>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: example@mail.ru</p>
<hr>
<h2>График работы</h2>
<p>Пн-Пт: 9:00-18:00</p>
<p>Сб: 10:00-16:00</p>
<p>Вс: выходной</p>
Часть 5: Стилизация линии с помощью CSS
Вы можете легко изменить внешний вид линии:
Изменение толщины и цвета:
html
<hr style="border: 2px solid red;">
Пунктирная линия:
html
<hr style=”border: 1px dashed blue;”>
Тонкая серая линия:
html
<hr style=”border: none; height: 1px; background-color: #eee;”>
Цветная линия с градиентом:
html
<hr style=”border: none; height: 3px; background: linear-gradient(to right, red, orange, yellow);”>
Линия с тенью:
html
<hr style=”border: none; height: 2px; background: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.3);”>
Часть 6: Практическое задание
Задание: Создайте страницу с различными типами разделителей
html
<!DOCTYPE html>
<html>
<head>
<title>Различные разделители</title>
<meta charset="utf-8">
<style>
.section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Демонстрация различных разделителей</h1>
<div class="section">
<h2>1. Стандартная линия</h2>
<p>Это обычная горизонтальная линия по умолчанию.</p>
<hr>
<p>Текст после стандартной линии.</p>
</div>
<div class="section">
<h2>2. Толстая цветная линия</h2>
<p>Линия с пользовательскими стилями.</p>
<hr style="border: 3px solid #4CAF50;">
<p>Текст после зеленой линии.</p>
</div>
<div class="section">
<h2>3. Пунктирная линия</h2>
<p>Стилизованная пунктирная линия.</p>
<hr style="border: none; border-top: 2px dashed #ff6b6b;">
<p>Текст после пунктирной линии.</p>
</div>
<div class="section">
<h2>4. Градиентная линия</h2>
<p>Декоративная линия с градиентом.</p>
<hr style="border: none; height: 4px; background: linear-gradient(to right, #667eea, #764ba2);">
<p>Текст после градиентной линии.</p>
</div>
</body>
</html>
Часть 7: Семантическое значение <hr>
В HTML5 тег <hr> получил семантическое значение — он обозначает тематический разрыв на уровне абзацев.
Правильное использование:
html
<!-- ПРАВИЛЬНО: тематический разрыв -->
<article>
<p>Обсуждаем выращивание овощей...</p>
<hr>
<p>Теперь поговорим о цветах...</p>
</article>
Неправильное использование:
html
<!-- НЕПРАВИЛЬНО: чисто декоративное использование -->
<div class="header">
<h1>Заголовок</h1>
<hr>
<p>Подзаголовок</p>
</div>
Часть 8: Альтернативы тегу <hr>
Иногда лучше использовать другие методы разделения:
CSS border:
html
<div style=”border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px;”>
Первый блок
</div>
<div>
Второй блок
</div>
Пустой div с фоном:
html
<div style=“height: 1px; background: #ccc; margin: 20px 0;“></div>
CSS псевдоэлементы:
html
<style>
.decorative-line::after {
content: '';
display: block;
height: 2px;
background: linear-gradient(to right, transparent, #333, transparent);
margin: 10px 0;
}
</style>
<div class=“decorative-line“>
Текст с декоративной линией
</div>
Часть 9: Частые ошибки и лучшие практики
✅ ПРАВИЛЬНО:
html
<!-- Разделение смысловых блоков -->
<section>
<h2>Введение</h2>
<p>Текст введения...</p>
</section>
<hr>
<section>
<h2>Основная часть</h2>
<p>Текст основной части...</p>
</section>
❌ НЕПРАВИЛЬНО:
html
<!-- Слишком частые разделители -->
<p>Первый абзац</p>
<hr>
<p>Второй абзац</p>
<hr>
<p>Третий абзац</p>
<hr>
<!-- Использование для декоративных целей -->
<div class=“product-card“>
<h3>Название товара</h3>
<hr> <!-- Лучше использовать CSS border -->
<p>Описание товара</p>
</div>
Часть 10: Специальные эффекты с <hr>
Анимированная линия:
html
<hr style=“border: none; height: 3px; background: #333;
animation: pulse 2s infinite;“>
<style>
@keyframes pulse {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
</style>
Линия с иконкой:
html
<div style=“text-align: center;“>
<hr style=“display: inline-block; width: 40%; vertical-align: middle;“>
<span style=“margin: 0 10px;“>✻</span>
<hr style=“display: inline-block; width: 40%; vertical-align: middle;“>
</div>
Заключение
Тег <hr> — это простой, но мощный инструмент для структурирования контента:
Что Вы теперь умеете:
✅ Создавать стандартные горизонтальные линии
✅ Стилизовать линии с помощью CSS
✅ Правильно использовать для семантического разделения
✅ Избегать частых ошибок новичков
Золотые правила использования:
Используйте для тематического разделения блоков контента
Не злоупотребляйте — слишком много линий мешает чтению
Для чисто декоративных целей лучше использовать CSS
Тестируйте внешний вид в разных браузерах
Теперь Ваши веб-страницы будут иметь четкую, хорошо структурированную визуальную иерархию!
- * * * -
4.5. Практика: создаём страницу-визитку о себе с заголовком и несколькими абзацами
Введение: Собираем всё вместе в практическом проекте
Пришло время применить все изученные теги на практике! Мы создадим настоящую веб-страницу-визитку, которую Вы сможете показать друзьям и родным. Это будет Ваш первый полноценный HTML-документ.
Часть 1: Подготовка к работе
Что нам понадобится:
Папка "Мой первый сайт" (уже создана ранее)
Блокнот или Notepad++
Браузер для просмотра результата
Создаем новый файл:
Откройте папку "Мой первый сайт"
Щелкните правой кнопкой мыши → "Создать" → "Текстовый документ"
Назовите файл: vizitka.html
Нажмите Enter и подтвердите изменение расширения
Часть 2: Создаём базовую структуру страницы
Откройте файл vizitka.html в Блокноте и напишите:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Моя персональная страница-визитка</title>
<meta charset="utf-8">
</head>
<body>
<!-- Здесь будет содержимое нашей визитки -->
</body>
</html>
Пояснение структуры:
<!DOCTYPE html> — объявление типа документа
<html lang="ru"> — указываем язык страницы (русский)
<head> — служебная информация
<title> — заголовок вкладки браузера
<meta charset="utf-8"> — поддержка русских букв
<body> — видимое содержимое страницы
Часть 3: Наполняем страницу контентом
Добавьте в раздел <body> следующий код:
html
<body>
<!-- Главный заголовок -->
<h1>Добро пожаловать на мою страницу!</h1>
<!-- Раздел "О себе" -->
<h2>Немного о себе</h2>
<p>Здравствуйте! Меня зовут Александр, и я начинающий веб-разработчик.</p>
<p>Недавно вышел на пенсию и решил освоить новую для себя профессию - создание сайтов. Мне всегда нравилось разбираться в технике, а компьютеры вызывали особый интерес.</p>
<!-- Раздел "Мои увлечения" -->
<h2>Мои увлечения</h2>
<p>В свободное время я люблю работать в саду, читать книги и проводить время с внуками.</p>
<p>Особенно мне нравится выращивать розы - у меня уже собралась небольшая коллекция из 15 разных сортов.</p>
<!-- Раздел "Почему я учу HTML" -->
<h2>Почему я учу HTML</h2>
<p>Я верю, что никогда не поздно учиться чему-то новому. Освоение веб-разработки помогает мне поддерживать умственную активность и идти в ногу со временем.</p>
<p>Моя цель - создать собственный сайт о садоводстве, где я смогу делиться своим опытом с другими любителями растений.</p>
<!-- Разделительная линия -->
<hr>
<!-- Контактная информация -->
<h3>Контактная информация</h3>
<p>Email: alexander@example.com</p>
<p>Телефон: +7 (123) 456-78-90</p>
</body>
Часть 4: Полный код страницы-визитки
Вот как должен выглядеть полный код в Вашем Блокноте:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Моя персональная страница-визитка</title>
<meta charset="utf-8">
</head>
<body>
<h1>Добро пожаловать на мою страницу!</h1>
<h2>Немного о себе</h2>
<p>Здравствуйте! Меня зовут Александр, и я начинающий веб-разработчик.</p>
<p>Недавно вышел на пенсию и решил освоить новую для себя профессию - создание сайтов. Мне всегда нравилось разбираться в технике, а компьютеры вызывали особый интерес.</p>
<h2>Мои увлечения</h2>
<p>В свободное время я люблю работать в саду, читать книги и проводить время с внуками.</p>
<p>Особенно мне нравится выращивать розы - у меня уже собралась небольшая коллекция из 15 разных сортов.</p>
<h2>Почему я учу HTML</h2>
<p>Я верю, что никогда не поздно учиться чему-то новому. Освоение веб-разработки помогает мне поддерживать умственную активность и идти в ногу со временем.</p>
<p>Моя цель - создать собственный сайт о садоводстве, где я смогу делиться своим опытом с другими любителями растений.</p>
<hr>
<h3>Контактная информация</h3>
<p>Email: alexander@example.com</p>
<p>Телефон: +7 (123) 456-78-90</p>
</body>
</html>
Часть 5: Сохранение и просмотр результата
Сохраните файл в Блокноте: Ctrl + S
Откройте файл в браузере:
Вариант 1: Дважды щелкните по vizitka.html в папке
Вариант 2: Откройте браузер и нажмите Ctrl + O, затем выберите файл
Что Вы должны увидеть в браузере:
Крупный заголовок "Добро пожаловать на мою страницу!"
Несколько разделов с подзаголовками
Абзацы текста с отступами
Горизонтальную разделительную линию
Контактную информацию внизу
Часть 6: Анализируем структуру страницы
Давайте разберем, какие теги мы использовали и зачем:
Тег
Количество
Назначение
<h1>
1
Главный заголовок страницы
<h2>
3
Заголовки основных разделов
<h3>
1
Заголовок подраздела
<p>
7
Абзацы текста
<hr>
1
Разделительная линия
Визуальная иерархия:
text
h1: Добро пожаловать на мою страницу!
h2: Немного о себе
p: Здравствуйте! Меня зовут...
p: Недавно вышел на пенсию...
h2: Мои увлечения
p: В свободное время...
p: Особенно мне нравится...
h2: Почему я учу HTML
p: Я верю, что никогда...
p: Моя цель - создать...
hr: ───────────────────
h3: Контактная информация
p: Email: ...
p: Телефон: ...
Часть 7: Персонализируйте свою визитку
Замените примерный текст на СВОЙ собственный:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Персональная страница [Ваше Имя]</title>
<meta charset="utf-8">
</head>
<body>
<h1>Добро пожаловать на мою страницу!</h1>
<h2>Обо мне</h2>
<p>Меня зовут [Ваше Имя]. [Несколько предложений о себе].</p>
<p>[Расскажите о своем прошлом опыте и почему решили учить HTML].</p>
<h2>Мои интересы</h2>
<p>[Опишите Ваши основные увлечения и хобби].</p>
<p>[Расскажите о самом интересном увлечении подробнее].</p>
<h2>Мои цели в изучении HTML</h2>
<p>[Почему Вы решили учить веб-разработку?].</p>
<p>[Какую пользу Вы надеетесь извлечь из этих знаний?].</p>
<hr>
<h3>Как со мной связаться</h3>
<p>Email: [ваш email]</p>
<p>Телефон: [ваш телефон]</p>
</body>
</html>
Часть 8: Улучшаем визитку — дополнительные элементы
Добавьте эти элементы для большей наглядности:
Используем <br> для адреса:
html
<h3>Мой адрес</h3>
<p>ул. Садовая, дом 15<br>
город Москва<br>
123456</p>
Добавляем дополнительные разделители:
html
<h2>Мои увлечения</h2>
<p>Садоводство и цветоводство</p>
<hr style="width: 50%; margin: 10px auto;">
<p>Чтение исторических книг</p>
<hr style="width: 50%; margin: 10px auto;">
<p>Фотография природы</p>
Используем специальные символы:
html
<p>Любимое время года: весна • Любимый цветок: роза ♥</p>
Часть 9: Проверка и отладка
После сохранения файла проверьте:
Открывается ли страница в браузере?
Правильно ли отображаются русские буквы?
Если видны "кракозябры", проверьте наличие <meta charset="utf-8">
Соответствует ли структура Вашим ожиданиям?
Заголовки должны быть крупнее обычного текста
Между абзацами должны быть отступы
Линия должна разделять блоки
Частые ошибки и их решение:
Текст сливается в одну строку — забыли теги <p>
Не отображается заголовок вкладки — проверьте тег <title>
Неправильная иерархия заголовков — используйте <h1>, <h2>, <h3> по порядку
Часть 10: Дополнительное задание для практики
Создайте вторую страницу "Мои рецепты":
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои любимые рецепты</title>
<meta charset="utf-8">
</head>
<body>
<h1>Кулинарная книга</h1>
<h2>Выпечка</h2>
<h3>Блины классические</h3>
<p>Мука - 2 стакана<br>
Молоко - 500 мл<br>
Яйца - 2 штуки<br>
Сахар - 2 столовые ложки</p>
<h3>Шарлотка с яблоками</h3>
<p>Яблоки - 5 штук<br>
Мука - 1 стакан<br>
Яйца - 3 штуки<br>
Сахар - 1 стакан</p>
<hr>
<h2>Салаты</h2>
<h3>Оливье по-семейному</h3>
<p>Картофель - 4 штуки<br>
Морковь - 2 штуки<br>
Яйца - 4 штуки<br>
Колбаса - 300 грамм</p>
</body>
</html>
Заключение
Поздравляю! Вы только что создали свою первую полноценную веб-страницу!
Что Вы освоили в этом уроке:
✅ Создание правильно структурированного HTML-документа
✅ Использование заголовков разных уровней (<h1>, <h2>, <h3>)
✅ Форматирование текста с помощью абзацев (<p>)
✅ Добавление разделителей (<hr>)
✅ Сохранение и просмотр результата в браузере
Ваша страница-визитка теперь:
Имеет четкую структуру
Удобна для чтения
Корректно отображается в браузере
Может быть легко изменена и дополнена
Следующий шаг: Сохраните эту страницу и покажите её своим близким! В следующих уроках мы добавим списки, картинки и ссылки, чтобы сделать визитку еще более интересной.
- * * * -
Глава 5:
Простое оформление текста
5.1. Жирный шрифт <b> или <strong>
Введение: Визуальное выделение vs Смысловое выделение
На первый взгляд, теги <b> и <strong> делают одно и то же — делают текст жирным. Но между ними есть фундаментальная разница, которая важна для доступности, SEO и семантической разметки.
Часть 1: Базовое сравнение тегов
Тег <b> (от "bold" — жирный)
html
<b>Этот текст будет жирным</b>
Результат: <b>Этот текст будет жирным</b>
Тег <strong> (от "strong" — сильный, важный)
html
<strong>Этот текст тоже будет жирным</strong>
Результат: <strong>Этот текст тоже будет жирным</strong>
Визуально они выглядят одинаково, но имеют разное значение!
Часть 2: Ключевые различия — аналогия
Давайте используем простую аналогию с речью человека:
<b> — как повышение громкости
html
<p>Я купил <b>красные</b> яблоки и <b>зеленые</b> груши.</p>
Я купил красные яблоки и зеленые груши.
Просто визуальное выделение, без изменения смысла
<strong> — как изменение интонации
html
<p><strong>Внимание!</strong> Не забудьте полить растения вечером.</p>
Внимание!Не забудьте полить растения вечером.
Выделение важности, смены смыслового акцента
Часть 3: Технические различия
Характеристика
<b>
<strong>
Назначение
Визуальное выделение
Смысловое выделение важности
Семантика
Нет семантического значения
Имеет семантическое значение
Для скринридеров
Читается обычным тоном
Читается с измененной интонацией
SEO
Не влияет на поисковые системы
Может учитываться поисковиками
Визуальный эффект
Жирный шрифт
Жирный шрифт
Часть 4: Когда использовать <b> — примеры
Пример 1: Выделение в тексте без изменения смысла
html
<p>В саду растут <b>красные</b> розы, <b>белые</b> лилии и <b>желтые</b> тюльпаны.</p>
Пример 2: Ключевые слова в описании
html
<p>Рецепт требует: <b>свежие</b> помидоры, <b>сладкий</b> перец и <b>молодой</b> картофель.</p>
Пример 3: Выделение терминов
html
<p>В HTML тег <b><b></b> означает жирное начертание, а <b><i></b> — курсивное.</p>
Часть 5: Когда использовать <strong> — примеры
Пример 1: Предупреждения и важные уведомления
html
<p><strong>Важно!</strong> Не поливайте растения в солнечную погоду — это может вызвать ожоги листьев.</p>
Пример 2: Критическая информация
html
<p><strong>Внимание:</strong> Следующие действия нельзя отменить. Убедитесь в правильности выбора.</p>
Пример 3: Ключевые моменты инструкции
html
<p>Для посадки: <strong>выкопайте яму глубиной 50 см</strong>, добавьте удобрения, затем поместите саженец.</p>
Часть 6: Практические примеры с обоими тегами
Пример 1: Кулинарный рецепт
html
<p>Для приготовления салата Вам понадобятся:</p>
<ul>
<li><b>Свежие</b> огурцы — 2 штуки</li>
<li><b>Спелые</b> помидоры — 3 штуки</li>
<li><strong>Обязательно:</strong> соль и перец по вкусу</li>
<li><strong>Важно:</strong> заправлять непосредственно перед подачей</li>
</ul>
Пример 2: Инструкция по уходу за растениями
html
<p>Уход за розами включает:</p>
<ul>
<li><b>Регулярный</b> полив утром или вечером</li>
<li><b>Систематическая</b> подкормка удобрениями</li>
<li><strong>Обязательная</strong> обрезка весной</li>
<li><strong>Внимание:</strong> защита от заморозков зимой</li>
</ul>
Пример 3: Описание продукта
html
<p>Наш новый сорт томатов:</p>
<ul>
<li><b>Крупные</b> плоды весом до 300 грамм</li>
<li><b>Сочная</b> мякоть с насыщенным вкусом</li>
<li><strong>Особенность:</strong> устойчив к распространенным заболеваниям</li>
<li><strong>Рекомендация:</strong> выращивать в защищенном грунте</li>
</ul>
Часть 7: Как это "слышат" скринридеры1
Для слабовидящих пользователей:
С тегом <b>:
text
"В саду растут красные розы, белые лилии и желтые тюльпаны."
Обычное чтение, без акцентов"
С тегом <strong>:
text
"Внимание! [пауза, изменение интонации] Не забудьте полить растения вечером."
Изменение интонации, подчеркивание важности
1 Скринридер (от англ. screen reader — "читатель экрана") — программа, которая преобразует текстовую информацию на экране в речь или в тактильные сигналы. Другие названия — программа экранного доступа или чтения, программа чтения с экрана, экранное считывающее устройство.
Часть 8: Практическое задание
Создайте страницу с правильным использованием <b> и <strong>:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Правильное выделение текста</title>
<meta charset="utf-8">
</head>
<body>
<h1>Уход за комнатными растениями</h1>
<h2>Общие рекомендации</h2>
<p>Для <b>здорового</b> роста растений соблюдайте следующие правила:</p>
<h3>Полив</h3>
<p><b>Регулярный</b> полив — основа ухода. <strong>Важно:</strong> не допускайте пересыхания почвы.</p>
<h3>Освещение</h3>
<p>Большинство растений предпочитают <b>рассеянный</b> свет. <strong>Внимание:</strong> прямые солнечные лучи могут вызвать ожоги.</p>
<h3>Температура</h3>
<p>Поддерживайте <b>стабильную</b> температуру. <strong>Критично:</strong> избегайте резких перепадов.</p>
<h2>Частые ошибки</h2>
<p><strong>Самая распространенная ошибка:</strong> чрезмерный полив. <b>Избыточная</b> влага приводит к загниванию корней.</p>
<hr>
<p><strong>Запомните:</strong> правильный уход — залог <b>красивых</b> и <b>здоровых</b> растений!</p>
</body>
</html>
Часть 9: Советы по выбору тега
✅ Используйте <b> когда:
Нужно просто визуально выделить текст.
Выделение не меняет смысл предложения.
Это ключевые слова или термины.
Декоративное оформление.
✅ Используйте <strong> когда:
Нужно подчеркнуть важность информации.
Это предупреждение или уведомление.
Критическая информация.
Ключевые моменты инструкции.
Простой чек-лист для выбора:
Это просто красиво? → <b>
Это действительно важно? → <strong>
Скринридер должен это подчеркнуть? → <strong>
Это влияет на понимание смысла? → <strong>
Часть 10: Дополнительные возможности
Комбинирование тегов:
html
<p>Это <b><strong>очень важное</strong></b> выделение.</p>
Это очень важное выделение.
С CSS-стилизацией:
html
<style>
.warning {
font-weight: bold;
color: red;
}
</style>
<p><strong class="warning">Внимание! Опасность!</strong></p>
Часть 11: Частые ошибки
❌ НЕПРАВИЛЬНО:
html
<!-- Использование strong для простого выделения -->
<p>Купите <strong>красные</strong> яблоки и <strong>зеленые</strong> груши.</p>
<!-- Использование b для важных предупреждений -->
<p><b>Осторожно!</b> Высокое напряжение.</p>
✅ ПРАВИЛЬНО:
html
<!-- b для визуального выделения -->
<p>Купите <b>красные</b> яблоки и <b>зеленые</b> груши.</p>
<!-- strong для важных предупреждений -->
<p><strong>Осторожно!</strong> Высокое напряжение.</p>
Заключение
Краткие правила:
<b> — для визуального выделения (просто жирный шрифт)
<strong> — для смыслового выделения (важная информация)
Что Вы теперь умеете:
✅ Правильно выбирать между <b> и <strong>
✅ Понимать разницу в семантике
✅ Создавать доступный контент для скринридеров
✅ Улучшать SEO своих страниц
Запомните: Правильное использование этих тегов делает Ваш сайт не только красивым, но и понятным для всех пользователей, включая тех, кто использует вспомогательные технологии.
Теперь ваше выделение текста будет не только визуально привлекательным, но и семантически правильным!
- * * * -
5.2. Курсив <i> или <em>
Введение: Визуальный акцент vs Смысловое ударение
Как и в случае с жирным шрифтом, теги <i> и <em> визуально делают одно и то же — наклоняют текст. Но их семантическое значение различается так же фундаментально, как различаются просто "громкая речь" и "изменение интонации для передачи особого смысла".
Часть 1: Базовое сравнение тегов
Тег <i> (от "italic" — курсив)
html
<i>Этот текст будет курсивом</i>
Результат: Этот текст будет курсивом
Тег <em> (от "emphasis" — акцент, ударение)
html
<em>Этот текст тоже будет курсивом</em>
Результат: Этот текст тоже будет курсивом
Визуально оба выглядят как курсив, но несут разную смысловую нагрузку!
Часть 2: Ключевые различия — аналогия
<i> — как изменение тембра голоса
html
<p>В романе <i>Война и мир</i> Толстой описывает...</p>
<p>Термин <i>фотосинтез</i> происходит от греческих слов...</p>
В романе Война и мир Толстой описывает...
Термин фотосинтез происходит от греческих слов...
Просто визуальное выделение, как бы "другим голосом"
<em> — как смысловое ударение
html
<p>Я <em>действительно</em> хочу научиться создавать сайты.</p>
<p>Это <em>самый</em> важный шаг в процессе посадки.</p>
Я действительно хочу научиться создавать сайты.
Это самый важный шаг в процессе посадки.
Изменение интонации для передачи особого смысла
Часть 3: Технические различия
Характеристика
<i>
<em>
Назначение
Визуальное выделение
Смысловое ударение
Семантика
Нет семантического значения
Имеет семантическое значение
Для скринридеров
Читается обычным тоном
Читается с измененной интонацией
SEO
Не влияет на поисковые системы
Может учитываться поисковиками
Визуальный эффект
Курсив
Курсив
Вложенность
Не усиливается при вложении
Усиливается при вложении
Часть 4: Когда использовать <i> — примеры
Пример 1: Названия произведений
html
<p>Я перечитываю <i>Преступление и наказание</i> Достоевского.</p>
<p>Смотрю фильм <i>Ирония судьбы, или С лёгким паром!</i></p>
Пример 2: Иностранные слова и термины
html
<p>Слово <i>компьютер</i> пришло из английского языка.</p>
<p>В ботанике используется термин <i>фотосинтез</i>.</p>
Пример 3: Научные названия
html
<p>Роза относится к виду <i>Rosa</i> семейства Розоцветные.</p>
<p>Картофель — <i>Solanum tuberosum</i>.</p>
Пример 4: Мысли, сны, мечты
html
<p><i>Интересно, получится ли у меня создать свой сайт?</i> — подумал я.</p>
<p>Ему приснилось: <i>я гуляю по цветущему саду</i>.</p>
Часть 5: Когда использовать <em> — примеры
Пример 1: Смысловое ударение
html
<p>Я <em>обязательно</em> научусь создавать сайты.</p>
<p>Это <em>именно</em> то, что мне нужно.</p>
Пример 2: Противопоставление
html
<p>Я хочу не просто сайт, а <em>красивый и удобный</em> сайт.</p>
<p>Поливать нужно утром, <em>а не</em> в полдень.</p>
Пример 3: Важные акценты в инструкциях
html
<p>Перед посадкой <em>обязательно</em> удобрите почву.</p>
<p><em>Ни в коем случае</em> не поливайте растение днём на солнце.</p>
Часть 6: Практические примеры с обоими тегами
Пример 1: Литературный обзор
html
<p>Вчера я перечитывал <i>Евгения Онегина</i> Пушкина и <em>действительно</em> восхитился красотой языка. Главный герой — <i>Онегин</i> — показан как <em>чрезвычайно</em> сложная личность.</p>
Пример 2: Научная статья
html
<p>Процесс <i>фотосинтеза</i> — это <em>основной</em> способ питания растений.
Термин происходит от греческих слов <i>phōs</i> (свет) и <i>synthesis</i>
(соединение). <em>Важно понимать</em>, что без этого процесса жизнь на Земле была бы невозможна.</p>
Пример 3: Личный дневник
html
<p><i>Сегодня такой прекрасный день!</i> — подумал я, выходя в сад.
<em>Обязательно</em> нужно пересадить розы. Прочитал в книге
<i>Секреты садоводства</i>, что это <em>лучше</em> делать весной.</p>
Часть 7: Особенность вложенности тегов
Тег <i> при вложении:
html
<p>Это <i>просто <i>курсив</i> внутри курсива</i>.</p>
Визуальный эффект не усиливается
Тег <em> при вложении:
html
<p>Это <em>очень <em>важный</em> акцент</em>.</p>
Скринридер усиливает интонацию на вложенном элементе
Часть 8: Как это "слышат" скринридеры
Для слабовидящих пользователей:
С тегом <i>:
text
"Роман Война и мир Толстого считается классикой литературы."
Обычное чтение, без акцентов
С тегом <em>:
text
"Я [пауза, изменение интонации] действительно [возврат к обычной интонации] хочу научиться..."
Изменение интонации на выделенном слове
Часть 9: Практическое задание
Создайте страницу с правильным использованием <i> и <em>:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Курсив и смысловые акценты</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мои литературные предпочтения</h1>
<h2>Любимые произведения</h2>
<p>Среди моих любимых книг — <i>Мастер и Маргарита</i> Булгакова
и <i>Анна Каренина</i> Толстого. Я <em>действительно</em> считаю,
что это величайшие произведения русской литературы.</p>
<h2>Чтение на иностранных языках</h2>
<p>Недавно я начал читать <i>Harry Potter</i> в оригинале.
Слово <i>wand</i> означает "волшебная палочка".
<em>Очень</em> рекомендую такой способ изучения языка!</p>
<h2>Ботанические интересы</h2>
<p>В саду я выращиваю <i>Rosa rugosa</i> (роза морщинистая)
и <i>Paeonia lactiflora</i> (пион молочноцветковый).
<em>Обязательно</em> нужно подкармливать их весной.</p>
<h2>Мои мысли</h2>
<p><i>Интересно, смогу ли я когда-нибудь создать свой собственный
сайт о литературе и садоводстве?</i> — часто думаю я.
Но я <em>точно</em> знаю, что буду стараться!</p>
<hr>
<p><em>Важно:</em> все названия произведений и научные термины
выделены с помощью <i><i></i>, а смысловые акценты —
с помощью <i><em></i>.</p>
</body>
</html>
Часть 10: Советы по выбору тега
✅ Используйте <i> когда:
Названия книг, фильмов, картин
Иностранные слова и термины
Научные названия (латынь)
Мысли, сны, цитаты
Технические термины
✅ Используйте <em> когда:
Нужно сделать смысловое ударение
Противопоставление в предложении
Важные акценты в инструкциях
Эмоциональное выделение
Критически важная информация
Простой чек-лист для выбора:
Это название или термин? → <i>
Нужно изменить интонацию при чтении? → <em>
Это просто оформление? → <i>
Это влияет на понимание смысла? → <em>
Часть 11: Комбинирование с другими тегами
С жирным шрифтом:
html
<p>Это <b><i>очень важный термин</i></b> в ботанике.</p>
<p><strong><em>Внимание! Это критически важно!</em></strong></p>
В списках:
html
<ul>
<li><i>Rosa</i> — род растений семейства Розоцветные</li>
<li><em>Обязательно</em> поливайте утром или вечером</li>
<li>Книга <i>Сад для начинающих</i> — <em>лучший</em> помощник</li>
</ul>
Часть 12: Историческая справка
HTML4 и ранее:
<i> — только визуальное оформление
<em> — только семантическое выделение
HTML5 (современный стандарт):
<i> — получил семантическое значение для конкретных случаев
<em> — сохранил семантику смыслового ударения
Часть 13: Частые ошибки
❌ НЕПРАВИЛЬНО:
html
<!-- Использование em для названий -->
<p>Читаю <em>Войну и мир</em> Толстого.</p>
<!-- Использование i для смысловых акцентов -->
<p>Я <i>обязательно</i> приду завтра.</p>
<!-- Путаница с визуальным и смысловым -->
<p><i>Внимание!</i> Осторожно, скользко.</p>
✅ ПРАВИЛЬНО:
html
<!-- i для названий -->
<p>Читаю <i>Войну и мир</i> Толстого.</p>
<!-- em для смысловых акцентов -->
<p>Я <em>обязательно</em> приду завтра.</p>
<!-- strong для важных предупреждений -->
<p><strong>Внимание!</strong> Осторожно, скользко.</p>
Заключение
Краткие правила:
<i> — для визуального и семантического выделения названий, терминов, мыслей
<em> — для смыслового ударения и изменения интонации
Что Вы теперь умеете:
✅ Правильно выбирать между <i> и <em>.
✅ Понимать разницу в семантике и доступности.
✅ Создавать тексты, понятные скринридерам.
✅ Профессионально оформлять литературные и научные тексты.
Золотое правило:
Если выделение меняет произношение текста — используйте <em>.
Если выделение меняет категорию текста (название, термин) — используйте <i>.
Теперь Ваши тексты будут не только красиво оформлены, но и семантически корректны, что особенно важно для образовательного и научного контента!
- * * * -
5.3. Почему есть два варианта? Разница между внешним видом и важностью.
Введение: Разделение ответственности — основа современного веб-дизайна
Существование пар тегов <b>/<strong> и <i>/<em> — это не случайность, а продуманное архитектурное решение. Давайте разберемся, почему разработчики HTML пошли по этому пути и какая философия стоит за этим разделением.
Часть 1: Исторический контекст — эволюция HTML
HTML 1.0-3.2: Эпоха визуального дизайна
html
<!-- Ранний HTML был ориентирован на внешний вид -->
<font size="5" color="red">Важный текст</font>
<b>Жирный текст</b>
<i>Курсивный текст</i>
<u>Подчеркнутый текст</u>
Проблема: Смешение структуры и оформления приводило к:
Недоступности для людей с ограниченными возможностями
Сложностям с поисковой оптимизацией
Трудностям в поддержке и изменении дизайна
HTML 4.0: Начало семантической революции
Введение тегов с семантическим значением:
<strong> вместо <b> для важного контента
<em> вместо <i> для акцентированного контента
<cite> для цитат и названий
HTML5: Баланс семантики и гибкости
Разработчики нашли компромисс:
<b> и <i> получили новые семантические роли
<strong> и <em> сохранили роль смыслового выделения
Часть 2: Философская разница — аналогии из реальной жизни
Аналогия 1: Дорожные знаки vs. Рекламные баннеры
<b>, <i> — как рекламные баннеры:
html
<p>Купите <b>красные</b> яблоки и <i>спелые</i> груши.</p>
Просто привлекают внимание, не меняя правил
<strong>, <em> — как дорожные знаки:
html
<p><strong>Стоп!</strong> Опасный поворот.</p>
<p>Поворачивайте <em>только</em> налево.</p>
Несут важную информацию, влияющую на поведение
Аналогия 2: Выделение маркером vs Подчеркивание ручкой
<b>, <i> — выделение маркером:
html
<p>В рецепте нужны <b>свежие</b> помидоры и <i>молодой</i> картофель.</p>
Просто визуальное выделение ключевых слов.
<strong>, <em> — подчеркивание ручкой:
html
<p><strong>Внимание!</strong> Не добавляйте <em>ни в коем случае</em> соль.</p>
Выделение, меняющее смысл и важность.
Часть 3: Техническая разница — как это работает "под капотом"
DOM-дерево и семантика:
html
<!-- Браузер создает такую структуру в памяти -->
<div>
<p>Это <b>просто жирный</b> текст</p>
<p>Это <strong>важный</strong> текст</p>
</div>
Для <b>: Браузер видит просто текст с особым оформлением
Для <strong>: Браузер понимает, что этот текст имеет особую важность
Доступность (Accessibility):
Скринридеры (NVDA, JAWS, VoiceOver):
html
<p>Цена: <b>100 рублей</b>. <strong>Акция!</strong> Только сегодня.</p>
Озвучивание:
"Цена: 100 рублей. [обычным тоном]"
"Акция! [измененной интонацией] Только сегодня."
Часть 4: Практические сценарии использования
Сценарий 1: Интернет-магазин
html
<div class="product">
<h3>Смартфон <i>SuperPhone X</i></h3>
<p>Цвет: <b>черный</b>, <b>белый</b>, <b>синий</b></p>
<p><strong>Осталось всего 3 штуки!</strong></p>
<p><em>Доставка только</em> по Москве</p>
</div>
Разбор:
<i> — название модели (семантика названия)
<b> — варианты цвета (визуальное выделение)
<strong> — важная информация о количестве
<em> — ограничение по доставке (смысловой акцент)
Сценарий 2: Медицинский сайт
html
<div class="instruction">
<h3>Прием лекарства <i>Aspirin</i></h3>
<p>Дозировка: <b>1 таблетка</b> 3 раза в день</p>
<p><strong>Противопоказания:</strong> беременность</p>
<p><em>Обязательно</em> проконсультируйтесь с врачом</p>
</div>
Часть 5: Влияние на поисковую оптимизацию (SEO)
Как поисковые системы видят разницу:
Google/Yandex для <b>/<i>:
text
"Это просто оформление, не влияющее на релевантность"
Google/Yandex для <strong>/<em>:
text
"Этот контент автор считает важным - учтем при ранжировании"
Практический SEO-пример:
html
<article>
<h1>Выращивание помидоров</h1>
<p>Сорт <i>Бычье сердце</i> требует особого ухода.</p>
<p><strong>Самая важная процедура</strong> — правильный полив.</p>
<p><em>Никогда</em> не поливайте в солнечную погоду.</p>
<p>Удобрения: <b>органические</b> и <b>минеральные</b>.</p>
</article>
Поисковая система поймет:
Часть 6: Будущее веб-стандартов — почему это важно
Тенденции развития:
Умные помощники (Алиса, Сири, Алекса)
Голосовой поиск
Автоматические рерайтинг и суммаризация
Доступность как стандарт
Как семантические теги помогают:
html
<!-- Голосовой помощник понимает структуру -->
<article>
<p>Рецепт требует <b>спелые</b> помидоры.</p>
<p><strong>Критически важно:</strong> не использовать алюминиевую посуду.</p>
<p>Блюдо <i>Рататуй</i> готовится 40 минут.</p>
</article>
Голосовой помощник может:
Выделить ключевые ингредиенты ("спелые помидоры")
Предупредить об опасности ("критически важно")
Правильно произнести название ("Рататуй")
Часть 7: Практическое упражнение — анализ и исправление
Давайте проанализируем и улучшим код:
Исходный код (с ошибками):
html
<p><i>Внимание!</i> Товар <b>очень</b> популярен.</p>
<p><em>iPhone 15</em> стоит <strong>99 000 рублей</strong>.</p>
<p>Цвета: <em>черный, белый, красный</em>.</p>
Исправленный код:
html
<p><strong>Внимание!</strong> Товар <em>очень</em> популярен.</p>
<p><i>iPhone 15</i> стоит <b>99 000 рублей</b>.</p>
<p>Цвета: <b>черный, белый, красный</b>.</p>
Объяснение исправлений:
"Внимание!" — важное предупреждение → <strong>
"очень" — смысловое ударение → <em>
"iPhone 15" — название продукта → <i>
"99 000 рублей" — визуальное выделение цены → <b>
Цвета — варианты характеристик → <b>
Часть 8: Советы для правильного выбора
Простой алгоритм выбора:
Задайте вопрос: "Что я хочу передать?"
"Просто выделить визуально" → <b>/<i>
"Подчеркнуть важность" → <strong>/<em>
Проверка на "озвучивание":
Произнесите текст вслух
Если нужно изменить интонацию → <strong>/<em>
Если просто выделить слово → <b>/<i>
Проверка на доступность:
"Понятно ли будет скринридеру?"
"Нужно ли подчеркнуть важность для незрячих?"
Чек-лист для самопроверки:
Ситуация
Тег
Почему
Название книги
<i>
Семантика названия
Важное предупреждение
<strong>
Критическая важность
Ключевое слово
<b>
Визуальное выделение
Смысловой акцент
<em>
Изменение интонации
Иностранное слово
<i>
Выделение иноязычного
Противопоставление
<em>
Смысловое ударение
Часть 9: Будущее развитие навыков
Что изучать дальше:
CSS — для полного контроля над внешним видом
ARIA-атрибуты — для улучшения доступности
Микроразметка — для лучшего понимания поисковиками
Веб-стандарты — чтобы быть в курсе изменений
Пример профессионального подхода:
html
<article itemscope itemtype="https://schema.org/Recipe">
<h1 itemprop="name">Салат <i>Оливье</i></h1>
<p><strong itemprop="description">Классический праздничный салат</strong></p>
<div itemprop="ingredients">
<p>Ингредиенты: <b>картофель</b>, <b>морковь</b>, <b>горошек</b></p>
</div>
<p><em itemprop="recipeInstructions">Важно:</em> нарезать мелкими кубиками</p>
</article>
Заключение
Главные выводы:
Разделение визуального и семантического — основа современной вёрстки веб-сайтов.
<b>, <i> — для оформления и специальных случаев (названия, термины)
<strong>, <em> — для передачи важности и смысловых акцентов
Правильный выбор улучшает доступность, SEO и пользовательский опыт
Почему это важно именно для вас:
Создаете доступные сайты для всех пользователей
Улучшаете позиции в поисковых системах
Делаете контент понятным для умных помощников
Следуете современным стандартам веб-разработки
Запомните: Хороший разработчик думает не только о том, как сайт выглядит, но и о том, как он "понимается" браузерами, поисковиками и вспомогательными технологиями.
Теперь Вы не просто делаете текст жирным или курсивным — Вы передаете смысл и важность!
- * * * -
5.4. Практика: выделяем важные мысли на своей визитке
Введение: Превращаем обычную визитку в эффективную
Теперь мы научимся правильно расставлять акценты на Вашей веб-визитке. Правильное выделение важных мыслей сделает Вашу страницу не только красивой, но и эффективной — посетители сразу увидят самое главное.
Часть 1: Подготовка — открываем нашу визитку
Найдите файл vizitka.html в папке "Мой первый сайт"
Откройте его в Блокноте (правой кнопкой → Открыть с помощью → Блокнот)
Создайте резервную копию (сохраните как vizitka_backup.html)
Часть 2: Анализ контента — что нужно выделить?
Давайте разберем нашу визитку и определим, какие элементы требуют особого внимания:
Какие элементы обычно выделяют:
✅ Ключевые навыки и компетенции
✅ Важные достижения и опыт
✅ Контактную информацию
✅ Призывы к действию
✅ Особые умения
✅ Уникальные предложения
Часть 3: Пошаговое улучшение визитки
Шаг 1: Добавляем структуру и заголовки
Было:
html
<h1>Добро пожаловать на мою страницу!</h1>
Стало:
html
<h1>Добро пожаловать на мою страницу!</h1>
<p>Меня зовут <strong>Александр Петров</strong> — <em>начинающий веб-разработчик</em> с большим энтузиазмом и желанием учиться.</p>
Шаг 2: Выделяем ключевые навыки
Было:
html
<h2>Немного о себе</h2>
<p>Здравствуйте! Меня зовут Александр, и я начинающий веб-разработчик.</p>
<p>Недавно вышел на пенсию и решил освоить новую для себя профессию...</p>
Стало:
html
<h2>Немного о себе</h2>
<p>Здравствуйте! Меня зовут <strong>Александр</strong>, и я <em>начинающий веб-разработчик</em>.</p>
<p>После <b>35 лет</b> работы инженером решил освоить новую профессию — <strong>создание сайтов</strong>. Обладаю <b>техническим складом ума</b> и <strong>усидчивостью</strong>, что помогает в изучении программирования.</p>
Шаг 3: Акцентируем увлечения и хобби
Было:
html
<h2>Мои увлечения</h2>
<p>В свободное время я люблю работать в саду, читать книги и проводить время с внуками.</p>
<p>Особенно мне нравится выращивать розы...</p>
Стало:
html
<h2>Мои увлечения</h2>
<p>В свободное время я <em>обожаю</em> работать в саду, читать <i>исторические романы</i> и проводить время с внуками.</p>
<p><strong>Особая страсть</strong> — выращивание роз. У меня <b>коллекция из 15 сортов</b>, включая <i>чайно-гибридные</i> и <i>плетистые1</i> разновидности.</p>
Шаг 4: Подчеркиваем мотивацию и цели
Было:
html
<h2>Почему я учу HTML</h2>
<p>Я верю, что никогда не поздно учиться чему-то новому...</p>
<p>Моя цель - создать собственный сайт о садоводстве...</p>
Стало:
html
<h2>Почему я учу HTML</h2>
<p>Я <strong>твердо верю</strong>, что <em>никогда не поздно</em> учиться чему-то новому. Освоение веб-разработки помогает мне <b>поддерживать умственную активность</b> и идти в ногу со временем.</p>
<p><strong>Моя главная цель</strong> — создать <em>собственный сайт о садоводстве</em>, где я смогу делиться своим <b>многолетним опытом</b> с другими любителями растений.</p>
1 Плетистые розы — группа роз с длинными гибкими побегами, требующими опоры. Как правило, побеги покрыты шипами, а на концах стеблей и на боковых побегах образуются цветочные бутоны, одиночные или собранные в кисти.
Часть 4: Полная улучшенная версия визитки
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Александр Петров - Начинающий веб-разработчик</title>
<meta charset="utf-8">
</head>
<body>
<h1>Добро пожаловать на мою страницу!</h1>
<p>Меня зовут <strong>Александр Петров</strong> — <em>начинающий веб-разработчик</em> с большим энтузиазмом и желанием учиться.</p>
<h2>Профессиональный путь</h2>
<p>После <b>35 лет</b> успешной работы инженером-проектировщиком принял решение освоить <strong>современную цифровую-профессию</strong>. Прошел <em>самостоятельное
обучение</em> основам HTML и CSS, продолжаю углублять знания ежедневно.</p>
<p><strong>Ключевые качества:</strong> <b>аналитическое мышление</b>, <b>внимание к деталям</b>, <b>усидчивость</b> и <em>непрерывное стремление к развитию</em>.</p>
<h2>Мои увлечения и хобби</h2>
<p><em>Страстный садовод</em> с <b>20-летним стажем</b>. Специализируюсь на выращивании <i>роз</i> и <i>плодовых кустарников</i>. Моя коллекция включает <strong>15 уникальных сортов роз</strong>, включая редкие <i>английские сорта</i> Дэвида Остина.</p>
<p>Также увлекаюсь <i>исторической литературой</i> и <b>цифровой фотографией</b> природы. Провожу <em>мастер-классы</em> по садоводству для соседей и друзей.</p>
<h2>Почему я выбрал веб-разработку</h2>
<p><strong>Искренне верю</strong>, что <em>возраст — не помеха</em> для освоения новых технологий. Веб-разработка позволяет <b>сохранять ясность ума</b>, <b>развивать логическое мышление</b> и <em>быть частью современного мира</em>.</p>
<p><strong>Моя амбициозная цель</strong> — создание <i>интерактивного портала</i> для садоводов-любителей, где можно будет обмениваться опытом, вести <b>дневники растений</b> и находить единомышленников.</p>
<hr>
<h2>Контакты и сотрудничество</h2>
<p><strong>Готов к взаимовыгодному сотрудничеству!</strong> Ищу <em>наставника</em> в веб-разработке и <em>единомышленников</em> для совместных проектов.</p>
<h3>Контактная информация</h3>
<p><strong>Email:</strong> aleksandr.petrov@example.com</p>
<p><strong>Телефон:</strong> +7 (123) 456-78-90</p>
<p><strong>Город:</strong> <i>Москва</i></p>
<p><em>Открыт для новых знакомств и интересных предложений!</em></p>
</body>
</html>
Часть 5: Анализ наших улучшений
Что мы выделили и почему:
Элемент
Тег
Причина выделения
Имя
<strong>
Главная идентификационная информация
Стаж работы
<b>
Важная количественная информация
Ключевые качества
<b>
Визуальное выделение списка качеств
Страстный садовод
<em>
Эмоциональная характеристика
Названия сортов
<i>
Специальные термины и названия
Коллекция роз
<strong>
Важное достижение
Возраст — не помеха
<em>
Смысловой акцент на философии
Амбициозная цель
<strong>
Ключевая мотивационная информация
Готов к сотрудничеству
<strong>
Важный призыв к действию
Часть 6: Практическое задание — создайте свою уникальную визитку
Инструкция по созданию персонализированной визитки:
Создайте новый файл my_vizitka.html
Используйте шаблон ниже, заполнив его СВОИМИ данными:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>[Ваше Имя] - [Ваша специализация]</title>
<meta charset="utf-8">
</head>
<body>
<h1>Добро пожаловать на мою персональную страницу!</h1>
<p>Меня зовут <strong>[Ваше Имя Фамилия]</strong> — [ваша краткая характеристика].</p>
<h2>Мой опыт и навыки</h2>
<p>[Ваши профессиональные навыки]. Обладаю <b>[ключевое качество 1]</b>, <b>[качество 2]</b> и <strong>[самое важное качество]</strong>.</p>
<p>Прошел(ла) <em>[обучение/курсы]</em> и продолжаю развиваться в направлении <i>[ваша цель]</i>.</p>
<h2>Мои увлечения</h2>
<p><em>[Основное хобби]</em> — это моя страсть уже <b>[количество] лет</b>. Особенно люблю <i>[конкретный аспект]</i> и <i>[другой аспект]</i>.</p>
<p>Также увлекаюсь <b>[второстепенное хобби 1]</b> и
<b>[второстепенное хобби 2]</b>.</p>
<h2>Мои цели в веб-разработке</h2>
<p><strong>Главная цель</strong> — <em>[ваша основная цель]</em>.
Верю, что <b>[ваша философия или убеждение]</b>.</p>
<p>Планирую создать <i>[описание Вашего будущего проекта]</i>, который поможет <b>[польза от проекта]</b>.</p>
<hr>
<h2>Контакты</h2>
<p><strong>Email:</strong> [ваш email]</p>
<p><strong>Телефон:</strong> [ваш телефон]</p>
<p><strong>Город:</strong> <i>[ваш город]</i></p>
<p><em>[Ваш заключительный призыв или пожелание]</em></p>
</body>
</html>
Часть 7: Проверка и тестирование
Что проверить после создания:
Визуальная проверка в браузере:
Открыть файл в браузере.
Убедиться, что выделения заметны.
Проверить читабельность текста.
Семантическая проверка:
Прочитать текст вслух.
Убедиться, что акценты звучат естественно.
Проверить, не перегружен ли текст выделениями.
Техническая проверка:
Все теги закрыты правильно.
Русские буквы отображаются корректно.
Страница загружается без ошибок.
Чек-лист качества визитки:
Имя выделено <strong>.
Ключевые навыки выделены <b> или <strong>.
Особые увлечения выделены <em>.
Названия и термины выделены <i>.
Цели и мотивация подчеркнуты.
Контакты легко найти.
Текст не перегружен выделениями.
Общее впечатление профессиональное.
Часть 8: Дополнительные улучшения
Добавьте стили для большего эффекта:
html
<head>
<title>Моя визитка</title>
<meta charset="utf-8">
<style>
strong {
color: #2c3e50;
}
em {
color: #e74c3c; font-style: italic;
}
b {
color: #27ae60;
}
</style>
</head>
Добавьте разделители между секциями:
html
<hr style="border: 1px dashed #ccc; margin: 30px 0;">
<h2>Следующий раздел</h2>
Заключение
Что Вы достигли в этом уроке:
✅ Научились правильно расставлять акценты в тексте.
✅ Поняли разницу между визуальным и смысловым выделением.
✅ Создали профессиональную веб-визитку с правильной семантикой.
✅ Научились анализировать контент на предмет важных элементов.
✅ Освоили практическое применение тегов <b>, <strong>, <i>, <em>.
Ваша визитка теперь:
Привлекает внимание к ключевой информации.
Легко читается и сканируется.
Производит профессиональное впечатление.
Доступна для скринридеров и поисковых систем.
Эффективно передает вашу уникальность и компетенции.
Следующий шаг: Покажите свою визитку друзьям и родным! Спросите их мнение — какие элементы привлекают внимание в первую очередь, что запоминается лучше всего. Это поможет Вам еще больше улучшить свои навыки веб-разработки!
- * * * -
Часть 3:
Создаём современную и удобную страницу
Глава 6: Списки — для порядка и структуры
6.1. Маркированный список <ul> и <li> (для перечня чего угодно)
Введение: Организуем информацию с помощью списков
Представьте, что Вам нужно записать список продуктов для покупки или перечислить Ваши увлечения. Если просто написать их в строку через запятую, читать будет неудобно. Маркированные списки решают эту проблему — они делают любые перечни наглядными, структурированными и легко читаемыми.
Часть 1: Что такое маркированный список?
Маркированный список — это список элементов, где каждый элемент помечен специальным символом (маркером), обычно точкой, кружком или квадратиком.
Базовая структура:
html
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Часть 2: Теги маркированного списка и их назначение
<ul> (Unordered List — неупорядоченный список)
Главный контейнер для всего списка.
Обозначает, что порядок элементов не важен.
По умолчанию добавляет отступы слева.
<li> (List Item — элемент списка)
Каждый отдельный пункт списка.
Должен находиться внутри <ul> или <ol>.
Автоматически начинается с новой строки.
Часть 3: Простые примеры использования
Пример 1: Список покупок
html
<h3>Список продуктов</h3>
<ul>
<li>Молоко</li>
<li>Хлеб</li>
<li>Яйца</li>
<li>Сыр</li>
<li>Фрукты</li>
</ul>
Пример 2: Список увлечений
html
<h3>Мои хобби</h3>
<ul>
<li>Садоводство</li>
<li>Чтение книг</li>
<li>Фотография</li>
<li>Вязание</li>
<li>Приготовление выпечки</li>
</ul>
Пример 3: Список навыков
html
<h3>Что я умею в HTML</h3>
<ul>
<li>Создавать заголовки</li>
<li>Форматировать текст</li>
<li>Добавлять абзацы</li>
<li>Создавать списки</li>
<li>Добавлять изображения</li>
</ul>
Часть 4: Многоуровневые (вложенные) списки
Вы можете создавать списки внутри списков для сложной структуры:
Пример: Планы на неделю
html
<h3>Мои планы на неделю</h3>
<ul>
<li>Понедельник
<ul>
<li>Купить продукты</li>
<li>Полить цветы</li>
</ul>
</li>
<li>Вторник
<ul>
<li>Урок HTML</li>
<li>Приготовить обед</li>
</ul>
</li>
<li>Среда
<ul>
<li>Встреча с друзьями</li>
<li>Чтение книги</li>
</ul>
</li>
</ul>
Важно: Каждый вложенный список помещается внутрь тега <li> родительского списка.
Часть 5: Комбинирование списков с другими тегами
Пример 1: Списки с выделением текста
html
<h3>Рецепт салата</h3>
<ul>
<li><strong>Помидоры</strong> — 2 штуки</li>
<li><em>Свежие</em> огурцы — 3 штуки</li>
<li>Лук <i>красный</i> — 1 головка</li>
<li><b>Соль</b> и перец по вкусу</li>
</ul>
Пример 2: Список с ссылками
html
<h3>Полезные сайты для учебы</h3>
<ul>
<li><a href="https://htmlbook.ru">HTML Book</a> — справочник по HTML</li>
<li><a href="https://validator.w3.org">W3C Validator</a> — проверка кода</li>
<li><a href="https://ru.wikipedia.org">Википедия</a> — энциклопедия</li>
</ul>
Часть 6: Практическое задание
Создайте страницу "Мои интересы" с использованием списков:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои интересы и увлечения</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мир моих увлечений</h1>
<h2>Любимые занятия</h2>
<ul>
<li><strong>Садоводство</strong> — выращиваю цветы и овощи</li>
<li><em>Кулинария</em> — люблю готовить новые блюда</li>
<li><b>Чтение</b> — предпочитаю исторические романы</li>
<li>Фотография — снимаю природу и семью</li>
</ul>
<h2>Что выращиваю в саду</h2>
<ul>
<li>Цветы
<ul>
<li>Розы
<ul>
<li>Чайно-гибридные</li>
<li>Плетистые</li>
<li>Почвопокровные</li>
</ul>
</li>
<li>Пионы</li>
<li>Тюльпаны</li>
</ul>
</li>
<li>Овощи
<ul>
<li>Помидоры</li>
<li>Огурцы</li>
<li>Картофель</li>
</ul>
</li>
<li>Зелень
<ul>
<li>Укроп</li>
<li>Петрушка</li>
<li>Базилик</li>
</ul>
</li>
</ul>
<h2>Мои цели в изучении HTML</h2>
<ul>
<li>Научиться создавать красивые сайты</li>
<li>Сделать персональный блог о садоводстве</li>
<li>Помогать друзьям с их сайтами</li>
<li>Не отставать от современных технологий</li>
</ul>
</body>
</html>
Часть 7: Типы маркеров (CSS-стилизация)
Хотя в чистом HTML нельзя изменить маркеры, с помощью CSS можно использовать разные стили:
Круглые маркеры (по умолчанию):
html
<ul style="list-style-type: disc;">
<li>Элемент с круглым маркером</li>
</ul>
Квадратные маркеры:
html
<ul style="list-style-type: square;">
<li>Элемент с квадратным маркером</li>
</ul>
Пустые кружки:
html
<ul style="list-style-type: circle;">
<li>Элемент с пустым маркером</li>
</ul>
Без маркеров:
html
<ul style="list-style-type: none;">
<li>Элемент без маркера1</li>
</ul>
Часть 8: Частые ошибки и как их избежать
❌ НЕПРАВИЛЬНО:
html
<!-- Тег li вне ul -->
<li>Элемент без списка</li>
<!-- Неправильная вложенность -->
<ul>
<li>Элемент</li>
<ul> <!-- Должен быть внутри li -->
<li>Подэлемент</li>
</ul>
</ul>
<!-- Забыли закрыть теги -->
<ul>
<li>Первый элемент
<li>Второй элемент
</ul>
✅ ПРАВИЛЬНО:
html
<!-- Правильная структура -->
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ul>
<!-- Правильная вложенность -->
<ul>
<li>Элемент
<ul>
<li>Подэлемент</li>
</ul>
</li>
</ul>
1 Используется при создании меню навигации на веб-сайте.
Часть 9: Семантика и доступность
Для скринридеров:
Когда скринридер встречает список, он сообщает:
"Список из 5 элементов"
После каждого элемента: "элемент списка"
При завершении: "конец списка"
Для поисковых систем:
Списки помогают поисковикам понимать структуру контента и выделять ключевые элементы.
Часть 10: Дополнительные возможности
Список с описаниями:
html
<ul>
<li>
<strong>HTML</strong> — язык разметки для создания веб-страниц
</li>
<li>
<strong>CSS</strong> — язык стилей для оформления веб-страниц
</li>
</ul>
Список с иконками (с помощью CSS):
html
<ul style="list-style-type: '✓ ';">
<li>Выполненная задача</li>
<li>Еще одна задача</li>
</ul>
Заключение
Что Вы теперь умеете:
✅ Создавать простые маркированные списки
✅ Строить многоуровневые вложенные списки
✅ Комбинировать списки с другими HTML-тегами
✅ Избегать распространенных ошибок
✅ Понимать семантику списков
Преимущества использования списков:
🎯 Улучшают читаемость — информация воспринимается легче
🎯 Структурируют контент — помогают организовать мысли
🎯 Улучшают доступность — помогают скринридерам
🎯 Повышают SEO — поисковики лучше понимают структуру
Когда использовать маркированные списки:
Перечни объектов, предметов, понятий
Списки без определенного порядка
Перечисления характеристик
Любые наборы однородных элементов
Теперь Вы можете превращать скучные текстовые перечисления в красивые, структурированные списки, которые легко читать и понимать!
- * * * -
6.2. Нумерованный список <ol> и <li> (для инструкций или рецептов)
Введение: Порядок имеет значение!
Когда последовательность действий важна, на помощь приходят нумерованные списки. В отличие от маркированных списков, где порядок не важен, нумерованные списки показывают четкую последовательность шагов — как в рецептах, инструкциях или руководствах.
Часть 1: Что такое нумерованный список?
Нумерованный список — это список элементов, где каждый элемент пронумерован по порядку. Браузер автоматически присваивает номера, которые обновляются при добавлении или удалении элементов.
Базовая структура:
html
<ol>
<li>Первый шаг</li>
<li>Второй шаг</li>
<li>Третий шаг</li>
</ol>
Часть 2: Теги нумерованного списка и их назначение
<ol> (Ordered List — упорядоченный список)
Главный контейнер для нумерованного списка.
Обозначает, что порядок элементов важен.
Автоматически нумерует элементы (1, 2, 3…).
<li> (List Item — элемент списка)
Каждый отдельный шаг или пункт.
Работает так же, как в маркированных списках.
Номер присваивается автоматически.
Часть 3: Простые примеры использования
Пример 1: Рецепт приготовления чая
html
<h3>Приготовление чая</h3>
<ol>
<li>Вскипятите воду</li>
<li>Обдайте чайник кипятком</li>
<li>Положите заварку в чайник</li>
<li>Залейте кипятком</li>
<li>Настаивайте 5-7 минут</li>
</ol>
Пример 2: Инструкция по посадке растений
html
<h3>Посадка розы</h3>
<ol>
<li>Выкопайте яму 50×50 см</li>
<li>На дно насыпьте дренаж</li>
<li>Добавьте удобрения</li>
<li>Поместите саженец в яму</li>
<li>Засыпьте землей и уплотните</li>
<li>Обильно полейте</li>
</ol>
Пример 3: Утренние мероприятия
html
<h3>Мое утро</h3>
<ol>
<li>Проснуться в 7:00</li>
<li>Сделать зарядку</li>
<li>Принять душ</li>
<li>Позавтракать</li>
<li>Проверить почту</li>
<li>Начать работу над HTML</li>
</ol>
Часть 4: Атрибуты нумерованного списка
start — начать с определенного номера
html
<ol start="5">
<li>Пятый шаг</li>
<li>Шестой шаг</li>
<li>Седьмой шаг</li>
</ol>
reversed — обратная нумерация
html
<ol reversed>
<li>Третий шаг</li>
<li>Второй шаг</li>
<li>Первый шаг</li>
</ol>
type — тип нумерации
html
<!-- Арабские цифры (по умолчанию) -->
<ol type="1">
<li>Первый</li>
<li>Второй</li>
</ol>
<!-- Заглавные буквы -->
<ol type="A">
<li>Первый</li>
<li>Второй</li>
</ol>
<!-- Строчные буквы -->
<ol type="a">
<li>Первый</li>
<li>Второй</li>
</ol>
<!-- Римские цифры (заглавные) -->
<ol type="I">
<li>Первый</li>
<li>Второй</li>
</ol>
<!-- Римские цифры (строчные) -->
<ol type="i">
<li>Первый</li>
<li>Второй</li>
</ol>
Часть 5: Многоуровневые нумерованные списки
Пример: Сложный рецепт с этапами
html
<h3>Приготовление торта "Наполеон"</h3>
<ol>
<li>Приготовление теста
<ol>
<li>Смешать муку и масло</li>
<li>Добавить холодную воду</li>
<li>Замесить тесто</li>
<li>Охладить 30 минут</li>
</ol>
</li>
<li>Приготовление крема
<ol>
<li>Взбить яйца с сахаром</li>
<li>Добавить молоко</li>
<li>Варить на медленном огне</li>
<li>Охладить</li>
</ol>
</li>
<li>Сборка торта
<ol>
<li>Раскатать коржи</li>
<li>Испечь до золотистого цвета</li>
<li>Промазать кремом каждый корж</li>
<li>Украсить торт</li>
</ol>
</li>
</ol>
Часть 6: Комбинирование с другими тегами
Пример 1: Рецепт с выделениями
html
<h3>Рецепт омлета</h3>
<ol>
<li><strong>Разбейте</strong> 3 яйца в миску</li>
<li><em>Взбейте</em> их венчиком</li>
<li>Добавьте <b>соль</b> и <b>перец</b></li>
<li>Нагрейте сковороду с <i>маслом</i></li>
<li>Вылейте смесь и жарьте 5 минут</li>
</ol>
Пример 2: Инструкция с временными рамками
html
<h3>Уход за рассадой помидоров</h3>
<ol>
<li>Полив — <strong>каждые 2 дня</strong></li>
<li>Подкормка — <em>раз в неделю</em></li>
<li>Проветривание — <b>ежедневно</b></li>
<li>Пересадка — через <i>30 дней</i></li>
</ol>
Часть 7: Практическое задание
Создайте страницу с любимым рецептом:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой фирменный рецепт</title>
<meta charset="utf-8">
</head>
<body>
<h1>Блины классические</h1>
<h2>Ингредиенты:</h2>
<ul>
<li>Молоко — 500 мл</li>
<li>Яйца — 3 шт.</li>
<li>Мука — 200 г</li>
<li>Сахар — 2 ст. ложки</li>
<li>Соль — ½ ч. ложки</li>
<li>Масло растительное — 2 ст. ложки</li>
</ul>
<h2>Приготовление:</h2>
<ol>
<li><strong>Подготовьте продукты:</strong> все ингредиенты должны быть комнатной температуры</li>
<li><em>Взбейте яйца</em> с сахаром и солью до легкой пены</li>
<li>Постепенно добавьте <b>половину молока</b>, продолжая взбивать</li>
<li>Просейте муку и добавьте в смесь, тщательно размешайте</li>
<li>Влейте оставшееся молоко и растительное масло</li>
<li>Дайте тесту <i>постоять 20-30 минут</i></li>
<li>Разогрейте сковороду и смажьте маслом</li>
<li>Выливайте тесто половником и жарьте с двух сторон до золотистой корочки</li>
</ol>
<h2>Советы:</h2>
<ul>
<li>Первый блин всегда получается комом — это нормально!</li>
<li>Для тонких блинов используйте больше молока</li>
<li>Подавайте с вареньем, сметаной или медом</li>
</ul>
</body>
</html>
Часть 8: Смешанные списки — комбинация ul и ol
Пример: План обучения HTML
html
<h3>Мой план изучения HTML</h3>
<ol>
<li>Базовые теги
<ul>
<li>Заголовки h1-h6</li>
<li>Абзацы p</li>
<li>Списки ul, ol, li</li>
</ul>
</li>
<li>Форматирование текста
<ul>
<li>Жирный текст b, strong</li>
<li>Курсив i, em</li>
<li>Подчеркивание</li>
</ul>
</li>
<li>Ссылки и изображения
<ul>
<li>Тег a для ссылок</li>
<li>Тег img для картинок</li>
<li>Атрибуты href и src</li>
</ul>
</li>
</ol>
Часть 9: Семантика и доступность
Для скринридеров:
Когда скринридер встречает нумерованный список, он сообщает:
"Нумерованный список из 6 элементов"
"Шаг 1: [текст]"
"Шаг 2: [текст]"
При завершении: "конец списка"
Для пользователей:
Четкая последовательность действий
Легко отслеживать прогресс
Просто вернуться к конкретному шагу
Часть 10: Частые ошибки и лучшие практики
❌ НЕПРАВИЛЬНО:
html
<!-- Неправильная вложенность -->
<ol>
<li>Первый шаг</li>
<ol> <!-- Должен быть внутри li -->
<li>Подшаг</li>
</ol>
</ol>
<!-- Ручная нумерация -->
<ol>
<li>1. Первый шаг</li> <!-- Не нужно! Браузер сам пронумерует -->
<li>2. Второй шаг</li>
</ol>
<!-- Смешивание типов списков неправильно -->
<ol>
<li>Шаг с маркированным списком:
• Подпункт <!-- Используйте теги! -->
• Подпункт
</li>
</ol>
✅ ПРАВИЛЬНО:
html
<!-- Правильная вложенность -->
<ol>
<li>Первый шаг
<ol>
<li>Подшаг</li>
</ol>
</li>
</ol>
<!-- Автоматическая нумерация -->
<ol>
<li>Первый шаг</li> <!-- Браузер сам поставит "1." -->
<li>Второй шаг</li> <!-- Браузер сам поставит "2." -->
</ol>
<!-- Правильное смешивание -->
<ol>
<li>Шаг с маркированным списком:
<ul>
<li>Подпункт</li>
<li>Подпункт</li>
</ul>
</li>
</ol>
Часть 11: Когда использовать нумерованные списки
Идеальные сценарии:
📝 Рецепты — последовательность приготовления
🛠️ Инструкции — пошаговые руководства
🎯 Чек-листы — списки действий по порядку
📚 Учебные материалы — этапы обучения
🗓️ Планы — расписания и графики
Пример из жизни:
html
<h3>Как посадить дерево</h3>
<ol>
<li>Выберите подходящее место</li>
<li>Выкопайте яму в 2 раза шире корней</li>
<li>Добавьте компост на дно ямы</li>
<li>Поместите дерево в яму</li>
<li>Засыпьте землей и уплотните</li>
<li>Обильно полейте</li>
<li>Замульчируйте приствольный круг</li>
</ol>
Заключение
Что Вы теперь умеете:
✅ Создавать нумерованные списки для последовательных действий
✅ Использовать атрибуты start, reversed, type
✅ Строить многоуровневые нумерованные списки
✅ Комбинировать нумерованные и маркированные списки
✅ Создавать понятные инструкции и рецепты
Ключевые преимущества:
🔢 Автоматическая нумерация — не нужно нумеровать вручную
📖 Четкая последовательность — идеально для инструкций
♿ Улучшенная доступность — скринридеры понимают структуру
🔄 Легкое редактирование — добавили шаг, номера обновились автоматически
Запомните:
Используйте <ol> когда порядок важен
Используйте <ul> когда порядок не имеет значения
Всегда используйте правильную вложенность тегов
Теперь Вы можете создавать профессионально выглядящие инструкции, рецепты и руководства, которые будут понятны и удобны для всех пользователей!
- * * * -
6.3. Практика: добавляем на страницу список своих увлечений или список дел на день
Введение: Превращаем теорию в практику!
Пришло время применить полученные знания на практике. Мы создадим две полезные страницы: одну с Вашими увлечениями (используя маркированные списки), другую с планами на день (используя нумерованные списки). Это поможет закрепить разницу между этими типами списков.
Часть 1: Подготовка рабочего пространства
Создаем новые файлы:
Откройте папку "Мой первый сайт"
Создайте два новых файла:
hobbies.html — для списка увлечений
todo.html — для списка дел на день
Базовая структура для обоих файлов:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Заголовок страницы</title>
<meta charset="utf-8">
</head>
<body>
<!-- Здесь будет наш контент -->
</body>
</html>
Часть 2: Создаем страницу с увлечениями (hobbies.html)
Шаг 1: Добавляем заголовок и введение
html
<body>
<h1>Мои увлечения и хобби</h1>
<p>В свободное время я люблю заниматься разными интересными делами. Вот мои основные увлечения:</p>
Шаг 2: Создаем основной список увлечений
html
<h2>Мои основные хобби</h2>
<ul>
<li><strong>Садоводство</strong> — выращиваю цветы и овощи на даче</li>
<li><em>Чтение книг</em> — особенно люблю исторические романы</li>
<li><b>Кулинария</b> — экспериментирую с новыми рецептами</li>
<li>Фотография — снимаю природу и семейные мероприятия</li>
<li>Рукоделие — вязание и вышивание</li>
</ul>
Шаг 3: Добавляем вложенные списки для детализации
html
<h2>Подробнее о моих увлечениях</h2>
<h3>Садоводство</h3>
<ul>
<li>Цветы
<ul>
<li>Розы (15 сортов)</li>
<li>Пионы</li>
<li>Тюльпаны и нарциссы</li>
</ul>
</li>
<li>Овощи
<ul>
<li>Помидоры</li>
<li>Огурцы</li>
<li>Зелень (петрушка, укроп, базилик)</li>
</ul>
</li>
</ul>
<h3>Чтение</h3>
<ul>
<li>Любимые жанры:
<ul>
<li>Исторические романы</li>
<li>Биографии</li>
<li>Детективы</li>
</ul>
</li>
<li>Любимые авторы:
<ul>
<li>Александр Дюма</li>
<li>Андрей Дементьев</li>
<li>Эдуард Асадов</li>
</ul>
</li>
</ul>
Шаг 4: Добавляем список желаний (будущих увлечений)
html
<h2>Чему я хочу научиться в будущем</h2>
<ul>
<li>Освоить веб-дизайн</li>
<li>Научиться играть на фортепиано</li>
<li>Изучить английский язык</li>
<li>Попробовать гончарное дело</li>
<li>Научиться рисовать акварелью</li>
</ul>
Часть 3: Полный код страницы hobbies.html
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои увлечения</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мои увлечения и хобби</h1>
<p>В свободное время я люблю заниматься разными интересными делами. Вот мои основные увлечения:</p>
<h2>Мои основные хобби</h2>
<ul>
<li><strong>Садоводство</strong> — выращиваю цветы и овощи на даче</li>
<li><em>Чтение книг</em> — особенно люблю исторические романы</li>
<li><b>Кулинария</b> — экспериментирую с новыми рецептами</li>
<li>Фотография — снимаю природу и семейные мероприятия</li>
<li>Рукоделие — вязание и вышивание</li>
<li>Изучение HTML — создаю свои первые веб-страницы</li>
</ul>
<h2>Подробнее о моих увлечениях</h2>
<h3>Садоводство</h3>
<ul>
<li>Цветы
<ul>
<li>Розы (15 сортов)</li>
<li>Пионы</li>
<li>Тюльпаны и нарциссы</li>
<li>Георгины</li>
</ul>
</li>
<li>Овощи
<ul>
<li>Помидоры</li>
<li>Огурцы</li>
<li>Картофель</li>
<li>Зелень (петрушка, укроп, базилик)</li>
</ul>
</li>
<li>Фрукты и ягоды
<ul>
<li>Клубника</li>
<li>Смородина</li>
<li>Яблоки</li>
</ul>
</li>
</ul>
<h3>Чтение</h3>
<ul>
<li>Любимые жанры:
<ul>
<li>Исторические романы</li>
<li>Биографии известных людей</li>
<li>Детективы</li>
<li>Классическая литература</li>
</ul>
</li>
<li>Любимые авторы:
<ul>
<li>Александр Дюма</li>
<li>Андрей Дементьев</li>
<li>Эдуард Асадов</li>
<li>Лев Толстой</li>
</ul>
</li>
<li>Последние прочитанные книги:
<ul>
<li>"Три мушкетера" — Александр Дюма</li>
<li>"Война и мир" — Лев Толстой</li>
</ul>
</li>
</ul>
<h3>Кулинария</h3>
<ul>
<li>Любимые блюда для приготовления:
<ul>
<li>Домашняя выпечка</li>
<li>Суп-пюре из овощей</li>
<li>Салаты по сезону</li>
<li>Домашнее варенье</li>
</ul>
</li>
<li>Специализация:
<ul>
<li>Блины и оладьи</li>
<li>Пироги с разными начинками</li>
<li>Заготовки на зиму</li>
</ul>
</li>
</ul>
<h2>Чему я хочу научиться в будущем</h2>
<ul>
<li>Освоить веб-дизайн и CSS</li>
<li>Научиться играть на фортепиано</li>
<li>Изучить английский язык</li>
<li>Попробовать гончарное дело</li>
<li>Научиться рисовать акварелью</li>
<li>Освоить цифровую фотографию</li>
</ul>
<hr>
<p><em>Обновлено: сегодняшняя дата</em></p>
</body>
</html>
Часть 4: Создаем страницу со списком дел (todo.html)
Шаг 1: Добавляем заголовок и введение
html
<body>
<h1>Мой план на сегодня</h1>
<p>Вот что я планирую сделать сегодня. Порядок выполнения важен!</p>
Шаг 2: Создаем основной список дел
html
<h2>Утренние дела (с 8:00 до 12:00)</h2>
<ol>
<li><strong>Проснуться</strong> в 8:00</li>
<li><em>Сделать</em> утреннюю зарядку</li>
<li>Принять контрастный душ</li>
<li>Приготовить и съесть завтрак</li>
<li>Проверить электронную почту</li>
</ol>
Шаг 3: Добавляем дневные задачи
html
<h2>Дневные задачи (с 12:00 до 17:00)</h2>
<ol start="6">
<li>Заняться изучением HTML
<ol type="a">
<li>Повторить пройденные теги</li>
<li>Выполнить практическое задание</li>
<li>Создать новую страницу</li>
</ol>
</li>
<li>Сделать перерыв на обед</li>
<li>Работа в саду
<ol type="a">
<li>Полить цветы</li>
<li>Прополоть грядки</li>
<li>Подвязать помидоры</li>
</ol>
</li>
</ol>
Шаг 4: Добавляем вечерние занятия
html
<h2>Вечернее время (с 17:00 до 22:00)</h2>
<ol start="9">
<li>Приготовить ужин</li>
<li>Пообщаться с семьей</li>
<li>Почитать книгу 30 минут</li>
<li>Посмотреть интересный фильм</li>
<li>Подвести итоги дня</li>
<li>Подготовиться к завтрашнему дню</li>
</ol>
Часть 5: Полный код страницы todo.html
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой план на день</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мой план на сегодня</h1>
<p>Вот что я планирую сделать сегодня. Порядок выполнения важен!</p>
<h2>Утренние дела (с 8:00 до 12:00)</h2>
<ol>
<li><strong>Проснуться</strong> в 8:00</li>
<li><em>Сделать</em> утреннюю зарядку (15 минут)</li>
<li>Принять контрастный душ</li>
<li>Приготовить и съесть питательный завтрак
<ul>
<li>Овсяная каша с фруктами</li>
<li>Чай с медом</li>
<li>Бутерброд с сыром</li>
</ul>
</li>
<li>Проверить электронную почту и сообщения</li>
<li>Запланировать задачи на день</li>
</ol>
<h2>Дневные задачи (с 12:00 до 17:00)</h2>
<ol start="7">
<li>Заняться изучением HTML (2 часа)
<ol type="a">
<li>Повторить пройденные теги (30 минут)</li>
<li>Выполнить практическое задание (1 час)</li>
<li>Создать новую страницу (30 минут)</li>
</ol>
</li>
<li>Сделать перерыв на обед (45 минут)
<ul>
<li>Овощной суп</li>
<li>Салат из свежих овощей</li>
<li>Компот</li>
</ul>
</li>
<li>Работа в саду (1.5 часа)
<ol type="a">
<li>Полить цветы и овощи</li>
<li>Прополоть грядки с морковью</li>
<li>Подвязать помидоры</li>
<li>Удалить сухие листья с роз</li>
</ol>
</li>
<li>Отдых и перерыв (30 минут)</li>
</ol>
<h2>Вечернее время (с 17:00 до 22:00)</h2>
<ol start="11">
<li>Приготовить ужин для семьи
<ul>
<li>Запеченная рыба с овощами</li>
<li>Гречневая каша</li>
<li>Свежий салат</li>
</ul>
</li>
<li>Семейный ужин и общение (1 час)</li>
<li>Чтение книги (30 минут)
<ul>
<li>Текущая книга: "Анна Каренина"</li>
<li>Цель: прочитать 20 страниц</li>
</ul>
</li>
<li>Прогулка на свежем воздухе (30 минут)</li>
<li>Посмотреть интересный фильм или сериал (1.5 часа)</li>
<li>Подвести итоги дня и записать в дневник</li>
<li>Подготовиться к завтрашнему дню
<ol type="a">
<li>Составить список задач на завтра</li>
<li>Подготовить одежду</li>
<li>Проверить календарь на завтра</li>
</ol>
</li>
</ol>
<h2>Обязательные ежедневные ритуалы</h2>
<ul>
<li><strong>Пить достаточно воды</strong> — 8 стаканов в день</li>
<li><em>Делать перерывы</em> при работе за компьютером</li>
<li>Практиковать <b>благодарность</b> — записывать 3 хорошие вещи за день</li>
<li><i>Отключаться</i> от гаджетов за час до сна</li>
</ul>
<hr>
<p><em>План составлен на: сегодняшняя дата</em></p>
<p><strong>Девиз дня:</strong> "Каждый маленький шаг приближает к большой цели!"</p>
</body>
</html>
Часть 6: Практическое задание для закрепления
Задание 1: Персонализируйте страницу увлечений
Создайте файл my_hobbies.html и заполните его СВОИМИ увлечениями:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мои увлечения</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мои уникальные увлечения</h1>
<h2>Что я люблю делать</h2>
<ul>
<li>[Ваше увлечение 1]</li>
<li>[Ваше увлечение 2]</li>
<li>[Ваше увлечение 3]</li>
<li>[Ваше увлечение 4]</li>
</ul>
<h2>Подробнее о моих интересах</h2>
<!-- Добавьте вложенные списки -->
<h2>Чему я хочу научиться</h2>
<ul>
<li>[Новый навык 1]</li>
<li>[Новый навык 2]</li>
</ul>
</body>
</html>
Задание 2: Создайте свой распорядок дня
Создайте файл my_schedule.html:
html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой распорядок дня</title>
<meta charset="utf-8">
</head>
<body>
<h1>Мой идеальный день</h1>
<h2>Утро</h2>
<ol>
<li>[Первое утреннее дело]</li>
<li>[Второе утреннее дело]</li>
</ol>
<h2>День</h2>
<ol start="3">
<li>[Основная дневная задача]</li>
<li>[Вторая задача]</li>
</ol>
<h2>Вечер</h2>
<ol start="5">
<li>[Вечерние занятия]</li>
<li>[Подготовка ко сну]</li>
</ol>
</body>
</html>
Часть 7: Проверка и тестирование
Что проверить после создания страниц:
Откройте оба файла в браузере
Убедитесь, что:
Все списки отображаются правильно
Нумерация в нумерованных списках работает корректно
Вложенные списки имеют правильные отступы
Текст читается легко
Все ссылки работают (если добавляли)
Протестируйте на разных устройствах (если возможно):
На компьютере
На планшете
На телефоне
Чек-лист качества:
Все теги правильно закрыты
Русские буквы отображаются без искажений
Списки имеют четкую структуру
Вложенные списки правильно оформлены
Текст хорошо читается
Страницы загружаются быстро
Часть 8: Дополнительные улучшения
Добавьте простые стили для красоты:
html
<head>
<title>Мои увлечения</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #34495e;
}
ul, ol {
background-color: #f8f9fa;
padding: 15px 15px 15px 40px;
border-radius: 5px;
}
</style>
</head>
Заключение
Что Вы достигли в этом уроке:
✅ Создали две практические страницы с реальным содержанием
✅ Научились комбинировать маркированные и нумерованные списки
✅ Освоили создание многоуровневых вложенных списков
✅ Поняли разницу между ситуациями для <ul> и <ol>
✅ Закрепили использование тегов форматирования внутри списков
Ваши страницы теперь:
🎯 Практически полезны — Вы можете использовать их в повседневной жизни
📊 Хорошо структурированы — информация подана логично и понятно
♿ Доступны — правильная семантика помогает скринридерам
🎨 Профессионально выглядят — благодаря правильной разметке
Следующие шаги:
Покажите свои страницы друзьям или родным
Используйте страницу с распорядком дня на практике
Регулярно обновляйте список увлечений
Экспериментируйте с добавлением новых разделов
Теперь Вы не только знаете теорию списков, но и умеете применять их для решения реальных задач! Эти навыки пригодятся Вам как в веб-разработке, так и в повседневной организации информации.
(Продолжение следует)