Рабочая программа элективного курса «Язык разметки гипертекста HTML»
элективный курс по информатике и икт (9 класс) по теме

Свистунова Снежана Владимировна
Опубликовано 08.10.2014 - 22:41 - Свистунова Снежана Владимировна

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

Скачать:

ВложениеРазмер
Файл elektivnyy_kurs_yazyk_razmetki_giperteksta_html.docx190.97 КБ

Предварительный просмотр:

Автор: 
Свистунова С. В.
учитель информатики
МОУ «СОШ №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-документ, включая весь текст, содержится внутри тэга содержание (содержание страницы).

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

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

</span><span class="c1 c16">название</span><span class="c5">  {имя страницы}

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

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

   текст

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

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

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

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

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

заголовок страницы

(например,

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

)

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

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

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

{выравнивание текста по правому краю}

{выравнивание текста по центру}

{выравнивание текста по левому краю}

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

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

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

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

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

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

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

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

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

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

<Тэг-1><Тэг-2> фрагмент текста

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

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

Например, - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)

Списки:

Ненумерованный список располагается внутри контейнера

    …
, а каждый элемент списка определяется также тэгом
  • . С помощью атрибута TYPE тэга

    • По теме: методические разработки, презентации и конспекты

    Рабочая программа элективного курса "К проекту чeрез HTML"

    Данная рабочая программа составлена на основе авторской программы элективного  курса Т.М. Смирновой «К проекту через HTML». Программа имеет рецензию   Регионального экспертного совета...

    Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"

    Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML" Цели урока: Повторение основных принципов построения сайтов, структуры HTML-документа...

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

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

    Разработка Web-сайтов с использованием языка разметки гипертекста HTML

    Презентация для 8 класса "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"...

    Практическая работа на тему "Язык разметки гипертекста HTML"

    Практичекая работа для закрепления изученных знаний по теме "Язык разметки гипертекста HTML"....

    Методическая разработка "Основы языка разметки гипертекста HTML" 10 класс

    В архиве есть файл с конспектом урока и практическая часть "Интерактивные формы". УМК Угринович Н.Д....

    Рабочая программа элективного курса Язык в речевом общении. Роль орфографии и пунктуации в письменном общении.

    Рабочая программа элективного курса Язык в речевом общении. Роль орфографии и пунктуации в письменном общении....