Графика на Web-страницах (конспект урока)(.doc)

ИНФОРМАТИКА. 8 класс
Конспект урока
1. Тема урока. Вставка изображений в Web-страницы
1). Реализуемые требования ФГОС ООО к личностным образовательным
результатам:
1.1. формирование ответственного отношения к учению, готовности и способности
обучающихся к саморазвитию и самообразованию на основе мотивации к обучению и
познанию, осознанному выбору и построению дальнейшей индивидуальной траектории
образования …, с учётом устойчивых познавательных интересов, а также на основе
формирования уважительного отношения к труду …;
1.2. формирование осознанного, уважительного и доброжелательного отношения к
другому человеку, его мнению …, готовности и способности вести диалог с другими
людьми и достигать в нём взаимопонимания;
1.3. формирование коммуникативной компетентности в общении и сотрудничестве со
сверстниками, …; взрослыми в процессе образовательной, …; учебно-исследовательской,
творческой и других видов деятельности.
2). Реализуемые требования ФГОС ООО к метапредметным образовательным
результатам:
2.1. умение самостоятельно определять цели своего обучения, ставить и формулировать
для себя новые задачи в учёбе и познавательной деятельности, развивать мотивы и
интересы своей познавательной деятельности;
2.2. умение самостоятельно планировать пути достижения целей, в том числе
альтернативные, осознанно выбирать наиболее эффективные способы решения учебных
и познавательных задач;
2.3. умение оценивать правильность выполнения учебной задачи, собственные
возможности её решения;
2.4. владение основами самоконтроля, самооценки, принятия решений и осуществления
осознанного выбора в учебной и познавательной деятельности;
2.5. умение определять понятия, создавать обобщения, устанавливать аналогии,
классифицировать, самостоятельно выбирать основания и критерии для классификации,
устанавливать причинно-следственные связи, строить логическое рассуждение,
умозаключение (индуктивное, дедуктивное и по аналогии) и делать выводы;
2.6. умение создавать, применять и преобразовывать знаки и символы, модели и схемы
для решения учебных и познавательных задач;
2.7. умение организовывать учебное сотрудничество и совместную деятельность с
учителем и сверстниками; работать индивидуально и в группе: находить общее решение
и
разрешать
конфликты
на
основе
согласования
позиций
и
учёта
интересов; формулировать, аргументировать и отстаивать своё мнение;
2.8. умение осознанно использовать речевые средства в соответствии с задачей
коммуникации для выражения своих … потребностей; планирования и регуляции своей
деятельности…;
2.9. формирование и развитие компетентности в области использования информационнокоммуникационных технологий.
3). Реализуемые требования ФГОС ООО к предметным образовательным
результатам:
3.1. развитие умений применять изученные понятия, результаты, методы для решения
задач практического характера;
3.2. развитие основных навыков и умений использования компьютерных устройств;
3.3. формирование навыков и умений безопасного и целесообразного поведения при
работе с компьютерными программами …, умения соблюдать нормы информационной
этики и прав.
Планируемые образовательные результаты –
как уточнение требований ФГОС ООО к образовательным результатам
при изучении данной темы
Планируемые личностные образовательные результаты:
1.1. проявление и развитие познавательного интереса к изучению особенностей
компьютерной графики, представленной на Web-страницах;
1.2. участие в коллективном обсуждении дискуссионных вопросов по особенностям
графики, представляемой на Web-страницах;
1.3. совместное решение учебных задач при создании и редактировании графических
изображений на компьютере для вставки их в Web-страницы.
Планируемые метапредметные образовательные результаты:
2.1. понимание значимости сформированности умений создания графических объектов с
помощью компьютера;
2.2. нахождение эффективных способов представления изображений предназначенных для
размещения на Web-страницах;
2.3. умение сотрудничать с педагогом и одноклассниками, оценивать деятельность
отвечающего школьника и выражать собственное мнение о разработке и размещении
графических объектов.
2.4. понимание важности компьютерной графики для применения данных знаний в
учебной и познавательной деятельности
2.5. умение обоснованно и точно выражать смысл понятий формата графического
изображения, понимание достоинств и недостатков данных видов компьютерного
изображения, умение сравнивать и отличать разную компьютерную графику
2.6. применение знаний кодирования информации к новому объекту кодирования –
изображению
2.7. умение слаженно работать со сверстниками и педагогом при групповой деятельности
по разработке творческих заданий, умение отстоять свою точку зрения
2.8. умение обоснованно и грамотно донести свою току зрения до преподавателя и до
своих сверстников
2.9. понимание понятий различных прикладных программ, умение адаптироваться к
любом компьютерной среде
Планируемые предметные образовательные результаты:
3.1. использование понятий растрового и векторного изображения для решения задач на
кодирование информации
3.2. понимание интерфейса и свойств графических редакторов для будущего умения
редактирования растровых и векторных изображений на компьютере при размещении их
на Web-страницах;
3.3. умение безопасно и с использованием норм информационной этики работать с
компьютерной графикой и графическими редакторами
3. Описание места темы урока в изучаемом курсе (темы курса).
Урок на тему «Вставка изображений в Web-страницы» предусматривается как третий в
разделе «Разработка Web-сайтов с использованием языка HTML» школьного курса
информатики в 4 четверти (07.04.14-05.05.14) 7 класса:
1. Web – страницы и Web-сайты.
2. Форматирование текста на Web-страницах
3. Вставка изображений в Web-страницы.
4. Гиперссылки на Web-страницах
5. Творческая работа
4. Тип урока - комбинированный урок
5. Рекомендуемая литература по теме урока.

