Пример 1
Lt;A name="MyLabel">.
Гипертекстовые ссылки
Структура документа HTML
Простейший правильный документ HTML, содержащий все теги, определяющие структуру, выглядит следующим образом:
<HTML>
<HEAD><TITLE>Заголовок документа</TITLE></HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Здесь использованы ключевые слова:
- HTML — начало и конец документа HTML;
- HEAD — начало и конец раздела заголовка;
- TITLE — начало и конец общего заголовка документа;
- BODY — начало и конец тела документа.
Большинство элементов языка HTML описывает части содержания документа и помещаются между тегами <BODY> и </BODY> (структурный элемент BODY).
Основными функциональными элементами документа HTML являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков, которые задаются при помощи тегов от <H1> до <H6>. В Web-документе они отображаются шрифтом разного размера.
Обычные абзацы задаются с помощью парного тега <P>. В HTML нет средств для задания абзацного отступа. Абзацы отделяются пустой строкой. Закрывающий тег </P> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает очередной абзац. Если в тексте присутствует символ конца строки, при воспроизведении в броузере он рассматривается как простой пробел. Для перехода на другую строку используется непарный тег <BR>. В качестве ограничителя абзацев может использоваться горизонтальная линейка, задаваемая тегом <HR>, например:
<HR ALIGN="RIGHT" SIZE="10" WIDTH="50%">
Этот тег задает горизонтальную линейку высотой в 10 пикселов, занимающую половину ширины окна и расположенную справа.
Как только в 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, например:
Значение этого атрибута - произвольная последовательность латинских букв и цифр, рассматриваемая как имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа "#":
<A HREF=http://www.site.com/index.htm#address>
Между дескрипторами <A> и </A> могут находиться только текст, графика и заголовки. Текст, располагающийся между <A> и </A> дескрипторами, обычно изображается броузерами в цвете (для этих целей по умолчанию используется голубой цвет), некоторые программы подчеркивают его. Посредством атрибутов в дескрипторе <body> цвет текста гиперсвязи можно изменить.
При включении в Web-страницу гиперссылок учитывайте следующие рекомендации.
- Выразительно оформляйте текст гиперсвязи. По тексту гиперсвязи должно быть четко и ясно понятно, куда ведет эта связь. Текст гиперссылки не был слишком длинным: кратко и сжато выражайте цель ссылки.
- Не перегружайте документ гиперссылками. Вставляйте в текст Web-страницы только действительно необходимые ссылки. В противном случае, пытаясь ознакомиться со всеми адресуемыми объектами, пользователь очень быстро потеряет нить ваших рассуждений.
- Никогда не размещайте два <а>-дескриптора по соседству друг с другом в тексте документа, не вставив между ними никакого разделителя. При отображении такого документа тексты этих гиперсвязей просто сольются.
- Создав свою Web-страницу, попытайтесь взглянуть на нее глазами пользователя. Все ли гиперссылки выдержаны в одном стиле?
Основные дескрипторы для организации ссылок и форматирования текста показаны в таблице.
| Дескриптор | Атрибут | Назначение |
| <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;
- вертикальная черта "|" в описании атрибутов означает возможность выбора одного из атрибутов.
Символы <, >, & и " напрямую в тексте не отображаются. Для их изображения используются следующие коды:
- < — левая угловая скобка;
- > — правая угловая скобка;
- & — амперсанд;
- " — кавычки;
- — непрерывный пробел.
Замечание: в этих кодах нельзя использовать заглавные буквы.
Рассмотрим примеры форматирования текста.
<font color=Red size=6 face="Times New Roman">
Пример управления шрифтом
</font>
Броузер воспроизведет текст
"Пример управления шрифтом"
красным цветом, размером — 6, шрифтом Times New Roman.