Планирование факультативного курса "Создание web-страниц, язык HTML". Упражнения по темам

Разделы: Информатика


Курс предназначен для 8-11-х классов

Кол-во часов в неделю: 2 часа

Курс: годовой

Краткое описание курса:

Курс дает описание HTML (Hypertext Markup Language) - языка компоновки документов и спецификации гиперссылок, используемых для кодирования документов в гипертекстовой среде Интернет - системе World Wide Web.

Школьная программа курса информатики для 10-11 классов, составлена на основе "Обязательного минимума содержания образования по информатике", рекомендованного Министерством образования РФ, содержит раздел “Компьютерные коммуникации”, на изучение которого отводится 12 часов в рамках школьных уроков информатики. Для углубленного изучения данного раздела в рамках факультативных занятий мною были разработаны три учебных курса “Основы практической работы с информацией в Интернет”, “Основы создания web-страниц, язык HTML” и курс “Дизайн web-страниц”.

Учебный курс для опытных пользователей сети Интернет: “Основы создания web-страниц, язык HTML” рассчитан на 68 учебных часов. Занятия для учеников, имеющих опыт работы в сети Интернет, проводятся 1 раз в неделю по 2 часа в течение учебного года. Основные темы: организация информации в web-документах; понятие гипертекста, его основные элементы; HTML как язык разметки гипертекстового документа; гипертекстовые связи между документами; графика в HTML-документах; графические форматы, программы обработки изображений; основные теги, используемые при описании таблиц; кадры (фреймы); компоновка кадров; необходимые элементы web-документа и их рациональная компоновка; приемы использования основных тегов; цветовая палитра: имена и коды цветов; тестирование подготовленных документов. Электронное методическое пособие с учебным материалом, практическими примерами, контрольными вопросами и задачами для самостоятельного решения выложен в сети Интернет по адресу <http://www.sch130.nsc.ru/~eva/usehtml/index.html>.

Тематический план

Занятие Темы Кол-во часов
1 Обзор языка HTML. Архитектура и теги документа. Синтакис тегов. Создание, сохранение, редактирование HTML-файла через текстовый редактор Блокнот. Просмотр файла через броузер. 2 часа
2/3/4/5 Теги форматирования текста. Спецсимволы 8 часов
6/7 Имена и коды цветов. 4 часа
8/9/10 Теги списка. Нумерованный и маркированный список. Маркеры. Списки определений 6 часа
11/12 Теги графики. Форматы графических файлов. Создание файлов. Графические библиотеки. 4 часа
13/14/15/16 Теги ссылок. Текстовая и графическая ссылка. Связь документов. Якорь. Переход в документе. Ссылка на е-мейл. Карта изображения. Панели навигации. Самостоятельная работа. 8 часов
17/18/19 Теги таблиц. Самостоятельная работа. 6 часов
20/21/22 Теги фреймов. Самостоятельная работа. 6 часов
23/24/25/26/27 Стили. Единое оформление документов. Изменение свойств тега, одноименных тегов, тегов нескольких документов. 10 часов
28 Типичные ошибки 2 часа
29/30/31 Структура и дизайн веб-изданий. Новости. Электронная газета. Электронный журнал. 6 часов
32/33/34 Формы. Ввод и передача данных через анкету пользователя. 6 часов
  Итого: 68 часов

Упражнение “Коды цветов” (занятие 7)

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

<html>

<head> <title>Коды цветов</title> </head>

<body bgcolor="#000000">

<center>

<font color="#FF0000" size=-3>Каждый </font>

<font color="#FFA500" size=+2>охотник </font>

<font color="#FFFF00" size=+1>желает </font>

<font color="#00FF00" size=0>знать, </font>

<font color="#0000FF" size=-1>где </font>

<font color="#000080" size=-2>сидит </font>

<font color="#800080" size=+3>фазан.</font>

</center>

</body>

</html>

Упражнение “Теги таблиц. Рыбка” (занятие 19).

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

<html>

<head> <title>Рыбка</title> </head>

<body>

<table border=1 width=120 cellpadding=0 cellspacing=0>

<tr height=30>

<td rowspan=3 width=30>&nbsp;</td>

<td rowspan=2 width=30>&nbsp;</td>

<td width=30>&nbsp;</td> <td width=30>@</td>

</tr>

<tr height=30> <td colspan=2>&nbsp;</td> </tr>

<tr height=30> <td colspan=3>&nbsp;</td> </tr>

<tr height=30> <td colspan=4>&nbsp;</td> </tr>

</table>

</body>

</html>

Упражнение “Теги фреймов. Электронный журнал” (занятие 30)

Cоздать HTML-файл, содержащий описание деления окна на три кадра (Рисунок2):

- Ширина левого кадра 165 пикселей.

- Высота верхнего правого кадра 100 пикселей

- Установить запрет на изменение размеров кадров.

- Для левого и нижнего правого кадра всегда создавать линейки прокрутки.

- Из левого кадра все ссылки загружаются в нижнем правом кадре.

- Щелчек по ссылке abc@mail.ru вызывает окно подготовки почтовых сообщений c заполненным полем Адрес получателя.

Список литературы

  1. Материалы сайта “Руководство по HTML” /http://www.sch130.nsc.ru/~eva/usehtml/index.html
  2. Фестиваль педагогических идей “Открытый урок”, 2005/2006 учебный год. – М.: Первое сентября; Чистые пруды, 2006
  3. Гончаров А. Самоучитель HTML – Спб: Издательство “Питер”, 2000
  4. Гусельникова Е.В. “Как работает школьный Интернет-класс”, Москва, РАО, 2000