Учебник Н.Д. Угринович «Информатика. 8 класс». –
М., БИНОМ, 2008, 168с – обратить внимание на страницу 117
 Интерактивный «Учебник HTML»
6. Методы обучения на уроке.
По характеру познавательной деятельности:
 Объяснительно-иллюстративный.
 Репродуктивный.
 Проблемный
7. Методы обучения на уроке.
По характеру познавательной деятельности:
 Объяснительно-иллюстративный.
 Репродуктивный.
 Проблемный
По источнику информации:
 Словесные (объяснение, рассказ)
 Наглядные (иллюстрация (презентация через проектор))
8. Необходимые аппаратные и программные средства
технологий.
 проектор;
 экран (интерактивная доска);
 программа Pаint для редактирования изображения
 программа Блокнот для создания Web-страницы
 программа Internet Explorer для просмотра Web-страницы
информационных
9. Структура урока (основные этапы урока: проверка задания, объяснение нового
материала, выполнение упражнений и т.д.).
 Организационный момент.
 Актуализация опорных знаний и практического опыта учащихся.
 Изучение нового материала.
 Закрепление нового материала.
 Первичный контроль результатов учебной деятельности.
 Задание на дом.
 Подведение итогов урока. Рефлексия.
10. Опорные понятия и способы деятельности.
Опорные понятия:
- графическая информация,
- графический редактор;
- форматы графических файлов;
- адрес файла;
- Web-страниц и ее структура;
- язык HTML, его назначение, основные теги.
Опорные способы деятельности:
- осуществление основных операций в графическом редакторе «Paint».
- осуществление основных операций в текстовом редакторе «Блокнот».
11. Формируемые знания и способы деятельности.
Формируемые понятия:

форматы графических файлов для Web-страниц (jpg, gif);
 оптимизация графических файлов;;
 теги их атрибуты для работы с изображениями;
 картинки-ссылки;





Формируемые способы деятельности:
построение и редактирование растровых изображений для Web-страниц;
построение векторных изображений для Web-страниц;
гипертекстовая разметка изображения;
вставка изображения в HTML-документ.
выбор значений для атрибутов тега IMG
12. Типы самостоятельной работы учащихся.
Самостоятельные задания на репродуктивную деятельность
 Какое из этих изображений растровое, а какое векторное?



Какие графические редакторы используются для создания этих изображений?
Какие инструменты редактора Paint используются для изменения размера
изображения?
В каких единицах может быть задан размер изображения?
Самостоятельное задание на продуктивную деятельность:

