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

Для создания ссылки из документа DOCUM1 на какой-то раздел (абзац) документа, содержащегося в файле DOCUM2, необходимо сначала создать именованную ссылку (метку) в документе DOCUM2:

<A NAME=”PETJA”>Петя Иванов</A>,

а затем ссылку на неё из документа DOCUM1, указывая не только имя файла, но и имя ссылки, разделив их символом #.

<A HREF=”DOCUM2#PETJA”>Привет от Петра</A>.

В этом примере фраза «Привет от Петра» является ссылкой на метку ”PETJA” документа DOCUM2.

Для организации ссылок на разделы одного и того же документа используется та же технология, но в адресе ссылки не указывается имя файла. Например, чтобы перейти в именованный раздел PETJA в документе DOCUM2, надо создать следующую ссылку:

Цвета ссылок можно определить в теге стилей <style> (это так называемые каскадные стили.) При этом значения атрибутов, определенных в тэге <style> имеют приоритет перед определениями, сделанными в теге BODY или в теле документа.

Пример:

<head>

<style>

a:link {color:#ff5500; font-weight:normal; }

a:visited {color:#00ff00; font-weight:normal; }

a:hover {color:blue; font-weight:normal; }

</style>

</head>

Графические ссылки

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

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

ПРИМЕР

<A HREF=”DOG.HTM”><IMG SRC=”images/dog1.gif” ALT=”Собака” WIDTH=60 HEIGHT=80></A>

Целесообразно для графических ссылок не уменьшать размер исходного изображения при помощи атрибутов WIDTH и HEIGHT, а создавать отдельные миниатюрные изображения. Это существенно ускорит процесс загрузки документа.

Указания по выполнению работы

1. Используя коллекцию графики из набора вариантов к работе №8, создать графическое изображение (размер не более 500х500 пикселей) для использования в качестве статичного изображения заднего плана документа.

2. Создать первую страницу HTML документа, аналогично предыдущей работе.

3. Создать 3 дополнительные страницы с различным цветом фона страницы:

· страница 2;

· страница 3;

· страница 4.

Главному документу присвоить имя INDEX.HTM. При помощи тэга <A HREF=> Текстовая ссылка </A> организовать связь главного документа с тремя другими документами, обеспечивая перекрашивание гипертекстовой ссылки при наведении на неё курсора.

4. Перенесите текст параграфа 2 на страницу 2 и создайте ссылку со слов «Параграф 2» на первой странице на страницу 2.

5. Повторите п. 4 для параграфов 3 и 4.

6. Снабдите текст комментарием – Это сайт студента …………. из …. страниц.

7. Проверьте через браузер правильность выполнения заданий данной работы.

Сообщите преподавателю об окончании работы.

Контрольные вопросы

1. Каким тэгом определяется ссылка?

3. Для чего служат тэги <А> и < /A>?

4. Как задать графическую ссылку?

5. Как создать ссылку для отправки электронной почты?

6. Как задать текстовый комментарий?

7. Как задать статичное изображение заднего плана документа?

8. Как обеспечить перекрашивание гипертекстовой ссылки при наведении на неё курсора?

9. Рекомендуется ли для графических ссылок уменьшать размер исходного изображения при помощи атрибутов WIDTH и HEIGHT?

10. Существует ли ограничение на длину фразы, являющейся гиперссылкой?

Литература/источники

1. Леонтьев В. Новейшая Энциклопедия ИНТЕРНЕТА 2009 / В. Леонтьев. –М.: ОЛМА Медиа Групп, 2009.

3. Глушаков С.В., Сурядный А.С., Тесленко Н.С. Новейшая Энциклопедия работы в Интернете / С.В. Глушаков. –М.: АСТ, 2008,

4. Жёлтые страницы INTERNET электронный ресурс, доступ: http://yp.piter.com/

5. Справочник по HTML, электронный ресурс: http://htmlbook.ru/html

6. Верстка сайтов, электронный ресурс: : http://htmlcssjs.ru/

РАБОТА №10