Маркированный список

В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров списка определяется браузером. Для создания маркированного списка необходимо использовать тег-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать теги абзаца или принудительного перевода строки .

Каждый элемент списка должен начинаться тегом <LI> (LI — List Item, элемент списка). Тег <LI> не нуждается в соответствующем закрывающем теге. Пример маркированного списка

<HTML>

<HEAD>

<TITLE>Пример маркированного списка</TITLE>

</HEAD>

<BODY>

<UL>

Знаки зодиака:</В>

<LI>Овен

<LI>Телец

<LI>Близнецы

<LI>Рак

<LI>Лев

<LI>Дева

<LI>Весы

<LI>Скорпион

<LI>Стрелец

<LI>Козерог

<LI>Водолей

<LI>Рыбы

</UL>

</BODY>

</HTML>

В теге <UL> могут быть указан параметр TYPE. Параметр TYPE может принимать следующие значения: disc, circle и square.

Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера.

Типичными вариантами отображения являются следующие:

TYPE = disc - маркеры отображаются закрашенными кружками;

TYPE = circle — маркеры отображаются не закрашенными кружками;

TYPE = square — маркеры отображаются закрашенными квадратиками.

Пример записи: <UL TYPE = circle>

Параметр TYPE с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в теге элемента списка <LI>.

Пример записи: <LI TYPE = circle>

В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов.

Пример списка с графическими маркерами

<HTML>

<HEAD>

<TITLE>Маркированный список</TITLE>

</HEAD>

<BODY>

<UL>

Знаки зодиака : 

<IMG SRC="Green_ball.gif">Овен 

<IMG SRC="Green_ball.gif">Телец 

<IMG SRC="Green_ball.gif">Близнецы 

<IMG SRC="Green_ball.gif">Paк 

<IMG SRC="Green_ball.gif">Лeв 

<IMG SRC="Green_ball.gif">Дeвa 

<IMG SRC="Green_ball.gif">Весы 

<IMG SRC="Green_ball.gif">Скорпион 

<IMG SRC="Green_ball.gif">Козерог 

<IMG SRC="Green_ball.gif">Boдoлeй 

<IMG SRC="Green_ball.gif">Рыбы

</UL>

</BODY>

</HTML>

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

Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега <OL>, с помощью которого и организуются списки такого типа в HTML-документах (OL — Ordered List, упорядоченный список).

Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от браузера и может задаваться параметрами тегов списка.

Для создания нумерованного списка следует использовать тег-контейнер <OL> </OL>, внутри которого располагаются все элементы списка.

Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тегом <LI>.

<HTML>

<HEAD>

<TITLE>Пример нумерованного списка</TITLE>

</HEAD>

<BODY>

<OL>

Наиболее яркие звезды, видимые с Земли:

<LI>Сириус

<LI>Жанопус

<LI>Арктур

<LI>Альфа Центавра

<LI>Вега

<LI>Капелла

<LI>Ригель

<LI>Процион

<LI>Ахернар

<LI>Бета Центавра

<LI>Бетельгейзе

<LI>Альдебаран

 . . .

<LI value=58>Мицар

 . . .

<LI value=75>Пoляpнaя

</OL>

</BODY>

</HTML>

В теге <OL> могут быть указаны следующие параметры: TYPE и STAR. Параметр TYPE используется для задания вида нумерации списка. Может принимать следующие значения:

TYPE = А — задает маркеры в виде прописных латинских букв;

TYPE = а — задает маркеры в виде строчных латинских букв;

TYPE = I — задает маркеры в виде больших римских цифр;

TYPE = i — задает маркеры в виде маленьких римских цифр;

TYPE = 1 — задает маркеры в виде арабских цифр.

Параметр START тега <OL> позволяет начать нумерацию списка не с единицы. В качестве значения параметра START всегда должно указываться натуральное число, вне зависимости от вида нумерации списка. Приведем пример:

<OL TYPE = A START=5>.

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

Списки определений задаются с помощью тега-контейнера <DL> (Definition List). Внутри контейнера тегом <DT> (Definition Term) помечается определяемый термин, а тегом <DD> (Definition Description) — абзац с его определением. Для тегов <DT> и <DD> можно не записывать соответствующие закрывающие теги. В общем, список определений записывается следующим образом:

<DL>

<DT>Термин

<DD>Определение термина

</DL>

Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо. В информации, помещенной после тега <DD>, могут располагаться элементы уровня блока. Отсюда следует, в частности, что списки определений могут быть вложенными.

Приведем пример HTML-документа, в котором использован список определений:

<HTML>

<HEAD>

<TITLE>Пример списка определений</TITLE>

</HEAD>

<BODY>

<DL>

<CENTER>

<НЗ>Классификация типичных темпераментов человека, основанная

на воззрениях Гиппократа</Н3>

</CENTER>

<DT>Флегматик

<DD>Пассивный, очень трудоспособный, медленно приспосабливающийся; настроение устойчивое, мало поддается внешнему влиянию; вялость эмоциональных реакций и медлительность в волевой деятельности

