2.2.1 Графика внутри html-документа

Изображения могут нести определенную информацию, а также придают Web-странице привлекательный вид. Приведем наиболее распространенные случаи применения изображений:

• логотип компании на деловой странице;

• графика для рекламного объявления;

• различные рисунки;

• диаграммы и графики;

• художественные шрифты;

• подпись автора страницы;

• применение графической строки в качестве горизонтальной разделительной линии;

• применение графических маркеров для создания красивых маркированных списков.

Для того чтобы вставить изображение в Web-страницу используется тег <IMG> с обязательным атрибутом SRC (SouRCe, источник).

Атрибуты:

SRC – адрес файла на веб-сервере (URL), содержащего графическое изображение.

ALIGN – выравнивание.

Атрибуты тега: TOP- по верху; BOTTOM - по низу; MIDDLE - по центру; LEFT – слева; RIGHT – справа.

ALT - текст, который увидит пользователь, если рисунок не может быть выведен или при наведении курсора мыши.

WIDTH, HEIGHT – соответственно ширина и высота изображения в пикселях.

Пример:

<IMG SRC = «priroda.jpg» ALT = «ПРИРОДА»>

<IMG SRC = «pripoda.jpg» ALIGN = «TOP»>

2.2.2 Создание таблиц

Таблицы оформляются тегами <TABLE> и </TABLE>.

Атрибуты:

ALIGN – выравнивание таблицы. Значения: LEFT, RIGHT или CENTER.

WIDTH - ширина таблицы в пикселях

BORDER – ширина обрамления ячеек таблицы в пикселях.

BORDERCOLOR – цвет грани таблицы.

BGCOLOR – фоновый цвет таблицы.

<TR></TR> - строка таблицы. Располагаются между тегами <TABLE> </TABLE> .

Атрибуты:

ALIGN – горизонтальное выравнивание содержимого строки. Значения: LEFT, RIGHT или CENTER.

VALIGN – вертикальное выравнивание содержимого строки. Значения: TOP, BOTTOM и MIDDLE.

<TD> </TD> - ячейка строки.

Атрибуты:

ALIGN, VALIGN – аналогично параметрам тега <TR>

WIDTH, HEIGHT – соответственно ширина и высота в пикселях или процентах.

ROWSPAN – объединение смежных ячеек в одном столбце. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить.

COLSPAN – объединение смежных ячеек в одной строке. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить.

BORDERCOLOR – цвет грани ячейки.

BGCOLOR – фоновый цвет ячейки.

2.2.3 Создание гиперссылок

Для записи гипертекстовой ссылки используется тег <А>, который называют «якорь» (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде

<А НREF=»Адрес веб-ресурса»>Описание веб-ресурса</А> - ссылка на веб-ресурс.

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

Например, в папке D:\HTML располагаются страницы с именами page1.html и page2.html. Организуется ссылка из документа page1.html на документ page2.html. Относительная ссылка будет выглядеть так:

<А НREF= page2.html>…</А>.

Абсолютная ссылка будет выглядеть так:

<А НREF= D:\HTML\page2.html>…</А>.

Если page2.html располагается в подкаталоге catalog1 папки HTML, то относительная ссылка на него из документа page1.html выглядит так:

<А НREF= catalog1\page2.html>…</А>.

Относительная ссылка page2.html на документ page1.html выглядит так:

<А НREF= ..\page1.html>…</А>.

Фрагмент «..\» означает обращение к каталогу выше на один уровень.

Описание веб-ресурса – это текст который будет подсвечен как ссылка, который может быть текстом или рисунком. В первом случае указатель содержит текст, во втором – тег <IMG>.

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения < IMG >:

<A HREF=«адрес файла/ изображения»><IMG SRC =«image.gif»> </A>

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

Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:

Таблица 3

Атрибуты и значения гипертекстовых ссылок

Атрибут	Значение
ТЕХТ=#000000	Цвет текста (черный)
ALINK=#FF0000	Цвет "активных" гипертекстовых ссылок (красный)
VLINK=#FF00FF	Цвет пройденных гипертекстовых ссылок (пурпурный)
LINK=#0000FF	Цвет «не посещенной» гипертекстовой ссылки (синий)

2.2.4 Гипертекстовые ссылки внутри документа

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

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создать маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст который отобразится в первой строке браузера </A>

2. Создать ссылку на данный маркер:

<A HREF="#named_anchor"> Текст </A> .