Tag new paragraph. Separating headings from paragraphs or structuring text on an html page. like a tag Use the align attribute to align text. When using this attribute, everything is the same as with the Numbered and Bulleted Lists tag in HTML

Task

Add an indent to the first line of each paragraph.

Solution

When you need to set paragraph indentation, also called indentation, it is best to use the text-indent style property. Its value determines how much to move the text of the first line to the right from its original position. The width of the text block does not change and remains set initially. The amount of indentation can be specified in pixels, percentages, or other available units (example 1).

Example 1: First line indentation

HTML5 CSS 2.1 IE Cr Op Sa Fx

The Babylonian pandemonium, according to biblical legend, is the failed attempt of King Nimrod to build a pillar in Babylon as high as the sky. God, angry with the people for their reckless desire, decided to punish the builders: he confused their language so that they ceased to understand each other, were forced to stop construction and little by little scattered throughout the world. From here, as the ancients explained, came the difference in languages.

In the usual concept, Babylonian pandemonium means disorder, confusion with a large crowd of people.

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

Table of contents:

Hello, dear blog readers! Today we will talk about structuring text on web pages, the features of its display, and consider how to break the text into separate logical fragments: headings, paragraphs, lists.

There are many tags for working with text in html, but first we need to talk about some features of displaying text in the browser. First, any number of spaces, tabs, and line breaks in a row appears as a single space. Those. Positioning text using spaces and tabs will not work.

For example, these lines on a web page will be displayed the same despite their different spellings:

Welcome to our website!

Good
welcome to our website!

Welcome
to our
website!

The exception is tag

, within which all spaces and hyphens are displayed as is.

Secondly, the text takes up the width of the browser window.  If a long line of text is wider than the browser window, line breaks will be automatically inserted at spaces or hyphens.  If there are no spaces or hyphens in the line, and the line does not fit the width of the window, then a horizontal scroll bar will appear in the browser.
Now let's move on to considering the structural elements of text in html markup.
Paragraphs in HTML
Typically, blocks of text are separated by paragraphs.  This makes it easier to read large chunks of text.  The HTML language for creating a paragraph contains a pair tag 

.  The syntax for creating paragraphs is as follows:
This is the first paragraph.


And this is the second paragraph

Paragraphs on an HTML page are separated by small indentations from the previous and subsequent elements.  Tag 
Also a block element.  I wrote about block elements in the article “”.  Let me remind you that block elements are characterized by the fact that they occupy the entire available width of the HTML page, the height of the element is determined by its content, and it always starts on a new line.
Let's look at an example of using paragraphs on a web page.  Let's open a text editor, type the HTML code and save it with the html extension:














Website about cars.




Car classification


Passenger car;


Cargo;


SUV;


Buggy;


Pickup;


Sports;


Racing.





When you open this file, you will see something like this:
For now, our page contains only paragraphs.
To align text in a paragraph tag 
Supports attribute align. It can take one of four values:
left— text alignment to the left;
center— text alignment to the center;
right— text alignment to the right;
justify— width alignment, i.e.  align text simultaneously to the right and left.  To do this, the browser places spaces between words.
By default, the align attribute is left.  An example of using the align attribute:

 This text in a paragraph on an html page will be left aligned!


 This text will appear in the center of the page in the browser!


 This text will be right aligned!


 And the browser will align this large piece of text in width, i.e.  simultaneously on the right and left edge!  To do this, the web browser will insert additional spaces between the words and the paragraph will take on a neat appearance that is easy to read!

And this is how it will be displayed in the browser:

Headings in HTML
Headings are used to highlight sections of text on a web page.  There are six levels of headings in html.  The topmost level is level 1 - tag 
, and the lowest is level 6, tag 
. Tags 
 — 
 are block-level page elements.  The contents of the first level heading are displayed in the largest bold font, and the last sixth level headings are displayed in the smallest font.

The syntax for creating headers is:














 First level header 



 Second level heading 



 Third level heading 



 Fourth level heading 



 Fifth level heading 



 Level six heading 






Result:

Headings also play an important role in website promotion, since search engines add ranking to the text if it is located inside the heading tag.
Let's add headers to our page:
Website about cars.


Welcome to our automotive website.  Here you will find many interesting and useful articles about cars, their technical characteristics and features.


In scientific language, a car is:


A mechanical motorized trackless road vehicle with at least 4 wheels.


Car classification


Cars are of the following types:


Passenger car;


Cargo;


SUV;


Buggy;


Pickup;


Sports;


Racing.

And we see that on our page, in addition to paragraphs, there are headings in large bold font:

