54.01.20_Д2_Т2.6_7ч

1.

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

2.

Структура содержания занятия
№ урока
1
Время
(мин)
Педагогические приемы и методы
Изучение нового материала
5
5
1
25
10
2-7
Содержание
Организационный момент. Приветствие, проверка готовности группы к учебному занятию
Фронтальный опрос с элементами беседы
Краткий обзор содержания занятия. Целеполагание. Постановка цели и задач занятия.
Актуализация знаний
Раскрытие содержания темы занятия.
Теоретический материал: Добавление в Web-документы визуальной информации доступным образом.
Использование строковых изображений для применения информационных или фоновых изображений
при компоновке страницы.
Закрепление изученного материала.
Подведение итогов занятия
Изучение нового материала
Фронтальный опрос
Изучение нового материала
Фронтальный опрос
Демонстрация
Тестирование
Беседа
Практическое занятие
5
Актуализация знаний по теме
Фронтальный опрос
40
Практическое занятие № 17. Вставка изображений в веб-документ
Практическое занятие. Групповая работа
3
45
Практическое занятие № 17. Вставка изображений в веб-документ (продолжение)
Практическое занятие. Групповая работа
4
45
5
45
6
45
2
35
7
10
Тема 2.6. Изображения в HTML
Практическое занятие № 18. Разработка контента Web-приложения на языке HTML, состоящего из
нескольких страниц, с использованием различных функциональных тегов.
Практическое занятие № 18. Разработка контента Web-приложения на языке HTML, состоящего из
нескольких страниц, с использованием различных функциональных тегов. (продолжение)
Практическое занятие № 18. Разработка контента Web-приложения на языке HTML, состоящего из
нескольких страниц, с использованием различных функциональных тегов. (продолжение)
Практическое занятие № 18. Разработка контента Web-приложения на языке HTML, состоящего из
нескольких страниц, с использованием различных функциональных тегов. (продолжение)
Подведение итогов
Практическое занятие. Индивидуальная работа
Практическое занятие. Индивидуальная работа
Практическое занятие. Индивидуальная работа
Практическое занятие. Индивидуальная работа
Беседа
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ
2

3.

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

4.

теория
видеоматериал
тест
практическое занятие
итоги
Основные методы добавления изображений
Тег <img>:
Структура:
Атрибуты:
• src: путь к изображению.
• alt: альтернативный текст для доступности.
• title: заголовок изображения.
• width и height: размеры изображения.
Форматы изображений:
• JPEG: хороший для фотографий, поддерживает компрессию.
• PNG: поддерживает прозрачность, хорош для графики и логотипов.
• GIF: поддержка анимации, ограниченная палитра цветов.
• SVG: векторные изображения, масштабируемые без потери качества.
Доступность изображений:
4
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

5.

теория
видеоматериал
тест
практическое занятие
итоги
Использование фоновых изображений
Свойство CSS background-image.
Синтаксис:
Настройки фоновых изображений:
• background-repeat: повторение изображения.
• background-size: размер изображения.
• background-position: позиция изображения.
• background-attachment: фиксирование изображения.
5
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

6.

теория
видеоматериал
тест
практическое занятие
итоги
Использование фоновых изображений
Примеры применения фоновых изображений:
Применение к элементам div, header, footer.
Создание декоративных фонов для секций страниц.
Пример Base64 строки
Внедрение строковых изображений в HTML и CSS:
HTML
CSS
6
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

7.

теория
видеоматериал
тест
практическое занятие
итоги
Строковые изображения (Base64)
Объяснение строковых изображений:
• Преобразование изображения в текстовый формат (Base64).
• Преимущества: уменьшение количества HTTP-запросов.
Преобразование изображений в Base64:
• Использование онлайн-инструментов (например, base64-image.de).
КОНВЕРТИРУЙТЕ
ИЗОБРАЖЕНИЯ
В BASE64
HTTP://BASE64-IMAGE.DE/
7
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

8.

теория
видеоматериал
тест
практическое занятие
итоги
Практические советы и лучшие практики
Оптимизация изображений для веб:
• Использовать инструменты для сжатия изображений
https://tinypng.com/
• Уменьшать размер изображений до необходимого
https://jpeg-optimizer.com/
Lazy loading для изображений:
Правильные форматы изображений:
• Фотографии — JPEG
• Графика и логотипы — PNG или SVG
Кроссбраузерная совместимость и отзывчивость:
• Использовать медиа-запросы для адаптации изображений.
• Проверять отображения изображений в разных браузерах.
8
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

9.

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

10.

теория
видеоматериал
групповая работа
практическое занятие
итоги
"HTML-квиз"
Цель игры: Закрепить знания по основам веб-технологий и HTML-тегам.
Ход игры:
1. Объединитесь в команды по 3-5 человек.
2. Внимательно слушайте вопросы по основам вебтехнологий и HTML.
3. Каждой команде дается 10 секунд на обсуждение и
выбор ответа.
4. Команды поднимают табличку с буквой, обозначающей
их ответ.
5. За каждый правильный ответ команда получает 1 балл.
6. Подсчет баллов и объявление результатов
Критерии оценки:
8-10 правильных ответов: Отлично
6-7 правильных ответов: Хорошо
4-5 правильных ответов: Удовлетворительно
Менее 4 правильных ответов: Нужно подтянуть знания
10
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

11.

теория
видеоматериал
тест
практическое занятие
итоги
Практическое занятие № 17
Вставка изображений в веб-документ
Цель:
Ознакомить студентов с практическими аспектами вставки
изображений в веб-документ, включая использование тега <img>,
добавление фоновых изображений через CSS и внедрение строковых
изображений (Base64).
Инструкции:
1.
2.
3.
4.
5.
Научиться вставать изображения с помощью тега <img>.
Использовать фоновые изображения с помощью CSS.
Применить внедрение строковых изображений (Base64).
Проверить правильность добавления, отображения, адаптивности
и корректности различных видов изображений.
Сохранить, выполнить самопроверку и защитить выполненную
работу.
Инструкция «Вставка изображений
в веб-документ»
https://disk.yandex.ru/i/LdHHsqRDogzt6Q
11
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

12.

теория
видеоматериал
тест
практическое занятие
итоги
Практическое занятие № 18
Разработка контента Web-приложения на языке HTML,
состоящего из нескольких страниц, с использованием
различных функциональных тегов
Цель:
Закрепить навыки создания многостраничных веб-приложений
с использованием различных функциональных тегов HTML.
Задачи:
1.
2.
3.
4.
5.
Научиться создавать базовую структуру проекта.
Использовать различные функциональные теги.
Создать связи между страницами.
Провести валидацию и тестирование.
Сохранить, выполнить самопроверку и защитить
выполненную работу.
Инструкция «Разработка контента
Web-приложения на языке HTML»
https://disk.yandex.ru/i/57rka1dBytpb2A
12
Тема 2.6. Изображения в HTML
ДУП.02 ОСНОВЫ WEB-ТЕХНОЛОГИЙ

13.

теория
видеоматериал
тест
практическое занятие
итоги
Вопросы
1. Что нового вы узнали о веб-технологиях?
2. Какие HTML-теги показались вам наиболее важными и почему?
3. Были ли моменты, которые оказались для вас сложными для
понимания?
13
Тема 2.6. Изображения в HTML
ДУП.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-ТЕХНОЛОГИЙ