Мультимедийные уроки информатики по теме:

WEB-дизайн

1. Язык разметки гипертекста HTML
• Форматирование текста в HTML
• Вставка картинки в HTML
• Гиперссылки в HTML. Как сделать список в HTML
• Создание таблиц в HTML
• Фреймы в HTML
2. Каскадные таблицы стилей CSS
• Введение в CSS
• CSS. Правила и селекторы
• CSS. Отступы, рамки и поля

Справочник тегов HTML Скачать (370 Кб)
Безопасные цвета в HTML Скачать (16 Кб)
Электронный учебник по HTML Сидорова Скачать (610  Кб)

Добавление графики в
WEB-документ

2 урока, в которых рассматривается вставка картинок в html. Первый урок - это лекция с презентацией, а второй - практическая работа. В комплект входит план урока и демонстрационные примеры.

Скачать (860 Кб)

План уроков 3 и 4:

Урок № 3
Добавление графики в WEB-документ

Цели и задачи урока:

• Сформулировать основные принципы добавления картинок и www.vashsad.ua в WEB -страницы; познакомить учеников с тегом вставки картинок; продемонстрировать использования этого тега на конкретных примерах.
• Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.
• Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.

Тип урока: усвоение новых знаний.

Оборудование: мультимедийная система, слайды.

Ожидаемые результаты:

В конце урока ученики смогут:

• Охарактеризовать основные графические форматы, используемые в WEB -дизайне.
• Использовать тег IMG языка HTML для добавления графики в WEB -документы;

Ориентировочный план урока

1. Актуализация опорных знаний
• Какие теги форматирования документа вы знаете?
• Что такое логическое и физическое форматирование WEB -документа?
• Как задать название документа, которое выводится в строке заголовка в программе-браузере?
• Как установить цвет фона документа?
• Как поместить в качестве фона изображение?
2. Изложение нового материала.
• Характеристика основных графических форматов, используемых в WEB -дизайне – GIF и JPEG .
• Команда (тег) IMG, с помощью которого можно вставить графику в WEB -документ.
• Атрибуты тега IMG.
• Выравнивание картинок.
• Добавления звука и видео.
3. Физкультминутка.
4. Примеры использования тегов форматирования.
5. Закрепление нового материала.
6. Итоги урока.
7. Домашнее задание. Выучить конспект, Глава 6, § 4.6

Урок № 4
Практическая работа № 2 «Добавление графики на Web-страницы»

Цели урока:

• Познавательная
- Учить и научить каждого ребенка создавать Web-страницы с использованием графики.
- Формировать навыки и умения работы с тегами языка HTML.

• Развивающая
- Учить строить аналогии, выделять главное, ставить и решать проблемы.

• Воспитательная
- Воспитывать аккуратность, внимательность, вежливость и дисциплинированность.

План урока

1. Техника безопасности при работе с компьютером.
2. Разъяснение хода практической работы.
3. Практическая работа № 2 «Добавление графики на Web-страницы»
4. Оценивание выполнения работы.
5. Итоги урока.
6. Домашнее задание. Выучить конспект, глава 6, § 4.6

Авторские уроки Марины Макаровой

К уроку информатики