Глава 8. Создание Web –страниц.

Ввод и форматирование текста.

В принципе все занятия по изучению HTML можно строить описанным выше способом, т.е. создание Web - cтраниц с элементами конкретной темы в среде программ-мастеров Web-страниц, а потом просмотреть их в виде HTML документа и изучить новые дескрипторы.

Главными задачами изучения этой темы является ознакомление учащихся с форматированием текста с помощью стилей. Стили форматирования текста делятся на физические и логические.

Дескрипторы физических стилей.

Дескриптор	Стиль
<B>	Полужирный шрифт (Bold)
<I>	Курсив (Italic)
<TT>	Моноширинный шрифт, как у пишущей машинки
<U>	Подчеркивание (UnderLine)
<SUB>	Подстрочный текст (нижний индекс)
<SUP>	Надстрочный текст (верхний индекс)
<STRIKE>	Перечеркивание

После рассмотрения физических стилей учащимся можно предложить создание Web- страницы с форматированными текстами. Создайте Web –страницу со следующим текстом.

Молитва матери. На краю деревни старая избушка, Там перед иконой молится старушка. Молитва старушки сына поминает, Сын в краю далеком родину спасает. (Сергей Есенин)

HTML>

<HEAD>

<TITLE>Молитва матери</TITLE>

</HEAD>

<BODY>

Молитва матери.

На краю деревни старая избушка,

Там перед иконой молится старушка.

Молитва старушки сына поминает,

Сын в краю далеком родину спасает.

(Сергей Есенин)

</BODY>

</HTML>

Bопросы и задания для учащихся.

1. Для чего служит дескриптор <FONT FACE="Times New Roman"?

2. Как устанавливается размеры букв?

3. Какой дескриптор использован для вывода текста с новой строки? Каким другим дескриптором можно заменить это действие?

4. Создайте Web-страницу со сведениями о вашем летнем отдыхе, сочините рассказ о природе, о вашем населенном пункте (городе).

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

Гипертекстовые ссылки

Существуют 3 основных типа гиперссылок, о которых учащимся необходимо знать: внутренние, внешние и относительные.

Внутренние ссылки (internal links) – это ссылки на объекты в пределах одного документа. С их помощью пользователь может перемещаться по одной и той же Web-странице.

Внешние (external links), или удаленные (distant links), ссылки - это ссылки на другие Web-серверы.

Относительные (relative links), или локальные (local links), ссылки - это ссылки на другие Web-страницы, расположенные на одном сервере со страницей, содержащей ссылки.

В основе ссылок лежат URL (Uniform Resource Locator), или унифицированный локатор ресурсов. URL – это адрес Web-страницы, который отображается в поле Адрес окна броузера. URL состоит из двух основных элементов: типа протокола и собственно адреса.

Тип протокола определяет вид ресурса internet, с которым устанавливается связь. Самым распространенным протоколом является http: // (HyperText Transfer Protocol – протокол передачи гипертекста). Протокол FTP (File Transfer Protocol) расшифровывается как протокол передачи файлов и является средством пересылки файлов от одного компьютера к другому.

Собстенно адрес (destination) – это имя файла, каталога или компьютера. Приведем пример URL:

http://www.rsl.ru

URL состоит из нескольких компонентов. Первый из них, префикс http://, определяет тип используемой службы Internet. Второй, www, представляет собой имя web-сервера; хотя на этом месте чаще всего стоит www, могут использоваться и другие имена. Нужно заметить, что иногда данная часть URL опускается. Следующий компонент rsl.ru определяет домен, в котором находится сервер. Косвенно по имени домена можно судить о географическом положении сервера. Компонент help.html определяет файл связи.

В HTML для гиперссылки используется следующий формат:

< A HREF=”URL” Текст ссылки</A>

Приведем пример Web-cтраницы со ссылками.

<HTML>

<HEAD>

<TITLE> Пример Web-страницы со ссылками на другие Web-страницы</TITLE>

</HEAD>

<BODY>

Выберите ссылку

<A HREF="Есенин.htm"> Cтихотворение С.Есенина</A>

<A HREF="Пушкин.htm"> Cтихотворение A.С.Пушкина</A>

</BODY>

</HTML>

B броузере мы увидим следующее.

С учащимися необходимо анализировать строки <A HREF="Есенин.htm"> Cтихотворение С.Есенина</A> ,<A HREF="Пушкин.htm"> Cтихотворение A.С.Пушкина</A> и обратить внимание на такие вопросы:

· Как создать ссылку в текущей строке?

· Как создать ссылку в новой строке?

· Какой бы вид имел URL, если файл “Пушкин.htm” находился в каталоге С:\ PUSHKIN?

