План-конспект учебного занятия в компьютерном классе при изучении языка HTML, предназначен для детей среднего школьного возраста.
Занятие проходит в разделе темы “HTML”.
Третье занятие: ребята уже научились составлять структуру web – страницы, познакомились с текстовыми тегами и атрибутами тега “body”.
Следующие занятия посвящены гиперссылкам, составлению таблиц, каскадных таблиц стилей, подключению языка “java script”. После прохождения данного раздела ребята получат базовые навыки создания сайтов.
Форма занятия – групповая, наполняемость группы - 8 человек.
Цели:
- Закрепить навыки создания документов HTML, структуру создания web-страницы;
- Научить использовать рисунок для оформления web-страницы.
Задачи:
- Повторить структуру создания web-страницы;
- Научить вставлять рисунок в web-страницу;
- Показать изменение изображения при разных значениях атрибутов;
- Воспитание трудолюбия, желания довести работу до конца;
- Развитие навыков самостоятельной работы при изучении нового материала;
Оборудование:
- Доска, маркеры (мел)
- Экран
- Проектор
- Компьютер (ноутбук)
- Оборудованный компьютерный класс (ОС “Windows”, Internet Explorer)
- Раздаточный дидактический материал для выстраивания структуры web - страницы
- Карточки с заданием для самостоятельной работы (при выполнении практического задания)
Ход занятия
I. Организационный момент (3 мин)
Подготовка детей к занятию: рабочие тетради, ручки.
Сообщение темы и цели занятия.
- Сегодня мы с вами продолжим изучение языка HTML: научимся вставлять рисунок в web – страницу. Для того чтобы этому научиться, давайте повторим структуру ее создания.
II. Повторение (15 мин)
1) Задача: Повторить структуру создания web-страницы
Самостоятельная работа (10 мин)
- Давайте повторим структуру создания web-страницы, это понадобиться нам сегодня для работы, т.е. мы будем составлять новые страницы. Таким образом, к концу занятия у нас с вами будет уже две web – странички: одна с текстовыми тегами, другая с рисунками.
Задание детям:
Индивидуальная работа по карточкам. Самостоятельно составить структуру web – страницы из предложенных тегов. Подобрать к заголовкам соответствующие текст и картинку. (Приложение 1)
- Сложите, пожалуйста, теги в правильном порядке, чтобы получилась web-страница. К предложенным заголовкам подберите соответствующие текст и картинку. Вставьте их в web - страницу.
Проверка выполнения задания: После того как задание будет выполнено, один из детей вслух произносит собранную им структуру, остальные проверяют у себя.
- У всех такая структура?
Если кто-то не согласен, то почему?
- Еще раз озвучьте правильную структуру.
Правильно:
<html>
<head>
|Заголовок страницы
</head>
<body>
|текст, картинки
</body>
</html>
2) Задача: Повторить порядок сохранения HTML документа
Фронтальный опрос (4 мин)
- Что необходимо сделать после создания web-страницы? (Сохранить)
- Как мы будем это делать? Продиктуйте мне, пожалуйста, а я запишу на доске порядок сохранения.
Ребята проговаривают процесс сохранения документа, педагог попутно задает уточняющие вопросы, акцентируя внимание на важных моментах.
Правильно:
Файл -> Сохранить как -> название документа. html расширение
Подведение итога по повторению (1 мин)
Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии.
Педагог оценивает: как ребятами усвоен материал. Кто хорошо ориентируется в структуре web – страницы, а кому еще необходимо поработать.
Изучение нового материала (25 мин)
Задача: Научить вставлять рисунок в web – страницу и познакомить со средствами изменения при помощи атрибутов и их значений.
1) Беседа. (5 мин)
- Давайте с вами отвлечемся от компьютеров и просто вспомним… Вы наверняка встречали в своей жизни огромное множество изображений (рисунков, картинок).
- Какие примеры вы можете привести, где применяются рисунки?
- А как вы думаете, для чего вставляют картинки в текст?
- Кто-нибудь пробовал это делать раньше?
Обобщая ответы детей, педагог подводит итог:
- Итак, мы с вами выяснили, что изображение может использоваться: для красоты, для графического сопровождения текста, нести в себе различную информацию (кнопки, графики и т.д.), а также умение вставлять картинку в текст, это пригодится нам при создании собственного сайта.
2) Слайдовая презентация с комментариями педагога (20 мин)
Для знакомства детей с новым материалом используется специально подготовленная слайд-презентация. (Приложение 2)
Дети по ходу объяснения педагога фиксируют в тетради новый материал.
Слайды и комментарии |
Для вставки рисунка в web – страницу используется тег <img>, с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. В данном примере это “tiger” c расширением jpg. Видим рисунок. Ребята записывают в тетрадь. |
А теперь рассмотрим подробно каждый из атрибутов тега <img>. Итак: атрибут height (высота). Какое значение может принимать этот атрибут, и на какие параметры влияет? Ребята говорят свои версии. Посмотрим (на экране меняется картинка). Какие изменения вы заметили? Масштаб изменился пропорционально (высота - ширина) |
Если есть высота, значит должна быть и ширина, значение следующего атрибута влияет на ширину рисунка. width (ширина). Обратите внимание на экране значение ширины в 2 раза меньше высоты, посмотрим как изменится рисунок, он сужается по горизонтали. |
Следующий атрибут тега <img> - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать? Правильно:(left, right, top, button, center) Видите, присвоено значение right, поэтому рисунок находится справа. |
Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10.Чем больше значение, тем толще обводка рисунка. |
Добавим текст. Обратите внимание, изменили значения некоторых атрибутов. Каких? Повлияло ли изменение на изображение? |
Следующий атрибут hspace значение данного атрибута указывает на расстояние от рисунка до текста по вертикали. Обратите внимание, как сдвинулся текст на экране. |
Расстояние от изображения до текста можно изменять не только по вертикали, но и по горизонтали, используя атрибут vspace. |
Необходимым атрибутом является alt (подсказка). Не каждый браузер поддерживает графику, изображения не отображаются, но пользователь имеет возможность прочесть о том, что изображено (значение атрибута alt). Подсказка также всплывает при наведении мышкой на изображение. |
IV. Закрепление нового материала
Задача: Закрепить полученные знания на практике
1) Задание: (4 мин)
Создать папку для рисунков, скопировать рисунки, переименовать.
Создать новый документ html. Вставить 4 рисунка, используя все атрибуты, но присваивая им различные значения. Добавить текст.
Детям раздаются карточки с заданиями для практической работы.
- Различные изображения (рисунки) вы можете найти в папке “Рисунки” на своих компьютерах. Там же вы найдете и демонстрацию PowerPoint “HTML. Рисунки”. Чтобы сделать вашу новую страничку интереснее можете закрасить фон страницы и изменить цвет текста. - Мы с вами это уже делали на предыдущих занятиях.
2) Физ. Минутка (3 мин)
Мы писали, мы писали, наши глазоньки устали…
Глаза — не только зеркало души, но и тонкий оптический прибор, за которым нужен тщательный уход. Особенно в школьном возрасте, и при работе за компьютером, когда нагрузки на глаза достаточно велики.
1. Сядьте и крепко зажмурьте глаза на 3–5 секунд, а затем на 3–5 — откройте. Повторите 6–8 раз.
2. Быстро поморгайте в течение 1 минуты (с перерывами).
3. Встаньте, вытяните вперед руку и посмотрите на кончик пальца, расположенного по средней линии лица. Медленно приближайте палец, не сводя с него глаз до тех пор, пока он не начнет двоиться. Повторите 6–8 раз.
3) Самостоятельная работа. (30 мин)
Ребята садятся за компьютеры, работают самостоятельно. Педагог следит за выполнением задания, делает комментарии, указывает на недочеты, оценивает, хвалит. В случае возникновения вопроса учащийся может обратиться к педагогу или сверстнику. Также он может самостоятельно просмотреть презентацию нового материала за своим компьютером.
V. Итог занятия. (10 мин)
Форма организации – рефлексия.
- Сегодня мы с вами научились вставлять изображения в web-страницу.
- Предлагаю вам оценить свою работу на занятии по 5-и бальной системе и прокомментировать свою оценку.
Педагог дает общую оценку работы на занятии, обращая внимание на успехи каждого.
- Полученные сегодня знания пригодятся нам при создании своего сайта. Теперь у нас уже есть две web-страницы, и мы сможем делать ссылки между ними, этим мы займемся на следующем занятии.