Какие значения может принимать атрибут align

Pre, xmp, plaintext.

Как вы уже могли заметить, и как уже было сказано, браузер весь текст воспринимает как одну строку, если конечно в нём нет соответствующих тэгов. Плюсом к этому браузер не отображает более одного пробела. Т.е. если в тексте html документа встретится два и более подряд пробела, то браузер отобразит только один.

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

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

Текст с несколькими подряд пробелами и переходом строки.

Как было уже сказано, тэг pre используется, как правило, для отображения кода программ. Тем не менее он не годится для отображения кода html документов. Если внутри тэга pre встретится другой тэг, то он не будет отображён и изменит своё содержимое в соответствии со своим назначением. Для того, что бы все тэги отображались в виде текста, существует тэг xmp. Всё, что в нём содержится, будет отображено так же как и в коде html документа.

Так же существует тэг plaintext, его действие аналогично тэгу xmp. Однако в отличии от него он действует до конца html документа и закрыть его ни как нельзя.

Далее пример, демонстрирующий вышесказанное:

Тэги sub и sup служат для создания нижнего и верхнего индексов соответственно. Атрибутов у них нет. Закрывающий тэг нужен обязательно. Далее пример, в котором с помощью этих тэгов создана математическая формула:

Тэг bdo управляет направлением вывода текста. У него есть атрибут dir, который может принимать значения ltr (left to right) – слева направо; и rtl (right to left) – справа налево. Всё что содержится в этом тэге будет выведено в соответствии со значением этого атрибута.

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

Если необходимо, что бы текст был выведен справа налево, то, скорее всего, необходимо будет и выровнять его по правому краю. Это можно сделать, воспользовавшись атрибутом align тэга p, которому нужно присвоить значение right.

Далее пример использования этих тэгов:

Привет всем!
Привет всем!

Текст с лева на право.

Тэг font устанавливает цвет, размер и шрифт текста, который в него заключён. Для этого у него есть соответствующие атрибуты:

• color – цвет. О том, как задаётся цвет, речь шла в 3 параграфе. В данном случае он задаётся точно так же;
• size – размер шрифта. Как было сказано при рассмотрении тэгов big и small, размер шрифта задаётся в условных единицах от 1 до 7;
• face – название шрифта. В случае, если вы не уверены, что какой-либо шрифт есть у пользователя, можно указать несколько через запятую. В таком случае браузер выберет из указанных существующий. Более приоритетным при выборе будет шрифт, находящийся левее в списке.

Примечание: о том, какие шрифты установлены у вас, можно узнать в «Панели управления», выбрав ярлык «Шрифты». Если у вас стоит операционная система Windows7, то «Панель управления» может выглядеть следующим образом:

В таком виде ярлыка «Шрифты» нет. Вам необходимо переключить «Просмотр» на «Мелкие значки» или «Крупные значки» как показано на следующем рисунке:

После нажатия на ярлык «Шрифты» у вас появится окно со шрифтами, которые установлены на ваш компьютер. Не все шрифты устанавливаются вместе с операционной системой Windows. Некоторые могут быть установлены либо самим пользователем, либо во время установки какой-либо программы, которая будет этими шрифтами пользоваться. Например, программа для черчения может установить свой – чертёжный. Поэтому при выборе шрифтом будьте внимательны.

Следующий пример демонстрирует использование тэга font. В нём для того, что бы показать, что браузер выбирает существующий шрифт из списка, во второй строчке html документа атрибуту face присвоен список из трёх шрифтов. Название первого состоит из двух произвольных букв. Вероятней всего такого шрифта нет ни на одном компьютере. Поэтому браузер выберет второй или третий. Пример:

Шрифт «times new roman»

Шрифт «sdf», либо «courier new», либо «times new roman»

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

1. В параграфе приведён пример использования тэга big. Создать подобный пример использования тэга small.

2. Создать свои примеры использования тэгов basefont и center.

3. Изучить шрифты, установленные на вашем компьютере и создать html документ, в котором будут представлены некоторые из них.

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

15 Alignment, font styles, and horizontal rules

bgcolor = color [CI] Deprecated. This attribute sets the background color for the document body or table cells.

This attribute sets the background color of the canvas for the document body (the BODY element) or for tables (the TABLE , TR , TH , and TD elements). Additional attributes for specifying text color can be used with the BODY element.

This attribute has been deprecated in favor of style sheets for specifying background color information.

15.1.2 Alignment

It is possible to align block elements (tables, images, objects, paragraphs, etc.) on the canvas with the align attribute. Although this attribute may be set for many HTML elements, its range of possible values sometimes differs from element to element. Here we only discuss the meaning of the align attribute for text.

