Курс предназначен для 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> </td>
<td rowspan=2 width=30> </td>
<td width=30> </td> <td width=30>@</td>
</tr>
<tr height=30> <td colspan=2> </td> </tr>
<tr height=30> <td colspan=3> </td> </tr>
<tr height=30> <td colspan=4> </td> </tr>
</table>
</body>
</html>
Упражнение “Теги фреймов. Электронный журнал” (занятие 30)
Cоздать HTML-файл, содержащий описание деления окна на три кадра (Рисунок2):
- Ширина левого кадра 165 пикселей.
- Высота верхнего правого кадра 100 пикселей
- Установить запрет на изменение размеров кадров.
- Для левого и нижнего правого кадра всегда создавать линейки прокрутки.
- Из левого кадра все ссылки загружаются в нижнем правом кадре.
- Щелчек по ссылке abc@mail.ru вызывает окно подготовки почтовых сообщений c заполненным полем Адрес получателя.
Список литературы
- Материалы сайта “Руководство по HTML” /http://www.sch130.nsc.ru/~eva/usehtml/index.html
- Фестиваль педагогических идей “Открытый урок”, 2005/2006 учебный год. – М.: Первое сентября; Чистые пруды, 2006
- Гончаров А. Самоучитель HTML – Спб: Издательство “Питер”, 2000
- Гусельникова Е.В. “Как работает школьный Интернет-класс”, Москва, РАО, 2000