В современном информационном мире людям приходится иметь дело с огромными потоками самых разнообразных сведений, новостей, данных и сообщений. Чтобы донести до людей какую-либо информацию, необходимо сделать это ярко и эффективно.
Создать Web-страницу, или даже Web-узел, не составит труда. Для достижения свободы творчества необходимы базовые знания о языке разметки гипертекстовых документов HTML.
Web-страницы – это прежде всего текстовая информация. Очень важно научиться вводить и форматировать блоки текста на странице. Но Интернет не был бы столь популярен в мире, если бы Web-страницы содержали только текст. Мир Интернет – это мир красок, фотографий, анимационных эффектов, видео- и аудиоклипов.
Основной задачей данного занятия является закрепление и систематизация знаний, умений и навыков форматирования текста и вставки графических объектов при создании Web-страниц средствами языка HTML. Это занятие проводится как итоговое после изучения двух разделов: ввод и форматирование текста, вставка графических объектов в документ.
Цели и задачи занятия:
- закреплять и систематизировать знания, умения и навыки форматирования текста и вставки графических объектов при создании Web-страниц средствами языка HTML;
- развивать познавательный интерес, логическое мышление, творческую активность при выполнении практических заданий;
- воспитывать внимательность, усидчивость, информационную культуру обучающихся, любовь к своей малой Родине.
Тип урока: закрепление и систематизация изученного материала.
Материалы и оборудование:
- компьютерный класс;
- программное обеспечение: Блокнот, любой обозреватель - Internet Explorer, Opera, Mazilla;
- раздаточный материал – карточки с заданиями.
План урока:
- организационный момент.
- постановка цели занятия (мотивационное начало занятия).
- теоретическая часть.
- практическая часть.
- гимнастика для глаз.
- подведение итогов занятия. Рефлексия.
Ход занятия
Организационный момент: приветствие, проверка присутствующих на занятии обучающихся.
Постановка цели занятия:
В течении нескольких уроков мы с вами изучали тему “Создание Web-страниц средствами языка HTML”, вы научились вводить текст на страницу, форматировать его, оформлять страницу фоном, изменять цвет текста, вставлять картинки и фотографии. Сегодня на занятии закрепим полученные знания, умения и навыки по созданию Web-страниц и результатом нашей работы будет страница, посвящённая нашему городу.
Вопросы обучающимся:
- Как вы думаете, почему я выбрала эту тему? (В этом году юбилей городу – 55 лет)
- Когда день рождения нашего любимого года? (23 июня 1955 года)
- Почему наш город назвали Междуреченск? (Город расположен между двух рек – Томь и Уса)
- Сколько в городе проспектов, назовите их? (Строителей, Шахтёров, Коммунистический)
- Какой проспект называют Арбатом? (Коммунистический)
- Перечислите посёлки города. (Обучающиеся перечисляют)
- Спортивная гора нашего города? (Югус)
- Как с шорского языка переводится Югус? (Медведь) и т.д.
Теоретическая часть: теоретическая часть состоит из двух этапов.
Вернёмся к теме нашего занятия. Язык HTML не является языком программирования, он предназначен для разметки текстовых документов. То, как будет выглядеть ваш текст, определяют метки. Как они называются? (Дескрипторы, тэги). Тэги – это коллекция управляющих символов, с помощью которых можно добавлять и форматировать элементы документа. А что используют, чтобы изменить внешний вид Web-страницы: фон, цвет текста? (Атрибуты). А что должны иметь атрибуты? (Значения).
1 этап – “Что это?” У меня на столе лежат карточки с названиями тэгов (html, body, br, img и т.д ) и атрибутов (bgcolor, aling, src и т.д.), карточки с надписями перевёрнуты. Вы по очереди выходите, берёте карточку, показываете группе и располагаете на доске под надписью ТЭГИ или АТРИБУТЫ (на доске прикреплены листы с надписями, одна слева, другая справа). Группа обсуждает правильность выбора.
2 этап - “Исправь ошибку”. А теперь проверим, как вы умеете читать HTML-код Web-страницы. Я раздам карточки с кодом страницы, где умышленно допущены ошибки, которые вы должны исправить ручкой (в ручку вставлен красный стержень).
Карточка:
<html> <head> <title>Мой город <title> <bodi bgcolor = #000000> <h2> align="center">55 ЛЕТ ЛЮБИМОМУ ГОРОДУ 23 июня 1955 года посёлок Ольжерас был преобразован в город Междуреченск областного подчинения. </body> <html> |
После выполнения этого задания педагог вывешивает на доске плакат с правильным HTML-кодом и обучающиеся сами оценивают свою работу с карточкой. При этом проходит обсуждение допущенных ошибок.
Плакат:
<html> <head> <title>Мой город </title> <body bgcolor = ”#000000”> <h2> align="center">55 ЛЕТ ЛЮБИМОМУ ГОРОДУ<h2> 23 июня 1955 года посёлок Ольжерас был преобразован в город Междуреченск областного подчинения. </body> </html> |
Практическая часть: практическая часть также состоит из двух этапов.
1 этап - “Составь HTML-код”. Приступаем к практической части нашего занятия. Сейчас я вам раздам карточки (формат А4), на которых изображена простая Web- страница, а вы должны будете составить HTML-код этой страницы. Разрешается пользоваться вашими тетрадями (в тетрадях обучающиеся на предыдущих занятиях записывали тэги, атрибуты и их значения).
Подсказка педагога: Обратите внимание на заголовок страницы.
Карточка:
После выполнения 1 этапа практической части занятия необходимо провести гимнастику для глаз. Гимнастику можно выполнять любую, какая есть в разработках педагога.
2 этап – “Оформи Web-страницу”. На этом этапе занятия необходимо оформить нашу страницу, выполняя задания, которые находятся на карточке. Эти задания раздаются каждому обучающемуся после выполнения им 1 этапа практической части. Для того, чтобы изменить цвет фона и шрифта, обучающиеся пользуются “Таблицей “безопасных” цветов”.
Задания:
- Оформить страницу фоном;
- Изменить цвет шрифта, причём цвет заголовков одним цветом, а цвет основного текста другим;
- Вставить фотографию города. Фотографии находятся на Рабочем столе (Рисунок 1, Рисунок 2, Рисунок 3, Рисунок 4). Каждый обучающийся выбирает картинку, которая ему понравилась, и размещает её по своему усмотрению;
- Вокруг картинки оформить рамку;
- Задать краткое описание картинки;
- Первый заголовок сделать бегущей строкой.
Рисунок 1
Рисунок 2
Рисунок 3
Рисунок 4
При выполнении заданий педагог помогает обучающимся выйти из возникающих затруднений.
Подведение итогов. Рефлексия. В конце занятия подводятся итоги создания Web-страниц. Педагог на своём компьютере представляет собственный вариант оформления Web-страницы (Приложение 1). Все обучающиеся показывают свои работы и отвечают на вопрос: Что вам понравилось на занятии, выполнение каких заданий вам больше удалось и какие трудности вы испытали при создании странички?
Ребята, которые не успели выполнить все задания по оформлению Web-страницы, завершат работу на следующем занятии.
Список используемой литературы
- Калиновский А. Ваша домашняя страничка в Интернете. Homepage, или просто “Хомяк”. [Текст]/А.Калиновского//БХВ-Петербург, г. Санкт-Петербург – 2005. – 224 с.
- Леонтьев В.П. Создаём страничку в Интернет: курс начинающего веб-мастера. [Текст]/В.П. Леонтьева//ОЛМА-ПРЕСС, г. Москва – 2005. – 48 с.
- Рева О.Н. HTML. Просто как 2х2. [Текст]/О.Н. Рева//Эксмо, г. Москва – 2007. – 256 с.