ИНФОРМАТИКА. 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 читать, ответить на вопросы