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

Главная особенность web-страниц состоит в том, что любая из них может позволить перейти к другой странице, находящейся на том же компьютере или в Интернет. Выглядит это следующим образом: фрагмент документа (текст, картинка или другой объект) выделяется особым образом; при просмотре страницы можно, щёлкнув мышью по этому фрагменту заставить браузер загрузить другую страницу, адрес которой записывается в тексте HTML-документа. По этой причине содержимое страниц называется гипертекстом.

Для выделения фрагмента, являющегося ссылкой, используется контейнер (от слова anchor — якорь). Наиболее важный атрибут тега — это HREF, в качестве значения которого записывается адрес страницы, на которую нужно перейти. Ниже приведён пример вставки гиперссылки:

Щёлкните сюда, чтобы перейти на главную страницу web-сайта ВГПУ

В качестве адреса в атрибуте HREF записывается либо полный URL сайта или страницы, либо имя файла, содержащего страницу, если она лежит на том же компьютере, что и исходная. Если страница лежит на том же компьютере, в том же каталоге, что и просматриваемая, то в HREF достаточно указать имя файла. Если же она лежит в другом каталоге, то вместо имени протокола пишут «file://», а затем — полный путь к файлу и его имя.

Примеры: HREF="main.html", HREF="file://c:\WebPages\Book\contents.htm".

Иногда страницы могут оказаться довольно большими, и для поиска нужной информации потребуется много времени. В таких случаях разумно делать ссылки в пределах одного документа. Пусть, например, в формате HTML опубликована целая книга, тогда её содержание можно выполнить в виде ссылок, щёлкнув по нужной ссылке можно быстро перейти к началу интересующей нас главы или части книги.

Чтобы сделать ссылку в пределах одного документа потребуется два шага:

1. Отмечаем то место в документе, на которое позже сделаем ссылку (устанавливаем «якорь»). Для этого вставляем в нужное место тег с атрибутом NAME. В качестве значения этого атрибута записываем в кавычках имя для того места, которое мы хотим отметить (лучше латинскими буквами). В дальнейшем браузер по имени будет искать позицию, на которую указывала ссылка. Тег можно поставить сразу за открывающим тегом (контейнер в этом случае будет пустым), а можно поместить перед закрывающим тегом какой-либо фрагмент документа, с ним и будет связано имя, указанное в атрибуте NAME. Пример:

2. При добавлении ссылки на «якорь», установленный в п. 1, в атрибуте HREF в кавы­ч­ках пишут знак «#», за которым следует имя якоря, например: Глава 15.

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

Для того чтобы способы помещения иллюстраций на web-страницы были более понятны, эта часть была оформлена в html-формате (см. файлы Graphics\Graphics.html и Graphics\Graphics2.html).

8. Управление видом документа в целом

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

1. Атрибут TEXT задаёт цвет для всего текста документа, используемый по умолчанию. Цвет, как уже говорилось, может задаваться как названием (red, yellow, teal и т. п.), так и числовым кодом «#RRGGBB».

2. Атрибут LINK позволяет установить цвет для текстовых гиперссылок.

3. VLINK — цвет просмотренных текстовых гиперссылок.

4. BGCOLOR — цвет фона всей страницы.

5. В атрибуте BACKGROUND указывается URL графического файла, который будет использован в качестве фонового изображения. Если размеры рисунка меньше размеров страницы, то он будет автоматически размножен браузером.

9. Таблицы

9.1. Основные теги

Иногда на web-странице требуется отображать какие-либо данные в виде таблиц. Как нам уже известно, для вставки объектов, более сложных чем обычный текст, требуется использовать специальные теги (например: ,

и т. п.). Это правило касается также и таблиц: всё то, что должно быть показано в виде таблицы, помещается в контейнер TABLE.

Рассмотрим подробнее содержимое контейнера TABLE:

1. У таблицы может быть название, которое располагается ниже или выше самой таблицы. Для вставки названия сразу после тега

записывают контейнер

, внутри которого пишут название таблицы. Расположение названия (выше или ниже таблицы) указывается с помощью атрибута ALIGN тега CAPTION, значениями которого могут быть TOP (сверху) или BOTTOM (снизу). Пример:

Таблица 1

. . . . . . . . . . . . . . .

2. Данные для самой таблицы записываются после , если таковой имеется. Таблица состоит из строк, а каждая строка состоит из отдельных ячеек, поэтому данные записываются в следующем виде:

{Содержимое первой строки}

{Содержимое второй строки}

{Содержимое третьей строки}

. . .

Контейнер TR (table row — строка таблицы) содержит данные для одной строки, а именно:

Ячейка 1 Ячейка 2 Ячейка 3 . . .

Контейнер TD (table data — данные таблицы) содержит тест, графику или другие объекты, которые нужно поместить в конкретную ячейку. Если ячейка содержит текст, который является заголовком столбцы, то его можно выделить особо, используя вместо TD контейнер TH (table header — заголовок таблицы). Если какая-то ячейка должна выглядеть пустой, то в неё нужно записать хотя бы пробел, в противном случае браузер автоматически удалит её со страницы.

Простейший пример таблицы можно найти в файле Tables\T1.html.

9.2. Настройка размеров таблицы

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

. Если дать этому атрибуту значение (натуральное число), то таким способом будет установлена толщина внешней границы в точках, например: .

Для установки ширины таблицы имеется атрибут WIDTH тега

, в котором можно указать ширину двумя способами:

1. Абсолютный — в точках, размер таблицы не зависит от размеров окна браузера или настроек экрана. Пример:

.

1. Относительный — в процентах от ширины окна, например:

   .

   Кроме ширины всей таблицы можно настраивать ширину отдельных ячеек, используя атрибут WIDTH тегов

   и	. Ширина указывается либо в точках, либо в процентах (от ширины таблицы). В теге можно настроить толщину внутренних линий сетки, используя атрибут CELLSPACING, значением которого является толщина в точках. Кроме того, возможна настройка размера отступов от линий сетки до содержимого ячейки (также в точках), для этого используется атрибут CELLPADDING тега .

   Пример таблицы с настройками различных размеров находится в файле Tables\T2.html.

   9.3. Настройка цвета фона для таблицы

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

   (фон для всей таблицы), (для одной строки),

   и	(для отдельной ячейки). Значение цвета задаётся в уже известном нам виде: указывается либо одно из стандартных названий, либо интенсивности трёх составляющих цвета в виде #RRGGBB. Пример таблицы с настройками цветов фона имеется в файле Tables\T3.html.

   9.4. Настройка вида содержимого ячеек таблицы

   В примерах T1.html — T3.html текст внутри ячеек всегда выровнен по левому краю. Изменить горизонтальное выравнивание можно при помощи атрибута ALIGN в тегах , и (для строки или отдельной ячейки, соответственно). Значениями этого атрибута могут быть LEFT, RIGHT и CENTER.

   Кроме горизонтального выравнивания можно указать вертикальное выравнивание содержимого отдельных ячеек. Для этого в теге или указывается атрибут VALIGN, значениями которого могут являться TOP, MIDDLE и BOTTOM.