· Можно ли в URL вместо Web-страниц указать программные или другие файлы?

· Что произойдет, если указанных в ссылках файлы на диске не окажутся?

· Создайте в Wеб-страницах “Пушкин.htm”,"Есенин.htm" cсылки для возврата на исходную страницу.

Можно предложить учащимся создание гипертекстов по следующим темам:

Алгоритмы

Стихи о природе.

Стихи о любви и т.д.

Теперь рассмотрим создание внутренних ссылок в документах.

Создавая ссылку на другую часть страницы, необходимо воспользоваться символом(#) и именем привязки:

<A HREF= “# торт”> Рецепты тортов</A>

Теперь нужно создать соответствующее имя объекта.

< A NAME =”торт” Рецепты тортов- Коллекция</A>

Рассмотрим пример.

<HTML>

<HEAD>

<TITLE> Пример Web-страницы с внутренними ссылками</TITLE>

</HEAD>

<BODY>

Сергей Есенин

<A HREF="#Есенин1"> Молитва Матери</A>

<A HREF="#Есенин2"> С добрым утром! </A>

<A NAME="Есенин1"> </A> Молитва Матери (отрывок)

<PRE>

На краю деревни старая избушка,

Там перед иконой молится старушка.

Молитва старушки сына поминает,

Сын в краю далеком родину спасает.

</PRE>

<A HREF="#Начало"> Начало </A>

<A NAME="Есенин2"> С добрым утром(отрывок)</A>

<PRE>

Задремали звезды золотые,

Задрожало зеркало затона.

Брезжит свет на заводи речные

И румянит сетку небосклона.

</PRE>

<A HREF="#Начало"> Начало </A>

</BODY>

</HTML>

Обратите внимание, как реализованы ссылки на начало, на первое и второе стихотворение и на последовательность их расположения в документе. Для закрепления знаний по созданию ссылок внутри документа и на другие Web-страницы учащимся предлагаются следующие примерные задания. Создать Web – страницы. а) Расписание занятий на неделю. б) Рецепты приготовления различных тортов. в) млекопитающие. г) график дежурства

В дальнейшем, в зависимости от технической базы и профиля обучения учащихся рассматриваются создание ссылок на ресурсы мультимедиа, адреса электронной почты, на FTP-сервер.

Для воспроизведения музыкального фрагмента можно создать следующую ссылку.

<HTML>

<HEAD>

<TITLE> Ресурсы мультимедиа</TITLE>

</HEAD>

<BODY>

Музыка<A HREF ="C:\windows\media\passport.mid"</A > здесь

</BODY>

</HTML>

В результате запускается универсальный проигрыватель и автоматически проигрывается мелодия. Точно так же с помощью ссылок можно отобразить на экране тексты.

Создание списков.

Списки – это очень важное средство структурирования документа. Типы списков представлены ниже в таблице.

Типы списков HTML и соответствующие им дескрипторы.

Тип списка	Дескриптор
Упорядоченный (нумерованный ) список	<OL>
Неупорядоченный список (маркированный)	<UL>
Список определений	<DL>
Список элементов меню (используется редко)	<MENU>
Список элементов каталогов (используется редко)	<DIR>

Из перечисленных списков чаще всего используются упорядоченные, неупорядоченные и списки определений. Вначале учащимся предлагаются нумерованные списки и их внутренние элементы. Нумерованный список, как видно из таблицы, создается с помощью <OL>,</OL>, а каждый элемент внутри этого контейнера с помощью дескриптора <LI> (list item- элемент списка). При создании нумерованного списка используется следующий синтаксис:

<OL>

<LI> первый элемент списка

<LI> второй элемент списка

…

<LI> последний элемент списка

</OL>

Приведем пример. В этом документе приводится списки мальчиков двух 9 классов.

<HTML>

<HEAD>

<TITLE>

Нумерованные списки

</TITLE>

</HEAD>

<BODY>

<OL> Мальчики 9а класса

<LI> Алексеев Тимофей

<LI> Арсентьев Вадим

<LI> Иванов Николай

</OL>

<OL> Мальчики 9б класса

<LI> Авдеев Игорь

<LI> Матрос Николай

<LI> Исаев Сергей

</OL>

</BODY>

</HTML>

Обратите внимания учащихся на то, что каждый список находится внутри контейнера <OL>,</OL>, включая и название списка. При создании нескольких списков создаются и столько же контейнеров.

Для нумерации упорядоченных списков определены типы нумерации, которые приведены в следующей таблице.

Таблицы

В HTML - таблицах может содержаться информация любого типа. Таблицы позволяют более эффектно расположить на странице текст, графику и также создать четкую структуру страницы.

