Tags defining paragraph, space, HTML block and paragraph
Consider in detail HTML blocks and paragraphs as elements of a web page.
- HTML paragraph defined by tags.
- HTML paragraphs usually contain text, formatting tags, images.
- HTML paragraph cannot contain block-level 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, they are easy to manipulate.
Consider the code below:
Result:
We can see that HTML paragraphs are indented vertically - this is a feature of tags. HTML blocks
Tags cannot contain other or
Tags and , in principle, are the same thing, but the W3C consortium recommended using small letters. AT new version HTML, as in modern XHTML, the use of capital letters when writing tags is prohibited.
Block
HTML space from special character table
HTML space allows you to increase the space 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 ask: Why do we need these encoded values of ordinary characters? - 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
Paragraph output examples.
Hello! Let's continue to consider the basics of website programming. It is hard to imagine at least one of them, in the code of which the paragraph tag would not occur. Today we will consider how to write it correctly and a description of several additional actions with the text.
Example
Let's look at an example of how to make a paragraph in HTML code.
One or more offers.
A prerequisite is the presence of an opening and closing tag. By the way, everything can be done directly in Notepad, just then you will need to save the file in the appropriate format.
Formatting
Quite often I notice that people are interested in how to make a red line. For a particular paragraph, it's very simple.
Enabling these options will indent the first line by 15 pixels from the left edge. If such changes should be applied to all P tags, then in css file, which connects to the pages of the site, you can write the code shown below.
Personally, I don't usually make red lines when editing code in notepad or another editor.
I just include padding between text blocks. To do this, in CSS you need to write special options.
p(margin-bottom:25px;)
If you use this design, then after each paragraph an indent of 25 pixels will appear.
In fact, there are a lot of options for working with HTML and various styles. I have described only a few of them, it is very difficult to cover everything in one article.
Want to know more? You may find my previous posts on the following topics helpful:
On this I will complete the article and, I think, now it will not be difficult to make paragraphs in HTML and arrange them beautifully with the help of special tags.
I wish you great success in learning to program. By the way, have you thought about making money on informational non-commercial sites? He simply provided great information for his readers at.
Normal work and finances online are the key topics of this blog. You can familiarize yourself with individual prospects online right now from the published materials. I continue to prepare and publish new, and most importantly, really useful content. Subscribe to Workip updates on your email. Until communication.
- in the process of creating a site, we have to work a lot with text blocks, or text phrases. Once, I needed to add a text phrase, so that before this text phrase there was some indenting text from the edge of html the block in which the given text was added.
So, the first way is the most natural and simple. To indent before the text, add before the text html code spaces - You can add html space code in any html editor.
I give an example of a working code for setting an indent for text using a space code:
HTML text indent left, use the space code
In this example, before the text we have selected, the space code is - added four times, as a result, we get the indent we need.
We know that the space code is processed by any browser. Therefore, by adding the required number of spaces before the text, you can get the necessary indentation for the text.
This method is good in that it will be guaranteed to be worked out by any browser.
But this method there is a significant drawback. In order to make an indent for the text large enough in length, in the html code, you will have to add before the text a large number of space characters, which may look ugly, unwieldy, and unprofessional.
One of the solutions to this problem is next way indent jobs.
HTML text indent method two - this method is based on the properties of the blockquote tag. This tag sets an indent of about 40 pixels left and right for the text placed in it. In addition, the indentation is set at the top and bottom. html example The code for using this method is given below:
on the left, use the tag blockquote
As you can see, this method of setting an indent for text is very easy to use, but this method also has a significant drawback. Indentation that sets the tag blockquote, is fixed and always equals the same value - 40px.
To correct the situation, and when adding html indent and for text to be able to set any value, we will use the third method.
HTML text indent, method three.
Here we will use the text-indent parameter property of CSS Cascading Style Sheets.
If we open the CSS reference, on the text-indent properties page, we will see that with the help of text-indent, we can set the indentation of the first line or the first paragraph of any block of text.
We are looking at an example with a short text block, so the text-indent properties are quite suitable for our case.
Below is the html code that indents text using text-indent. The example shows that by setting text-indent to different argument values, we can change the amount of text indent:
HTMLindenttext, works css style - text indent
In my opinion, this way of setting an indent for text is the most optimal, but, nevertheless, let's consider another way to set an indent using images.
HTML text indentation, the fourth way - here we will use an image to set the indentation.
As a working example, let's immediately consider the html code that demonstrates the operation of this method:
on the left, use the image
From the above example, it is clearly seen that by changing the width of the image, we can change the position of the text, that is, set the desired indent for the text.
As an image, you can use an image whose width and height are equal to one pixel. So that the image we are using is not visible on the page, we will set the color for it exactly the same as the background of the site page.
In my opinion, the above methods of setting indents for text are quite enough to organize the indent you need in any situation when adding content to a page on your sites.
Any text has its own unique structure: books are divided into parts, sections and chapters, newspapers and magazines have separate headings and subheadings, which, in turn, include text fragments that also have their own structure: paragraphs, indents, etc.
The text placed on web pages is no exception, it must also have a logical structure understandable to every user. After all, a lot depends on how convenient and simple the text on the page will be perceived: first of all, what impression the visitor will have about your site.
To create such structural units of text as paragraphs, the tag is used in HTML documents.
, which separates text fragments with a vertical indent (an empty line is added before and after a paragraph).
Note: by default, the spacing between paragraphs is 1em (em is a unit of measure equal to the height of the font), that is, the spacing between paragraphs directly depends on the font size.
To change the indents between paragraphs without changing the font size, you can use CSS property margin .
Don't forget the closing tag
Most browsers will render an HTML document correctly even if you forgot the end tag.
Paragraph
Another paragraph
This code will work in most browsers, but don't rely on it. A forgotten closing tag can lead to unexpected results or errors.
Red line
What is a red line? By definition, this is the initial line of a paragraph, which used to be highlighted in red (hence the name). Before printing was invented, books were written by hand - the chapter or part of the text, the first word or letter was written in red paint. This is how the concept of “writing from the red line” appeared - this means the beginning of a new thought, chapter or part.
However, when creating web pages, the design of the red line is used quite rarely, despite the fact that it allows you to perceive the text visually with much greater convenience, which is quite important for the traditional reader - not everyone is comfortable reading the electronic version of the text.
To add a red line to your paragraphs, you need to use the text-indent CSS property, which allows you to indent the first sentence:
Try »
In the example above, the first line of every paragraph on the page will start with a 25px indent. The example below demonstrates how you can set the red line to only a specific paragraph on a page.
As in any real art, there are no trifles in good texts, to which some include the red line, believing that its use is not so important. However, one must understand that any comma carries both an aesthetic and semantic load, and is not only a tribute to the rules of grammar - this also applies to formatting.
Try »Note: it is not necessary to set the padding to 25px, you can choose optimal size indent themselves, also using the text-indent property it is possible to make a line protruding above the rest of the text, for this you need to set a negative value for the property (for example: -30px).
Task
Add an indent to the first line of each paragraph.
Decision
When it comes to setting paragraph indentation, also known as redline, it's best to use the text-indent style property. Its value determines how much to shift the text of the first line to the right from starting position. The width of the text block does not change and remains set initially. The amount of padding can be specified in pixels, percentages, or other available units (example 1).
Example 1: Indenting the first line
HTML5 CSS 2.1 IE Cr Op Sa Fx
The Babylonian Pandemic, according to biblical tradition, is the failed attempt of King Nimrod to build a pillar in Babylon as high as the sky. God, angry with people for their reckless desire, decided to punish the builders: he mixed their language so that they no longer understood each other, were forced to stop construction and gradually scattered around the world. From here, as the ancients explained, the difference in languages \u200b\u200bwent.
In the usual concept, Babylonian pandemonium means disorder, confusion with a large crowd of people.
The result of this example is shown in Fig. one.
