The red html line can be set in 4 different ways. Although this programming language does not provide specific standards for this phenomenon, so there are no restrictions in this regard. In this article we will use a non-standard set of tools to create a red line.

1st method

It's worth starting with the most common method. Only in this case is it necessary to use cascading tables, because CSS is inextricably linked with hypertext markup language. The red html line can be set using the "text-indent" property. It is enough to indicate the desired element and the distance that will be used for indentation on the left side of the document. For example, writing: "p (text-indent: 20px;)" means that a red line of 20 pixels will be made in each paragraph p. You can use any block of text as the element for which you specify the value. In fact, this property does not set the red line, but simply indicates the indent for the first line of the selected element. But who will notice the difference? The "text-indent" property can take on three different kinds of values:

• Any generally accepted unit of measurement, for example px (pixels), in (inches), pt (points) and others.
• Percentage value. In this case, the distance from the parent element is taken into account.
• Inherit. When this value is specified, the property will be inherited from the parent element.

2nd method

In html, the red line can be set without connecting cascading tables. It is enough to put several spaces before the first character in the page source code. You just need to use special characters, namely “ ”, because if you put a regular space, only one will be taken into account. And using this symbol you can set the required indentation. Such a red HTML line will not have global application, and you will have to add all the spaces manually. This minus will greatly burden you when working with a large number of documents. This method will also declare your page code invalid.

3rd method

Conclusion

As a conclusion, we can say that html together with CSS allows you to create a wide variety of effects. Sometimes properties and elements are not used for their intended purpose, but you should not deviate too much from the standard meaning of tags.

As a rule, blocks of text are separated by paragraphs (paragraphs). By default, there is a small vertical space between paragraphs, called a space. The syntax for creating paragraphs is as follows.

Paragraph 1

Paragraph 2

Each paragraph begins with a tag

And ends with an optional closing tag

.

In any book, the first line indentation, also called the “red line,” is used to highlight the next paragraph. This allows the reader to easily look for a new line and thus increases the readability of the text. On a web page, this technique is usually not used, but padding is used to separate paragraphs.

Example 7.1 shows the use of paragraphs to create indents between lines.

Example 7.1. Using Paragraphs

In some places it’s still February, in others it’s already April.

Time passes, eternal counting: year after year, century after century...

In everything - his unhurried pace, his pitch-black running.

There are twenty-five weeks of joy and sorrow in a year.

I'm twenty-five weeks into February, and twenty-five weeks into April.

For twenty-five weeks, centuries pass into the fog.

My sonorous farce is flying somewhere towards the clouds.

M. Shcherbakov

The result of this example is shown in Fig. 7.1.

Rice. 7.1. Indentation on a web page when using paragraphs

As can be seen from the figure, when using the tag

There are too many spaces between paragraphs. You can get rid of them if you add a tag at line breaks:
. Unlike a paragraph, a line break tag
does not create additional vertical spaces between lines and can be used in almost any text.

Thus, the text of example 7.1, taking into account line breaks, will be transformed as follows (example 7.2).

Example 7.2. Tag

Almond trees are blooming in some gardens, while snowstorms are blowing in others.
In some places it’s still February, in others it’s already April.
Time passes, eternal counting: year after year, century after century...
In everything - his unhurried pace, his pitch-black running.
There are twenty-five weeks of joy and sorrow in a year.
I'm twenty-five weeks into February, and twenty-five weeks into April.
For twenty-five weeks, centuries pass into the fog.
My sonorous farce is flying somewhere towards the clouds.

M. Shcherbakov

The result of the example is shown in Fig. 7.2. It can be seen that the distance between the lines of text has decreased and it has acquired a more compact appearance.

Tags defining paragraph, space, HTML block and paragraph

Let's look at it in detail HTML blocks and paragraphs as elements of a web page.

• HTML paragraph defined by tags.
• HTML paragraphs usually contain text, formatting tags, and images.
• HTML paragraph cannot contain block elements such as headers
  

  -

  , block
  and other paragraphs.
• HTML block defined by tags
  .
• HTML block can contain any elements of a web page, in any quantity.
• HTML blocks Great for web pages and easy to manipulate.

Consider the code below:

Result:

We can see that HTML paragraphs have vertical indentations - this is a feature of tags. HTML blocks

such spaces are not created because they do not carry any load, but are simply containers.

Tags cannot contain other or

. Linear elements can be placed inside, such as or, for example, tags responsible for text formatting.

Tags and , in principle, are the same thing, but the W3C consortium recommends using small letters. In the new version of HTML, as in modern XHTML, the use of capital letters when writing tags is prohibited.

Block

can contain as many as you like and other elements HTML document. It is ideal for layout, but more on that later - in the CSS tutorial lessons.

HTML space from special characters table

HTML space allows you to increase the distance between words and characters.

