Гіпермаркет Знань>>Інформатика 11 клас>>Інформатика>> Інформатика: Основи веб-дизайну
План-конспект уроку з курсу «Інформатика 11 клас» з теми «Работа с изображениями и логическими тэгами»
Урок № 5.
Работа с изображениями и логическими тэгами.
Цели:
• Образовательные: - Сформировать первоначальные представления о работе с изображениями в html. - Познакомиться со способами форматирования изображений в html.
• Развивающие: - умения анализировать, сравнивать, систематизировать и обобщать; - интерес к учению, стремление к расширению кругозора;
• Воспитательные: - бережное отношение к имуществу, ВТ и учебным пособиям; - дисциплинированность, любознательность.
Ход урока:
> Организационный момент. > Проверка д/з: тест на компьютере «Работа с текстом» > Объяснение нового материала.
Повторение и актуализация знаний. Краткий но обязательный разговор о структуре сайта. Учимся вставлять картинку. Подробно на примерах разбираем как правильно прописывать источник в html коде. Рассказываем о теге <div> и его применении. Используя тег <div>, покажем, как можем выровнять картинку по центру. Рассматриваем дополнительные атрибуты тега <img>:
src="img/HTML.jpg" - источник (путь) к изображению border="5" - рамка и её толщина align="left" - смещение относительно текста hspace="30" - горизонтальный интервал между изображением и обтекающим его текстом vspace="30" - вертикальный интервал между изображением и обтекающим его текстом width="100" - ширина изображения height="70"- высота изображения alt="текст который будет виден если отображение изображений отключено в браузере" Говорим об обтекании
> Закрепление изученного материала: Выполнить упражнение к уроку 5.
Задание на дом: Изучить материал в тетради наизусть.
Упражнение к уроку 5:
1. Вставить предложенный рисунок на html-страницу. 2. Отформатировать рисунок и выровнять его в тексте на ваше усмотрение. 3. Задать отступы от границы текста до рисунка равными 15 пикселей по горизонтали и по вертикали.
Сохраните файл как "img.html".
Надіслав вчитель інформатики Тарасов Дмитро.
Основи веб-дизайну > Основи веб-дизайну. Конспект уроку і опорний каркас
|