Инфоурок / Информатика / Конспекты / Конспект урока на тему "Изображения на веб-страницах"

Конспект урока на тему "Изображения на веб-страницах"


Напоминаем, что в соответствии с профстандартом педагога (утверждён Приказом Минтруда России), если у Вас нет соответствующего преподаваемому предмету образования, то Вам необходимо пройти профессиональную переподготовку по профилю педагогической деятельности. Сделать это Вы можете дистанционно на сайте проекта "Инфоурок" и получить диплом с присвоением квалификации уже через 2 месяца!

Только сейчас действует СКИДКА 50% для всех педагогов на все 184 курса профессиональной переподготовки! Доступна рассрочка с первым взносом всего 10%, при этом цена курса не увеличивается из-за использования рассрочки!

ВЫБРАТЬ КУРС И ПОДАТЬ ЗАЯВКУ
библиотека
материалов

Изображения на веб-страницах

Цели урока:

  • расширение и углубление представлений о языке гипертекстовой разметки HTML;

  • формирование умений создавать веб-страницы с графикой;

  • развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.

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

Учащиеся должны уметь: создавать в редакторе Блокнот веб-страницы
с графикой.

Программное и методическое обеспечение урока: редактор Блокнот;
учебное пособие «Информатика 11», § 3 (п. 3.2) [1]; приложения к уроку 6;
ЭСУ Web11 6 [2].

Методические рекомендации к уроку

1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная формы работы).

Выполнение индивидуальных заданий на компьютере: оформить текст на предложенной учителем веб-странице в соответствии с рисунком упражения к §3 (п.3.1) пособия [1] или ЭСУ Web11-5 [2].

Предложите учащимся ответить на вопросы: В чем заключается гипертекстовая разметка документов? Какова структура HTML-документа? Каким тегом задается абзац? Переход на новую строку? Какими тегами задается полужирное и курсивное начертание символов? Как задать фон и цвет текста всей веб-страницы? Какими тегами и атрибутами задается шрифт, размер и цвет символов? Возможно использование теста (приложение к уроку 6; ЭСУ Web11 5 [2]).

2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).

Перед началом объяснения нового материала в форме фронтальной беседы обсудите роль, которую в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения (обои), разделительные линии. Они не только делают страницы более привлекательными и наглядными, но во многих случаях являются основными источниками информации. Продемонстрируйте примеры (ЭСУ Web11 6 [2]).

Подчеркните, что предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Они могут быть получены с помощью цифрового фотоаппарата, сканера или из сети Интернет. Наиболее предпочтительны графические форматы gif, jpg и png, файла которых имеют небольшие размеры, что позволяет ускорить процесс загрузки. Напомните, что в формате jpg обычно сохраняют фотографии. Формат gif поддерживает анимацию и прозрачность.

3. Объяснение нового материала (объяснительно-иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы).

Объяснение начните с вопроса: хранятся ли изображения на самой веб-странице? Подчеркните, что все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML-коде имеются лишь ссылки на них. Для отображения рисунков предназначен тег <img>, неотъемлемым атрибутом которого является имя графического файла.

Далее продемонстрируйте действие некоторых атрибутов тега <img>. Так, высоту и ширину отображаемого на экране рисунка задают значениями атрибутов height и width, а толщину рамки вокруг изображения   значением атрибута border. В классах с низким уровнем подготовки это делает учитель с помощью видеопроектора. При достаточной подготовленности учащихся можно предложить им провести самостоятельное исследование с последующим фронтальным обсуждением результатов.

Важно подчеркнуть, что указание размеров позволяет увеличить или уменьшить лишь видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не указаны, то по мере загрузки рисунка может измениться расположение текста и других объектов на экране. Поэтому, полезно всегда явно задавать эти атрибуты. Значения атрибута align указывают на выравнивание текста относительно рисунка или на способ обтекания текстом.

С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден или показ отключен в браузере. Кроме того, это сообщение показывается в виде подсказки, когда курсор мыши подводится к рисунку. Продемонстрировать полезность явного задания атрибутов height, width и alt можно, сняв установленный по умолчанию флажок Показывать изображения на вкладке Дополнительно диалогового окна Свойства обозревателя.

hello_html_da8f7fa.pnghello_html_29a49ba2.gif

В заключение продемонстрируйте использование изображения из файла в качестве фона веб-страницы с помощью атрибута background тега <body>.

4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).

Предложите учащимся занять места за компьютерами и выполнить задания примеров 1 и 2 из § 3 (п.3.2) учебного пособия [1], ЭСУ Web11 6 [2]. Контролируйте самостоятельную работу каждого ученика, просматривая результаты на каждом этапе в браузере. При затруднениях оказывайте необходимую помощь.

При наличии времени пhello_html_31562cd.gifодготовленным учащимся hello_html_31562cd.gifдополнительно предложите создать поздравительную открытку (пример 3 из §3 (п.3.2) пособия [1], ЭСУ Web11 6 [2].

5. Подведение итогов урока

Учащиеся демонстрируют созданные страницы. Обсуждаются этапы работы и затруднения учащихся. Кратко формулируются особенности использовании изображений на веб-страницах,

6. Домашнее задание

Изучить материал § 3 (п. 3.2) учебного пособия [1], ответить на вопросы 1 3, подготовиться к практическому выполнению одного из заданий упражнения 2


Общая информация

Номер материала: ДВ-089088


Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

Специально для учителей, воспитателей и других работников системы образования действуют 60% скидки (только до конца зимы) при обучении на курсах профессиональной переподготовки (124 курса на выбор).

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG

Похожие материалы

Только до конца зимы! Скидка 60% для педагогов на ДИПЛОМЫ от Столичного учебного центра!

Курсы профессиональной переподготовки и повышения квалификации от 1 400 руб.
Для выбора курса воспользуйтесь удобным поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВЫ).

Московские документы для аттестации: KURSY.ORG


Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «1С: Предприятие 7.7»
Курс «3D Studio MAX»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышение квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»