Курс лекций по "Информатике"

Ненумерованный  список определяется метками <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 для выделения тэгов, определения адресов, значений аттрибутов и т.п. Поэтому при просмотре документа браузером эти знаки не видны на экране. Если же их надо отобразить на экране, то используют так называемые &-последовательности: 

<

последовательность &lt; (от английского "less than");

>

последовательность &gt; (от "greater than");

"

(двойные кавычки)  последовательность &quot; (от "quotations mark");

&

последовательность &amp; (от "ampersand").

Внимание! &-последовательности должны набираться только в нижнем регистре (никаких &LT; или &QUOT; быть не должно!), и точка с запятой в конце последовательности обязательна. 

Пример. Чтобы  пользователь увидел на экране крейсер "Аврора", в HTML-документе должен быть следующий код: крейсер &quot;Аврора&quot; 

Вообще &-последовательностей гораздо больше. Здесь стоит упомянуть еще о таких:  

&nbsp;

(nonbreaking space) - неразрывный  пробел. Браузеры игнорируют множественные  обычные пробелы, этот же будет  показан. Также используется для  заполнения пустых ячеек таблицы,  пустых абзацев, для склеивания слов (если набрать TOP&nbsp;100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следущую, например, при изменении шрифта или размера окна браузера);

&copy;

© (copyright) - авторские  права (или как порой шутят: "скопировано правильно"); 

&reg;

® (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) была описана первой, а уже потом вторая в виде круга большего диаметра. Ранее мы упоминали, что при наложении двух и более областей приоритет имеет область, описанная в тексте первой. Вот потому-то центральная часть круга и не имеет ссылки! 

Об использовании  аттрибута SHAPE со значением "default". Если в данном примере после всех ссылок добавить, например, такую строку: