kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

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

Нажмите, чтобы узнать подробности

Для подготовки Web-документа используется язык разметки гипертекста HTML (HyperText Markup Language). Как это следует из названия, HTML не является алгоритмическим языком программирования, а, как язык разметки, обладает средствами представления текста и изображений на экране в виде Web-страницы. HTML также позволяет работать с гипертекстовыми ссылками, с помощью которых осуществляется доступ к другим Web-страницам.

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

Просмотр содержимого документа
«Программа элективного курса "Язык разметки гипертекста 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

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


Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 9 класс

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

Автор: Свистунова Снежана Владимировна

Дата: 11.10.2014

Номер свидетельства: 118169

Похожие файлы

object(ArrayObject)#862 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(133) "Программа Предметного курса по выбору (информатика) 10 класс (профильный) "
    ["seo_title"] => string(73) "proghramma-priedmietnogho-kursa-po-vyboru-informatika-10-klass-profil-nyi"
    ["file_id"] => string(6) "111828"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(12) "planirovanie"
    ["date"] => string(10) "1407949651"
  }
}


Получите в подарок сайт учителя

Видеоуроки для учителей

Курсы для учителей

ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства