Программа элективного курса "Язык разметки гипертекста HTML"

Автор: 
Свистунова С. В.
учитель информатики
МОУ «СОШ №2» г. Судогда

Элективный курс
«Язык разметки гипертекста HTML»

(для 9-11 классов)

Судогда

2013 г.

Пояснительная записка

В связи с бурно развивающимися информационными технологиями и ресурсами большое значение приобрела проблема изучения сетевых технологий, чтобы каждый мог создавать личностно значимую для него образовательную продукцию. Такой продукцией в данном курсе является web-сайт. Введение элективного курса обусловлено тем, что данная тема изучается только в 11 классе (отводится всего 6 часов). Этого крайне мало для хорошего понимания большого объема информации и формирования навыков создания web-сайтов. Особенность изучаемого курса состоит в том, что он может использоваться во многих профилях старшей школы, так как он относится ко всем сферам современного общества – гуманитарным, естественно - научным, социальным, экономическим и другим.

Тип элективного курса – межпредметный, в чем состоит его отличительная черта. Курс предусматривает интеграцию с другими учебными предметами: физика, химия, математика, русский язык и другие учебные предметы. 

Курс рассчитан на 17 часов лекционно-практических занятий и проводится в течение одного полугодия по 1 часу в неделю. Продолжительность занятия составляет 1 час. Элективный курс рекомендован для учащихся 9-11 классов.

Целью курса является научить обучающихся проектировать и конструировать сайты и подготовить их к осознанному выбору профессии.

Достижение цели реализуется с решением следующих задач:

• Познакомить с видами web-сайтов, их функциональными, структурными и технологическими особенностями;

• Сформировать навыки проектирования и конструирования web-сайта;

• Сформировать навыки написания html-кодов;

• Создать собственный web-сайт по выбранной тематике;

• Познакомиться с основами web-дизайна;

В результате изучения данного элективного курса обучающиеся должны:

• знать:

  • принципы и структуру устройства «Всемирной паутины», формы представления информации в сети Интернет;

  • виды web-сайтов;

• уметь:

  • спроектировать и изготовить web-сайт, состоящий из 5-10 страниц на заданную тему;

  • программировать на языке HTML на уровне созданияне менее 3-5 соответствующих элементов сайта;

  • применять при создании web-страницы основные принципы web-дизайна и произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;

• иметь навыки владения:

  • необходимыми способами проектирования и создания

  • приемами организации и самоорганизации работы по изготовлению сайта;

  • опытом коллективного сотрудничества при конструировании сложных web-сайтов;

  • оценивания своих результатов, корректирования дальнейшей деятельности по созданию сайтов.

Программа элективного курса предусматривает проведение традиционных уроков, а также практических занятий, лабораторных работ, а также работа в группах. Изучение нового материала носит сопровождающий характер. Освоение курса предполагает, помимо посещения коллективных уроков, выполнение внеурочных самостоятельных домашних заданий. Курс завершается итоговым контролем в виде защиты творческих работ. Ученик должен продемонстрировать уровень достижения минимально необходимых результатов, обозначенных в целях и задачах курса.

Содержание курса

Раздел 1.Создание простейшего html-документа. Форматирование текста. Списки. (2 ч.) 
В этом разделе учащиеся познакомятся с языком разметки гипертекста html, со структурой html-документа, с основными тегами форматирования текста, создания списков, научатся изменять цвет фона. На практике создадут простейший html-документ, используя известные им уже теги. А для закрепления материала выполнят лабораторную работу (приложение 1). В практической части создадут свою визитку.

Раздел 2. Вставка изображений в html-документ (2 ч.) 
В этом разделе обучающиеся познакомятся с форматами графических файлов, изучат основные теги для вставки изображения и html-документ и для их преобразования (управление размерами, расположение на странице обрамление и др.). Для закрепления материала учащиеся выполняют лабораторную работу (приложение 2).

Раздел 3.  Таблицы (2 ч.) 
В данном разделе учащиеся познакомятся и изучат основные теги необходимы для работы с таблицами, научатся использовать основные атрибуты для форматирования таблиц. Для усвоения материала выполнят лабораторную работу (приложение 3).

Раздел 4.  Формы (2 ч.)
В этом разделе учащиеся научатся создавать формы в html-документе. Познакомятся с основными тэгами для создания форм, на практике создадут собственную форму «Анкета». Для закрепления материала выполнят лабораторную работу (приложение 4).

Раздел 5. Гиперссылки (2 ч.) 
В этом разделе учащиеся научатся создавать текстовые гиперссылки и ссылки, изображения, менять их вид. Также выполнят лабораторную работу на усвоение материала (приложение 5).

Раздел 6.  Фреймы (2 ч.) 
В данном разделе учащиеся познакомятся с фреймами, основными тэгами их создания, научатся использовать различные атрибуты для форматирования фреймов. В ходе выполнения лабораторную работу (приложение 6) закрепят навыки, а также повторят другие пройденные темы (такие, как таблицы, списки, вставка изображения и др.)

Раздел 7. Виды сайтов (1 ч.)
В этом разделе обучающиеся познакомятся с различными видами сайтов, познакомятся с критериями оценки сайтов.

Раздел 8. Основы web-дизайна (1 ч.)
В данном разделе обучающиеся увидят, что проектирование содержимого сайта – один из самых ответственных моментов при создании любого web-ресурса.

Раздел 9. Проектирование сайта (1 ч.) 
В этом разделе обучающиеся научатся разрабатывать концепцию, цели и структуру сайта, продумывать его внутренние и внешние связи, назначение каждой  страницы и элемента на ней. Эти задачи необходимо решить прежде, чем приступить к построению самого сайта.

Раздел 10. Выполнение  творческой  работы (1 ч.)

Знания, умения и предыдущие разработки необходимо применить для создания комплексного проекта – web-сайта на выбранную тему. Сайт разрабатывается в группе или индивидуально. Обучающимся потребуется спроектировать и изготовить сайт. Выполненный проект необходимо защитить перед сокурсниками.

Раздел 11. Защита проекта (1 ч.) 
Защита проекта по компьютерной графике и web-дизайну – хороший способ для обучающихся показать свои художественные, графические и технические способности, т.к.задания носят межпредметную направленность и помогают выявить степень усвоения всего материала курса.

Учебно-тематическое планирование

Наименование разделов и тем	Всего часов					Формы контроля
	Всего	Теория	Практические занятия	Лабораторные работы
1. Создание простейшего html-документа. Форматирование текста. Списки.	2	1		1	Самостоятельная работа
2. Вставка изображений в html-документ	2	1		1	Самостоятельная работа
3. Таблицы	2	1		1	Самостоятельная работа
4. Формы	2	1		1	Самостоятельная работа
5. Гиперссылки	2	1		1	Самостоятельная работа
6. Фреймы	2	1		1	Самостоятельная работа
7. Виды сайтов	1	1
8. Основы web-дизайна	1	1
9.Проектирование сайта	1	1
10. Выполнение  творческой  работы	1		1
11. Защита проекта	1		1		Защита
Всего:	17	9	2	6

Список литературы для учителя:

1. Белов В. Ключи к успеху // Мир ПК. – 2006. – №8. – с. 68-70.;

2. Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.;

3. Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.;

4. Дригалкин В. В. HTML в примерах. Как создать свой Web-сайт: Самоучитель / В. В. Дригалкин. – М.: Изд-во «Вильямс», 2003. – 192 с.: ил.

5. Информатика. Базовый курс. Учебник для ВУЗов / под ред. С.В. Симоновича. - СПб.: Питер. - 2000.

6. Кузнецов М.В. Практика разработки Web-сайта / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. – СПБ.: БХВ-Петербург, 2005. – 960 с.: ил

7. Лебедев С.В. Web-дизайн: учебное пособие по созданию публикаций для Интернет / С.В. Лебедев. – 3-е изд., перераб. и доп. – М.: Альянс-пресс, 2004.- 736 с

8. Шапошников И. В. Справочник Web-мастера. XML. – СПб.: БХВ-Петербург, 2001. – 304 с.: ил.

9. Штайнер Г. HTML/XML/CSS / Г. Штайнер. – 2-е изд., перераб. – М.: Лаборатория Базовых Знаний, 2005. – 510 с.: ил.

Список литературы для учащихся

1. Борисенко А. А. Web-дизайн. Просто как дважды два / А. А. Борисенко. – М.: Эксмо, 2008. – 320 с.;

2. Валентайн Ч. XHTML/ Ч. Валентайн, К.М. Минник// 2001.;

3. Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.;

4. Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.;

5. Матросов А. HTML 4.0 в подлиннике/ А.Матросов, А.Сергеев, М. Чаунин// БХВ-Петербург.: Санкт-Петербург, 2005.;

6. Миронов Д. Создание Web-страниц в MS Office 2000. – Спб.: Питер. - 2000.;

7. Морис Б. HTML в действии. СПб.: Питер, 1997 г. – 256 с.;