Tags 
-
, like the tag 
Use the align attribute to align text.  When using this attribute, everything is the same as with the tag 
Numbered and bulleted lists in HTML
A list is used to form a numbered or unnumbered list of any phrases or meanings.  A list with numbered items is called numbered, and with unnumbered items - marked.
In bulleted lists, items are marked with markers that are placed to the left of the list items.  The Web browser displays the list indented to the left and automatically places the necessary bullets or numbering.  Lists and their items belong to block elements of a Web page.
Any list in HTML is a set of elements, each of which is placed inside a tag 
.  Then all the elements are placed inside the tag 
, if you need a bulleted list, or inside a tag 
, if you need a numbered list.












Bulleted list: 



first point.


second point.


third point.
 

Numbered list: 



the first item in a numbered list.


second item in a numbered list.


third item in the numbered list.







And they look something like this:

Bulleted lists can use different types of bullets.  To determine the type of marker in a tag 
is added type attribute if we want to set the type of marker for all list elements or add the same attribute to the tag 
if you need to set the type of marker for a specific element.  The type attribute can take the following values:

disc — filled circle;
circle - circle;
square - square.
By default, the type attribute is disc.  Usage example:


Point 1


Point 2


Point 3






Point 1


Point 2


Point 3






Point 1


Point 2


Point 3



Browser display:

A numbered list also supports a type attribute, which can be used to specify the following bullet types:
A - capital Latin letters;
a — lowercase Latin letters;
I - capital Roman numerals;
i — lowercase Roman numerals;
1 - Arabic numerals.
By default, in a numbered list, the type attribute sets the markers to Arabic numerals.  In addition to the type attribute, a numbered list supports start attribute, which specifies the number from which the list will begin.  In the HTML5 specification, numbered lists now have reversed attribute, which reverses the numbering order .
 Those.  instead of 1, 2, 3, the list will be numbered 3, 2, 1. But the reversed attribute is still supported by a very small number of browsers.
Lists can be placed inside each other, creating nested lists. Nested list placed inside elements 
external list:



first point.


second point. 



the first item in the nested list.


second item of the nested list.


third item of the nested list.






third point.



And in the browser:

In HTML there is a third type of list - which is a list of terms and their definitions.  This list is specified using a paired tag 
.  “Term - definition” pairs are placed inside it.  Terms are enclosed in a paired tag 
, and definitions - in a paired tag 
:



Term 1


Definition 1


Term 2


Definition 2



Browser display:

There is a car classification paragraph on our Web page.  Let's make this classification using a bulleted list:


Passenger car;


Cargo;


SUV;


Buggy;


Pickup;


Sports;


Racing.



And let's see the result:

Horizontal lines
To separate or additionally highlight blocks of text in HTML, there is a single HR tag - horizontal line.  This is what it looks like in html code:
First paragraph




Second paragraph

And this is how it is displayed:

The HTML horizontal line stretches horizontally across the entire width of the Web page and is one or two pixels thick, depending on the browser used.
Using attributes you can set the appearance of a horizontal line.  Tag 
supports the following attributes:

align — determines the alignment of the line;
color — sets the line color;
size — sets the line thickness in pixels;
width - sets the line width in pixels.
Let's insert a horizontal line into our WEB page.  Let's make it green, 1 pixel thick and 320 pixels wide:
Website about cars.


Welcome to our automotive website.  Here you will find many interesting and useful articles about cars, their technical characteristics and features.


In scientific language, a car is:


A mechanical motorized trackless road vehicle with at least 4 wheels.




Car classification


Cars are of the following types:




Passenger car;


Cargo;


SUV;


Buggy;


Pickup;


Sports;


Racing.



The result will be something like this:


Paragraphs and headings
The main way to present information on the Internet is text; it is text information that most people look for, and it is text words and phrases that are used by special search engines to carry out this search.  Therefore, whether the visitor will linger on the site or go looking for a more convenient source of information will largely depend on how well and conveniently the text on the pages is structured.  After all, you will agree that reading a continuous text is much more difficult than reading one divided into paragraphs and thematic subsections.  In HTML, several tags are responsible for this structuring of text, and we will talk about them in this lesson.
Tag 
Or we break the page into paragraphs (paragraphs)
If you remember, then with the tag 
You have already met in this textbook, well, now it’s time to study it completely.  So the tag 
Responsible for creating paragraphs in an HTML page and is block element.  I hope that you have already remembered what block level tags are.  Yes, but in addition to the fact that it creates line breaks in front of and after itself to the beginning, it also sets small margins (external indents) of empty space above and below itself, due to which the text is visually divided into paragraphs.  The height of these fields is equal to one empty line.
 
