Маркированные и нумерованные списки

Чтобы создать на странице маркированный список (каждому элементу списка предшествует символ), применяют элемент UL. Все, что находится между тегами <UL></UL> – маркированный список. При этом, перед каждым элементом списка нужно поставить тег <LI>. Вот как будет выглядеть код маркированного списка, состоящего из трех элементов:

<UL>

<LI>Краков (Польша)

<LI>Санкт-Петербург

<LI>Псков

</UL>

Тег <LI> не нуждается в закрытии.

Нумерованные списки (каждому элементу списка предшествует его порядковый номер) создаются при помощи тегов <OL></OL>.

<OL>

<LI>Надежность перевозок

<LI>Высокая квалификация персонала

<LI>Индивидуальный подход

</OL>

Приведем екст HTML-страницы, содержащей списки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Компания "Стрела". Туристские перевозки</TITLE>

</HEAD>

<P ALIGN="CENTER"><FONT SIZE="+2">Популярные туры:</FONT></P>

<FONT SIZE="+1">Популярные туры:</FONT>

<UL>

<LI>Краков (Польша)

<LI>Санкт-Петербург

<LI>Псков

</UL>

<FONT SIZE="+1">Чем наша компания лучше других:</FONT>

<OL>

<LI>Надежность перевозок

<LI>Высокая квалификация персонала

<LI>Индивидуальный подход

</OL>

</BODY>

</HTML>

Рис. 5

Чтобы разъяснить некоторые пункты, можно создать вложенные списки. Для этого надо начать новый список в уже начатом списке:

<UL>

</UL>

Обычно браузеры выбирают для маркированного списка какой-нибудь стандартный символ, но возможности HTML позволяют задать его собственноручно. В теге <UL> нужно установить параметр TYPE= со следующими значениями: disc (закрашенный кружок), square (квадрат), circle (не закрашенный кружок).

Для нумерованного списка (элемент OL) атрибут TYPE= может иметь значение «I», тогда нумерация будет вестись римскими цифрами. Возможно, вам потребуется начать нумерацию не с цифры 1, а, предположим, с 15. Тогда следует написать TYPE=”15”.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Компания "Стрела". Туристские перевозки</TITLE>

</HEAD>

<P ALIGN="CENTER"><FONT SIZE="+2">Компания "Стрела"</FONT></P>

<FONT SIZE="+1">Популярные туры:</FONT>

<UL>

<LI>Краков (Польша)

(<A HREF="krakov.html">подробнее</A>)

<LI>Санкт-Петербург

(<A HREF="peterburg.html">подробнее</A>)

<LI>Посещение Эрмитажа

<LI>Посещение Петропавловской крепости

<LI>Посещение Исаакиевского собора

<LI>Четырехразовое питание</FONT>

</UL>

<LI>Псков (<A HREF="pskov.html">подробнее</A>)

</UL>

<FONT SIZE="+1">Чем наша компания лучше других:</FONT>

<OL>

<LI>Надежность перевозок

<LI>Доставка точно в срок

<LI>Изменение и дополнение сервиса

<LI>Страховка</FONT>

</OL>

<LI>Высокая квалификация персонала

<LI>Индивидуальный подход

</OL>

</BODY>

</HTML>

Рис. 6

Результат продемонстрирован на рисунке 6. Эта страница уже имеет вполне приличный вид и может быть размещена в Интернете. Существенный ее недостаток- отсутствие объектов, расширяющих рекламные возможности страницы. Необходимо придать информационным носителям вид профессионально исполненного проекта. Для этого необходимо научиться размещать на web-страницах таблицы и графику, предварительно подготовленную в специальных иллюстративных редакторах.

Работа с графикой

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

Фоновое изображение

Чтобы поместить изображение на web-страницу в качестве фона, нужно использовать атрибут BACKGROUND= со значением ссылки на файл рисунка.

<BODY BACKGROUND=”image.jpg”>

Теперь на странице в качестве фона будет использовано изображение “Image.jpg”, которое автоматически растянется по горизонтали и по вертикали на все рабочее окна браузера. Не любой красивый рисунок будет хорошо смотреться в роли фонового рисунка, поэтому всегда проверяйте, удобно ли читать текст на таком фоне.

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

При работе с фоном web-страницы не забывайте, что у некоторых пользователей может быть отключена загрузка графики. Сейчас такое встречается редко, но запасной вариант все же нужно иметь. Поэтому устанавливайте значение атрибута BGCOLOR= даже в том случае, когда используете графический фон. Иначе, на белом фоне (фон по умолчанию), ваш текст может оказаться незаметным.

Для иллюстрации работы с графикой, в качестве примера, создадим на нашем сайте компании «Стрела» раздел, рассказывающий о достопримечательностях Пскова.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Компания "Стрела". Туристские перевозки</TITLE>

</HEAD>

<DIV ALIGN="CENTER"><H1>Город Псков</H2>

<FONT SIZE="+2">Тригорское</FONT></DIV>

Мир Тригорского - это три его былинных горы, его райские кущи, это веселый дом

Осиповых-Вульф. Не ищите в Тригорском того, что видели в Михайловском. Их нельзя

сравнивать. Там все иначе, и Пушкин совсем другой. В Михайловском Пушкин - человек,

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

об этом. В Тригорском Пушкин просто отлично добрый человек, балагур и весельчак,

забавник и ухажер, «гуляка праздный». Здесь все и всегда радостно, и в природе парка

всегда слышится веселая песня, и в ней «без конца и без краю весна».

<DIV ALIGN="right"><FONT SIZE="-1">По материалам книги Семена Гейченко "Пушкиногорье"</FONT></DIV>

</BODY>

</HTML>

В данном примере вместо <P ALIGN=”CENTER”>, был использован тег <DIV> с одноименным атрибутом. В дальнейшем лучше пользоваться именно им, так как элемент P в ряде случаев может не работать.

Вот как выглядит этот пример:

Рис. 7