Гипертекстовые ссылки
Как только в Web-страницу будет встроена гиперсвязь, документ можно назвать гипертекстом. Гиперссылка может указывать:
· на позицию в своем документе (внутренние гиперссылки),
- на другой документ на своем сервере,
- на произвольный объект по любому адресу Internet.
Внутренние гиперссылки применяются для того, чтобы упростить пользователю ориентацию в больших документах.
Гиперссылки могут быть оформлены как абсолютныеили относительные. Для создания гиперссылки необходим адрес документа, на который устанавливается ссылка. Этот адрес называется URL - Uniform Resource Locator.
Абсолютный URL — это полный Internet-адрес со всей информацией, требуемой клиенту для того, чтобы отыскать сервер и успешно установить с ним связь.
Относительный URL используется для адресации в пределах документа или совокупности документов на одном сервере.
Полный Internet-адрес можно получить лишь тогда, когда к относительному адресу добавляется базовый. Web-браузер при необходимости в большинстве случаев сам добавляет необходимый базовый адрес, чтобы получить полный адрес в Internet.
Относительные URL используются обычно внутри HTML-документа, например, для того, чтобы организовать переход из оглавления к конкретной главе. Базовый адрес можно определить с помощью дескриптора <base> в заголовке HTML-документа.
Абсолютные URL следует использовать во всех тех случаях, когда вы ссылаетесь на документы другого сервера в Internet.
Гипертекстовая ссылка задается парным тегом <A>, который содержит обязательный атрибут HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети, например:
<A HREF=http://www.site.com/index.htm>
Здесь задан адрес в абсолютной форме. Обычно в такой форме задается ссылка на внешний документ. При использовании относительного адреса ссылка рассматривается как внутреняя, например:
<A HREF="text.htm">
Достоинство внутренней ссылки в том, что она сохраняет свою работоспособность при изменении адреса Web-узла.
Дескриптор гиперсвязи <A> иногда называется «якорь» (само наименование дескриптора представляет собой аббревиатуру от английского слова anchor — якорь).
Полный формат гиперссылки включает возможность ссылки на определенное место внутри страницы. Для этого соответствующее место помечается с помощью якоря. Якорь задается тегом <A> с атрибутом name, например:
<A name="MyLabel">.
Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа "#":
<A HREF=http://www.site.com/index.htm#address>
Между дескрипторами <A> и </A> могут находиться только текст, графика и заголовки. Текст, располагающийся между <A> и </A> дескрипторами, обычно изображается браузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе <body> цвет текста гиперсвязи можно изменить.
Основные дескрипторы для организации ссылок и форматирования текста:
| Дескриптор | Атрибут | Назначение |
| <a>, </a> | href=URL | Адрес объекта |
| name=имя метки | Создание локального имени ссылки | |
| <b>, </b> | Полужирный шрифт | |
| <base> | href=URL | Базовый URL |
| <basefont> | size=n | Размер шрифта |
| <big>,</big> | Увеличение шрифта | |
| <body>, </body> | Содержимое HTML-документа | |
| alink=Цвет | Цвет активизированной гиперсвязи | |
| background=URL | URL повторяющейся фоновой иллюстрации | |
| bgcolor=Цвет | Цвет фона | |
| link=Цвет | Цвет гиперсвязи | |
| text=Цвет | Цвет текста | |
| vlink=Цвет | Цвет посещенной гиперсвязи | |
| <br> | Принудительный разрыв строки | |
| <caption>, </caption> | Заголовок таблицы | |
| <center>,</center> | Центрирование фрагмента документа | |
| <em>, </em> | Выделение текста | |
| <font>, </font> | color=Цвет | Задание цвета шрифта |
| face=Шрифт | Вид шрифта | |
| size=n | +n | -n | Размер (абсолютный | относительный) | |
| <hn>, </hn> | Уровень заголовков, где n = 1 - 6 | |
| <hr> | Горизонтальная линия | |
| align=Выравнивание | Выравнивание по горизонтали | |
| noshade | Выключение трехмерного изображения | |
| size=n | Высота линии в пикселях | |
| width=n | n% | Ширина линии | |
| <i>, </i> | Курсив | |
| <li>, </li> | Элемент списка | |
| value=n | Явное задание номера элемента | |
| <ol>, </ol> | Пронумерованный список | |
| start=n | Начальный номер | |
| <p>, </p> | Текстовый абзац | |
| align=Выравнивание | Выравнивание по горизонтали | |
| <small>, </small> | Уменьшение шрифта | |
| <sub>, </sub> | Нижний индекс | |
| <sup>, </sup> | Верхний индекс | |
| <table>, </table> | border=n | Определение таблицы с обрамлением |
| <td>, </td> | Ячейка данных таблицы | |
| colspan=n | Захваченные столбцы | |
| rowspan=n | Захваченные строки | |
| <th>, </th> | Ячейка заголовка таблицы | |
| colspan=n | Захваченные столбцы | |
| rowspan=n | Захваченные строки | |
| <tr>, </tr> | Строка таблицы | |
| <ul>, </ul> | Ненумерованный список |
В таблице использованы следующие обозначения:
- параметр Цвет задается шестнадцатеричным кодом #RRGGBB, где RR, GG, BB - соответственно красная, зеленая и синяя составляющие цвета, принимающие значения от 00 до FF. Чем больше значение, тем меньше насыщенность цвета. Стандартные цвета можно задать словом: Black, Silver, Gray, White, Red, Green, Yellow, Blue и другие;
- параметр Выравнивание может принимать значения Center;
- вертикальная черта "|" в описании атрибутов означает возможность выбора одного из атрибутов.
Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются следующие коды:
- < — левая угловая скобка;
- > — правая угловая скобка;
- & — амперсанд;
- " — кавычки;
-   — непрерывный пробел.
Замечание: в этих кодах нельзя использовать заглавные буквы.
Рассмотрим примеры форматирования текста.
Пример 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>
Результатом воспроизведения этого примера будет таблица:
| Результаты измерений | ||
| время | температура | давление |
| 12:00 | 26.00 | 12.800 |
| 12:15 | 22.50 | 9.810 |
| 12:30 | 11.00 | 1.650 |
| 12:45 | 3.30 | 0.030 |
| 13:00 | 0.05 | 0.002 |
Использование графики в 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.
Дата добавления: 2015-04-15; просмотров: 1511;