• left : text lines are rendered flush left.
• center : text lines are centered.
• right : text lines are rendered flush right.
• justify : text lines are justified to both margins.

The default depends on the base text direction. For left to right text, the default is align=left , while for right to left text, the default is align=right .

DEPRECATED EXAMPLE:
This example centers a heading on the canvas.

Using CSS, for example, you could achieve the same effect as follows:

Note that this would center all H1 declarations. You could reduce the scope of the style by setting the class attribute on the element:

DEPRECATED EXAMPLE:
Similarly, to right align a paragraph on the canvas with HTML’s align attribute you could have:

which, with CSS, would be:

DEPRECATED EXAMPLE:
To right align a series of paragraphs, group them with the DIV element:

With CSS, the text-align property is inherited from the parent element, you can therefore use:

To center the entire document with CSS:

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to «center». The CENTER element is deprecated.

15.1.3 Floating objects

Images and objects may appear directly «in-line» or may be floated to one side of the page, temporarily altering the margins of text that may flow on either side of the object.

Float an object

The align attribute for objects, images, tables, frames, etc., causes the object to float to the left or right margin. Floating objects generally begin a new line. This attribute takes the following values:

• left: Floats the object to the current left margin. Subsequent text flows along the image’s right side.
• right: Floats the object to the current right margin. Subsequent text flows along the image’s left side.

DEPRECATED EXAMPLE:
The following example shows how to float an IMG element to the current left margin of the canvas.

Some alignment attributes also permit the «center» value, which does not cause floating, but centers the object within the current margins. However, for P and DIV , the value «center» causes the contents of the element to be centered.

Float text around an object

Another attribute, defined for the BR element, controls text flow around floating objects.

• none: The next line will begin normally. This is the default value.
• left: The next line will begin at nearest line below any floating objects on the left-hand margin.
• right: The next line will begin at nearest line below any floating objects on the right-hand margin.
• all: The next line will begin at nearest line below any floating objects on either margin.

Consider the following visual scenario, where text flows to the right of an image until a line is broken by a BR :

If the clear attribute is set to none , the line following BR will begin immediately below it at the right margin of the image:

DEPRECATED EXAMPLE:
If the clear attribute is set to left or all , the next line will appear as follows:

Using style sheets, you could specify that all line breaks should behave this way for objects (images, tables, etc.) floating against the left margin. With CSS, you could achieve this as follows:

To specify this behavior for a specific instance of the BR element, you could combine style information and the id attribute:

15.2 Fonts

The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.

15.2.1 Font style elements: the TT , I , B , BIG , SMALL , STRIKE , S , and U elements

Start tag: required, End tag: required

Attributes defined elsewhere

• id , class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information)
• onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydownonkeyup (intrinsic events)

Rendering of font style elements depends on the user agent. The following is an informative description only.

TT: Renders as teletype or monospaced text. I: Renders as italic text style. B: Renders as bold text style. BIG: Renders text in a «large» font. SMALL: Renders text in a «small» font. STRIKE and S: Deprecated. Render strike-through style text. U: Deprecated. Renders underlined text.

The following sentence shows several types of text:

These words might be rendered as follows:

It is possible to achieve a much richer variety of font effects using style sheets. To specify blue, italic text in a paragraph with CSS:

Font style elements must be properly nested. Rendering of nested font style elements depends on the user agent.

15.2.2 Font modifier elements: FONT and BASEFONT

See the Transitional DTD for the formal definition.

• An integer between 1 and 7. This sets the font to some fixed size, whose rendering depends on the user agent. Not all user agents may render all seven sizes.
• A relative increase in font size. The value «+1» means one size larger. The value «-3» means three sizes smaller. All sizes belong to the scale of 1 to 7.

Attributes defined elsewhere

• id , class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information)

The FONT element changes the font size and color for text in its contents.

The BASEFONT element sets the base font size (using the size attribute). Font size changes achieved with FONT are relative to the base font size set by BASEFONT . If BASEFONT is not used, the default base font size is 3.

DEPRECATED EXAMPLE:
The following example will show the difference between the seven font sizes available with FONT :

This might be rendered as:

The following shows an example of the effect of relative font sizes using a base font size of 3:

The base font size does not apply to headings, except where these are modified using the FONT element with a relative font size change.

15.3 Rules: the HR element

Start tag: required, End tag: forbidden

• left : the rule is rendered flush left.
• center : the rule is centered.
• right : the rule is rendered flush right.

The default is align=center .

noshade [CI] Deprecated. When set, this boolean attribute requests that the user agent render the rule in a solid color rather than as the traditional two-color «groove». size = pixels [CI] Deprecated. This attribute specifies the height of the rule. The default value for this attribute depends on the user agent. width = length [CI] Deprecated. This attribute specifies the width of the rule. The default width is 100%, i.e., the rule extends across the entire canvas.

Attributes defined elsewhere

• id , class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information)
• onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (intrinsic events)

The HR element causes a horizontal rule to be rendered by visual user agents.

The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent.

DEPRECATED EXAMPLE:
This example centers the rules, sizing them to half the available width between the margins. The top rule has the default thickness while the bottom two are set to 5 pixels. The bottom rule should be rendered in a solid color without shading:

15 Выравнивание, стили шрифта
и горизонтальные линии

bgcolor = color [CI] Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона "канвы" тела документа (элемент BODY ) или таблицы (элементы TABLE , TR , TH и TD ). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY .

Этот атрибут не рекомендуется использовать для определения цвета фона. Лучше использовать таблицы стилей.

15.1.2 Выравнивание

Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на "канве" с помощью атрибута align . Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута "выравнивание" для текста.

• left : строки текста выравниваются по левому краю;
• center : строки текста выравниваются по центру;
• right : строки текста выравниваются по правому краю;
• justify : строки текста выравниваются по обоим полям.

Значение по умолчанию зависит от базового направления текста. Для направления слева направо — это align=left , для направления справа налево — по умолчанию align=right .

НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.

Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:

Учтите, что это будет действовать на все элементы H1 . Вы можете ограничить область видимости стиля, установив атрибут class элемента:

НЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо параграф на "канве" атрибутом HTML align , Вы могли бы записать:

что в таблице стиля могло бы быть:

НЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько параграфов, сгруппируйте их элементом DIV :

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

Чтобы выровнять по центру весь документ:

Элемент CENTER полностью эквивалентен определению элемента DIV с атрибутом align , установленным в «center». Элемент CENTER не рекомендуется.

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

Изображения и объекты могут появляться непосредственно "in-line" или "всплывать" к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.

"Всплывание" объекта

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

• left: прижимает объект к левому краю. Последующий текст обтекает объект справа.
• right: прижимает объект к правому краю. Последующий текст обтекает объект слева.

ПРИМЕР НЕ РЕКОМЕНДУЕМОГО ИСПОЛЬЗОВАНИЯ:
Пример показывает. как элемент IMG "всплывает" к левому краю "канвы".

Некоторые атрибуты выравнивания также допускают значение «center», которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов P и DIV , значение «center» вызывает центрирование содержимого элементов.

Обтекание текста вокруг объекта

Ещё один атрибут, определённый для элемента BR , управляет обтеканием текста вокруг "всплывающего" объекта.

• none: следующая строка начнётся нормально. Это значение по умолчанию.
• left: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
• right: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
• all: следующая строка начнётся в ближайшей строке под любым плавающим объектом у любого края.

Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR :

Если атрибут clear установлен в none , линия, следующая после BR , начнётся сразу под ним у правого края изображения:

НЕ РЕКОМЕНДУЕТСЯ:
Если атрибут clear установлен в left или all , следующая строка появится так:

Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.д.), "всплывая" у левого края. В таблице стилей Вы можете записать:

Чтобы определить такое поведение для конкретного элемента BR , нужно скомбинировать информацию о стиле и атрибут id :

15.2 Шрифты

Последующие элементы HTML специфицируют информацию о шрифте. Хотя они и не относятся к не рекомендуемым, их использование менее предпочтительно, чем таблиц стилей.

15.2.1 Элементы стиля шрифта: TT , I , B , BIG , SMALL , STRIKE , S и U

Начальный тег: необходим, Конечный тег: необходим

Атрибуты, определённые в другом месте

• id , class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydownonkeyup (внутренние события)

Представление элементов стиля шрифта зависит от пользовательского агента (ПА). Следующее описание является лишь информативным.

TT: моноширинный текст, телетайп. I: курсив. B: полужирный. BIG: "большой" шрифт. SMALL: "малый" шрифт. STRIKE и S: не рекомендуются, зачёркнутый текст. U: не рекомендуется, подчёркнутый.

Вот несколько примеров определения шрифта:

Это будет отображено так:

Можно применить более сложные варианты отображения шрифтов, используя таблицы стилей. Чтобы отобразить голубой курсив в параграфе с помощью таблицы стилей (CSS):

Элементы стиля шрифта должны вкладываться соответствующим образом. Отображение вложенных элементов стиля шрифта зависит от ПА.

15.2.2 Элементы модификатора шрифта: FONT и BASEFONT