Из предлагаемого набора картинок (10 шт) выбрать подходящие по формату и
размеру для Web-страницы.
Самостоятельное задание на творческую деятельность:

Создание графического изображения для последующей вставки в HTML-документ
13. Виды контроля учебных достижений.
Текущий контроль:
 Устный фронтальный контроль: (для закрепления материала урока)
Какой тег используется для вставки изображения?
Какой обязательный атрибут задает имя файла с картинкой?
Какие необязательные атрибуты могут быть использованы при описании
изображения?

Самоконтроль – нахождение ошибок в списке допустимых для Интернета
картинок, который каждый ученик составлял самостоятельно.
14. Домашнее задание.


Создать Web-страничку на тему «Мое любимое животное», содержащее
изображение, прислать на почту учителя.
Подготовиться к тесту для проверки знаний основных тегов HTML
15. Деятельность учителя и учащихся по выделенным этапам урока с учетом
фактора времени по прилагаемой схеме.
Этап урока
Время
Организационный
момент
4 минуты
Актуализация
7 минут
опорных знаний и
практического опыта
учащихся.
Деятельность
учителя
Войти в класс,
поздороваться,
отметить
отсутствующих.
Сообщить ученикам
тему и ход урока
Задать некоторые
вопросы
проблемного
характера по данной
теме, чем самым
замотивировать
учеников и
перевести их мысли
на нужную тему.
Деятельность
учащихся
Встать
поздороваться,
отвечать «Я» или
поднимать руку во
время отмечания
отсутствующих.
Постараться найди
решение проблемы и
выразить свою
мысль нужными
словами.
Вопросы:
Изучение нового
материала.
10 минут
Все вы сталкивались
с изображениями на
компьютере –
фотографировали на
камеру или рисовали
сами в разных
программах. В каких
случаях
изображение
приходится
редактировать?
Изложить новый
Записывать конспект
материал ученикам в урока в тетрадь
наглядной форме с
использованием
проектора и
интерактивной
доски.
Закрепление нового
материала.
15 минут
Первичный
контроль
результатов учебной
деятельности.
3 минуты
Задание на дом.
3 минуты
Подведение итогов
урока. Рефлексия.
3 минуты
(изложение нового
материала смотри в
п. 15)
Выполнить задания,
указанные учителем
(задания указаны в
п. 11)
Пройти и
посмотреть ведение
тетради, и работу на
компьютере.
проверить, работал
ли ученик на уроке.
Выставить оценки
отвечающим у доски
и с места ученикам.
Задать домашнее
задание, сообщить,
что задание будет
вынесено в
электронный журнал
(смотри п. 13)
Спросить детей,
какая была тема
урока, какие новые
понятия мы сегодня
изучили.
1) Какие форматы
гр. файлов
используются для
Web-страниц?
2) Какой тег
используется для
вставки
изображения?
3) Какой обязательный атрибут
задает имя файла с
картинкой
Поблагодарить за
урок, попрощаться.
Выполнять задания
или внимательно
следить за
работающим у
доски
Предоставить
преподавателю
тетрадь для
проверки.
Записать домашнее
задание
Ответить на
заключительные
вопросы педагога.
Правильные ответы:
Тема урока: Вставка
изображений в .
Web-страницы.
Изучили новые теги
языка HTML
1) для Web-страниц
используются
форматы (jpg, gif)
2) для вставки
изображения
используется тег
IMG.
3) обязательный
атрибут SRC/
16. Краткий конспект содержания учебного материала по теме урока.
На прошлом уроке мы научились создавать web-страницы с использованием
HTML-тэгов. Давайте повторим.
▪ Что такое HTML? (HTML – язык гипертекстовой разметки Web-страниц –
является компьютерным языком программирования для разработки Web-страниц.
HTML – коллекция управляющих символов -дескрипторов для добавления,
форматирования элементов Web-страницы);
▪
Вспомним
теги,
описывающие
структуру
Web-страницы.
(учащиеся по порядку называют теги, и объясняют их значение):
(<HTML> - начало страницы
<HEAD> -оформление заголовка страницы
<TITLE>…</TITLE>
</HEAD
<BODY> - текст и основная часть страницы
</BODY>
</HTML>
 Вспомним теги, для форматирования текста.
Парный тег <FONT> позволяет управлять параметрами шрифта. Он должен
обязательно содержать хотя бы один из атрибутов:
COLOR=”шестнадцатеричный код цвета”,
FACE=гарнитура шрифта,
SIZE размер от 1 до 7.
<P> ваш текст </P> - создание абзаца
ALIGN=“left” – выравнивание текста по левой стороне
ALIGN=“right” – выравнивание текста по правой стороне
ALIGN=“center” – выравнивание теста по центру
Изучение нового материала
Итак, мы повторили структуру создания web-страницы и правила сохранения
HTML документа. Это будет нам необходимо при изучении новой темы на
занятии. Сегодня мы научимся вставлять рисунки и гиперссылки в web-страницы.
Для вставки рисунка в web – страницу используется тег <img>, с его
неотъемлемым атрибутом src, которому присваивается значение адреса рисунка,
его названия и расширения. Если графический файл находится на локальном
компьютере в той же папке, что и файл web-страницы, то в качестве значения
атрибута src достаточно указать только имя файла. Например:
<img SRC=’Мой файл.jpg’ > </img>
Если файл находится в другой папке на данном локальном компьютере, то
значением атрибута должно быть полное имя файла, включая путь к нему в
иерархической файловой системе. Например:
<img SRC=’C:Мои рисунки\Мой файл.jpg' > </img>
Следующий атрибут тега <img> - align (выравнивание). Мы уже с ним знакомы.
Какие значения он может принимать? Правильно:(left, right, top, middle, bottom).
Например: <img SRC=’C:Мои рисунки\Мой файл.jpg' ALIGN=‘right’> </img>
Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать
обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0
до 10. Чем больше значение, тем толще обводка рисунка.
А теперь рассмотрим размещение гиперссылок в web-страницу. Гиперссылки,
размещенные на web-странице, позволяют загружать в браузер другие webстраницы, хранящиеся на локальном компьютере или в интернете. Гиперссылка
состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью тэга <A> и его атрибута Href, указывающего, в
каком файле хранится загружаемая web-страница:
<A HREF=‘адрес’>гиперссылка </A>
Указателем ссылки может быть текст или рисунок.
IV. Закрепление нового материала
Создать html – страницу про свою семью. Вставить рисунок и гиперссылку.
Например,
17.
18. <html>
19. <head>
20. <body bgcolor="blue">
21. <title> Моя семья </title>
22. </head>
23. <FONT COLOR="white" Faсe="Arial"size=16>
24. <P ALIGN="center">Семья Ивановых</P>
25. </FONT>
26. <FONT COLOR="white"size=6>
27. <p>Моя семья очень дружная. Она состоит из четырех человек: папа, мама,
сестра Марина и я - Карина. Я очень люблю свою семью </p>
28. <img SRC="foto.jpg" align=left > </img>
29. <A href="Karina.html"><FONT COLOR="white"size=6> Карина</FONT></A>
30. </FONT>
31. </body>
32. </html>
33. Вторая страница:
34. <html>
35. <head>
36. <body bgcolor="blue">
37. <title> Страница Карины </title>
38. </head>
39. <FONT COLOR="white" Faсe="Arial"size=16>
40. <P ALIGN="center">Карина</P>
41. </FONT>
42. <FONT COLOR="white"size=6>
43. <p>Иванова Карина Александровна родилась 18 июля 1999 года </p>
44. </FONT>
45. </body>
46. </html>
V. Подведение итога
- сегодня мы с вами научились вставлять изображения и гиперссылки в webстраницу;
- полученные сегодня знания пригодятся нам при создании своего сайта.
VI. Домашнее задание
п.3.7.4, 3.7.5 читать, ответить на вопросы