Теги форматирования абзацев в HTML документах.
Теги заголовков в HTML документах.
Цели занятия:
О:
- познакомиться с тегами форматирования текста в HTML документов, тегами форматирования абзацев в HTML документах, тегами заголовков в HTML документах;
В: воспитывать аккуратность при оформлении записей;
Р: развитие логического мышления, познавательного интереса, коммуникативных и творческих способностей.
Тип занятия: комбинированный.
Материально-техническое обеспечение занятия:
Дидактическое обеспечение: план занятия.
Инструменты и оборудование: школьные принадлежности.
Информационное обеспечение занятия:
Литература:
1. http://life-prog.ru/1_59148_obshchie-svedeniya-o-yazike-razmetki-giperteksta-HTML-sintaksis-yazika-tegi-struktura-HTML-dokumenta.html.
2. https://html5book.ru/html-html5.
Формирование компетенций в соответствии с ФГОС:
ОК 2. Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач
ОК 3. Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность.
ОК 4. Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач
Ход занятия
1. Организационный момент: приветствие, проверка явки и готовности к занятию
Сообщение темы, цели занятия, критериев оценки
Актуализация знаний (повторение изученного материала)
HTML текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.
Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).
Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри тега <body>.
Объяснение нового материала
Тема 1: «Теги форматирования текста в HTML документов»
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h1>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h1> должен следовать <h2> и т.д. Также не допускается вложение других тегов в теги <h1>...<h6>.
1.1. Тег <h1>
Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h1> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
1.2. Тег <h2>
Им обозначаются подзаголовки тега <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
1.3. Тег <h3>
Показывает подзаголовки тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Теги <h4>, <h5>, <h6>
Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех тегов доступны глобальные атрибуты.
Теги для форматирования текста
2.1. Тег <b>
Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Для тега доступны глобальные атрибуты.
2.2. Тег <em>
Отображает шрифт курсивом, придавая тексту значимость. Для тега доступны глобальные атрибуты.
2.3. Тег <i>
Отображает шрифт курсивом. Для тега доступны глобальные атрибуты.
2.4. Тег <small>
Уменьшает размер шрифта на единицу по отношению к обычному тексту. Для тега доступны глобальные атрибуты.
2.5. Тег <strong>
Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста. Для тега доступны глобальные атрибуты.
2.6. Тег <sub>
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер. Для тега доступны глобальные атрибуты.
2.7. Тег <sup>
Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Для тега доступны глобальные атрибуты.
2.8. Тег <ins>
Выделяет текст в новой версии документа, подчёркивая его. Для тега доступны следующие атрибуты: cite, datetime.
2.9. Тег <del>
Перечёркивает текст. Используется для выделения текста, удаленного из документа. Для тега доступны следующие атрибуты: cite, datetime.
3. Теги для ввода «компьютерного» текста
3.1. Тег <code>
Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом. Для тега доступны глобальные атрибуты.
3.2. Тег <kbd>
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. Для тега доступны глобальные атрибуты.
3.3. Тег <samp>
Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом. Для тега доступны глобальные атрибуты.
3.4. Тег <var>
Выделяет имена переменных, отображая курсивом. Для тега доступны глобальные атрибуты.
3.5. Тег <pre>
Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются. Для тега доступны глобальные атрибуты.
