Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 4

Текст и оформление

Сегодня мы оформим рассказ о любимом занятии: абзацы, выделения, разделительная линия и комментарии в коде.

Изучаем: p, br, hr, strong, em, комментарии
Результат: Оформляем текст о любимом занятии

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<h1>Я люблю футбол</h1>
<!-- Первая часть: история -->
<p>Я играю в футбол <strong>уже три года</strong>. Всё началось во дворе с друзьями.</p>
<p>Больше всего мне нравится <em>забивать головой</em>.</p>
<hr>
<!-- Вторая часть: девиз -->
<p>
  Бегу, пасую, бью —<br>
  Команду я люблю!
</p>

💡 Объяснение

Браузер не видит твои пробелы и переносы

Попробуй написать в коде стихотворение, нажимая Enter после каждой строки. В браузере всё склеится в одну строку! Это правило называется схлопыванием пробелов: любое количество пробелов, табуляций и переносов строк браузер превращает в один пробел.

Зачем так сделано? Чтобы программисты могли свободно расставлять отступы в коде, и это не ломало страницу. А за то, где начинается новый абзац, отвечают теги.

Абзац <p>

<p> (от английского paragraph — абзац) — самый частый тег на любой странице. Каждый абзац начинается с новой строки, а между абзацами браузер сам добавляет небольшой отступ.

<p>Первый абзац. Здесь рассказ о том, как всё началось.</p>
<p>Второй абзац. Здесь продолжение истории.</p>

Одна мысль — один абзац. Длинные «простыни» текста читать тяжело, поэтому разбивай рассказ на абзацы по 2–4 предложения.

Перенос строки <br>

<br> (break — разрыв) переносит текст на новую строку внутри абзаца, без отступа. Это одиночный тег: у него нет закрывающей пары, ведь внутри переноса нечего писать.

Когда нужен br: стихи, адрес, подписи. Когда не нужен: чтобы сделать отступ между абзацами (для этого есть p и CSS). Несколько <br><br><br> подряд — признак плохого кода.

Горизонтальная линия <hr>

<hr> (horizontal rule) — тоже одиночный тег. Он рисует линию и по смыслу означает смену темы: как три звёздочки * * * в книге между частями рассказа.

Выделение: <strong> и <em>

  • <strong> — важный текст. Браузер показывает его жирным. Используй для главных слов, предупреждений: «Не забудь сохранить файл».
  • <em> (emphasis — ударение) — смысловое ударение, как если бы ты произнёс слово с нажимом. Браузер показывает его курсивом.

Сравни: «Я люблю футбол» (правда люблю!) и «Я люблю футбол» (а не хоккей). Одно слово — разный смысл.

Есть похожие теги <b> (жирный) и <i> (курсив). Они меняют только вид, но не смысл. Программы чтения с экрана для незрячих произносят strong и em с интонацией, а b и i — нет. Поэтому для важного текста лучше strong и em.

Теги выделения пишут внутри абзаца: <p>Я <strong>очень</strong> рад</p>.

Комментарии

<!-- Это комментарий. Браузер его не покажет -->

Комментарий начинается с <!-- и заканчивается -->. Для чего он нужен:

  • оставить подсказку себе или другу: <!-- Здесь будет галерея -->;
  • подписать части страницы, чтобы быстро их находить;
  • временно «выключить» кусок кода, не удаляя его.

В VS Code закомментировать строку можно клавишами Ctrl+/.

⚠️ Комментарии не видны на странице, но видны в коде через F12. Не пиши в них пароли и секреты!

Частые ошибки

  • Много <br> вместо отдельных абзацев.
  • Весь текст сделан жирным — когда выделено всё, не выделено ничего.
  • Незакрытый <strong> — жирным становится весь текст до конца страницы.
  • Незакрытый комментарий <!-- прячет всё, что ниже.

Проверь себя

  1. Почему в браузере склеились строки, которые в коде были на разных строчках?
  2. Чем <br> отличается от <p>?
  3. Когда лучше использовать strong, а когда em?

⌨️ Практика

  1. Напиши заголовок о любимом занятии и три абзаца: как начал(а), что нравится, чего хочешь добиться.
  2. Выдели главные слова с помощью strong и em.
  3. Раздели рассказ линией hr на две части.
  4. Добавь четверостишие или девиз с переносами br.
  5. Оставь в коде комментарий-подсказку для себя.

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход