Плавающие объекты

Изображения и объекты могут быть привязаны к тексту, а могут обтекаться текстом, прижимаясь к одной из сторон документа и деформируя его поля. Плавающие объекты начинаются с новой строки. Для управления положением плавающего объекта используется атрибут align. Например:

Существует атрибут для элемента br, который управляет обтеканием объекта текстом. Это clear= none|left|right|all, который определяет то, где должна появиться следующая строка в процессе отображения.

none	следующая строка будет отображена как обычно (значение по умолчанию).
left	следующая строка будет помещена ниже плавающего объекта на левом поле.
right	следующая строка будет помещена ниже плавающего объекта на правом поле.
all	следующая строка будет помещена ниже плавающего объекта на любом из доступных полей.

Рассмотрим вариант, когда текст размещается справа от изображения, и посмотрим, что будет после прерывания строки с помощью BR.

Если атрибут clear="none", следующая строка начнется сразу под уже имеющимся текстом.

Если же clear = "left" или all, то мы получим:

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

Для того чтобы такая схема размещения текста сработала только раз, следует воспользоваться атрибутом ID.

<head>
…….
<style type="text/css">
br.mybr }clear: left}
</style>
</head>
<body>

…….
……..
</body>

23.7. Элементы управления шрифтами: tt, i, b, big, small, strike, s и u

<!entity % font
"tt | i | b | u | s | strike | big | small ">
<!element (%font|%phrase) - - (%inline)*>
<!attlist (%font|%phrase) %attrs; -- %coreattrs, %i18n, %events -- >

tt:	соответствует шрифту телетайпа (символы равной ширины).
i:	курсив
b:	полужирный шрифт.
big:	шрифт с крупными буквами.
small:	мелкий шрифт.
strike:	перечеркнутый шрифт (к использованию не рекомендуется)
u:	подчеркнутый шрифт (к использованию не рекомендуется)

<
/p> Ниже приведены примеры управления шрифтами.

<b>bold</b>
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>
<big>big</big> <small> small </small> text.

Броузер отобразит при этом на экране:

bold, italic, bold italic, teletype text, big, small text.

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

<head>
<style>
p.mypar {font-style: italic; color: blue}
</style>
</head>

<p id="mypar"> … далее следует текст, печатаемый голубыми буквами курсивом.

23.8. Элементы модификаторов шрифтов: font и basefont

<!element font - - (%inline)* -- локальное изменение шрифта -->
<!attlist font

	size cdata #implied	-- [+]nn напр. size="+1", size=4 --
	color cdata #implied	-- #rgbgbb in hex, напр. red: "#ff0000" --
	face cdata #implied	-- список имен шрифтов, разделенных запятыми -- >

<!element basefont - o empty>
<!attlist basefont

	size cdata #required	-- базовый размер шрифта для элементов font --
	color cdata #implied	-- #rgbgbb in hex, напр. red: "#ff0000" --
	face cdata #implied	-- список имен шрифтов, разделенных запятыми -- >

С этими элементами могут использоваться атрибуты (все они не рекомендуются к использованию):

size = cdata

Атрибут определяет размер шрифта (1-7).

color = color

Атрибут определяет цвет шрифта.

face = cdata-list

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

Элемент font изменяет размер и цвет шрифта для текста, в нем содержащегося. Элемент basefont устанавливает базовый размер шрифта (с помощью атрибута size). Размер шрифта, заданного font является относительным по отношению к размеру, определенному basefont. Если basefont не задан, значением по умолчанию считается 4. Ниже приведены примеры задания шрифтов с помощью font (данная форма определения размера шрифта не рекомендуется).

<p> <font size=1> size=1</font>
<font size=2> size=2</font>
<font size=3> size=3</font>
<font size=4> size=4</font>
<font size=5> size=5</font>
<font size=6> size=6</font>
<font size=7> size=7</font>

Агент пользователя при этом отобразит следующее

size=1 size=2 size=3 size=4 size=5 size=6 size=7

23.9. Элемент hr

<!element hr - o empty>

<!attlist hr %coreattrs;		-- id, class, style, title --
	%events;
	align (left\|right\|center) #implied
	() #implied
	size %pixels #implied
	width %length #implied >

Определение атрибутов

Этот булев атрибут требует, чтобы агент пользователя пользовался одноцветным способом отображения линии.

size = length

(Не рекомендуется) Этот атрибут определяет высоту линии.

width = length

(Не рекомендуется) Этот атрибут определяет ширину линии (по умолчанию 100%), то есть линия пресекает весь экран.

Пример использования элемента hr.

<hr width="50%" align="center">
<hr size="5" width="50%" align="center">
<hr size="5" width="50%" align="center">

24. Рамки (frames)

Обычный документ имеет одну секцию заголовка и одну секцию тела документа. Документ с рамками имеет заголовок (head), frameset (набор рамок) и, опционно, тело документа. Секция frameset специфицирует раскладку объектов в основном окне агента пользователя. Секция body предлагает альтернативу для случая агентов пользователя, которые не поддерживают frameset.

24.1. Элемент frameset

<!element frameset - - ((frameset|frame) + & noframes?)>
<!attlist frameset

	-- абсолютные значения в пикселях, проценты или относительные значения --
	rows cdata #implied	-- если не задано, по умолчанию rows=1 --
	cols cdata #implied	-- если не задано, по умолчанию cols=1 --
	onload %script #implied	-- все рамки загружены --
	onunload %script #implied	-- все рамки удалены -- >

Определения атрибутов

rows = length-list

Этот атрибут специфицирует выкладку горизонтальных рамок. Значение представляет собой список длин, разделенных запятыми. Если атрибут не задан, значение по умолчанию равно 100%.

cols = length-list

Этот атрибут специфицирует выкладку вертикальных рамок. Значение представляет собой список длин, разделенных запятыми. Если атрибут не задан, значение по умолчанию равно 100%.

Все рамки предполагаются прямоугольными. Установка атрибута rows определяет число рамок по горизонтали, а атрибут cols задает число рамок по вертикали. Таким образом, задается сетка рамок. Если атрибут rows не задан, каждая колонка занимает всю длину страницы. Если атрибут cols не задан, каждый ряд занимает всю ширину страницы. Если не заданы оба атрибута, на странице присутствует одна рамка, занимающая всю страницу.

Размер может задаваться в пикселях (абсолютно), в процентах от размеров экрана или в относительных длинах в форме i*, где i - целое число. Когда заданы оба атрибута, агент пользователя сначала выделяет размеры, заданные абсолютно, затем оставшуюся часть делит в соответствии с определенными долями. Значение * эквивалентно 1*. Отображение страницы осуществляется слева направо и сверху вниз. Пример (экран делится на две равные части, верхнюю и нижнюю):

<frameset rows="50%, 50%">
… остальная часть определения …
</frameset>

В следующем примере создается три колонки: вторая имеет фиксированную ширину в 250 пикселей (что удобно для картинки известного размера). Первая получает 25% оставшегося пространства, а третья - 75%.

<frameset cols="1*,250,3*">
… остальная часть определения …
</frameset>

В следующем примере создается решетка 2х3

<frameset rows="30%,70%" cols="33%,34%,33%">
… остальная часть определения …
</frameset>

В следующем примере предполагается, что высота окна равна 1000 пикселей. Для первой рамки выделяется 30% общей высоты (300 пикселей). Для второй рамки выделено точно 400 пикселей.

Это оставляет 300 пикселей на две оставшиеся рамки. Высота четвертой рамки определена как "2*", а третей - *, следовательно, третья получит 100, а четвертая - 200 пикселей.

<frameset rows="30%,400,*,2*" >
… остальная часть определения …
</frameset>

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

<frameset rows="33%,33%,34%" >
…содержимое первой рамки…

	<frameset rows="40%,50%" >
	…содержимое второй рамки первого ряда…
	…содержимое второй рамки второго ряда…
	</frameset>
	…содержимое третей рамки…

</frameset>

Содержание раздела