7.Вставка гипертекстовых ссылок

Теги <A> и </A>, между которыми размещается некоторый текст, являются одним из самых важных элементов языка HTML, обеспечивающим создание гипертекстовых ссылок. Чаще всего используется такой шаблон:

<A href=’’Адрес ссылки’’> текст для щелчка </A> ,

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

<A href=’’file:///C:\DOC\file.htm’’> Переход к file.htm </A>

или

<A href=’’C:\DOC\file.htm’’> Переход к file.htm </A>.

Если файл находится в той же директории, что и источник текущей web-страницы, то путь к нему в адресе можно не указывать:

<A href=’’file1.htm’’> Ссылка на file1</A>.

Если ссылка происходит на другой web- сервер, то в качестве значения атрибута href указывается полный адрес этого сервера:

<A href=’’http://www.sstu.runnet.ru/sstu/news.htm’’> СГТУ</A>

7.1. Вставка графического изображения в ссылку

Можно использовать для ссылки другой шаблон, который применяется в тех случаях, когда видимая часть гиперссылки представляет собой рисунок (так называемая картинка - ссылка):

<A href=’’Адрес ’’> <IMG src=’’Ссылка на рисунок’’ > </A>,

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

Например: <A href=’’page2.htm’’> <IMG src=’’pict1.htm’’> </A>.

Более подробно о вставке графических изображений в текст web- страницы и использовании тега <IMG> изложено в следующем разделе (см. п.8).

7.2. Локальные ссылки внутри документа

Если длина документа HTML велика, целесообразно организовать ссылки на его отдельные части, расположив их, например, в начале и в конце документа. Такие ссылки часто называются закладками.

Перед тем, как использовать ссылку, в нужных местах документа (тех, куда необходимо сослаться) должны быть расставлены локальные метки вида:

<A name = ‘’Метка’’> </A>.

Например: <A name = ‘’Начало’’> Заголовок документа </A>.

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

Текст <A href = ‘’#Метка’’> Текст для щелчка </A>.

Например: Переход <A href = ‘’#Начало’’> к началу текста </A>.

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

8. Размещение графических и видеоизображений

Для размещения графических изображений внутри текста или таблиц вы можете воспользоваться тегом IMG. Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гипперссылках (см. п.7.1), вставлять картинки в таблицы, размещать рисунки на web- странице, создавать маркеры и т.д.

Необходимым атрибутом является src - указатель на файл графики: src= ’’ Ссылка на файл’’.

Атрибут alt позволяет выводить пояснительный текст в тех местах страницы, где должны располагаться рисунки. Это нужно для того, чтобы пользователь, не дожидаясь окончания загрузки изображения, смог получить информацию о рисунке.

Например: <IMG src=’’pict1.gif’’ alt= ‘’План города’’>.

Необходимо еще раз отметить, что web-броузеры могут воспринимать графические изображения только в виде файлов в формате .gif или .jpg.

В теге можно использовать атрибут выравнивания текста, размещенного в одном параграфе с рисунком (обтекание текстом) - align:

align=’’bottom’’ - текст выравнивается по нижнему краю рисунка;

align=’’left’’ - текст слева от рисунка;

align=’’middle’’ - текст центрируется по высоте изображения;

align=’’right’’ - текст справа;

align=’’top’’ - выравнивание текста по верхнему краю рисунка.

Можно задать высоту height=Высота в пикселах или ширину width = Ширина в пикселах рисунка. Допустимо применение только одного из атрибутов. В этом случае рисунок масштабируется в соответствии с заданным атрибутом, а второй размер устанавливается автоматически в соответствующей пропорции.

Толщина рамки задается в пикселах:

border= Число пикселов.

Если рисунок используется внутри тега <A>, то изменение цвета рамки позволяет отличить пройденную ссылку от нетронутой.

Вокруг рисунка можно создать пустое пространство цвета фона:

hspace= Число пикселов - справа и слева;

vspace= Число пикселов - сверху и снизу.