Tag FONT is a container for changing font characteristics such as size, color and typeface. Although this tag is still supported by all browsers, it is considered obsolete and its use is recommended to be abandoned in favor of styles.
Syntax
Text
Closing tag
Required.
Options
color - text color.
face - text font.
size - font size.
Example 1: Using the FONT tag
PThe first letter of this sentence will be written in Arial font, in red and enlarged in size.
Result
The first letter of this sentence will be written in Arial font, in red and enlarged in size.
Description of FONT tag parameters
COLOR parameter
Description
Sets the color of the text inside the FONT container.
Syntax
...
Arguments
To set colors, two methods are used: the first uses color designations in hexadecimal code, and the second uses the names of some colors. The method based on the hexadecimal number system is predominantly used, as it is the most universal. The decimal system, although more common in presentation, only finds use with CSS.
The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. The table shows the correspondence between decimal and hexadecimal numbers.
| Decimal | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Hexadecimal | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, a hash symbol # is placed before the hexadecimal number, for example #666999.
A typical color looks like this.
#FA8E47>Text
The background color is set to #FA8E47. The hash symbol # in front of a number means it is hexadecimal. The first two digits ( F.A.) determine the red component of the color, numbers from third to fourth ( 8E) - green, and the last two digits ( 47 ) - blue. The end result will be this color.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Each of the three colors - red, green and blue - can take values from 00 to FF, resulting in a total of 256 shades. Thus, in the RGB model, the number of color combinations can be 256 x 256 x 256 = 16,777,216 combinations.
Similar to CSS
color
Default value
The browser's default color.
Example 2: Text background color
Result
FACE parameter
Description
The face parameter is used to specify the font typeface used for text. You can list several font names, separated by commas. In this case, if the first specified font is not found, the browser will use the next one in the list.
Syntax
...
Arguments
Any number of font names separated by commas. Universal font families:
serif - serif fonts (antique), such as Times;
sans-serif - sans-serif fonts (fonts without serifs or sans serifs), a typical representative is Arial;
cursive - cursive fonts;
fantasy - decorative fonts;
monospace - monospace fonts, the width of each character in this family is the same.
Similar to CSS
font-family
Default value
The default font in the browser.
Example 3: Changing the font
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Result
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
SIZE parameter
Description
Specifies the font size in arbitrary units from 1 to 7. The average size used by default is 3. The font size can be specified either as an absolute value (for example, size=4) or as a relative value (for example, size=+1, size=-1 ). In the latter case, the size changes relative to the base one. Font size is affected not only given parameter size, but also the choice of font typeface. Thus, the Arial font looks larger than the Times font, and the Verdana font is slightly larger than the Arial font. Take this feature into account when choosing a font and its size.
Syntax
...
Arguments
An integer from 1 to 7, or changing the value up or down using the + and - symbols.
Similar to CSS
font-size
Default value
3
Example 4: Text size
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
Result
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
In this tutorial we will look at the last tag attribute , which sets the color of the text. By default, the text is black, which is displayed on a white background. In order to change text color in html, you need to apply the color attribute of the tag :
To set a color, just specify its name, for example: red, green, blue. Let's look at a small example:
Green text
Red text
Purple text
Let's see the result in the browser:
The text in the first paragraph turned green, the second paragraph turned red, and the third paragraph turned purple. In total there are 16 names of primary colors and 130 additional ones. Full list colors you can see in the html color table.
This way of indicating color is very simple, but very limited. Therefore, in order to change the color in HTML code, they often use a hexadecimal number preceded by a hash sign (#), for example:
Using this designation you can get more than 16 million colors and their shades! You can get the color code using the color code, which is available on the site, or using the color palette in Photoshop. Let's look at an example and write the following code:
Green text
Red text
Purple text
Let's save the file and look at the result:
As you can see, we gave the text the same colors as in the first example, only here we used the hexadecimal number system, or in other words, we set the color in HEX format.
Now you have learned how to change the text color in html and at the end of the lesson I suggest repeating all the tag attributes , and set several parameters to the text at once, namely: font, size and color. Write down an example:
Set the text font, size and color
Set the text font, size and color
In addition to using standard sizes and font styles (typefaces), you can define fonts for each text fragment using special tags. The easiest way is to use the so-called physical styles:
For each physical style tag, there is a corresponding closing tag that disables further application of the style. For example, for the tag the closing tag is.
Below is an example program and appearance different physical styles:
<НЕАD><ТIТLЕ>Physical styles
<В>Bold
Italics
Stressed
Crossed out
<ТТ>Typewriter
<ВХ1>Bold italic
<ВХ1><и>Bold italic underlined
Rice. 649. Physical styles
You can insert a physical style tag inside a title tag to modify the entire title or just a portion of it. For example, to italicize part of the text defined as a heading, you can use the following construction:
<НЕАD><ТIТLЕ>Physical and Logical Styles
<Н2>This - modified 2nd level header
Rice. 650. Changing the font style of part of the title
Using a special tag
You can customize the font for text images: set the typeface, size and color. First of all, you can set the size of the main font that is used in the document by default. the main font tag has the format
tag
To set the font typeface, use the tag
. For example:
If this tag is not used in your document, then the browser will use the font set in its preference. Therefore, the text on the user's screen may look completely different from how you imagined it. You should also keep in mind that if the font you designate is not installed on the user's computer, the browser will display text in the default font.
You can in the tag
indicate a list of fonts separated by commas. In this case, the browser will use the first font found. For example, you can write a tag:
FACE="Arial, Sans Serif, Courier">
Typically, similar fonts are specified in the list. It is recommended to assign the most popular fonts. When placing text information on a page, it is better not to assign a font name at all, relying on standard settings browser. But then, when designing a page, you should also use standard browser settings to synchronize your perception of the text with the possible perception of the user. After all, you are creating a page not for yourself, but for your readers.
Using the COLOR attribute on a tag
you can set the font color:
The COLOR attribute argument is a hexadecimal representation of the color code (red, green, and blue components, aka RGB components). The following program demonstrates font management:
<НЕАD><ТIТLЕ>Installing fonts
<Р>Aria font ABVGDEZZHIK
<Р>Courier font ABVGDEZZHIK
<Р>Font SYMBOL ABVGDEZZHIK
Rice. 651. Using different fonts
Note that in the tag you can use some or all of its possible attributes. For example:
In mathematical formulas, as well as for footnotes, indices are often used, which differ from the main text in position (slightly higher or lower) and size. Tags serve this purpose And respectively for upper and lower indices.
<НЕАD><Т1ТLЕ>Indexes/NEAD>
<НЗ>Example of using indexes
<Р>(5+x 2)x+3
a 1+a 2+a 3
<Р>Footnotes 2
Rice. 832. Using superscripts and subscripts
In addition to those discussed above, there are additional text formatting tags:
telephone numbers;- <СIТЕ> - highlighting quotes;
,- recording program texts, symbolic constants;- - entering texts from the keyboard.
The last three styles use a monospaced font (usually Courier). For example, the letters I and Ж in a monospace font occupy the same space. The use of monospace fonts is due to the ease with which text can be aligned using space characters.
Let us note one more point. Font control tags, like logical style tags, can include the attribute TITLE= "string", which allows you to attach a tooltip to the text inside this tag. Attribute argument TITLE is the hint string. When you hover your mouse over a highlighted word or phrase, a tooltip will appear next to the pointer. Using this technique, you can decipher abbreviations and provide additional explanations and recommendations to the user.
< FONT SIZE=… COLOR=... FACE=...> text FONT>
SIZE- sets font size, which will be used by text contained within the FONT element. You can specify an absolute font size by specifying an integer from 1 to 7. For a font, you can also specify relative size, assigning the attribute a signed integer (for example, this could be SIZE="+1" or SIZE="-2").
COLOR- indicates color, which will highlight this piece of text. Colors are specified as an RGB value with hexadecimal notation, or a symbolic value of one of the standard colors is selected.
FACE- sets font typeface, for example FACE=ARIAL.
text - teletype text (monospace).
text - style with italic font ( italics).
text- style with bold font.
text U>- style with underlining text.
text BIG>- printing text in font increased size(larger than the surrounding text).
text SMALL>- printing text in font reduced size(smaller than the surrounding text).
text SUB>- printing text with a downward shift ( subscript or interlinear).
text SUP>- print text with a shift up ( superscript or superscript).
text
STRIKE> or <
S>
…S>
- style with text strikethrough.
Special html tags
Tag< ADDRESS> used to highlight the author of the document and his address (for example, e-mail).
Some characters are control characters in HTML and are added to the text only using ESC sequences:
left angle bracket "<" - <
right angle bracket ">" ->
ampersand "&" - &
double quotes """ - "
There are a large number of ESC sequences for special characters, such as " " for and "®" for . One of the features is the replacement of characters in the 2nd part of the symbol table (after the 127th character) with escape sequences for transmission text files with national languages on 7-bit channels.
ESC sequences case sensitive: CANNOT be used instead<.
The most commonly used tags are shown in Table 2.
Table 1.2 - Basic tags for designing an HTML document
|
Attribute |
Function |
|
|
version= line |
Indicates the version of HTML that was used to create this document |
|
|
Text enclosed in tags will be displayed in italics |
||
|
HEAD tag – the starting and ending tags of the head part of an HTML document |
||
|
tagTITLE– start and end title tagsHTML-document |
||
|
tagA– start and end tags that allow you to create a hyperlink (attributehref) or fragment identifier (attributename) headerHTML-document |
||
|
href= url |
Specifies the URL of the hyperlink's target document (required if it is not a name anchor) |
|
|
methods= list |
Specifies a list of browser-specific display methods (separated by commas) |
|
|
name= line |
Specifies the name of the fragment identifier (required if this is not a hypertext link anchor) |
|
|
rel= connection |
The relationship of this document with the target document is determined |
|
|
rev= connection | ||
|
target= Name |
Specifies the name of the frame or display window of the document indicated by the link. |
|
|
title= line | ||
|
Specifies a location-independent uniform resource name for this hyperlink |
||
|
tagADDRESS– the text enclosed in these tags is an address |
||
|
tagB– text enclosed in these tags will be displayed in bold |
||
|
tagBASE– the basic one is indicatedURLfor all relativeURLin this document |
||
|
Attribute |
Function |
|
|
href= url |
Specify the base URL |
|
|
target= Name |
Sets the default target window for all links in the document. Intended mainly for redirecting links to other frames. There are four special values: _blank, _parent, _self, and _top |
|
|
tagBASEFONT– specifies the font size for subsequent text |
||
|
Attribute |
Function |
|
|
size= meaning | ||
|
tagBIG– text enclosed in tags will be displayed in a larger font size |
||
|
tagBODY– start and end tags of the document body |
||
|
alink= color |
Set the color of active hypertext links in a document |
|
|
background= url |
Specifies the URL of the background image |
|
|
bgcolor= color |
Set the document background color |
|
|
bgproperties= meaning |
If meaning equals fixed, prevents the background image from scrolling along with the document content (I.E.2 and higher) |
|
|
leftmargin=mean n no |
Set the size (in pixels) of the document's left margin (I.E.2 and higher) |
|
|
link= color |
Setting the color of "unvisited" hypertext links in a document |
|
|
text= color |
Set the color of regular text in a document |
|
|
topmargin= meaning |
Set the size (in pixels) of the document's top margin (I.E.2 and higher) |
|
|
vlink= color |
Setting the color of "visited" links in a document |
|
|
tagBR– break the current text stream and resume it from the beginning of the next line |
||
|
Attribute |
Function |
|
|
Sets the "wrap" of the object, the location of which is indicated by the value of this attribute (left, right, or all). When you wrap on a new line, the text will be placed so that the object remains visible |
||
|
tagCENTER– placing the text enclosed in tags in the center |
||
|
tagCITE– the text enclosed in tags is a quote |
||
|
tagCOMMENT– Comment in the text of the document. Comments will be visible in any browser. For all browsers, the comment is represented as |
||
|
tagDD– sets the descriptive part for the element list of definitions |
||
|
tagDFN– text enclosed in tags is formatted as a definition |
||
|
tagD.L.– creating a list of definitions containing tags< dt> and< dd> |
||
|
tagD.T.– a descriptive-conditional part is specified for an element of the list of definitions |
||
|
tagEMBED– start and end tags that allow you to describe the object embedded in the document. Depending on the type of embedded object, additional parameters may be included in addition to those listed below |
||
|
Attribute |
Function |
|
|
Specifies the URL of the embedded object. This attribute is required |
||
|
height= n |
Specifies the height of the zone that the built-in object will occupy |
|
|
name= Name |
Specifies the name of the embedded object |
|
|
Specifies the width of the zone that the built-in object will occupy |
||
|
tagFONT– setting the size, color or typeface of text enclosed in tags |
||
|
Attribute |
Function |
|
|
Set the color of text enclosed in tags |
||
|
face=list |
Setting the typeface of the tagged text (sets the first font name listed in a comma-separated list) |
|
|
size= meaning |
Set the base font size. Range – from 1 to 7 |
|
|
tagHn– the text enclosed in tags represents the level headingn. Possible valuesn– from 1 to 6 |
||
|
Attribute |
Function |
|
|
align= type |
Specifies how the title should be aligned: left (default), center, or right (right) |
|
|
tagHR– break the current text stream. A horizontal ruler will be inserted at the break point. |
||
|
Attribute |
Function |
|
|
align= type |
Specifies how the ruler should be aligned: left, center (default), or right |
|
|
Do not use volumetric shading when displaying a ruler |
||
|
Setting the ruler thickness to an integer number of pixels |
||
|
width= meaning | ||
|
tagI– text enclosed in tags will be displayed in italics |
||
|
tagIMG– an image is inserted into the current text stream |
||
|
Attribute |
Function |
|
|
alt= text |
Sets alternative text for browsers that do not support images |
|
|
Border= n |
Set the thickness (in pixels) of the border of images contained in hyperlinks |
|
|
Adding playback controls for embedded video clips (I.E.2 and higher) |
||
|
Dynasrc= url |
SetURL-address of the video clip to be imaged( I.E. 2 and higher) |
|
|
Height= n |
Sets the image height in pixels |
|
|
Hspace= n |
Sets the placement to the left and right of the image of areas of free space with a width of n pixel |
|
|
Indicates that when using this tag within a tag image is selected using the mouse |
||
|
loop= meaning |
Set the number of video playback repeats. Meaning can be an integer or infinite (I.E.2 and higher) |
|
|
Lowsrc= url |
Specified by a low-resolution image that the browser should load first. This is followed by the image specified by the attribute |
|
|
Specifies the source URL of the image to be played. This attribute is required |
||
|
start= start |
Specifies when to play the video clip (options: fileopen or mouseover) |
|
|
Usemap= url |
Specifies the area of the image that is sensitive to mouse movement |
|
|
Vspace= n |
Specifies the placement of npixel areas of free space above and below the image |
|
|
Specifies the width of the image in pixels |
||
|
tagKBD– text enclosed in tags is entered character by character (as when typing from a keyboard) |
||
|
tagLINK– in the title (< head >) document is determined by the link from of this document to another document |
||
|
Attribute |
Function |
|
|
href= url | ||
|
methods= list |
Sets a list of display methods for this link, depending on the browser (separated by commas) |
|
|
rel= connection |
The relationship of this document with the target document is determined. For Internet Explorer 3.0, rel=style means the existence of an external style sheet |
|
|
rev= connection |
The feedback of the target document with the data is determined |
|
|
Specifies the URL of the external style sheet that will be used to format the document ( I.E.2 and higher) |
||
|
title= line |
Sets the title of the target document |
|
|
type= text/css | ||
|
A universal resource name is specified for the target document, independent of its location |
||
|
tagMAP– the area of the image sensitive to mouse movement is determined |
||
|
Attribute |
Function |
|
|
name= line |
Specifies the name of this area. This attribute is required |
|
|
tagNOBR– breaks are not allowed in the text enclosed in tags |
||
|
tagP– paragraph start and end tags |
||
|
align= type |
Sets how text in a paragraph is aligned: left, center, or right |
|
|
tagPLAINTEXT– specifies that the rest of the document should be displayed unprocessed, as pre-formatted text |
||
|
tagPRE– the text enclosed in tags will be displayed like this. how it was pre-formatted, without processing, with precise adherence to line breaks and spacing |
||
|
The browser will place the text so that (if possible) n characters fit on the line |
||
|
tagS |
||
|
tagSAMP– the text enclosed in tags is a template |
||
|
tagSMALL– text enclosed in tags will be displayed in a smaller font size |
||
|
tagSPACER– insert a separator into the document(OnlyN3) |
||
|
type= type |
The type of separator is specified: vertical – an area of empty space of the specified size is placed between two lines of text; horizontal – an area of empty space of the specified size is placed between words or characters; block – insertion of a rectangular area |
|
|
Specifies (in pixels) the width of a horizontal separator or the height of a vertical separator |
||
|
Specifies the width of the block separator |
||
|
height= n |
Specifies the height of the block separator |
|
|
align= meaning |
Specifies how the block delimiter is aligned relative to the surrounding text. |
|
|
tagSPAN– text enclosed in tags will be formatted using a style sheet(OnlyI.E.3 and above) |
||
|
Attribute |
Function |
|
|
style= elements |
Style sheet elements are specified for text within a given spacing |
|
|
tagSTRIKE– text enclosed in tags will be displayed with a horizontal line through it |
||
|
tagSUB– text enclosed in tags will be displayed as a subscript |
||
|
tagSUP– text enclosed in tags will be displayed as a superscript |
||
|
tagTT– text enclosed in tags will be displayed in monospace font |
||
|
tagVAR– the text enclosed in the tags represents the name of the variable |
||
Tag is a container for changing font characteristics such as size, color and typeface. Although this tag is still supported by all browsers, it is considered obsolete and its use is recommended to be abandoned in favor of styles.
Syntax
Text
Closing tag
Required.
Options
color Sets the text color. face Specifies the font typeface. size Sets the font size in conventional units.Example 1: Using a tag
P The first letter of this sentence is written in Arial font, highlighted in red and enlarged in size.
Description of tag parameters
COLOR parameter
Description
Sets the color of the text inside the container .
Syntax
...
Arguments
The color value can be set in two ways.
1. By its name
Browsers support some colors by their name.
2. By hexadecimal value
Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, a hash symbol # is placed before the hexadecimal number, for example #666999. Each of the three colors - red, green and blue - can take values from 00 to FF. Thus, the color symbol is divided into three components #rrggbb, where the first two symbols indicate the red component of the color, the middle two - green, and the last two - blue.
Similar to CSS
Default value
The browser's default color.
FACE parameter
Description
The face parameter is used to specify the font typeface used for text. You can list several font names, separated by commas. In this case, if the first specified font is not found, the browser will use the next one in the list.
Syntax
...
Arguments
Any number of font names separated by commas. Universal font families:
serif - serif fonts (antique), such as Times;
sans-serif - sans-serif fonts (fonts without serifs or sans serifs), a typical representative is Arial;
cursive - italic fonts;
fantasy - decorative fonts;
monospace - monospace fonts, the width of each character in this family is the same.
Similar to CSS
Default value
The default font in the browser.
SIZE parameter
Description
Specifies the font size in arbitrary units from 1 to 7. The average size used by default is 3. The font size can be specified either as an absolute value (for example, size="4" ) or as a relative value (for example, size="+1" , size="-1" ). In the latter case, the size changes relative to the base one. The font size is affected not only by the specified size parameter, but also by the choice of font typeface. Thus, the Arial font looks larger than the Times font, and the Verdana font is slightly larger than the Arial font. Take this feature into account when choosing a font and its size.
