Теги и атрибуты. Оформление текста

Теги и атрибуты. Оформление текста

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

Тег задаёт роль фрагмента. Атрибут настраивает тег изнутри открывающей скобки.

Результат урока

Создашь в папке TextPage_10 файл .html со статьёй: заголовки h1–h3 (или h1 и h2), 2–3 абзаца p, выделения strong/em, линию hr, хотя бы один атрибут (например align); сохранишь файл; откроешь в браузере; найдёшь и исправишь ошибку пересечения тегов.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор (Блокнот или Notepad++) и браузер. Среда программирования сегодня не нужна, интернет для работы тоже.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: каркас html / head / body, кодировку UTF-8, расширение .html и правило «закрывать теги в обратном порядке» — с прошлого урока.

Основа — § 7 учебника. Списки, гиперссылки, изображения и CSS сегодня не вводим: это следующие уроки.

Тег и атрибут

Тег называет роль фрагмента: заголовок, абзац, важное слово. Парный тег состоит из открывающего и закрывающего. Непарный стоит один — например <br> и <hr>.

Атрибут — настройка внутри открывающего тега. Пишется как имя="значение".

Без тега атрибут не существует. Атрибут всегда в открывающем теге и обычно в кавычках.

Заголовки h1–h3

h1 — главный заголовок страницы, h2 — раздел, h3 — подраздел. Уровень отражает структуру статьи, а не «насколько крупно хочется».

<body>
  <h1 align="center">Моя статья</h1>
  <h2>Первый раздел</h2>
  <h3>Подраздел</h3>
  <p>Текст абзаца...</p>
</body>

Абзацы

Каждый абзац — свой тег p. Пустая строка в редакторе абзац не создаёт: переводы строк браузер игнорирует. Атрибут align меняет выравнивание абзаца или заголовка.

Выделения: strong и em

На уроке предпочитаем strong и em. Теги b, i, u из учебника допустимы. Примеры с font в § 7 кратко знаем, но сегодня не требуем: оформление шрифтом и цветом — тема CSS.

Перенос и линия: br и hr

br — принудительный перенос строки. hr — горизонтальная линия-разделитель. Оба непарные: закрывающего тега нет. Не путай br с новым абзацем p.

<h1>Школьные новости</h1>
<p>Сегодня прошёл <strong>день информатики</strong>.</p>
<p>Участники готовили <em>короткие</em> доклады.</p>
<hr>
<p align="center">Итоги подведём завтра.</p>

Вложенность тегов

Теги вкладываются, но не пересекаются. Закрываем в обратном порядке.

<!-- верно -->
<p><strong>Важный</strong> абзац.</p>

<!-- ошибка: теги пересекаются -->
<p><strong>Важный абзац.</p></strong>

Приём проверки: веди взглядом от открывающего тега к его закрывающему. Линии могут быть вложены, но не должны пересекаться.

Сохранение и просмотр

Сохрани файл с расширением .html, тип «Все файлы», кодировка UTF-8. Иначе получится .html.txt, и браузер покажет код с тегами.

Открой файл из своей папки. Держи редактор и браузер в двух окнах: правишь, сохраняешь, обновляешь F5. Интернет не нужен.

Чек-лист: найди причину

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей папке.

Практика: TextPage_10

Создай папку TextPage_10 (10 — номер места) в своей рабочей папке.

Файл можно назвать и article.html — важно расширение. В title и заголовках напиши свои тексты.

Лист проверки

Критерии готовности

Шесть диагностических баллов: папка с файлом .html; заголовки и 2–3 абзаца; strong/em и hr; хотя бы один атрибут; правка видна после обновления; ошибка вложенности найдена и объяснена. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: третий абзац, h3, свой текст статьи. Списки, ссылки, изображения и CSS не начинай.

Если результат отличается

Объясни самостоятельно

1. Чем тег отличается от атрибута? Приведи пример.
2. Зачем нужны h1–h3, p, strong/em, br и hr?
3. Найди ошибку: <p><strong>текст</p></strong> — исправь.

Показать ответ после выполнения

Домашнее задание

§ 7, вопросы после параграфа. Письменно: 1) чем тег отличается от атрибута; 2) какие теги оформляют заголовки и выделения; 3) зачем br и hr; пример с одним атрибутом. По желанию — дописать текст в TextPage. Списки, гиперссылки, изображения и CSS не задаются: это следующие уроки. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2 «Основы веб-конструирования», § 7 «Создание веб-страниц» (теги, атрибуты, оформление текста). Содержание главы. Электронное приложение.

MDN Web Docs: h1–h6, p, strong, em, br, hr.

TextPage, чек-лист симптомов, листы и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.