15 Alignment, font styles, and horizontal separators
Content
In this section of the specification discusses some HTML language elements and attributes that can be used for visual formatting elements. Many of these are undesirable .
15.1 Formatting
15.1.1 Background color
Defining attributes
- the bgcolor = color [CI]
- Not Recommended. This attribute sets the background color of the document body or table cells.
This attribute sets the background color of the body of the document (element the BODY ) or table (elements TABLE statement , the TR , the TH , and the TD ). In the element BODY can use additional attributes to specify the text color.
The use of this attribute is not recommended , instead, use a style sheet.
15.1.2 Alignment
Align block elements (tables, images, objects, paragraphs, etc.) by using the attribute align . Although the attribute can be set for many HTML elements, its range of possible values in different cells can be different. It discusses only align attribute for text.
attribute definitions
- the align = left | center | right | justify [the CI]
- Not Recommended.
This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values are:
- left: text lines are rendered flush left.
- center: text lines are centered.
- right: text lines are rendered flush right.
- justify: text lines are aligned to both edges.
The default value depends on the general direction of the text. For the text from left to right, the default is align = left, me for the text from right to left - align = right.
DEPRECATED EXAMPLE:
In this example, the centered heading.
<H1 align = "center"> How to Carve Wood </ H1>
Using CSS, for example, you can achieve the same effect as follows:
<HEAD>
<TITLE> How to Carve Wood </ TITLE>
<STYLE type = "text / css">
H1 {text-align: center}
</ STYLE>
<BODY>
<H1> How to Carve Wood </ H1>
Please note that all offers are aligned with the H1 . You can limit the scope of the style by setting the attribute of the class :
<HEAD>
<TITLE> How to Carve Wood </ TITLE>
<STYLE type = "text / css">
H1.wood {text-align: center}
</ STYLE>
<BODY>
<H1 class = "wood"> How to Carve Wood </ H1>
DEPRECATED EXAMPLE:
Similarly, to align the right edge of the paragraph to attribute the HTML the align , you can write:
<P align = "right"> ... text of paragraph ...
and using CSS:
<HEAD>
<TITLE> How to Carve Wood </ TITLE>
<STYLE type = "text / css">
P.mypar {text-align: right}
</ STYLE>
<BODY>
<P class = "mypar"> ... text of paragraph ...
DEPRECATED EXAMPLE:
To align the right edge of a series of paragraphs, group them with the element the DIV :
<DIV align = "right"> <P> ... the first paragraph ... <P> ... text of the second paragraph ... <P> ... text of the third paragraph ... </ DIV>
Using CSS text alignment property is inherited from the parent element, so you can use:
<HEAD>
<TITLE> How to Carve Wood </ TITLE>
<STYLE type = "text / css">
DIV.mypars {text-align: right}
</ STYLE>
<BODY>
<DIV class = "mypars">
<P> ... the first paragraph ... <P> ... text of the second paragraph ... <P> ... text of the third paragraph ...
</ DIV>
To center using CSS entire document:
<HEAD>
<TITLE> How to Carve Wood </ TITLE>
<STYLE type = "text / css">
BODY {text-align: center}
</ STYLE>
<BODY>
... the body of the document is centered ...
</ BODY>
Using the element CENTER absolutely equivalent to using the element DIV attribute the align , which is set to "center". Use element CENTER undesirable .
15.1.3 Clip objects
Images and objects can be "built" or attached to the edge of the page, temporarily altering the text field with regard to the object.
Attaching an object
Attribute align objects, images, tables, frames, etc. It leads to the fact that the object is attached to the left or right edge. Typically, objects are affixed with a new line. The following values can be set for this attribute:
- left: The object is attached to the current left margin. Subsequent text flows around the image on the right.
- right: The object is attached to the current right margin. Subsequent text flows around the image on the left.
DEPRECATED EXAMPLE:
The following example shows how to attach the element IMG to left field.
<IMG align = "left" src = "http://foo.com/animage.gif" alt = "my boat">
Some alignment attributes allow the value "center", which does not attach the object, but it centers on current fields. However, for the elements P and DIV value "center" causes the contents to the centering element.
Wrap text object
Another attribute, defined for the element of the BR , controls text flow around objects attached.
attribute definitions
- the clear = none | left | right | all [the CI]
- Not Recommended.
Specifies where the next line of the translation should appear in a visual browser, caused by this element string. This attribute allows for attachable objects (images, tables, etc.). Possible values are:
- none: The next line begins in the usual way. This value is used by default.
- left: The next line will begin at nearest line below the attached object in the left margin.
- right: The next line will begin at nearest line below the object attached at the right margin.
- all: The next line will begin at nearest line below any attached object in the field.
Consider the following visual scenario, where text wrap is made to the right of the image to a line break by using the BR :
**************** ------- | | ------- | image | - <BR> | | ****************
If the attribute is clear is set to none, the line that follows the BR , start immediately behind him to the right of the image:
*************** ------- | | ------- | image | - <BR> | | ------ ***************
DEPRECATED EXAMPLE:
If the attribute is clear is set to left or all, next line will appear as follows:
*************** ------- | | ------- | image | - <BR Clear="left"> | | *************** -----------------
With style sheets, you can specify this behavior for all parts of the lines for all objects (images, tables, etc.) attached to the left field. You can achieve this effect in the following manner using CSS:
<STYLE type = "text / css">
BR {clear: left}
</ STYLE>
To determine this behavior only for certain instances of an element the BR , to use attribute id :
<HEAD>
...
<STYLE type = "text / css">
BR.mybr {clear: left}
</ STYLE>
</ HEAD>
<BODY>
<P> ...
*********** -------
| | -------
| table | - <BR Id="mybr">
| |
***********
-----------------
...
</ BODY>
15.2 Fonts
The following HTML elements define the font information. Although not all of them are undesirable , it is advisable to use them instead of the stylesheet.
15.2.1 The elements that determine the font style : elements of the TT , I of , Bed and , of BIG , of SMALL , STRIKE , the S and U
<! ENTITY% fontstyle " The TT | I of | Bed and | of BIG | of SMALL "> <! The ELEMENT ( % fontstyle; | % the phrase; ) - - ( % the inline; ) *> <ATTLIST (! % Fontstyle; | % the phrase; ) % attrs; - % Coreattrs , % the i18n , % events - >
Start tag: required, End tag: required
The attributes defined elsewhere
- id , class ( document-wide identifiers )
- the lang ( language information ), the dir ( text direction )
- title ( element title )
- style ( inline style information )
- the onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown onkeyup ( intrinsic events )
Representations of the elements that define the font style, depends on the user agent. The following is an informative description only.
- TT: It seems like a monospaced font (typewriter font).
- I: It is italicized.
- B: It is bold.
- BIG: It seems "big" font.
- SMALL: It is a "small" font.
- STRIKE and S: undesirable. It is crossed out text.
- U: Not Recommended. It is underlined font.
- I: It is italicized.
The following sentence shows several types of text:
<P> <b> bold </ b>, <I> italic </ i>, <b> <i> bold italic </ i> </ b>, <tt> monospaced </ tt> and <Big> big </ big> and <small> small </ small> text.
The words are as follows:
You can achieve a greater variety of effects using style sheets. To ask for a paragraph blue italics using CSS, make a note of:
<HEAD>
<STYLE type = "text / css">
P.mypar {font-style: italic; color: blue}
</ STYLE>
</ HEAD>
<P id = "mypar"> ... text in blue italics ...
Font style elements must be properly nested. Presentation nested style elements depends on the user agent.
15.2.2 Elements font management: the FONT and BASEFONT
Using elements FONT and BASEFONT undesirable .
The formal definition of cm. In Transitional the DTD .
attribute definitions
- size = Cdata [the CN]
- Not Recommended.
Sets the font size. Possible values are:
- An integer from 1 to 7. Set a fixed font size, performance of which depends on the user agent. Not all user agents may represent all seven sizes.
- Relative change the font size. The value "1" means one size larger. The value "-3" means three font sizes smaller. All dimensions refer to a scale of 1 to 7.
- color = color [CI]
- Not Recommended. This attribute sets the color of the text.
- face = cdata [the CI]
- Not Recommended. This attribute specifies a comma-separated list of font names, search for that user agent must perform in order of priority.
The attributes defined elsewhere
- id , class ( document-wide identifiers )
- the lang ( language information ), the dir ( text direction )
- title ( element title )
- style ( inline style information )
Element FONT changes the font size and color for the text of its contents.
Element BASEFONT sets the base font size (using the size attribute). Change the font size using the element FONT produced relative to the base size fixed element BASEFONT . If the item BASEFONT is not used, the default size of 3.
DEPRECATED EXAMPLE:
The following example shows the difference between the seven font sizes that are installed using the element the 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>
It may appear as follows:
The following is an example of installation of relative font sizes using a base size of 3:
The base font size does not apply to the titles, if they are not changed using the element FONT to a relative font size.
15.3 Separators: element HR
<The ELEMENT! The HR - About EMPTY The - horizontal line -> <! ATTLIST HR % coreattrs; - Id , class , style , title - % events; >
Start tag: required, End tag: forbidden
attribute definitions
- the align = left | center | right [the CI]
- Not Recommended.
This attribute specifies the horizontal alignment of the separator with respect to the surrounding context. Possible values are:
- left: the separator is left-aligned.
- center: separator centered.
- right: the separator is aligned to the right.
The default is align = center.
- noshade [the CI]
- Not Recommended. If this attribute is set, it offers the user agent to provide a separator with a solid color rather than the usual two-tone style.
- size bed = pixels [CI]
- Not Recommended. This attribute specifies the height of the separator. The default value depends on the user agent.
- the width = the length [the CI]
- Not Recommended. This attribute specifies the width of the separator. The default is 100%, ie, the entire width of the page.
The attributes defined elsewhere
- id , class ( document-wide identifiers )
- the lang ( language information ), the dir ( text direction )
- title ( element title )
- style ( inline style information )
- the onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup ( intrinsic events )
- the align ( alignment )
Item HR leads to the generation of the horizontal separator visual user agents.
The height of the empty space between the separator and the text depends on the user agent.
ILLEGAL EXAMPLE:
In this example, spacers are centered, and their size is set to half the width between fields. The top separator has a default thickness, and the thickness is set to the lower 5 pixels. Lower separator must be provided with a solid color without a hint:
<HR width = "50%" align = "center"> <HR size = "5" width = "50%" align = "center"> <HR noshade size = "5" width = "50%" align = "center">
These separators can be represented as follows:
Comments
Commenting, keep in mind that the content and the tone of your messages can hurt the feelings of real people, show respect and tolerance to his interlocutors, even if you do not share their opinion, your behavior in terms of freedom of speech and anonymity offered by the Internet, is changing not only virtual, but real world. All comments are hidden from the index, spam control.