Вставка изображений на веб-страницы / Открытый урок

Учебник: Н.Угринович. Информатика. Базовый курс.

Учебная тема: Коммуникационные технологии. Разработка Web-сайтов с использование языка разметки гипертекста HTML.

Тема урока: «Вставка изображений на веб-страницы».

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

Дидактические материалы: слайды с тестом для повторения(приложение 1), таблички с тегами для магнитной доски, инструкции для практической работы (приложение 2)
Цели:

Образовательная:
- познакомиться с тэгом для вставки изображений на веб страницы;

- вставить фото на личную страницу.

Воспитательная:

- воспитывать умение работать в парах.

Развивающая:

- развивать коммуникативные умения;

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

№	Этап урока	Время
1	Орг.момент		1 мин
2	Проверка домашнего задания. Актуализация опорных знаний. Тест.		10 мин
3	Изучение нового материала. Запись темы урока. Определение целей. Работа с учебником. Обсуждение и проверка прочитанного.		10 мин
4	Закрепление. Практическая работа		15мин
5	Проверка результатов практической работы. Рефлексия.		7 мин
6	Домашнее задание		2 мин

Орг. момент. Проверка рабочих мест (учебник, тетрадь).
Проверка домашнего задания.

учитель	ученики
Что мы изучаем и над чем работали на прошлых уроках?	Ответы: Работаем над первым сайтом «Наша команда». Создавали личные веб-страницы.
	Общую страницу. Форматировали текст. Делали заголовок. Оформляли абзацы
Какое было домашнее задание? На проекторе показывается открытый электронный ящик с присланными фото.	Ответ: Приготовить личную и общую фотографию. Принести на электронном носителе или переслать по электронной почте.
Давайте проверим, как мы хорошо запомнили и усвоили структуру веб-страницы и служебные слова, необходимые для создания вебстраницы. Откройте тетради. Запишите число.	Записывают число
Тест. (приложение 1). (проставьте номера от 1 до 5) (приложение 1). Записывайте только букву правильного ответа	Отвечают на вопросы теста

учитель	ученики
Поменяйтесь тетрадями. Проверьте. Оцените, поставьте отметку (а, а, г, в, б)	Дети сидят парами. Меняются тетрадями. На проекторе ответы. Сколько правильных ответов, такова и оценка.
Назовите свои результаты. Поднимите руки, получившие 5, 4, 3.	Поднимают руки. Учитель считает. Делает выводы.
Что мы проверяли?	Ответ: Основные теги
Повторим структуру сайта Подойти к доске и расставить теги в соответствии с правилами оформления кода веб-страницы. (по итогам работы можно задать вопросы: Почему вы так расставили тэги? Что они означают? )	Выходят два ученика и расставляют таблички с тегами на магнитной доске
Итак, что мы повторили?	Ответ: Структуру веб-страницы
Это будет нам необходимо для продолжения работы над личными страницами.

3. Изучение нового материала.

учитель	ученики
Текст на веб - страницах может	Называют тему урока.
быть очень интересным и познавательным, но рисунки украшают веб-страницу, акцентируют внимание. Картинки любят все. Включение картинок даѐт красивый интерфейс сайта, делает проект успешным. Какова тема урока? Запишем еѐ в тетрадь.
Тема урока: «Вставка изображений на веб-страницы». Цель урока? Воспитывать умение работать в парах. Развивать коммуникативные умения	Познакомиться с тэгом для вставки изображений на веб страницы. Вставить фото на личную страницу.

Работа с учебником.

учитель

ученики

Открыть учебники на странице 117. Познакомьтесь с текстом параграфа. Выпишите в тетрадь тэг с помощью которого можно поместить графический элемент на html – страницу, и его атрибуты.

Выписывают в тетрадь <IMG src=”foto.jpg”>

Проверка прочитанного и записанного.

Какого формата могут быть изображения для веб-страниц?

Где может находиться изображение для вставки на веб-страницу?

Верно, но лучше, если страница находится в той же папке, что страница, имеющая ссылку на картинку.

Обратите внимание:

foto.jpg, foto.JPG,

FOTO.jpg,

FOTO. JPG – разные файлы

Ответ: JPG, GIF

Ответ: 1) картинка находится в той же папке, что и сама веб-страница, 2) в другой папке, 3) в интернете

Записывают в тетрадь.

Закрепление. Практическая работа.

Цель работы: Вставить личное фото на личную веб-страницу.

Инструкция (прочитать фронтально, текст можно показать через документкамеру) (приложение 2).

4. Проверка результатов практической работы.

Вы все справились с заданием по-разному, фотографии на некоторых страницах сильно большие. Чтобы прочитать текст, приходится использовать полосу прокрутки.

учитель

ученики

Вы все справились с заданием.

Чему научились?
Какие трудности возникали при выполнении задания?
Можно ли улучшить свой продукт?
Каково ваше мнение о напарнике?
Когда и где может пригодиться то, чему мы сегодня научились?
Чему мы ещѐ не научились?

Отвечают на вопросы

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

(домашнее задание даѐтся дифференцированно по итогам практической работы).

А) Повторить пройденный материал. Прочитать параграф учебника;

Б) найти информацию об атрибутах тэга IMG, которые используются для указания размера изображения.

В) создать страницу, посвященную празднику 9 мая. Название, фото, стихотворение.

Заключение. На следующих уроках мы продолжим работать над вашими первыми веб – страницами. Научимся делать гиперссылки. И все ваши созданные разрозненные страницы объединятся в один общий документ. Всем спасибо, урок окончен.

Приложение 1

Вопросы теста.

1) Какие тэги должны присутствовать в HTML – документе обязательно?

А.<HTML></HTML> Б.<P></P> В.<hr>

2). Внутрь какого контейнера помещается код веб-страницы?

Г.<H6></H6>

А.<HTML></HTML> Б.<body></ body > В.<title>< /title >

3). Какой тэг задает заголовок веб-страницы?

Г.<head></ head >

А.<HTML></HTML> Б.<body></ body > В.<title>< /title >

4). В какой тэг помещается название веб - страницы?

Г.<head></ head >

А.<HTML></HTML> Б.<body></ body > В.<title>< /title >

5) В какой тэг помещается то, что мы видим в окне браузера?

Г.<head></ head >

А.<HTML></HTML> Б.<body></ body > В.<title>< /title >

Г.<head></ head >

Приложение 2
«Вставка изображений на веб-страницы»

- Открыть личную папку. Проверить наличие фотографии. Переименовать картинку латинскими буквами.

- Открыть личную страницу в программе БЛОКНОТ.

- Вставить фотографию после горизонтальной черты.(<hr>) Расположить посередине.

- Сохранить изменения в документе.

- Проверить в браузере.

- Сделать аналогично на каждой личной странице участников команды.

- При наличии времени вставить изображение на общую страницу команды. Фото можно получить через веб-камеру.
- Показать результат учителю.

Скачать публикацию

Вставка изображений на веб-страницы

Свидетельство

Похожие публикации