54.01.20_Д2_Т2.3_4ч

1.

ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ И НАУКИ ГОРОДА МОСКВЫ
Государственное бюджетное профессиональное образовательное учреждение города Москвы
"Московский издательско-полиграфический колледж имени Ивана Федорова"
профессия: 54.01.20 Графический дизайнер
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ
Раздел 2. Разметка web-страниц HTML
Тема 2.3
Заголовки, гиперссылки,
строковые элементы и цитаты
Теоретическое занятие – 2 часа
Практическое занятие – 2 часа
Освоение темы 4 часа

2.

Структура содержания занятия
№ урока
1
Время
(мин)
Изучение нового материала
5
1
5
35
2
Содержание
Организационный момент. Приветствие, проверка готовности группы к учебному занятию
Краткий обзор содержания занятия.
Целеполагание. Постановка цели и задач занятия. Актуализация знаний
Раскрытие содержания темы занятия.
Теоретический материал. Основы использования HTML для описания значения контента в теле (body)
документа. Общие структурные элементы, заголовки и параграфы, вставка цитат и кода; строковый
контент, короткие цитаты и визуальное выделение
4
Формулирование целей и задач
Актуализация знаний
Изучение нового материала
Фронтальный опрос
Демонстрация
10
Актуализация знаний по теме
Викторина
35
Практическое занятие № 14. Оформление HTML-документа средствами CSS
Практическое занятие. Индивидуальная работа
Беседа
Изучение нового материала
30
Теоретический материал. Создание ссылок. Влияние ссылок на популярность в поисковых системах.
Формулирование ссылок
15
Закрепление изученного материала.
Подведение итогов занятия
3
4
Фронтальный опрос с элементами беседы
Практическое занятие
2
3
Педагогические приемы и методы
Изучение нового материала
Демонстрация
Дискуссия
Тестирование
Беседа
Практическое занятие
5
Актуализация знаний по теме
Мини-игра
35
Практическое занятие № 14. Оформление HTML-документа средствами CSS (продолжение)
Практическое занятие. Индивидуальная работа
5
Подведение итогов изучения темы
Беседа
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ
2

3.

ЦЕЛЬ
Научиться использовать структурные
документов.
элементы для написания HTML-
ЗАДАЧИ
• Освоить практическое применение основных структурных элементов HTML
для вставки и оформления контента.
• Научиться применять готовые элементы CSS для стилизации текста и
гиперссылок.
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
3
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

4.

теория
тест
групповая работа
практическое занятие
итоги
Вопросы
• Какие теги используются для создания заголовков на веб-странице, и как
они отличаются друг от друга?
• Что такое тег <p> и для чего он используется в HTML-документе?
• Какой тег используется для вставки блочной цитаты в HTML, и чем он
отличается от тега для встроенной цитаты?
• Какие теги применяются для форматирования текста, чтобы выделить его
жирным, курсивом, подчеркнутым и зачеркнутым стилем?
• Какие элементы и стили CSS применяются для визуального оформления
гиперссылок?
4
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

5.

теория
тест
групповая работа
практическое занятие
итоги
Практическое применение основных структурных элементов
при создании HTML страницы
Задание. Вам необходимо создать страницу, которая:
1.
В качестве названия вкладки содержит вашу фамилию.
2.
Фон страницы залит серым цветом.
3.
Текст на странице синий.
4.
На странице выводятся следующие данные:
фамилия имя (заголовком 1 уровня)
дата рождения (заголовок 2 уровня)
специальность (заголовок 2 уровня)
о себе (заголовок 3 уровня)
Файл сохранить в папке Lab_ФИ (где, ФИ – ваши фамилия и имя) с названием
Index2.html
5
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

6.

теория
тест
групповая работа
практическое занятие
итоги
Практическое применение визуального выделения текста
Задание. Выделить текст в HTML-документе с помощью различных тегов
Инструкция
https://disk.yandex.ru/i/vh0BjCJt8yqjog
6
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

7.

теория
тест
групповая работа
практическое занятие
итоги
Викторина
1. Что такое HTML и для чего он используется?
2. Какие основные теги используются для
создания структуры веб-документа?
3. Какой тег используется для создания ссылок
и какие атрибуты он имеет?
7
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

8.

теория
тест
групповая работа
практическое занятие
итоги
Практическое занятие № 14.
Оформление HTML-документа средствами CSS
Цель занятия:
Научиться применять готовые элементы CSS
для оформления HTML-документа.
Инструкция
https://disk.yandex.ru/i/JIUegzQHWitHpQ
8
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

9.

теория
тест
групповая работа
итоги
практическое занятие
Создание гиперссылок
Размещение
страницы
ссылок
на
приоритетные
Размещение ссылок на одной основной
странице
Взаимосвязанные блоки контента для
поддержки структуры внутренних ссылок
Внутренние ссылки в качестве призывов к
действию: улучшают конверсию
9
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

10.

теория
тест
групповая работа
практическое занятие
итоги
Перейдите по QR-коду и пройдите тестирование
Критерии оценивания:
0-4 баллов – неудовлетворительно
5-6 баллов – удовлетворительно
7-8 баллов – хорошо
9-10 баллов – отлично
Тест по теме
«Основы использования HTML и CSS
для описания и стилизации контента»
https://forms.yandex.ru/u/66ad716b5056903d
a15c332a/
10
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

11.

теория
тест
групповая работа
практическое занятие
итоги
Мини-игра "Кто быстрее?"
1. Какие селекторы и свойства CSS
используются для изменения внешнего
вида элементов?
2. Как добавить изображение на вебстраницу с помощью HTML и CSS?
3. Что такое семантические теги и почему их
важно использовать?
11
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

12.

теория
групповая работа
тест
практическое занятие
итоги
Практическое занятие № 14
Оформление HTML-документа средствами CSS
Цель занятия:
Научиться
использовать
стили
CSS
для
оформления HTML-документа.
Инструкция
https://disk.yandex.ru/i/ikmbp1V4EFE4YQ
12
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

13.

теория
тест
видеоматериал
практическое занятие
итоги
Вопросы
1. Что нового вы узнали на этом занятии?
2. Какие задания показались вам самыми интересными и почему?
3. С какими трудностями вы столкнулись при выполнении практических
заданий?
4. Как вы их преодолели или как собираетесь их преодолеть?
5. Какие из изученных концепций вы считаете наиболее полезными для своей
будущей профессиональной деятельности?
13
Тема 2.3. Заголовки, гиперссылки, строковые элементы и цитаты
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

14.

теория
тест
групповая работа
практическое занятие
итоги
Рекомендуемая литература
1. Полуэктова, Н. Р. Разработка веб-приложений : учебное пособие для среднего профессионального образования / Н.
Р. Полуэктова. — 2-е изд. — Москва : Издательство Юрайт, 2024. — 204 с. — (Профессиональное образование). —
ISBN 978-5-534-18644-4. — Текст : электронный // Образовательная платформа Юрайт [сайт]. — URL:
https://urait.ru/bcode/545237
2. Руденко Н.Б. Информационные технологии в профессиональной деятельности: учебное пособие / Н. Б. Руденко, Н.
Н. Грачева, В. Н. Литвинов, Е. В. Назарова. – Москва; Берлин: Директ-Медиа, 2021. – Часть 1. – 188 с.: табл., ил. – URL:
https://biblioclub.ru/index.php?page=book&id=602200
Интернет-ресурсы
1. Научная электронная библиотека elibrary (http://elibrary.ru)
1. Справочная система Google http://support.google.com/
Оформление визуального контента – лицензия «Образовательная платформы «Canva for Education» (подписка)
14
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