Example

Basic text formatting tags

Example

Heading
first level

Second level heading

Third level heading

Fourth level heading

Level 5 heading

Level six heading

Paragraph test

Create a text file as in the example. Save it with extension html.

Double-clicking on its name in the folder will launch the default browser, and your HTML document will already be loaded into it.

Highlighting in text

Example

Quotes, variables, addresses

).

How to insert text into an HTML page? There are special HTML tags for text for this purpose.

There are six levels of headings in HTML. They are added using tags

-

. Wherein

This is the first level heading, it is the largest.

Example of creating headers:

Headings do not depend on each other in any way. You can add a heading of any level wherever you need it.

Beginners sometimes cannot figure out the question of how many first-level headings can be on a page. On the Internet, I have repeatedly come across incomplete and unreliable information on this topic. Therefore, I decided to consider this issue in detail.

Number of tags per page work

doesn't have any effect. You can add as many of them as you like. But search engines have a negative attitude towards the fact that there is more than one first-level heading on a page. Therefore, if you are going to promote your site in search engines, then there should be only one first-level heading on each page. Conclusion: it’s better to immediately get used to not putting more than one tag

to the page. After all, HTML has whole levels of headings. For any page layout, this is quite enough to highlight the tag

for one header only.

Paragraph

Tag

Creates a paragraph of text. It has padding at the top and bottom to separate one paragraph from another. In addition, it is possible to set the first line indentation. All this is controlled using CSS.

Tag

Tag This is a line tag for inserting text. It is usually used when you need to highlight part of the text in a certain way.

For example, let's highlight part of the text in red.

The required part of the text is inside the tag . To make it red, the tag has the style attribute set, which specifies styles. Since working with styles is covered in the CSS tutorial, I won't explain how this attribute works here. Just add it to the tag as written in the example.

Tag

Tag

Used for special types of text in which it is important to preserve formatting.  The text inside this tag is displayed on the page exactly as it appears in the page code.  It preserves all spaces and line breaks.  The text appears in a monospaced font, but this can be changed using styles.

Text selection
HTML has tags to highlight text.  Tags And create bold font.  Although these tags have some differences, they generally look the same on the page.  Tags And highlight the text in italics.  There is a tag , which makes the text underlined, but its use is not recommended.

Example of text selection:
21
22
23
24

 Bold font
Bold font
Italic font
Italic font

Text can be highlighted using styles.  Everyone decides for themselves how to highlight text, using tags or styles.
Other tags
We looked at special HTML tags for text.  But the text can also contain many other tags that add content to the page.  You can even paste text outside of any tags and it will still appear on the screen.  But in practice, no one does this, because text cannot be manipulated outside of tags.  Therefore, all text must of course be contained within tags.  And once you learn CSS, you'll be able to define the appearance of text.
In html, font size plays an important role.  It allows you to draw the user's attention to important information posted on the site page.  Although not only the size of the letters is important, but also their color, thickness and even family.
 
Tags and attributes when working with html fonts
Hypertext language has a wide range of tools for working with fonts.  After all, text formatting is the main task of html.
The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.

Let's look at the tags that are used to work with fonts in HTML and their attributes.  The main one is the tag .  Using the values ​​of its attributes, you can set several characteristics of the font:

color – sets the text color;
size – font size in conventional units.
Positive attribute values ​​from 1 to 7 are supported.
face – used to set the text font family that will be used inside the tag .  Several values ​​are supported, separated by commas.


Only the text that is located between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.

Also in html there are a number of paired tags that specify only one formatting rule.  These include:
— sets bold font in html.  Tag similar in action to the previous one;

— the size is larger than the default;

— smaller font size;

— italic text (italics).  Similar tag ;

— text with underlining;
- crossed out;
— display text only in lower case;
- in upper case.
Plain text

Thumbnail
Thumbnail
More than usual
Less than usual
Italics
Italics
With underscore
Crossed out

Style attribute capabilities
In addition to the described tags, there are several more ways to change the font in html.  One of them is to use the generic style attribute.  Using the values ​​of its properties, you can set the display style of fonts:
1) font-family – the property sets the font family.  It is possible to list multiple values. 
Changing the font in html to the next value will occur if the previous family is not installed on the user's operating system.
Writing syntax:
font-family: font-name [, font-name[, ...]]
2) font-size – the size is set from 1 to 7. This is one of the main ways you can increase the font in HTML. 
Writing syntax:
font-size: absolute size |  relative size |  meaning |  interest |  inherit
You can also set the font size:
In pixels;
In absolute terms ( xx-small, x-small, small, medium, large);
In percentages;
In points (pt).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt

