4.3. Изображение как гиперссылка

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

<A href=”file1.html”><IMG src=”kartinka.gif”></A>.

Здесь kartinka.gif – это файл с рисунком, который вы хотите сделать гиперссылкой. file1.html – это файл, на который будет осуществлен переход по ссылке.

Чтобы поместить рисунок, который будет являться гиперссылкой, по центру или справа окна используется тег <P> с параметром align, которому присваиваются соответствующие значения, например:

<P align=right> <A href=”file1.html”><IMG src=”kartinka.gif”></A>.

При этом если рисунок большой, можно задать нужные вам размеры с помощью параметров width и height, отвечающих за ширину и высоту соответственно. Например:

<A href=”file1.html”><IMG src=”kartinka.gif” width=50 height=50></A>.

Вопросы для самоконтроля к главе 4

1. Что такое гипертекст, гиперссылка?

2. Какое имеется средство для создания гиперссылок c помощью HTML-кода?

3. В каком случае при создании гиперссылок указывается полный путь доступа к файлу?

4. Приведите пример записи HTML-кода при создании гиперссылки, если файл, на который осуществляется переход, находится в другой папке.

5. Что такое закладка на странице?

6. Какова технология создания закладки на странице?

7. В чем состоит отличие HTML-кода при создании закладки, когда переход по ссылке происходит внутри одного документа в отличие от перехода на другой документ?

8. Как выглядит HTML-код, если гиперссылкой должно служит графическое изображение?

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

10. Как поместить рисунок, являющийся гиперссылкой, справа окна броузера? По центру?

Глава 5. Списки

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

Формат записи списка в HTML-коде выглядит так:

<Тег1 Параметры для всего списка>

<Тег2 Параметры элемента 1> Элемент 1 </Тег2>

<Тег2 Параметры элемента 2> Элемент 2 </Тег2>

…

<Тег2 Параметры элемента n> Элемент n </Тег2>

</Тег1>

5.1. Нумерованные списки

Для создания нумерованных списков используются теги <OL>…</OL> (от англ. ordered list – упорядоченный список) и <LI>…</LI> (от англ. list item – элемент списка).

Допустим, с помощью нумерованного списка нужно организовать расписание занятий на понедельник. Для этого с помощью тега <OL> покажем, что список будет нумерованным, а внутрь тега <LI>…</LI> поместим сами предметы:

…

Расписание на понедельник:

<OL>

<LI> История Отечества (Л) </LI>

<LI> Высшая математика (Л) </LI>

<LI> Высшая математика (С) </LI>

</OL>

…

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

Рис.11. Нумерованный список

Можно заметить, что при создании списка не обязательно ставить тег начала абзаца <P> или перехода на новую строку <BR> ни перед списком, ни после него, поскольку сам список и текст после закрывающегося тега </OL> всегда начинаются с новой строки.

Иногда необходимо нумерацию начинать не с 1, а, например, с нуля или другой цифры. Для этого необходимо использовать параметр start тега <OL> (рис.12). Например:

…

Номера дней недели перед выходными:

<OL start=3>

<LI> Среда </LI>

<LI> Четверг </LI>

<LI> Пятница </LI>

</OL>

…

Рис.12. Список, имеющий начальную нумерацию, отличную от 1

В предыдущих примерах мы использовали арабскую нумерацию (1,2,3…) (по умолчанию). Теперь изменим ее на латинскую. Для этого служит параметр type. Ему присваивается одно из пяти значений: большие латинские буквы (A, B, C, D…), малые латинские буквы (a, b, c, d…), большие римские цифры (I, II, III, IV), малые римские цифры (i, ii, iii, iv…), арабские цифры (1,2,3…). Например:

…

Расписание на понедельник:

<OL type=I>

<LI> История Отечества (Л) </LI>

<LI> Высшая математика (Л) </LI>

<LI> Высшая математика (С) </LI>

</OL>

…

Если нужно, чтобы ваш список был другим шрифтом и (или) цветом, то используем тег <FONT>. Например:

…

Расписание на понедельник:

<FONT face=Verdana color=red> <OL type=I>

<LI> История Отечества (Л) </LI>

<LI> Высшая математика (Л) </LI>

<LI> Высшая математика (С) </LI>

</OL>

</FONT>

Расписание на вторник:

…