Чтобы описать таблицу, нужно указать количество строк и столбцов. Дескрипторы <TR> и </TR> определяет одну строку таблицы. Дескриптор <TD>(данные таблицы) определяет данные ячейки, <TH>заголовок колонки.

Приведем пример создания таблицы:

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2 WIDTH="90%"

<TR><TH>Фамилия<TH>Имя<TH>Дата рождения</TR>

<TR><TD>Иванов<TD>Сергей<TD>15.04.1989</TR>

<TR><TD>Петров<TD>Николай<TD>25.03.1991</TR>

</BODY>

</HTML>

В результате просмотра страницы мы увидим следующее. Строка <TABLE BORDER=2 WIDTH="90%" определяет стиль бордюра таблицы и ширину в 90% от ширины Web –страницы. При изменении ширины окна броузера будет меняться и ширина таблицы. Обратите внимание на шрифт заголовков. С помощью атрибута COLS , помещенного в дескриптор <TABLE>, можно определить количество столбцов таблицы: < TABLE COLS=”10” Увеличить размер ячеек можно выполнить с помощью атрибутов COLSPAN и ROWSPAN.

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2 WIDTH="90%"

<TR><TH COLSPAN =2>ЖИВОТНЫЕ</TR>

<TR><TH>Лошади</TH>

<TH> Собаки</TH>

<TR><TD ALIGN=CENTER> двадцать</TD>

</BODY>

</HTML>

Обратите внимание на синтаксис выравнивания текста в каждой ячейке таблицы. Аналогично можно объединить строки колонки с помощью директивы ROWSPAN.

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2

<TABLE COLS="3"

<TR>

Студенты математического факультета

Нижневартовского пединститута</TH></TR>

<TR> <TD>1.Иванов Николай Петрович</TD><TD> группа 11</TD></TR>

<TR><TD>2.Петров Николай Иванович</TD><TD> группа 11</TD></TR>

<TR><TD>3.Александров Алексей Николаевич </TD><TD> группа 12</TD></TR>

</BODY>

</HTML>

С помощью контейнера <CAPTION> к таблицам можно добавить подписи. Например, если в предыдущий файл добавить строку <CAPTION ALIGN=BUTTOM> Моя таблица</CAPTION>, то сверху таблицы добавиться строка с заголовком таблицы. Помимо BOTTOM в контейнере CAPTION можно использовать TOP, LEFT, RIGHT. Для учащихся можно предложить готовый НTML документ для просмотра, предварительно указав вопросы: 1. Как создать 2-3 таблицы? 2. Как вывести заголовки таблиц? 3. Как определить заголовки колонок и строк?

<BODY>

<TABLE>

<CAPTION ALIGN=TOP> ПЕРВАЯ ТАБЛИЦА</CAPTION>

<TABLE BORDER=2

<TABLE COLS="3"

<TR>

Студенты математического факультета

Нижневартовского пединститута</TH></TR>

<TR> <TD>1.Иванов Николай Петрович</TD><TD> группа 11</TD></TR>

<TR><TD>3.Александров Алексей Николаевич </TD><TD> группа 12</TD></TR>

</TABLE>

<TABLE>

<TABLE BORDER=1

<CAPTION ALIGN=LEFT> ВТОРАЯ ТАБЛИЦА</CAPTION>

<TR> <TD>1.Николаев Николай Петрович</TD><TD> группа 21</TD></TR>

<TR><TD>2.Алексеев Александр Николаевич </TD><TD> группа 22</TD></TR>

</TABLE>

</BODY>

</HTML>

Для закрепления пройденного материала учащимся предлагаются создание следующих Web-страниц.

1. Электронный книжный магазин.

2. Электронный словарь (без программирования поиска).

3. Классный журнал.

4. Сведения о моих друзьях.

Использование фреймов.

С помощью фреймов можно создать профессионально оформленные Web –страницы. Разделив страницу на части, каждая из которых обновляется отдельно, можно создать для них различные элементы интерфейса. Фреймы позволяют идеально оформить страницы. При изучении этой темы необходимо придерживаться следующей последовательности рассмотрения вопросов:

- назначение фреймов;

- создание фреймов;

- загрузка в фреймы целых страниц;

- настройка фреймов;

- структура фреймов;

- присвоение имен фреймам и загрузка страниц в именованные окна фреймов;

- перемещение по фреймам.

Приведем основные дескрипторы, используемые в фреймах.

№	Дескриптор	Значения параметров	Назначение
	FRAMESET ROWS="25%,*"	% или число	Делит страницу на горизонтальные рамки в установленном соотношении
	<FRAMESET COLS="25%,*"	% или число	Делит страницу (оставшуюся часть) на вертикальные рамки в установленном соотношении
	FRAMEBORDER="параметр"	yes, no	Делает бордюр (окантовку рамки) видимым или не видимым.