Now the most important thing is the tag 
Can only contain row-level (inline) elements and nothing else.  Therefore, for example, it cannot contain another paragraph, since it itself 
Is a block element.  Well, we will return to this more than once.  By the way, any text without tags is also considered an inline element.
Example of paragraphs in HTML

 






First paragraph.
Second paragraph.


Result in browser
First paragraph.
Second paragraph.
In general, the closing tag
 It is not necessary to set it - as soon as the browser encounters the next paragraph, it will automatically close the previous one.  But, as I already said, it is better to close all optional tags.

At the tag 
There is one optional attribute, align , which sets the position of the text within the block.  that is, you can have each line of a paragraph centered on the page or pressed to the right side rather than the left as usual.  The only problem is that the align attribute is not in the strict version of HTML and, perhaps, modern browsers will no longer support it in the near future.  So what should we do?  And we will do the following: in one of the upcoming lessons I will show you a universal method with which you can change the position of content not only inside paragraphs, but also inside any block elements of an HTML page (headings, tables, lists, etc.).  But the main thing is that all browsers understand it and will understand it.
Tags 

 - 
or HTML page headers
Headings play a very important role in HTML; using them, you can divide the text of a page into logical parts, emphasizing the importance of each, which allows visitors to quickly find the information they need.  In addition, search engines (Yandex, Google, etc.) give more “weight” to the text in headings.  There are six types, where 
the most important heading (first level, top), and 
least significant (sixth level, lower).  For example, 
could be the page title, 
- its sections, 
- subsections, etc.

Heading tags are block elements and, like paragraphs, can only contain line-level tags and text.  Browsers make heading text bold, different sizes (depending on the tag) and add white space margins at the top and bottom, again like paragraphs.
Syntax for writing headers in HTML

 
First level header
Second level heading
Third level heading
Fourth level heading
Fifth level heading
Level six heading
Title tags have two optional attributes - the familiar old-fashioned align and the title attribute, which displays a tooltip when you hover over the title.  As with paragraphs, we won't use align , but will learn another way soon.
Example of using headers in HTML

 






First level header
Paragraph.
Second level heading
Paragraph.
Paragraph.


Result in browser
First level header
Paragraph.
Second level heading
Paragraph.
Paragraph.
Homework.
In this task you will need to create a page simulating a small article, write any text you like.  You can immediately see the result of the example so that you have an idea of ​​what needs to be done.
Open the page from the previous lesson in an HTML editor.
Using Headings 

, 
And 
create the title of the article, its two sections and three subsections in the second section.
Make sure that when you hover your mouse over the title of an article, the corresponding inscription is displayed.
Write one paragraph for each section and subsection.

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, 

 must 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
Fifth level 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 type
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.  For 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.

C/C++ fundamental types like int , double etc. Is atomic, for example, thread-safe?
are they free from data races;  that is, if one thread writes to an object of this type and another thread reads from it, is the behavior well defined?
If not, does it depend on the compiler or something else?
 
 4
 


 
 57
 


 
Peter Mortensen
 
4 answers:
you can use std::atomic instead or std::atomic  .
Note: std::atomic was introduced with C++11, and I understand that before C++11, the C++ standard did not recognize the existence of multithreading at all.

 
execution of program 5.1.2.3
 
When abstract machine processing is interrupted by a signal, the values ​​of objects that are not atomic non-locking objects, nor of type volatile sig_atomic_t, are not specified, nor is the state of the floating-point environment.  This value of any object modified by a handler that is neither a lock-free atomic object nor of type volatile sig_atomic_t becomes undefined when the handler exits, as does the state of the floating-point environment if it is so modified by the handler and is not restored to its original state.


 
5.1.2.4 Multi-threaded executions and data races
 
two expression evaluations conflict if one of them modifies a memory region and the other reads or modifies the same memory region.
 
[several pages of standards - some paragraphs explicitly related to atomic types]
 
program execution contains data races if it contains two conflicting activities on different threads, at least one of which is not atomic and neither occurs before the other. what are the results of data race in undefined behavior.

the processor may also reorder memory accesses according to that processor's memory ordering constraints.  Memory ordering restrictions for the x86 architecture can be found in the Intel 64 and ia32 Architectures Software Developer's Guide section 8.2, starting on page 2212.
primitive types (int, char etc) are not atomic
I hope this explains Why primitive types are not atomic.
 
Additional information I haven't seen mentioned in other answers so far:
if you are using std::atomic , for example, bool is actually atomic on the target architecture, then the compiler will not generate redundant fences or locks.  The same code will be generated as for a simple bool.
in other words, using std::atomic only makes the code less efficient if it is actually required for correctness on the platform.  So there's no reason to avoid it.