As for the spaces between words, no matter how many there are in Notepad, that is, in the source code, only one will be displayed on the web page. If you need to increase the distance, use the space character from the symbol table. You may ask: Why are these encoded meanings of ordinary characters needed? - I will answer: They are needed to display, for example, such brackets< >. In other words, to display tags on the screen, in my editor I write: . Tags , as we remember, convert the text to monospace (typewritten).

Ways to display an HTML paragraph

Examples of paragraph output.

To give it a specific style, you need to place the text in the appropriate container.

All formatting tags can be divided into three groups:

1. Title tags ( h1-h6).

2. Body text design tags ( , , ,

, 
 etc.).
3. Grouping tags ( 

, 

, 

)

Title tags
They turn regular text into a heading of a certain level.  Tag 

 creates a first-level heading - the largest and most important (usually the title of the article on the page), 

 is responsible for the sixth level heading - the smallest and most inconspicuous.  These tags are important for both users and search engines - both of them love headings with subheadings.  The hierarchy of levels must be observed, that is, 

 have to go 

, and not the other way around.

To understand how this works, enter the following code into the html file:
 
First level header
Second level heading
Third level heading
Fourth level heading
Level 5 heading
Level six heading

It will look like this in the browser:
Body text design tags
Allows formatting at the character level.  Let's look at what you can do with them.
Bold font
Needed to focus attention on the text.  It is also important for search engines; they can highlight keywords.
Responsible for bold style tags 
 And .

Superscript and subscript
They can be used in formulas, equations, and the designation of certain quantities.
The tag is responsible for creating subscripts 
, for the top ones the tag is used 
.
X 1=32 m 2
Downsizing
If you need to make the text one less than the set value throughout the page, then you need to use the tag 

Plain text. Reduced text.
Underscore
This type of highlighting can be used to indicate changes made to a document or simply to draw attention to the text.
Plain text. Underlined text.
Strikethrough
You can cross out information if it has already lost its relevance.  This is the tag for this 
.
Italics
It is needed to focus attention on the text, and can be created with a tag 
 or 
.

Computer text input
It happens that you need to add the source code of a program and the results of its work to a web page.  To make it easy to visually distinguish different parts of the text from each other, HTML developers introduced tags of this group.
Into container 
 contains the program code, and its variables are highlighted with the tag 
, and the result of execution is 
.  Container 
 contains text that the user must enter from the keyboard when working with the program, and everything that is enclosed in tags 
, preserves the original format, including extra spaces and line breaks.

  Thus a, b, c, Here result of program execution , and this is user entered text 
displayed something like this
.

Quotes and definitions
The program code will look like 
 Thus 
, the variables are designated as follows: 
 a, b, c 
, Here 
 result of program execution 
, and this is 
 user entered text 
.  Keep original formatting 
 displayed something like this 

.

 
Quote in the blockquote tag.
Quote inside cite container.Short quote tagged q.Dedicated definition.Abbreviation (NPO, IP).

General example
To better understand what each tag is responsible for and how it works, look at the following code and the result of its execution.
 
Fatty text can be made into tags strong And b.  Behind italics answer em And i.
Tags sub And sup used to create lower(x 1…x n) And upper (42=16) indexes. Del crosses out, ins - emphasizes.
Tags code, kbd, var And samp are rarely used and are needed to display program listings
 abbr needed to indicate abbreviations ( HTML).  The blockquote, cite and q tags are used to format quotes ( The sky was already breathing in autumn)
The pre tag preserves the original text formatting without removing spaces or line breaks.

The browser interprets this code as follows:

Grouping tags
It is necessary that the text does not flow in one continuous line, but is broken into logical components.
Inside the tags is a paragraph.
 
First paragraph
Second paragraph


Tag 

 moves to the next line within a paragraph (there will be no indentation before the line).

 allows you to draw a horizontal line.  You can use it to separate text more clearly.  Attributes width, size, color, align And noshade set the width, thickness, color, alignment and lack of 3D effect of the line, respectively.
 
Line above line. 
Line below line.









 "Lorem IPSUM Dolor Sit Amet, Consectur Adipisicing Elit, Sed Do Eiusmod Tempor Incididunt Ut Labore et Dolore Magna Aliqua. Ut Enim Ad minim Veniam, QUIS NOSTRUD EXERCITATION ULLAMCO Laboris NISI UT Aliquip Ex Ea Commodo Consequat. Duis Aute Irure Dolor in Repreheendit in Voluptate  "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."  Paragraph 1.10.32 "de Finibus Bonorum et Malorum", written by Cicero in 45 AD.  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit a ut fugit, sed quia  consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam  , quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? ?"  English translation 1914, H. Rackham "But I must explain to you how all this mistaken idea of ​​denouncing pleasure and praising pain was born and I will give you a complete account of the system, and explain the actual teachings of the great explorer of  the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there  anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which oil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise,  except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"  Paragraph 1.10.33 "de Finibus Bonorum et Malorum", written by Cicero in 45 AD. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum qui dem  rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet  "ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."  English translation 1914, H. Rackham "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble  that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour,  when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will  frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."