Маркированные и нумерованные списки
Чтобы создать на странице маркированный список (каждому элементу списка предшествует символ), применяют элемент 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>
<BODY BGCOLOR="#E4A68B" LINK="#87007C" VLINK="#8A78FF" ALINK="#87007C">
<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>
</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>
<BODY BGCOLOR="#E4A68B" LINK="#87007C" VLINK="#8A78FF" ALINK="#87007C">
<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>)
<UL TYPE="square"><FONT SIZE="-1">
<LI>Посещение Эрмитажа
<LI>Посещение Петропавловской крепости
<LI>Посещение Исаакиевского собора
<LI>Четырехразовое питание</FONT>
</UL>
<LI>Псков (<A HREF="pskov.html">подробнее</A>)
</UL>
<FONT SIZE="+1">Чем наша компания лучше других:</FONT>
<OL>
<LI>Надежность перевозок
<OL TYPE="I"><FONT SIZE="-1">
<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>
<BODY BACKGROUND="image.jpg" LINK="#9B7400" VLINK="#D7B700" ALINK="#939B00">
<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