Интернет не был бы столь популярен в мире, если бы Web-страницы содержали только текст. Мир Интернет – это мир красок, фотографий, анимационных эффектов, видео- и аудиоклипов. Благодаря использованию графики удаётся сообщить посетителю Web-страницы необходимый эмоциональный настрой и представить информацию более наглядно. Впрочем, безвкусное оформление и перегруженность специальными эффектами также гарантированно вызывает раздражение у посетителей сайтов и неприятие любой информации, представленной в документе.
Основной задачей данного занятия является формирование умений и навыков вставки графических объектов при создании Web-страниц средствами языка HTML. На последующих занятиях будут рассмотрены методы подготовки графики для Web-страниц и оптимизации использования графики для достижения требуемых эффектов.
Цели и задачи занятия:
- Формирование знаний, умений и навыков вставки графических объектов при создании Web-страниц средствами языка HTML;
- Развивать познавательный интерес, логическое мышление, творческую активность при выполнении практических заданий;
- Воспитывать внимательность, усидчивость, информационную культуру обучающихся.
Тип занятия: комплексное применение знаний и способов деятельности.
Материалы и оборудование:
- компьютерный класс;
- проектор;
- программное обеспечение: Блокнот, любой обозреватель - Internet Explorer, Opera, Mazilla;
- раздаточный материал – карточки с заданиями.
План проведения занятия:
- Организационный момент.
- Теоретическая часть (закрепление знаний и способов деятельности ).
- Постановка цели занятия (мотивация занятия).
- Гимнастика для глаз.
- Практическая часть.
- Подведение итогов занятия. Рефлексия.
Ход занятия
Организационный момент: приветствие, проверка присутствующих на занятии обучающихся.
Теоретическая часть:
На предыдущем занятии мы с вами начали изучение темы “Создание Web-страниц средствами языка HTML”, вы научились вводить текст на страницу, оформлять страницу фоном.
Просмотр презентации по закреплению знаний, умений и навыков при создании Web-страниц, просмотру HTML-кода и внесению изменений в создание Web-страниц. Особое внимание обратить на тот факт, что при написании HTML – кода используют не только теги, но связанные с ними атрибуты и их значения. Прослеживается следующая логическая цепочка: тег – атрибут – значение (Презентация: слайд 1 – слайд 10).
Беседа с обучающимися о том, что мир Интернет – это мир красок, фотографий, анимационных эффектов, видео- и аудиоклипов. Благодаря использованию графики удаётся сообщить посетителю Web-страницы необходимый эмоциональный настрой и представить информацию более наглядно.
Постановка цели занятия:
Сегодня будем учиться вставлять простейшие графические объекты на Web-страницу. Педагог рассказывает о том, что не все графические файлы можно вставить на Web-страницу. Из множества форматов графики в Интернет используются всего лишь три. Обсуждение форматов графических объектов при создании Web-страниц. (слайд 11).
Ввод дескриптора и атрибутов вставки графических объектов на Web-страницу (Презентация: слайд 12). Педагог рассказывает обучающимся о том, как прописать относительный путь к файлам, которые находятся в разных местах.
Гимнастика для глаз: ОФТАЛЬМОТРЕНАЖ (Презентация: слайд 13).
Практическая часть:
После офтальмотренажа обучающиеся выполняют практическую работу поэтапно. Задания выводятся на экран через проектор (Презентация: слайд 14).
Рабочий материал для работы над созданием Web-страницы в личных папках обучающихся. Прочитав текстовый документ, обучающиеся обсуждают тему Web-страницы и придумывают название своему документу.
К выполнению двух последних заданий, изменению размера картинки и оформлению её в рамочку, педагог подводит обучающихся в ходе беседы о дизайне Web-странички.
При выполнении заданий педагог помогает обучающимся выйти из возникающих затруднений.
Дополнительное задание (если ребята быстро справились с основными этапами практического задания): педагог предлагает обучающимся оформить полученную Web-страницу фоном (Презентация: слайд 15).
“Исправь ошибку”. А теперь проверим, как вы умеете читать HTML-код Web-страницы. Я раздам карточки с кодом страницы, где умышленно допущены ошибки, которые вы должны исправить.
Карточка:
<html> <head><title>Мой любимый город<title></head>
<bodi bgcolor= #ffcccc >
23 июня 1956 года посёлок Ольжерас был преобразован в город Междуреченск областного значения.
<img src=gorod.bmp”>
</body>
< html>
После выполнения этого задания педагог показывает слайд с правильным HTML-кодом и обучающиеся сами оценивают свою работу с карточкой. При этом проходит обсуждение допущенных ошибок (Презентация: слайд 16).
Слайд 16:
<html> <head><title>Мой любимый город</title></head>
<bodiy bgcolor=”#ffcccc” >
23 июня 1955 года посёлок Ольжерас был преобразован в город Междуреченск областного значения.
<img src=gorod.bmp”>
</body>
</html>
Подведение итогов. Рефлексия. В конце занятия подводятся итоги создания Web-страниц. Все обучающиеся показывают свои работы и отвечают на вопрос: Что вам понравилось на занятии, выполнение каких заданий вам больше удалось и какие трудности вы испытали при создании странички?
Список используемой литературы.
- Калиновский, А. Ваша домашняя страничка в Интернете. Homepage, или просто “Хомяк”. [Текст]/А.Калиновского//БХВ-Петербург, г. Санкт-Петербург – 2005. – 224 с.
- Леонтьев, В.П. Создаём страничку в Интернет: курс начинающего веб-мастера. [Текст]/В.П. Леонтьева//ОЛМА-ПРЕСС, г. Москва – 2005. – 48 с.
- Рева О.Н. HTML. Просто как 2х2. [Текст]/О.Н. Рева//Эксмо, г. Москва – 2007. – 256 с.