4.	<FRAME SRC="Имя html файла” >		Загружает в фрейм (рамку) страницу
5.	BORDER	0,1,2	Устанавливает стиль бордюра
6.	SCROLLING	yes, no, auto	Определяет присутствие полос прокрутки в окне фрейма. Применяется в дескрипторе <FRAME>
7.	NORESIZE		Границы фрейма закрепляет жестко. Применяется в дескрипторе <FRAME>
8.	NAME		Присваивает фреймам имена. Применяется в дескрипторе <FRAME>

Рассмотрим пример. Страница разделяется на 3 фрейма. В каждый фрейм загружается страница.

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Содержание файла 8_web.htm.

<HTML>

<HEAD>

<TITLE>Глава 8</TITLE>

</HEAD>

<BODY>

Фреймы используются

для оформления страниц

</BODY>

</HTML>

Содержание файла 666.htm"

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2

<TABLE COLS="3"

<TR>

Второй фрейм

</TH></TR>

<TR> <TD>1.Иванов Николай Петрович</TD><TD></TR>

<TR><TD>2.Петров Николай Иванович</TD><TD></TR>

<TR><TD>3.Александров Алексей Николаевич </TD></TR>

</BODY>

</HTML>

Содержание файла прим 1.htm"

<HTML>

<HEAD>

<TITLE> Буквица </TITLE>

</HEAD>

<BODY>

Первый Фрейм!

</BODY>

</HTML>

В результате имеем следующую Web-страницу. Конечно в школьном курсе трудно рассматривать создание форм, сценариев и т.д. Как было сказано выше, для создания Web-страниц можно использовать HTML редакторы, в том числе и Microsoft Word. Но главное, чтобы учащиеся могли рассматривать эти страницы в режиме НTML и внести соответсвующие изменения, дополнения, понять технологию Web броузера.

После прохождения темы “Фреймы” учащимся можно предложить долгосрочные творческие задания по оформлению Web страниц следующего содержания:

· Мой класс.

· Моя школа

· Мой город

· Моя семья

В старших классах можно усложнить задания. Например. Создать электронный реферат по теме, справочник по математике, физике, химии для учащихся определенного класса.

Конкурс Web страниц может быть внутришкольный, городской, районный.

Вопросы и задания.

1. Разработайте систему упражнений по каждой теме для уроков.

2. Опишите матрицу связей при изучении темы “Web-страницы”.

3. Разработайте библиотеку проектов для реализации проектного метода обучения.

4. Создайте электронный справочник по данной главе.

5. Разработайте программу и учебный план для факультативного обучения темы в школе.

6. Разработайте цикл уроков для изучения данной темы через среду HTML редакторов.

Глава 8. Создание Web –страниц.

§1. Цели и задачи. Примерное планирование и содержание раздела.

Создание Web –страницы, к которой сможет получить доступ любой пользователь через Intranet или подключившись к Internet, является простой задачей. Для этого необходимо знать HTML. Поэтому очень важно научить учащихся созданию Web –страниц, ибо она является основным документом InterNet.

Изучение HTML в школьном курсе информатики дает учащимся полное представление о структуре Web –страниц, о правилах организации Web-cервера, принципах передачи информации в сети InterNet. Без изучения этого раздела нельзя говорить о формировании информационной культуры учащихся.

Итак, приведем примерные темы и количество учебных часов по ним для обучения учащихся Web технологии.

№	Тема	Краткое содержание	Количество часов
	Web- страница и ее структура. Дескрипторы.	Визуальная структура, Web броузеры. Гипертекст.	1ч
	Ввод и форматирование текста.	Использование интервалов, выравнивание заголовков и абзацев, форматирование с помощью текстовых стилей. Добавление горизонтальных линий	2ч.
	Гипертекстовые ссылки	Понятие об URL. Внутренние и внешние ссылки. Ссылки на другие ресурсы (звукозапись, видеофильм и т.д.)	3ч.
	Создание списков	Создание и использование нумерованных, неупо-рядоченных списков и списка определений.	2ч.
	Графика	Вставка рисунков и их выравнивание	2ч
	Таблицы	Способы создания таблиц. Использование таблиц для макетирования таблиц, окрашивание таблиц и рамок.	2ч.
	Фреймы.	Использование фреймов, создание HTML – кода фрей-мов, создание шаб-лона простой стра-ницы с фреймами.	2ч.
	Конкурс 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>

Первая страница

Для создания Web – cтраниц имеется язык HTML.

На Web-странице можно поместить тексты, рисунки,

графики, фотографии, мультфильмы и т.д.

НТМL не является языком программирования.

</BODY>