🧱

Модуль 1. Введение и HTML

Занятие 4
Текст и оформление

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

👀

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

🫧

Куда пропали мои переносы?

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

Новую строку делают теги, а не клавиша Enter.

Я пишу стихи
каждую строчку
с новой строки...


Но браузер всё склеил!
📄

Абзац <p>

  • Каждый абзац — с новой строки
  • Между абзацами — отступ
  • Одна мысль = один абзац
<p>Я играю в футбол уже три года.</p>
<p>Больше всего люблю забивать головой.</p>
↩️

<br> и <hr> — одиночные теги

  • <br> — новая строка внутри абзаца (стихи, адрес)
  • <hr> — линия, смена темы (как * * * в книге)
  • Закрывать не нужно — внутри ничего нет
<p>
  Бегу, пасую, бью —<br>
  Команду я люблю!
</p>
<hr>
<p>Вторая часть рассказа</p>
💪

<strong> и <em>

<strong>
Важно!
жирный
<em>
ударение
курсив

«Я люблю футбол» ≠ «Я люблю футбол»

<p><strong>Внимание!</strong> Завтра матч.</p>
<p>Я <em>люблю</em> футбол.</p>
<p>Я люблю <em>футбол</em>, а не хоккей.</p>
🦻

Почему не <b> и <i>?

  • b и i — только вид
  • strong и em — вид + смысл
  • Программы для незрячих читают strong и em с интонацией

Выбираем теги по смыслу — так сайт удобен всем.

🤫

Комментарии

  • Браузер их не показывает
  • Подсказки себе и друзьям
  • Можно «выключить» кусок кода
  • VS Code: Ctrl + /

⚠️ Видны через F12 — никаких паролей!

<!-- Шапка страницы -->
<h1>Мой рассказ</h1>

<!-- <p>Этот абзац пока спрятан</p> -->
<p>А этот видно.</p>
🐞

Что сломалось?

Автор хотел выделить одно слово. Почему жирным стал весь текст?

<p>Я <strong>очень люблю рисовать.</p>
<p>Особенно карандашами.</p>
<p>И красками.</p>
🃏

Запомни!

  • <p>Абзац
  • <br>Перенос строки
  • <hr>Горизонтальная линия
  • <strong>Важный (жирный) текст
  • <em>Выделение (курсив)
  • <!-- -->Комментарий
⌨️

Практика: Оформляем текст о любимом занятии

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

🚀 Со звёздочкой: Узнай, чем отличаются теги b и strong, i и em. Добавь цитату с тегом blockquote.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

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

✨ По желанию: Подготовь небольшой текст (5–7 предложений) о своём хобби для будущих уроков.