8. Пауэлл Т. Web-дизайн/ Т. Пауэл// Санкт-Петербург, 2002.;

9. Петюшкин А.В. HTML. Экспресс-курс. - СПб.: БХВ - Петербург, 2003

10. Хеслоп П. HTML самого начала. - СПб: Санкт-Петербург, 2005.;

11. Шафрин Ю. А.. Информационные технологии. 10-11 кл. - Москва, Лаборатория базовых знаний, 1999.

Лабораторные работы для элективного курса:

«Язык разметки гипертекста HTML»

№ п/п	Тема практического задания	Количество часов
1.	Создание простейшего html-документа. Форматирование текста . Списки.	1
2.	Вставка изображений в HTML-документ.	1
3.	Таблицы.	1
4.	Формы.	1
5.	Гиперссылки	1
6.	Фреймы	1

Лабораторные работы:

I. Создание простейшего файла HTML. Форматирование текста. Списки.

Учащийся должен:

Знать:

• структуру HTML-документа; основные тэги для форматирования текста, создания фона и списков в различных вариантах;

• пользоваться основными атрибутами для форматирования текста и создания списков в различных вариантах;

II. Вставка изображений в HTML-документ;

Учащийся должен:

Знать и уметь:

• основные тэги вставки изображения;

• пользоваться основными атрибутами для преобразования изображений в документе;

III. Таблицы.

Учащийся должен:

Знать и уметь:

• основные теги для создания таблиц в html-документе;

• пользоваться основными атрибутами для форматирования таблиц;

IV. Формы.

Учащийся должен:

Знать и уметь:

• понятие форм, основные тэги для их создания;

• пользоваться управляющими элементами разных типов;

V. Гиперссылки.

Учащийся должен:

Знать и уметь:

• понятие гиперссылки, основные тэги их создания;

• создавать гиперссылки на текст и графические объекты;

VI. Фреймы.

Учащийся должен:

Знать и уметь:

• понятие фрэйма, основные тэги его создания;

• пользоваться основными атрибутами для преобразования фрэйма;

Приложение 1

Лабораторная работа №1

Тема: «Создание простейшего HTML-документа.

Форматирование текста. Списки. ».

Цель: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Структура html-документа:

HTML-код страницы помещается внутрь контейнера HTML ... HTML, заголовок страницы в контейнер HEAD Заголовок HEAD.

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг TITLE ... TITLE (имя страницы).

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга BODY содержание BODY (содержание страницы).

HTML {начало страницы}

HEAD {описание страницы, заголовка}

TITLE название TITLE {имя страницы}

HEAD {закрытый тэг описания заголовка}

BODY {содержание страницы}

текст

BODY {закрытый тэг описания страницы}

HTML {конец страницы}

Основные тэги форматирования html-документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом: H1 заголовок страницы H1 (например, H1 Все о компьютере H1)

H1 заголовок страницы H6 - в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: H1 ALIGN = “RIGHT” Все о компьютере H1

ALIGN = “RIGHT” {выравнивание текста по правому краю}

ALIGN = “CENTER” {выравнивание текста по центру}

ALIGN = “LEFT” {выравнивание текста по левому краю}

Для задания параметров форматирования используется контейнер FONT...FONT, при этом используя различные атрибуты:

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));

Например, ... FONT (шрифт размера 7, тип шрифта – Arial, цвет - голубой);

Также можно задавать начертание текста или фрагмента текста:

B текст B - полужирный шрифт;

I текст I - начало текста курсивом;

U текст U - подчёркивание;

Комбинированное выделение осуществляется следующим образом:

фрагмент текста

Например, BU фрагмент текста UB (текст полужирный и подчеркнутый);

При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);

Например, BODY BGCOLOR = “blue” TEXT = “red” - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)

Списки:

Ненумерованный список располагается внутри контейнера UL…UL, а каждый элемент списка определяется также тэгом LI. С помощью атрибута TYPE тэга UL можно задать вид маркера списка: “disc” (диск),

“square” (квадрат), “circle” (окружность). Например,

(маркированный список, маркер в виде окружности)

• текст

LI текст LI

LI текст LI

UL

Ход работы:

1. Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

2. Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;

3. Задать цвет фона страницы – бирюзовый цвет;

4. Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;

5. Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;

6. Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;

7. Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;

8. В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;

Листинг html-программы:

HTML

HEAD

Компьютер

Все о компьютере

На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

На этом сайте вы можете узнать много новой и полезной информации для вас.

li b Компьютер b li

• Терминологический словарь
• Цены на товары