См. формальное определение в разделе Переходное ОТД.

• Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от ПА. Не все ПА могут отобразить все семь размеров.
• Относительное увеличение размера шрифта. «+1» означает: на один размер больше. «-3» означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7.

Атрибуты, определённые в другом месте

• id , class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)

Элемент FONT изменяет размер шрифта и цвет текста своего содержимого.

Элемент BASEFONT устанавливает базовый размер шрифта (используя атрибут size ). Размер шрифта, определяемый FONT , является относительным по отношению к BASEFONT . Если BASEFONT не используется, размер базового шрифта составляет 3.

НЕ РЕКОМЕНДУЕТСЯ:
В этом примере показана разница между шрифтами семи размеров элемента FONT :

Это может выглядеть так:

А это пример относительного изменения размера шрифта с использованием базового размера 3:

Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT .

15.3 Горизонтальные линии: элемент HR

Начальный тег: необходим, Конечный тег: запрещён

• left : линия выравнивается влево.
• center : линия выравнивается по центру.
• right : линия выравнивается вправо.

По умолчанию align=center .

noshade [CI] Не рекомендуется. Если этот булев атрибут установлен, он требует, чтобы ПА отображал горизонтальную линию сплошным цветом, а не традиционно с двухцветной "тенью". size = pixels [CI] Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА. width = length [CI] Не рекомендуется. Определяет ширину линии. Ширина по умолчанию — 100%, т.е. линия растянута по ширине всей "канвы".

Атрибуты, определённые в другом месте

• id , class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (название элемента)
• style (инлайн-стиль)
• onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент HR отображает горизонтальную линию в ПА.

Величина свободного пространства под и над горизонтальной линией зависит от ПА.

НЕ РЕКОМЕНДУЕТСЯ:
В этом примере линия центрируется, размер установлен в половину доступной ширины между краями страницы. Верхняя линия имеет толщину по умолчанию, а две нижние — по 5 пикселов. Нижняя линия должна отображаться сплошным цветом без тени:

3. Основы форматирования

Таблицы явлются важнейшим элементом HTML-документов, т.к. кроме богатых возможностей по представлению структурированных данных они широко применяются как средство дл создания «каркасов» Web-страниц.

Таблицы в HTML определяются при помощи контейнера <TABLE>. </TABLE> , заключающего в себе другие элементы таблицы: название, заголовки ячеек и их содержимое. Атрибутами контейнера <TABLE> задается формат линии-сетки и общие правила форматирования ( общий формат действуют, если иной формат не задан атрибутами формата конкретных строк и ячеек ).

Наименование таблицы определяется при помощи контейнера <CAPTION>. </CAPTION> . Выравнивание наименования задается при помощи атрибута ALIGN , который может принимать значения TOP ( сверху таблицы ) и BOTTOM ( снизу таблицы ).

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

Строки таблицы разбиваются на ячейки при помощи тегов ячеек-заголовков <TH>. </TH> и тегов ячеек-данных <TD>. </TD> ( допускается форма записи без закрывающих тегов ). Как и для строк таблицы при помощи специальных атрибутов тегов < TD > и < TH > можно управлять форматированием конкретных ячеек таблицы.

Структура таблицы:

<TABLE> — начало контейнера таблицы
<CAPTION> название таблицы </CAPTION>
<TR> <TH> 1 заголовок </TH>…<TH> N заголовок </TH> </TR> — первая строка / шапка
<TR> <TD> ячейка 1/1 </TD>…<TD> ячейка N/1 </TD> </TR> — 1 строка
<TR> <TD> ячейка 1/i </TD>…<TD> ячейка N/i </TD> </TR> — i строка
<TR> <TD> ячейка 1/M </TD>…<TD> ячейка N/M </TD> </TR> — последняя строка
</TABLE> — конец контейнера таблицы

Таким образом, простейшая таблица, без линий сетки, в HTML-документе определяется следующим образом:

А вот, что у нас получится в окне броузера:

Управление выравниванием элементов таблиц

Для выравнивания элементов таблиц в тегах <TABLE> ,< TH > и < TD > используется много различных атрибутов. Рассмотрим наиболее полезные и общеупотребимые из них:

Управление линиями сетки таблиц

Для управления линиями сетки таблиц используется атрибут BORDER контейнера <TABLE>, который задает толщину рамки таблицы в пикселях ( по умолчанию рамки нет, BORDER=0 ). В стандарте HTML 4, появились новые атрибуты таблиц, строк и ячеек: FRAME для более гибкого управления линиями сетки таблиц и RULES для создания дополнительных линий разделителей групп в таблицах.

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