Графика внутри 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»>

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

Таблицы оформляются тегами <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 – фоновый цвет ячейки.

 

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

Для записи гипертекстовой ссылки используется тег <А>, который называют «якорь» (а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	Цвет «не посещенной» гипертекстовой ссылки (синий)