Глава 8. Создание Web –страниц. §1. Цели и задачи. Примерное планирование и содержание раздела.
Создание Web –страницы, к которой сможет получить доступ любой пользователь через Intranet или подключившись к Internet, является простой задачей. Для этого необходимо знать HTML. Поэтому очень важно научить учащихся созданию Web –страниц, ибо она является основным документом InterNet.
Изучение HTML в школьном курсе информатики дает учащимся полное представление о структуре Web –страниц, о правилах организации Web-cервера, принципах передачи информации в сети InterNet. Без изучения этого раздела нельзя говорить о формировании информационной культуры учащихся.
Итак, приведем примерные темы и количество учебных часов по ним для обучения учащихся Web технологии.
№ |
Тема |
Краткое содержание |
Количество часов |
1 |
Web- страница и ее структура. Дескрипторы. |
Визуальная структура, Web броузеры. Гипертекст. |
1ч |
2 |
Ввод и форматирование текста. |
Использование интервалов, выравнивание заголовков и абзацев, форматирование с помощью текстовых стилей. Добавление горизонтальных линий |
2ч. |
3 |
Гипертекстовые ссылки |
Понятие об URL. Внутренние и внешние ссылки. Ссылки на другие ресурсы (звукозапись, видеофильм и т.д.) |
3ч. |
4 |
Создание списков |
Создание и использование нумерованных, неупо-рядоченных списков и списка определений. |
2ч. |
5 |
Графика |
Вставка рисунков и их выравнивание |
2ч |
6 |
Таблицы |
Способы создания таблиц. Использование таблиц для макетирования таблиц, окрашивание таблиц и рамок. |
2ч. |
7 |
Фреймы. |
Использование фреймов, создание HTML – кода фрей-мов, создание шаб-лона простой стра-ницы с фреймами. |
2ч. |
8 |
Конкурс Web –cтраниц. |
Уроки обобщения и систематизации |
2ч. |
Как было отмечено в предыдущих главах, понятие URL, гиперссылка, гипертекст можно вводить при изучении текстового процессора Microsoft Word. Если такая работа не проводилась, то это можно выполнить на первых уроках знакомства с Web- страницей и ее структурой. Это связано с тем, что любой документ созданный в Microsoft Word можно сохранить в формате НTML. Внутренние гиперссылки также создается в этом текстовом процессоре элементарно. Отметим следующее. Созданию Web страниц можно научит и в 6,7 классе. В этом случае лучше использовать программы для создания Web- cтраниц, включая и текстовый процессор Word.
Для изучения темы “Web страница и ее структура. Дескрипторы.” вначале учащимся можно предложить такие задания:
а) Cоздайте документ Microsoft Word следующей структуры.
Заголовок документа.
Таблица отражающая успеваемость по информатике, математике хотя бы 5 учащихся вашего класса.
б) Сохраните документ в формате HTML.
в) Запустите программу Microsoft Internet Explorer.
г) Просмотрите этот документ в виде HTML
д) Ответьте на вопросы:
как помечены начало и конец документа?
как написаны служебные слова (дескрипторы) языка разметки гипертекстов?
как сформирована таблица?
Отличие таблицы в документе Word от таблицы при просмотре через Web – броузер?
Результатом этой работы является изучение структуры Web страницы.
<HTML> </HTML> начало и конец Web- страницы.
<HEAD> </HEAD> заголовок и его атрибуты
<BODY> </BODY> тело страницы.
В дескрипторе <HEAD> может находиться ряд элементов, включая следующие.
TITLE (определяет название документа).
META (cообщает броузеру дополнительную информацию о документе).
BASE (задает базовый адрес документа).
STYLE (определяет внешний вид документа).
ISINDEX (указывает, что данный документ будет использоваться в поисковых системах).
После изучения структуры Web –страницы учащимся предлагается набрать в редакторе Блокнот следующий документ, сохранить его в файле “first.htm” и просмотреть в броузере InterNet Explorer.
Cодержание файла “first.htm”
<HTML>
<HEAD>
<TITLE>Первая страница</TITLE>
</HEAD>
<BODY>
<B><FONT FACE="Times New Roman" SIZE=4><P ALIGN="CENTER">Первая страница</P>
</B><P>Для создания </FONT><FONT SIZE=4>Web – c</FONT><FONT FACE="Times New Roman" SIZE=4>траниц имеется язык </FONT><FONT SIZE=4>HTML.</P>
</FONT><FONT FACE="Times New Roman" SIZE=4><P>На </FONT><FONT SIZE=4>Web-</FONT><FONT FACE="Times New Roman" SIZE=4>странице можно поместить тексты, рисунки</FONT><FONT SIZE=4>,</P>
</FONT><FONT FACE="Times New Roman" SIZE=4><P>графики, фотографии, мультфильмы и т.д.</P>
<P>НТМ</FONT><FONT SIZE=4>L </FONT><FONT FACE="Times New Roman" SIZE=4>не является языком программирования.</P>
</BODY>
</HTML>
Обратите внимание, где отображается заголовок (<TITLE>) документа. Подумайте, для чего служат FONT FACE, FONT SIZE, P, P ALIGN=”CENTER”.
В результате просмотра мы увидим следующее.