- •Глава 8. Создание Web –страниц. §1. Цели и задачи. Примерное планирование и содержание раздела.
- •§2. Ввод и форматирование текста.
- •Дескрипторы физических стилей.
- •Дескрипторы логических стилей.
- •§3. Гипертекстовые ссылки
- •§4. Создание списков.
- •Типы нумерации упорядоченных списков.
- •§5. Использование графики в Web-страницах.
- •§6. Таблицы
- •§7. Использование фреймов.
- •Вопросы и задания.
§3. Гипертекстовые ссылки
Существуют 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:
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>
<P><FONT SIZE=2> Выберите ссылку
<P><A HREF="Есенин.htm"> Cтихотворение С.Есенина</A>
<P><A HREF="Пушкин.htm"> Cтихотворение A.С.Пушкина</A>
</BODY>
</HTML>
|
B броузере мы увидим следующее. |
С учащимися необходимо анализировать строки <P><A HREF="Есенин.htm"> Cтихотворение С.Есенина</A> ,<P><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 NAME="Начало">
<P><FONT SIZE=2> Сергей Есенин
<P><A HREF="#Есенин1"> Молитва Матери</A>
<P><A HREF="#Есенин2"> С добрым утром! </A><BR>
<BR>
<A NAME="Есенин1"> </A> Молитва Матери (отрывок)<BR>
<PRE>
На краю деревни старая избушка,
Там перед иконой молится старушка.
Молитва старушки сына поминает,
Сын в краю далеком родину спасает.
</PRE>
<P><A HREF="#Начало"> Начало </A><BR>
<BR>
<A NAME="Есенин2"> С добрым утром(отрывок)</A><BR>
<PRE>
Задремали звезды золотые,
Задрожало зеркало затона.
Брезжит свет на заводи речные
И румянит сетку небосклона.
</PRE>
<BR>
<P><A HREF="#Начало"> Начало </A><BR>
</BODY>
</HTML>
|
Обратите внимание, как реализованы ссылки на начало, на первое и второе стихотворение и на последовательность их расположения в документе. Для закрепления знаний по созданию ссылок внутри документа и на другие Web-страницы учащимся предлагаются следующие примерные задания. Создать Web – страницы. а) Расписание занятий на неделю. б) Рецепты приготовления различных тортов. в) млекопитающие. г) график дежурства |
В дальнейшем, в зависимости от технической базы и профиля обучения учащихся рассматриваются создание ссылок на ресурсы мультимедиа, адреса электронной почты, на FTP-сервер.
Для воспроизведения музыкального фрагмента можно создать следующую ссылку.
<HTML>
<HEAD>
<TITLE> Ресурсы мультимедиа</TITLE>
</HEAD>
<BODY>
Музыка<A HREF ="C:\windows\media\passport.mid"</A > здесь<BR>
</BODY>
</HTML>
В результате запускается универсальный проигрыватель и автоматически проигрывается мелодия. Точно так же с помощью ссылок можно отобразить на экране тексты. |
|
