Пользовательские элементы структуры.

Контейнеры <SPAN></SPAN> и <DIV></DIV> используются для выделения произвольного фрагмента текста как элемента структуры HTML-документа. К таким элементам могут быть применены все атрибуты, характерные стандартным элементам структуры (<H1>, <P>, <TABLE>, <FORM>, <IMG> и др.), включая возможность присвоения идентификатора (атрибут ID) и пользовательского стиля из CSS-таблицы (атрибут CLASS).

2.3. Разметка, обеспечивающая форматирование html – документа

2.3.1. Понятие форматирования

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

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

2.3.2. Форматирование страницы и текста

Применение параметров форматирования для страницы в целом осуществляется путем указания определенных атрибутов для тега <BODY>. Некоторые из них описаны ниже.

2.3.2.1. Цвет фона страницы (атрибут bgcolor)

Атрибут ВGCOLOR определяет цвет фона, на котором отображается текст документа. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 2.2. Следует отметить, что в качестве значения атрибута может выступать как код цвета, так и его название:

<ВОDY ВGCOLOR=#FFFFFF>

или

<ВОDY ВGCOLOR=white>

Таблица 2.2.

Принятые в html формальные обозначения некоторых цветов.

Название	Код	Название	Код
aqua	#00FFFF	navy	#000080
black	#000000	olive	#808000
blue	#0000FF	purple	#800080
fuchsia	#FF00FF	red	#FF0000
gray	#808080	silver	#C0C0C0
green	#008000	teal	#008080
lime	#00FF00	white	#FFFFFF
maroon	#800000	yellow	#FFFF00

2.3.2.2. Использование в качестве фона страницы изображения (атрибут bаскground)

Атрибут BАСКGROUND позволяет определить в качестве фона, на котором отображается текст документа изображение, предварительно созданное с помощью любого графического редактора и сохраненное в виде файла с расширением .gif или .jpg :

<ВОDY ВАСКGROUND="image.gif">

Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. Напоминаем, что для хранения информации о базовом URL (начиная с которого идет поиск требуемого файла) используется элемент BASE заголовочной части документа. Если базовый URL не будет явным образом определен, то в качестве такового будет восприниматься папка, в которой сохранен сам файл HTML. Разумеется, никто не мешает указать адрес соответветствующего файла полностью:

<ВОDY ВАСКGROUND=file:///E:/Foto/image.gif>

или

<ВОDY ВАСКGROUND=http://informnn.com/Foto/image.gif>

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

2.3.2.3. Цвет символов текста (атрибут ТЕХТ)

Атрибут TEXT определяет цвет символов текста в HTML - документе. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1.

<ВОDY TEXT=#000000>

или

<ВОDY TEXT=black>

2.3.2.4. Цвет символов гиперссылки (атрибут LINK)

Атрибут LINK определяет цвет символов для гиперссылки до момента первого перехода по ней с данного компьютера. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1.

<BODY LINK=#0000FF>

или

<BODY LINK=blue>

2.3.2.5. Цвет символов активной гиперссылки (атрибут ALINK)

Активной называют гиперссылку на которую наведен указатель мыши. Цвет символов для такой гиперссылки определяет атрибут ALINK. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 4.1.

<BODY ALINK=#FF0000>

или

<BODY ALINK=red>

2.3.2.6. Цвет символов гиперссылки после перехода (атрибут VLINK)

Атрибут VLINK определяет цвет символов для гиперссылки после первого перехода по ней с данного компьютера. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 3.1.

<BODY VLINK=#800080>

или

<BODY VLINK=purple>

2.3.3. Форматирование абзаца

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

2.3.3.1. Выравнивание (атрибут ALIGN)

Атрибут ALIGN тега <P> позволяет установить для соответствующего абзаца горизонтальное выравнивание. Возможные варианты значения:

• left – по левому краю;

• center – по центру;

• right – по правому краю;

• justify – по ширине.

2.3.3.2. Принудительный перенос на новую строку (элемент <BR>)

Перенос на новую строку внутри абзаца осуществляется автоматически. В строке будет столько символов, сколько уместится на экране. Отсюда явная зависимость между длиной строки с одной стороны и диагональю экрана (или размером окна браузера) — с другой. В некоторых случаях автору требуется жестко ограничить размер строки. Для этого он может использовать элемент <BR>. Текст, который пойдет после него, гарантировано будет перенесен на новую строку. Заметим, что в отличии от тегов с которыми мы имели дело до сего момента, элемент <BR> не имеет тега окончания. На рисунке 2.2 Вы можете увидеть пример применения этого тега (в верхней части окна — код HTML, в нижней — вид документа в браузере).

Р ис. 2.2. Пример использования элемента <BR>

2.3.3.3. Оформление цитат (элемент <BLOCKQUOTE>)

Элемент <BLOCKQUOTE> обычно используется при цитировании текста, взятого из другого источника. Большинство браузеров выделяют такой фрагмент текста от остального пустыми строками и отступами. Пример использования данного элемента — рисунок 2.2.

Р ис. 2.3. Пример использования элемента <BLOCKQUOTE>

2.3.3.4. Маркированные списки (элемент <UL>)

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

Возможные варианты значения атрибута:

• disc — маркер-диск (по умолчанию) ()

• circle — маркер-круг (O)

• square — маркер-квадрат ()

Каждый элемент списка помещается в контейнер <LI></LI> (рис. 2.4).

Р ис. 2.4. Пример создания маркированного списка.

2.3.3.5. Нумерованные списки (элемент <OL>)

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

Возможные варианты значения атрибута:

• A - устанавливает маркер в виде прописных букв

• a - устанавливает маркер в виде строчных букв

• I - устанавливает маркер в виде больших римских цифр

• i - устанавливает маркер в виде маленьких римских цифр

• 1 - устанавливает маркер в виде арабских цифр (по умолчанию)

С помощью следующих атрибутов можно дополнительно управлять отображением списка

• START = n - устанавливает начальный маркер в текущем списке; n - номер, с которого начинается нумерация в списке

• COMPACT - Представляет список в более компактном виде

Каждый элемент списка помещается в контейнер <LI></LI> (рис. 2.5).

Р ис. 2.5. Пример создания нумерованного списка