Предмет: информатика и ИКТ.
Тип уроков:
1-4 комбинированные уроки (изучение нового
материала, закрепление посредством выполнения
практических работ);
5-7 урок – повторение (посредством выполнения
практических работ);
8 урок контрольная работа.
Вид уроков: интегрированные уроки с элементами дифференцированного обучения, предполагающие творческий подход учащихся к выполнению заданий.
Технология: обучающая, проблемная.
Продолжительность: 8 уроков по 45 мин, зачетная работа с демонстрацией Web-сайта «Моя семья».
Цели:
- познакомить с элементами HTML и структурой HTML-документа;
- освоение приемов создания Web-страниц и Web-сайтов на языке HTML;
- повысить свою компетентность в области компьютерного проектирования;
- приобрести интерес к профессиональной подготовке (рабочей профессии) по данному направлению, что повысит их социальную адаптацию после окончания школы.
Учащиеся должны:
- знать:
- основные этапы и задачи проектирования модели web-сайта как системы;
- основные способы создания web-страниц;
- основные конструкции языка гипертекстовой разметки документов HTML;
- уметь:
- выполнять поиск необходимой информации в Интернете;
- управление форматами текста и шрифтами;
- организация гиперсвязей между документами;
- создавать web-страницы, собирать web-сайт.
Урок 1. Знакомство с созданием сайта
План урока
- Оргмомент, постановка задачи.
- Объяснение нового материала.
- Закрепление.
- Практическая работа
- Домашнее задание
- Итог урока.
I. Введение
Умение создавать Web-сайты становится все более актуальным навыком пользователя Интернета. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей.
II. Новый материал
Как сконструировать Web-страницу с ее текстами,
рисунками, шрифтовым, цветовым и звуковым
оформлением? Надо создать текстовый файл,
содержащий описание страницы на языке HTML — (HiperText
MarkL'r Language — язык разметки гипертекста). Это можно
сделать с помощью простых текстовых редакторов,
например Блокнота в операционной системе Windows.
Программирование на языке HTML — наиболее сложный
способ Web-дизайна.
Для создания Web-страниц существует также целый
ряд инструментальных средств высокого уровня,
которые называются HTML-редакторами. Редакторы
входят в состав популярных браузеров: Microsoft
Internet Explorer.
Ответим на вопрос: «С чего начать создавать сайт»?
- Определение темы;
- Содержание, сколько web-страниц будет разработано;
- Распределение материала на web-странице;
- Требования к оформлению web-сайта.
Разбираются вопросы: тема, структура сайта, количество страниц Web-сайта, распределение материала на web-странице. Просмотр презентации «HTML» (Приложение 1)
1. Тэги (слайд 1)
2. Заголовок (слайд 2)
3. Основное содержание (слайд 3)
4. Цветовое оформление. Задание (слайд 4)
5. Пример набранной страницы на языке HTML.
Требования к сайту (слайд 5)
6. Форматирование web-странице (слайд 6)
III. Закрепление
Какие теги будем использовать при написании: заголовка, названия, тела документа?
IV. Практическая работа (работа в группах):
Направлена на приобретение опыта прописывания тегов в текстовом редакторе “Блокнот”, сохранения файла как Web-страницы и работа в группе. Для этого учащимся даются следующие задания с подробным описанием действий (по образцу в тетради).
V. Домашнее задание
Создать рабочую папку. Набрать в блокноте заголовок и название сайта. Подобрать картинку для главной страницы и текстовой материал.
VI. Итог урока
Урок 2. Распределение материала на Web-странице
План урока
- Оргмомент, постановка задачи.
- Повторение.
- Объяснение нового материала.
- Закрепление.
- Практическая работа
- Домашнее задание
- Итог урока.
II. Повторение. Проверочная работа.
- Для написания чего используются эти тэги? <BODY>, <TITLE>.
- Запишите оформление Web-странице на языке HTML?
- С какого тэга начинается и заканчивается Web-страница?
III. Объяснение нового материала
Как распределить материал на странице? Презентация «Создание сайта» (Приложение 2)
Редактирование страницы-шаблон. Это необходимо
для того, чтоб научиться прописывать структуру
пустой страницы. Размещать информацию удобнее в
таблице, а не на пустой странице.
На Web-странице создаётся таблица.
Определяется количество строк и столбцов. К
каждой ячейке будет находиться текстовой
материал или картинка. Поэтому в файл-шаблон
необходимо добавить теги, формирующие пустую
таблицу, например, из 2-х столбцов и 2-х строк (слайды
1-5) (Приложение 3)
Размещение картинки (слайд 6)
IV. Закрепление
– Какие тэги обозначают: строку, столбец?
– В какой последовательности их открывают и
закрывают?
– Какие тэги являются парными?
V. Практическая работа (работа в группах): Создание страницы-шаблона.
Так как прописывание тэгов латинскими буквами
для учащихся сложно и чтобы максимально
сократить время на повторяющиеся операции, нужна
страница-шаблон, которую путем редактирования
можно использовать для создания других страниц.
Разместить один рисунок на главной странице под
названием. Ниже рисунка построить таблицу.
Вставить одну картинку выбранную в Интернете или
приготовленную дома. Карточка (Приложение
3)
VI. Домашнее задание.
Создание страницы-шаблона, приготовить для просмотра
VII. Итог урока
Урок 3. Создание кнопки-ссылки и вставка рисунка
Не позволяй душе лениться!
чтоб воду в ступе не толочь,
душа обязана трудиться
и день и ночь,
и день и ночь.
Н.Заболоцкий
План урока
- Оргмомент, постановка задачи.
- Проверка домашнего задания.
- Объяснение нового материала.
- Практическая работа
- Домашнее задание
- Итог урока.
II. Проверка домашнего задания
Просмотр страницы-шаблона. Рекомендации.
Структура сайта (рис. 1)
Рис. 1
III. Объяснение нового материала
Рассказать о структуре сайта, внешних и
внутренних гиперссылках.
Пока страницы не связаны между собой ссылками,
они не являются сайтом. Сейчас необходимо
напомнить структуру создаваемого сайта и об
особенностях Web-технологии. Познакомится с
тэгами, которые генерируют ссылки. Отметить, что
внутренняя ссылка состоит из 2-х элементов: метки
перед элементом, на который происходит ссылка и
самой ссылки. А затем рассказать о внешних. Нужно
отметить, что ссылкой может быть не только слово,
а и другой элемент страницы, например, картинка.
Каждый случай нужно прописать и привести пример.
Презентация «Я создаю сайт» (Приложение 4)
IV. Практическая работа (работа в группах). Создание страниц сайта.
Используя уже отредактированный файл страницы-шаблона, учащиеся должны создать 2 или 3 страницы сайта. На каждой необходимо разместить заранее заготовленные рисунки. Таким образом, учащиеся, многократно повторяя одни и те же действия, получают навык их выполнения. Проверить работу кнопки-ссылки. Карточка (Приложение 5)
V. Итог урока
Урок 4. Оформление текста. Публикация
План урока
- Оргмомент, постановка задачи.
- Проверка домашнего задания.
- Объяснение нового материала.
- Практическая работа
- Домашнее задание
- Итог урока.
Если вам нечего сказать миру, не стоит засорять Сеть!
II. Проверка домашнего задания
Заполнение Web-страницы и проверка работы кнопки-ссылки. Рекомендации.
III. Объяснение нового материала
Форматирование текста.
Тэги форматирования служат для определения внешнего вида текста и задания его расположения на странице.
Шрифты
Для изменения начертания шрифта используются тэги. Работа с книгой. (Учебник «Информатика и ИКТ», 10-11 кл. авторы: И.Г.Семакин, Е.К.Хеннер)
Публикация сайта в Интернете.
IV. Практическая работа «Создание страниц сайта»
Используя уже отредактированный файл страницы-шаблона, учащиеся должны создать 2 или 4 страницы сайта. На каждой необходимо разместить заранее заготовленный текст. Таким образом, учащиеся, многократно повторяя одни и те же действия, получают навык их выполнения.
V. Домашнее задание
Подбор материала для своего Web-сайта, отладка работы Web-сайта. (Приложение 6)
VI. Итог урока
Уроки 5 -7. Редактирование и отладка работы Web-сайта
…Личность характеризуется не только
тем,
что она делает, но и тем,
как она делает…
Ф. Энегельс
Практическая работа
1. Создание страницы об авторе.
2. Доработка страниц.
На заключительном уроке необходимо завершить работу над сайтами. Предложить ученикам создать последнюю страницу о себе любым удобным для них способом.
Урок 8. Контрольная работа в форме зачета по теме: «Создание сайта на языке HTML»
Внимательно просмотреть все работы с учащимися класса, выслушать мнения, замечания, дать оценку работам каждого.
Результат: выполненные работы всего класса.
Литература и источники информации:
- Учебник «Информатика и ИКТ», 10-11 кл. авторы: И.Г.Семакин, Е.К.Хеннер.
- Практикум «Информатика и ИКТ», 10-11 кл. авторы: И.Г.Семакин, Е.К.Хеннер, Т.Ю.Шеина.
- НТМL в примерах, автор В.В. Дригалкин.