3) font-style – sets the font writing style.  Syntax:
font-style: normal |  italic |  oblique |  inherit
Values:
normal – normal spelling;
italic – italic;
oblique – font slanted to the right;
inherit – inherits the spelling of the parent element.
An example of how to change the font in html using this property:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique

4) font-variant – converts all capital letters to capital letters.  Syntax:
font-variant: normal |  small-caps |  inherit
An example of how to change the font in html with this property:
font-variant:inherit
font-variant:normal
font-variant:small-caps

5) font-weight – allows you to set the thickness of the text (saturation).  Syntax:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Values:
bold – sets the html font to bold;
bolder – bolder relative to normal;
lighter – less saturated relative to normal;
normal – normal spelling;
100-900 – sets the font thickness in numerical equivalent.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100

HTML font property and font color
Font is another container property.  Inside itself, it combined the values ​​of several properties intended for changing fonts.  font syntax:
font: font-size font-family |  inherit
The value can also be set to the fonts used by the system in the labels on various controls:
caption – for buttons;
icon – for icons;
menu - menu;
message-box – for dialog boxes;
small-caption – for small controls;
status-bar – status bar font.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif

To set the font color in HTML, you can use the color property.  It allows you to set the color, either using a keyword or in rgb format.  And also in hexadecimal code.
CSS gives you a wide range of options for manipulating text style.  You can influence the font, color, size and other properties of the text.
Since this page is aimed at beginners, let's first recall the basic CSS syntax and terminology used.
Each CSS rule consists of a selector and a definition.  The selector is usually the tag that we apply our style to, and the definition is the styling itself.  A definition consists of a property and its value.  For example: property - color, value - red.
The CSS syntax is as follows:
selector (property: value)
Example CSS rule:
p( color: blue)
 
Display text in blue.  One selector can have multiple pairs (property: value).
p( color:blue;  font-size: 10pt)
In this example, the rule is set to tag 
Display text in blue and 10pt.  That is, here we have two pairs (property: value) applied to one selector, in this case to the paragraph tag 
In the future, when the words property and value appear in the text, it will be the definition for the selector in the CSS rule that is meant.
 
Font properties
If you do not specify this property in CSS, the browser will display text in the default font.  This is usually Times New Roman.
The list of fonts in the font-family value can include one or more names, separated by a comma.  If the font name contains spaces, for example, Trebuchet MS, it must be enclosed in quotation marks, single or double.
The browser one by one checks for the presence of fonts from the list on the user's computer.  If the first font in the list is present, then it is used, otherwise the browser checks for the presence of the second font from the list.  If none is present, the default font is used.  At the end of the list, a keyword is usually written that describes the type of font desired - serif, sans-serif, fantasy, cursive or monospace.
Universal font families:
serif - antique fonts (serif fonts), such as Times;
sans-serif - sans-serif fonts (fonts without serifs or sans serifs), a typical representative is Arial;
monospace - monospace fonts, the width of each character in such a family is the same (Courier font).
fantasy - a family of decorative fonts;
cursive - italic font family;
Example using:

 


 
 


 
Heading h1
 
Heading h2


The following property:
Example code, in this example we will embed styles into the tag using the style attribute.

 


 


An example of a normal font.
Italic example.
Example of italic font.


It can be seen that italics are no different in appearance from italic font.
The following property:
Capital is the name in typography for text in which lowercase characters look like reduced capitals.  It is necessary to distinguish between small capitals and simply reduced capital letters.  Capital letters are slightly higher than lowercase letters and, as a rule, have slightly expanded proportions.

 


 


 
Plain text. Text in small caps.
 
Again, regular text.


The following property:
The font-weight property sets the weight of the font.  To do this, the following keywords are used in the meaning: bold - bold style, normal - normal style.  The value can be set in the range from 100 to 900 in increments of 100. The extra light font weight that the browser can display is 100, and the extra bold font weight is 900. The normal font weight (which is the default) is 400, standard bold text is bold  , - value 700.
Browsers usually cannot accurately display the required font weight, so they switch between bold , normal and lighter .  In practice, the style in most browsers is usually limited to only two options: normal style and bold style.
The lighter and bolder values ​​change the font weight relative to the parent's weight, down and down, respectively.

 


 


 
Plain text. bold text.
 