<DT>Сангвиник<DD>Активный, энергичный, легко приспосабливающийся; живость и подвижность эмоциональных реакций, быстрота и сила волевых

Проявлений 

<DT>Холерик

<DD>Активный, очень энергичный, настойчивый; порывистость и сила

эмоциональных реакций, бурные волевые проявления 

<DT>Меланхолик

<DD>Пассивный, легко утомляющийся, тяжело приспосабливающийся; слабость волевых проявлений и преобладание подавленного настроения, неуверенность в себе

</DL>

</BODY>

</HTML>

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

Ниже приводится HTML-код документа с вложенными списками. В этом примере в каждый элемент маркированного списка вложен свой нумерованный список.

<HTML>

<HEAD>

<TITLE>Пример вложенного списка</ TITLE >

</HEAD>

<BODY>

<UL>

<В>Спутники некоторых планет</В>

<LI>Земля

<OL>

<LI>Луна

</OL>

<LI>Марс

<OL>

<LI>Фобос

<LI>Деймос

</OL>

<LI>Уран

<OL>

<LI>Ариэль

<LI>Умбриэль

<LI>Титания

<LI>Оберон

<LI>Миранда

</OL>

<LI>Нептун

<OL>

<LI>Тритон

<LI>Нереида

</OL>

</UL>

</BODY>

</HTML>

Ссылки на другие документы и файлы

Одним из важнейших понятий для HTML-документов являются ссылки. Само название — HTML, язык разметки гипертекста, указывает на принцип организации таких документов.

Гипертекстовый документ — это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.

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

Организация ссылок

Ссылка состоит из двух частей. Первая из них — это то, что вы видите на Web-странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL- адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом.

Правила построения отдельных элементов ссылок.

Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов — текстовые и графические. Текстовые указатели обычно представляют собой слово или несколько слов выделенных на экране подчеркиванием. Цвет текстового указателя может регулироваться автором и установками программы просмотра.

Приведем пример записи для текстового указателя ссылки:

<А HREF="example.html">Этот текст является указателем ссылки</А>

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

<А HREF="example.html"><IMG SRC="picture.gif ">

Второй частью ссылки является URL-адрес. Это не что иное, как адрес Web-страницы, которая будет загружена при щелчке мышью на указатель.

Указание адреса может быть относительным или абсолютным. Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page, то относительный указатель /picture подразумевает адрес http://www.mysite.com/page/picture, т. е. подкаталог расположенный на той же машине. Относительные указатели удобны в использовании. Намного проще вставить только имя файла, а не весь длинный URL-адрес. Они также позволяют вам перемещать файлы в пределах вашего сервера без больших изменений в межстраничной адресации.

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

Правила записи ссылок

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

Тег <А>

Тег <А> имеет единственный параметр HREF, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например, http://www.server.com/home/index.htm. Этот тег является контейнером, поэтому необходимо поставить закрывающий тег </А>:

<А HREF=URL-адрес>Текстовый указатель ссылки</А>

Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тег <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тег документа, в котором используется относительная адресация. Если тег <BASE> отсутствует, то адресация строится относительно адреса текущего документа.

Внутренние ссылки

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы. Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра NAME тега <А>. При этом параметр HREF не используется, и браузер не выделяет содержимое тега <А>. Например:

<А NAME=chapter_5> </A>

Обратите внимание, что в приведенном примере отсутствует содержимое тега <А>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение. После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре HREF адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.

<А HREF="#chapter_5">Глава 5</A>

Теперь, если пользователь щелкнет кнопкой мыши на словах "глава 5", браузер выведет соответствующую часть документа в окне просмотра.

Ссылки на документы различных типов

Когда пользователь щелкает мышью на ссылке, указывающей на другую Web-страницу, она выводится непосредственно в окне браузера. Если же ссылка указывает на документ иного типа, программа просмотра принимает документ и затем решает, что с ним делать дальше. Следующими действиями браузера могут быть:

А) Браузер знает этот тип документа и умеет с ним обращаться. Например, если вы создали ссылку на графический файл формата GIF и пользователь щелкнул мышью на этой ссылке, его программа просмотра очистит окно и загрузит указанное изображение. В некоторых случаях браузер может дополнительно использовать подключаемый программный модуль (plug-in), без которого задача не была бы решена.

Б) Браузер не распознает тип принятого документа и не знает, что с ним делать дальше. В этом случае он обратится к вспомогательным программам, имеющимся на машине пользователя. Если подходящая программа найдется, браузер запустит ее и передаст ей полученный документ для обработки. Например, если пользователь щелкнет на ссылке на видеофайл формата AVI, браузер загрузит файл, найдет программу для демонстрации AVI-файлов и запустит ее. Видеофайл будет показан в дополнительном небольшом окне.

Ссылки на другие ресурсы Интернета

