Ненумерованный список определяется метками <UL></UL>. Нумерованный - метками <OL></OL>. Элементы списка отмечаются метками <LI>. В нумерованном списке элементы нумерует сам браузер. Примеры: <UL>Список коней:
<LI>Сивка
<LI>Бурка
<LI>вещая Каурка
</UL> <OL>Список коней:
<LI>Сивка
<LI>Бурка
<LI>вещая Каурка
</OL>
Это дает на экране следующие списки:
Список коней:
Сивка
Бурка
вещая Каурка
Список коней:
Сивка
Бурка
вещая Каурка
Заметим, метка <LI> непарная - т.е. метки </LI> не существует.
Список определений ограничивается метками <DL></DL>. Элементы списка отмечаются следующим образом: меткой <DT> - определяемое слово или выражение, меткой <DD> - само определение. Пример:
<DL>Расшифровка меток:
<DT>UL<DD>unordered list - ненумерованный список
<DT>OL<DD>ordered list - нумерованный список
<DT>LI<DD>list item - элемент списка
<DT>DL<DD>definition list - список определений
<DT>DT<DD>definition term - определяемый термин
<DT>DD<DD>definition description - описание определения
</DL>
Результат на экране:
Расшифровка меток:
UL
unordered list - ненумерованный список
OL
ordered list - нумерованный список
LI
list item - элемент списка
DL
definition list - список определений
DT
definition term - определяемый термин
DD
definition description - описание определения
Обратите внимание, метки <DT> и <DD> также, как и <LI>, не имеют парных закрывающих меток. В метке <DL> можно использовать аттрибут COMPACT, если его применить в предыдущем примере (<DL COMPACT>), то результат выглядел бы так:
Расшифровка меток:
UL
unordered list - ненумерованный список
OL
ordered list - нумерованный список
LI
list item - элемент списка
DL
definition list - список определений
DT
definition term - определяемый термин
DD
definition description - описание определения
Списки могут быть произвольно вложены (разумно ограничиться тремя уровнями вложения). Каждый элемент списка может содержать несколько абзацев.
В списках могут использоваться следующие аттрибуты:
TYPE - определяет стиль представления элементов списка (для меток <UL> и <OL>), подробнее ниже;
START - (только для нумерованного списка <OL>) определяет значение первого элемента списка. По умолчанию 1. Обратите внимание, что несмотря на то, что значение аттрибута - всегда числовое значение, элемент списка может быть быть нечисловым - в зависимости от значения аттрибута TYPE;
VALUE - (только для метки <LI>) устанавливает номер текущего элемента списка. Как и в предыдущем случае элемент списка может быть нечисловым, хотя его значение - всегда число.
Значение аттрибута TYPE для ненумерованного списка может быть следующим: DISC
SQUARE
CIRCLE
Для нумерованного списка значение аттрибута TYPE может быть одним из следующих:
Значение TYPE Стиль представления элемента списка
1 арабские цифры 1,2,3,...
a строчные буквы a,b,c,...
A прописные буквы A,B,C,...
i римские цифры i,ii,iii,...
I римские цифры I,II,III,...
По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
Урок 9
Тема: &-последовательности, комментарии.
Как уже упоминалось, такие знаки как "<", ">", двойные кавычки и амперсанд ("&") используются в HTML для выделения тэгов, определения адресов, значений аттрибутов и т.п. Поэтому при просмотре документа браузером эти знаки не видны на экране. Если же их надо отобразить на экране, то используют так называемые &-последовательности:
<
последовательность < (от английского "less than");
>
последовательность > (от "greater than");
"
(двойные кавычки) последовательность " (от "quotations mark");
&
последовательность & (от "ampersand").
Внимание! &-последовательности должны набираться только в нижнем регистре (никаких < или " быть не должно!), и точка с запятой в конце последовательности обязательна.
Пример. Чтобы пользователь увидел на экране крейсер "Аврора", в HTML-документе должен быть следующий код: крейсер "Аврора"
Вообще &-последовательностей гораздо больше. Здесь стоит упомянуть еще о таких:
(nonbreaking space) - неразрывный пробел. Браузеры игнорируют множественные обычные пробелы, этот же будет показан. Также используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP 100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следущую, например, при изменении шрифта или размера окна браузера);
©
© (copyright) - авторские права (или как порой шутят: "скопировано правильно");
®
® (registered trademark) - зарегистрированный товарный знак.
Куда и к какой теме пристроить следующий материал я так и не смог придумать, поэтому добавил к этому уроку. Это комментарии. Текст, расположенный между в HTML-документе <!-- и --> не будет отображен на экране при просмотре, а будет виден лишь при редактировании документа. Пример:
<!-- Это мой комментарий -->
<!-- А этот комментарий занимает в тексте
несколько
строк -->
Не допустите ошибку! В комментариях не допускается вставлять два и более дефисов подряд: -- или ----- (разные браузеры по разному реагируют на это).
Урок 10
Тема: изображения-карты (image maps).
Изображения-карты позволяют выделить отдельные области изображений и определить для каждой из них свое действие. Скажем, какие-то части картинки будут служить ссылками на другие страницы, после клика по другим областям рисунка будет загружен и проигран музыкальный фрагмент, или выполнен JavaScript. Ниже будет рассмотрен пример.
Существует два типа изображений-карт:
клиентские (client-side) - когда пользователь кликает по рисунку, браузер сам интерпретирует координаты клика. Он выбирает ссылку, определенную для данной области, и переходит по ней (либо выполняет заданное действие);
серверные (server-side) - координаты клика передаются для интерпретации на сервер и уже он делает соответствующие действия (например, возвращает браузеру URL для перехода).
Первый тип проще и доступнее, поэтому далее рассматривать будем только его.
Для создания изображения-карты используются элементы <MAP> и <AREA>.
Элемент MAP (так и переводится - "карта") должен обязательно иметь аттрибут NAME. Это позволяет указать браузеру, к какому именно рисунку на странице относится данная карта.
Элемент AREA имеет следующие аттрибуты:
SHAPE - описывает форму выделяемой области, возможные значения:
RECT - прямоугольник;
CIRCLE - круг;
POLY - многоугольник;
DEFAULT - определяет всю область.
COORDS - координаты, определяющие размеры и положение области на изображении. Количество и порядок значений зависит от значения аттрибута SHAPE:
RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего);
CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус);
POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
NOHREF - этот аттрибут определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца (подробности в примере ниже).
ALT - альтернативный текст для выделенной области, используется невизуальными браузерами.
TITLE - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
TARGET - значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ (подробнее в Уроке про фреймы).
Если описываемые области пересекаются (накладываются друг на друга), то приоритет имеет область, описанная первой.
Аттрибут USEMAP используется для того, чтобы соотнести какое-то изображение с определенной картой. Он может использоваться с элементами IMG (чаще всего!), OBJECT и INPUT.
Теперь обещанный пример:
Контуры ссылок точно повторяют контуры рисунков. В данном примере при клике на ссылку будет лишь появляться сообщение "Нажата ссылка...", чтобы зря не гонять вас по страницам и не отнимать драгоценное время! Рассмотрим пример подробнее:
<IMG SRC="../picts/maps.gif" BORDER="0" HEIGHT="145" WIDTH="360"
ALT="Пример изображения-карты" USEMAP="#primer">
<MAP NAME="primer">
<AREA SHAPE="poly" COORDS="11,9,200,9,200,26,61,26,61,36"
TITLE="Ссылка 1" HREF="javascript:alert('Нажатассылка 1');">
<AREA SHAPE="poly" COORDS="11,55,11,134,60,134"
TITLE="Ссылка 2" HREF="javascript:alert('Нажатассылка 2');">
<AREA SHAPE="rect" COORDS="80,64,200,94"
TITLE="Ссылка 3" HREF="javascript:alert('Нажатассылка 3');">
<AREA SHAPE="rect" COORDS="80,104,200,134"
TITLE="Ссылка 4" HREF="javascript:alert('Нажатассылка 4');">
<AREA SHAPE="circle" COORDS="285,72,43"
TITLE="Здесьнетссылки" NOHREF>
<AREA SHAPE="circle"" COORDS="285,72,64"
TITLE="Ссылкакольцевая" HREF="javascript:alert('Нажатассылкаввидекольца');">
</MAP>
У элемента IMG указан аттрибут USEMAP со значением "#primer". И далее следует карта (MAP) с именем "primer". Дело в том, что таких рисунков на странице может быть несколько, и соответственно несколько карт к ним. Более того, одна карта может подходить к нескольким рисункам (например, внизу и вверху страницы у вас размещены рисунки с навигацией по сайту). Чтобы браузер знал, какому рисунку какая карта соответствует, необходимо указывать имена.
Как сделано кольцо? Здесь две области в виде круга накладываются друг на друга. Первая область без ссылки (NOHREF) была описана первой, а уже потом вторая в виде круга большего диаметра. Ранее мы упоминали, что при наложении двух и более областей приоритет имеет область, описанная в тексте первой. Вот потому-то центральная часть круга и не имеет ссылки!