Again, regular text.


The following property:
The font-size property specifies the font size of the element.  The font size can be set in several ways.
The absolute font size can be set using the keywords: xx-small (extremely small), small (small), medium (medium (default value), large (large), x-large (very large), xx-large (  extremely large).  Absolute font sizes depend on browser and operating system settings, so they are not entirely absolute.
To change the size of the text relative to the parent, another set of constants is used (larger - increases the size relative to the parent, smaller - decreases the size).

 


 


 
Plain text.
 
Text xx-small. Text larger.
 
Text small.
 
Text medium.
 
Text large.
 
Text x-large.
 
Text xx-large.
 
Again, regular text.
 
Text 150%.
 
Text 15px. Text larger.


 
Text Properties
In addition to working with fonts, CSS provides a number of tools for working with the properties of the text itself.
Let's look at the first property:
When setting line spacing, the report starts from the base line of the font.  By default, the spacing between lines of text depends on the type and size of the font and is determined automatically by browsers.  Negative leading values ​​are not allowed.

 


 


 
Plain text.  First line. 
Second line. 
Third line.
 
Changed text.  First line. 
Second line. 
Third line.


When writing a percentage, the font height is taken as 100%.
The following property:
Using the definition ( text-decoration: none) You can remove the underline from links, which is installed by default in browsers.

 


 
 


 
Search engine Google.



The following property:
The text-transform property controls the display of letters; you can set uppercase or lowercase characters depending on the selected value.
text-transform property 
Property
Meaning
 
Description
 
Example
text-transform
 
none 
capitalize 
uppercase 
lowercase
 
Remove all effects 
Start with Capitals 
ALL CAPITAL 
all lower case
 
text-transform: uppercase
Usage example:

 


 


 
Text none.
 
Text capitalize.
 
Uppercase text.
 
Text lowercase.


Compare the text contained in the html code with the text in the browser window.
The following property:
The text-align property is used to align text horizontally in the browser window or container in which the text block is located.
text-align property 
Property
Meaning
 
Description
 
Example
text-align
 
left 
right 
center 
justify
 
Text alignment
 
text-align: right
Detailed description of values:
center - text is aligned to the center.
 
justify - width alignment, in fact, it is aligned to the right and left at the same time; empty spaces are formed between the words of the text, which the browser fills with spaces.
 
left - alignment to the left edge.  This is the default value.
 
right - right alignment.
An example of using this property will be combined with an example of the next property.
The following property:
The text-indent property is used to create the indent value of the first line of a block of text (for example, for a paragraph 
This property allows a negative value, in which case the first line overhang is created.
text-indent property 
Property
Meaning
 
Description
 
Example
text-indent
 
meaning 
%

 
First line indent
 
text-indent: 15px; 
text-indent: 10%
 


 
 


Working with the text-align and text-indent properties.  To better understand how the code works, open the page in a new window and reduce its size.


I instruct the gentlemen senators to keep the speech unwritten, 
but in your own words, so that the nonsense is visible to everyone! 
Peter the First.

Currently, text to HTML is the main way of presenting information.  The vast majority of sites on the Internet consist of text content.  This means that if you have the skill, you can, at a minimum, read, and, at a maximum, write (there is some truth in every joke).
Let’s say you typed text in an editor, formatted it (highlighted some words bold or italics), or did something else with it.  Then I copied and pasted the text into my html code.  You open an html page in , and all your formatting has disappeared somewhere.  This happens because the text editor uses its own special characters to format the text (essentially the same tags, only used in text editors), which you don’t see by default.
In the editor window you only see text.  But in fact, there are also special control characters with which the editor “understands” how to display this or that piece of text.  That is, I repeat, this is the same as, only “tailored” for use in text editors.
But, despite this, there is a way to transfer text from the editor and paste it into the html code in its original form.  And since we’re talking about this, let’s start studying text formatting with this tag.  So let's get started.
§ 2. The formatting tags themselves
Pre-formatted text can be inserted into an HTML page using the and tags.  The browser will display the text enclosed between these tags as it appeared in text editor.  To be honest, I have never used this tag in practice, so I can’t say anything else about it.
The most popular tags for formatting text are:
- used to highlight text bold.

- used to receive italic text.  It is recommended to use the tag instead of this tag.

- will allow emphasize text.  The main thing here is that the user does not confuse the underlined text with a link.

- makes the text crossed out.

- designed to highlight subscript text (subscript).  This tag can be useful, for example, for writing chemical formulas.  Here is the code 
H2O
Gives us this formula

- needed for highlighting superscript text (superscript).  For example, to write exponentiation: we write 
(a+b)2,
We get
(a+b) 2.

All of these tags can be used to format text either one at a time or several together.  This is achieved by nesting tags within each other.  For example, the following html code:
H2O is the formula for water.
when watching
H2O- This water formula.

§ 3. Paragraphs
IN HTML paragraphs are created using the tag.  Using this tag inserts one blank line and places the visible HTML page element behind it on the next line.  For example, if we write:
So it will look like this:
And it is not necessary to use a closing tag, since the browser considers that the beginning of the next paragraph means the end of the previous one, but it is advisable to avoid confusion.
§ 4. Text alignment
To align the text, use the attribute align with possible values center, left, right And justify.  It, accordingly, aligns the text to the center, to the left, to the right, and at the same time to two edges at once.  For example, html code:
align="center">Text centered
will align the text to the center:
Center text
And this code:
right">
will align the text to the right
Align text to the right
If the attribute align is not used, the text will be left aligned.  This happens by default.  Example code:

will align the text to the left
By default, text is aligned left
§ 5. Line break and horizontal bar
If you need to ensure a transition to a new line without inserting an empty line (this happens when you press Enter in a text editor), then use the tag 
.  For example, html code
1. First line. 
2. Second line.
in the browser it will look like this:
1. First line. 
2. Second line.
U 
 no closing tag.  You probably already guessed that to insert several empty lines, you need to write the tag 
 several times in a row.
You can also visually separate parts of the text using the tag.  This tag creates a separator bar on the page (for example, like the green one at the beginning of this article).  The tag has the following attributes:
size- strip thickness;

width- The width of the line;

align- alignment;

color- stripe color;

noshade- an attribute that has no values.  If specified, a solid black bar without a shadow is created.
For example, html code:
align="center" size="5" width="50%" color="#3399ff">
in the browser it will look like
The width and thickness can be specified both in pixels (then the value will be constant) and as a percentage (then the value will change depending on the screen resolution).
§ 6. Headings
To set the names of sections and subsections in HTML, use title tags.  There are six levels of headings and they are designated as follows:
- first level heading

- second level heading

- third level heading

- fourth level heading

- fifth level heading

- sixth level heading

Headings are in bold font and separated from the rest of the text by a blank line.  The largest title is (the title of this lesson is highlighted by it), and the smallest is .  Heading tags have the following attributes:
align- alignment of title text on the page (the values ​​are the same as for alignment of regular text);

title- a tooltip that appears when you hover the mouse over the title.

For example, the HTML code:
align="center" title="Tooltip. Hover your mouse over the title to see it.">Заголовок 4 уровня
!}
in the browser it will look like this:
Level 4 header
§ 7. Working with fonts
To format fonts directly, HTML has a tag.  This tag has the following attributes:
color- font text color;

face- font typeface;

size- font text size.  Can be specified as an absolute value (1 to 6) or a relative value (+1 to +6 and -1 to -6).  By default, text size is 3. If you specify size="+1"
>, then the text placed between the and tags will be displayed increased by 1 compared to other text.  Same with -1. 
§ 8. Creating lists in HTML
In HTML, lists are created using and tags.  In the first case, ordered (numbered) lists are created, in the second, unordered (bulleted) lists.  Each list element is highlighted with a tag.  The browser displays list items on a new line as an indented column with bullets.  The type of marker is determined by the attribute type.
In a numbered list, the markers (type attribute values) are as follows:
1
- numbering in Arabic numerals (default);

A- in capital Latin letters in alphabetical order;

a- small Latin letters;

I- large Roman numerals;

i- small Roman numerals.

For example, HTML code

First element. 
Second element. 
Third element. 


The browser will show it like this.


    


    

        
Did you like the article?  Share with your friends:
        

            
Facebook
            
Twitter
            
My world
            
In contact with
            
Google+
        
    

    

        
26.03.2020
        
Internet
        
        

    

    
    
    

        
The most interesting:

        


                             

                    

                        	
                    
                    
Label each polygon and measure the lengths of the sides of each
                
                             

                    

                        	
                    
                    
Connecting YouTube to TV
                
                             

                    

                        	
                    
                    
Names of large numbers Solving a compound problem