Web-пространство является лишь частью сети Интернет. Другие ресурсы начали свое существование задолго до рождения WWW, поэтому накопили уже много достойной внимания информации и имеют достаточно большую аудиторию. Поэтому, разрабатывая свою персональную страницу или документ, вы, возможно, захотите включить ссылки и на другие ресурсы.

Ресурсы Интернета весьма разнообразны по форме и содержанию. Хотя HTML предполагает возможность создания своих собственных версий этих ресурсов с помощью механизма обработки данных форм, есть более простые пути к взаимодействию с системами UseNet, Telnet, FTP, e-mail и другими.

Например, вы можете создать документ с использованием различных тегов форм, текстовых элементов и кнопкой для отправки электронного письма на ваш адрес. Однако будет намного проще для связи указать лишь свой адрес электронной почты. В этом случае упрощается обновление страницы, которое не будет связано с изменениями форм. Кроме того, многие браузеры имеют встроенную поддержку некоторых ресурсов, что дает возможность сократить время на установление связи с ними.

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

<А HREF="mailto:AMANUKEVICH@bntu.edu.by">Присылайте ваши отзывы и предложения</А>.

Эта ссылка не будет ничем отличаться от остальных гипертекстовых ссылок вашего документа. В заключение приведем пример HTML-кода, в котором используется ряд тегов, описанных ранее:

<HTML>

<HEAD>

<TITLE>Личная страница группы 106715</ TITLE >

</HEAD>

<BODY>

<H1 ALIGN=CENTER>Добро пожаловать!</H1>

<HR>

Основное содержание страницы<HR> 

<A HREF="Spisok.htm">1.Список группы </A> 

<A HREF="Foto.htm">2.Фотоальбом группы</A> 

<A HREF="Links.htm">3.Полезные ссылки</A> 

<ADDRESS>

Последнее обновление выполнено 01 сентября 2007 г.

</ADDRESS>

<A HREF="mailto: grupa715@bntu.edu.by ">

Присылайте ваши отзывы и предложения</А>

</BODY>

</HTML>

В приведенном примере есть ссылка на электронную почту и другие HTML - файлы. При наведении курсора мыши на указатель данной ссылки этот адрес будет виден в нижней части окна браузера. Для корректного функционирования данной странички необходимо создать и разместить в текущей папке три файла с названиями Spisok.htm, Foto.htm, Links.htm.

Ссылки на другие ресурсы Интернета записываются аналогично.

Ход работы

1.Создать HTML-файл на основе примеров приведенных в теоретической части и разобраться, как они работают.

2. Создать в текущей папке вложенную папку files, создать в ней три файла Spisok.htm, Foto.htm, Links.htm, и изменить гиперссылки в основном файле таким образом, чтобы открывались файлы именно из этой папки.

3. В папке filesсоздать папку fotos,скопировать в нее указанные преподавателем файлы, и создать в файле Foto.htm гиперссылки на эти файлы с использованием списка определений. Где в качестве термина будет выступать название фотографии, а в качестве определения ее краткое описание.

4. В файле Links.htm создать 5-6 гиперссылок на Ваши наиболее популярные Интернет-ресурсы. Ссылки представить в виде маркированного списка.

5. В файле Spisok.htm привести список группы в виде упорядоченного списка.

5. Создать html-файл, состоящий из большого фрагмента текста напечатанного крупным шрифтом. Например:

Дремотный покой узкой, залитой лунным светом улочки был нарушен появлением двух человек. Оба возникли прямо из воздуха и тут же застыли на месте, направив друг на друга волшебные палочки. Несколько секунд прошло в напряжённом молчании. Затем, очевидно, узнав один другого, они спрятали палочки в складках мантий плечом к плечу зашагали вдоль улицы прочь.

- Какие новости? – спросил тот, что был повыше.

- Всё отлично, - ответил Северус Снэйп.

Слева вдоль дороги росли пышные кусты дикой ежевики, справа тянулась высокая, аккуратно подстриженная живая изгородь. Длинные полы мантий развевались у ног идущих.

- Я уж было решил, что опаздываю, - сказал Яксли. Грубо вылепленное лицо его то скрывалось в густой тени деревьев, то мертвенно белело в лучах ночного светила.

- Оказалось, что всё сложнее, чем мне представлялось раньше. Но уж теперь-то, надеюсь, он останется доволен. А ты, я смотрю, уверен, что нас примут хорошо?

Снэйп ограничился коротким кивком. Они свернули направо, на широкую подъездную аллею, под прямым углом подходившую к первой улочке. Аллею перегораживали массивные кованые ворота, за которыми снова тянулись вдаль, насколько хватало глаз и лунного света, кусты живой изгороди. Мужчины, не задержавшись перед воротами, дружно подняли левые руки в некоем подобии военного салюта и спокойно прошли прямо сквозь тяжёлую металлическую решётку, словно она была вылеплена из теней и дыма.

В нижней части текста поставить гиперссылку НАВЕРХ,которая возвращала бы читателя к началу документа.