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

Как только в Web-страницу будет встроена гиперсвязь, документ можно назвать гипертекстом. Гиперссылка может указывать:

· на позицию в своем документе (внутренние гиперссылки),

• на другой документ на своем сервере,
• на произвольный объект по любому адресу Internet.

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

Гиперссылки могут быть оформлены как абсолютные или относительные. Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL - Uniform Resource Locator.

Абсолютный URL — это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь.

Относительный URL используется для адресации в пределах документа или совокупности документов на одном сервере.

Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-браузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet.

Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора < base> в заголовке HTML-документа.

Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet.

Гипертекстовая ссылка задается парным тегом < A>, который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например:

< A HREF=https://www.site.com/index.htm>

Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например:

< A HREF=" text.htm" >

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

Дескриптор гиперсвязи < A> иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor — якорь).

Полный формат гиперссылки включает возможность ссылки на определенное место внутри страницы. Для этого соответствующее место помечается с помощью якоря. Якорь задается тегом < A> с атрибутом name, например:

< A name=" MyLabel" >.

Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа " #":

< A HREF=https://www.site.com/index.htm#address>

Между дескрипторами < A> и < /A> могут находиться только текст, графика и заголовки. Текст, располагающийся между < A> и < /A> дескрипторами, обычно изображается браузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе < body> цвет текста гиперсвязи можно изменить.

Основные дескрипторы для организации ссылок и форматирования текста:

В таблице использованы следующие обозначения:

• параметр Цвет задается шестнадцатеричным кодом #RRGGBB, где RR, GG, BB - соответственно красная, зеленая и синяя составляющие цвета, принимающие значения от 00 до FF. Чем больше значение, тем меньше насыщенность цвета. Стандартные цвета можно задать словом: Black, Silver, Gray, White, Red, Green, Yellow, Blue и другие;
• параметр Выравнивание может принимать значения Center;
• вертикальная черта " |" в описании атрибутов означает возможность выбора одного из атрибутов.

Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются следующие коды:

• & lt — левая угловая скобка;
• & gt — правая угловая скобка;
• & amp — амперсанд;
• & quot — кавычки;
• & nbsp — непрерывный пробел.

Замечание: в этих кодах нельзя использовать заглавные буквы.

Рассмотрим примеры форматирования текста.

Пример 1

< font color=Red size=6 face=" Times New Roman" >
Пример управления шрифтом
< /font>

Браузер воспроизведет текст

" Пример управления шрифтом"

красным цветом, размером — 6, шрифтом Times New Roman.

Пример 2

< UL>
< LI> яблоки
< LI> бананы
< /UL>

Результатом воспроизведения является маркированный список:

· яблоки

· бананы

Пример 3

< OL>
< LI> апельсины
< LI> персики
< LI> виноград
< /OL>

Результатом воспроизведения является нумерованный список:

1. апельсины

2. персики

3. виноград

Пример 4

< table border=1>
< caption> Результаты измерений< /caption>
< tr>
< th> время< /th>
< th> температура< /th>
< th> давление< /th>
< /tr>
< tr align=right>
< td> 12: 00< /td>
< td> 26.00< /td>
< td> 12.800< /td>
< /tr>
< tr align=right>
< td> 12: 15< /td>
< td> 22.50< /td>
< td> 9.810< /td> < /tr>
< tr align=right>
< td> 12: 30
< /td> < td> 11.00
< /td>
< td> 1.650< /td>
< /tr>
< tr align=right>
< td> 12: 45< /td>
< td> 3.30< /td>
< td> 0.030< /td> < /tr>
< tr align=right>
< td> 13: 00< /td>
< td> 0.05< /td>
< td> 0.002< /td> < /tr>
< /table>

Результатом воспроизведения этого примера будет таблица:

Использование графики в HTML–документах

Рисунки являются очень важными элементами оформления WEB-страниц. Привлекательность и информативность сайтов в Интернет во многом определяется использованием графики. Рисунки, чаще всего, хранятся в файлах формата.jpg или.gif, обычно в отдельной папке (браузеры поддерживают и другие графические форматы). Кроме указанных форматов допускается использовать видеоизображения в формате.avi.

Подключение рисунков выполняется с помощью дескриптора < img>, имеющего следующие основные атрибуты:

· align=Выравнивание — способ выравнивания графики, например, Center;

· border=n — видимая рамка вокруг графики;

· dynsrc=URL — исходный URL видео;

· height=n — высота графики;

· loop=n — число повторений видео (если вместо n задано infinite, видео будет повторяться непрерывно);

· src=URL — исходный URL графики;

· start=Условие запуска — задает способ запуска видео, например, start=mouseover запускает видео при перемещении указателя мыши по области видео;

· width=n — ширина графики.

Рассмотрим пример добавления графики в HTML-документ.

Пример 5

Откроем редактор Блокнот и наберем следующий код:

< HTML>
< HEAD> < /HEAD>
< BODY>
< TABLE Border=1>
< TR> < TD colspan=2> < img src=" Car.jpg" > < /TD> < /TR>
< TR> < TD colspan=2>
< Font color=Red size=3 face=" Times New Roman" >
Двигатель внутреннего сгорания< /Font> < /TD> < /TR>
< TR> < TD> < img dynsrc=" Demo.avi" start=mouseover> < /TD>
< TD> < img dynsrc=" Demo.avi" loop=infinite> < /TD>
< /TR>
< /TABLE>
< /BODY>
< /HTML>

Сохраним код под любым именем с расширением.html или.htm, например, Example.html. Следует иметь в виду, что в соответствии с кодом, графика должна храниться в той же папке, где и Example.html. Двойной щелчок по значку Example.html воспроизведет приведенного кода в браузере Internet Explorer.