Figure: 1.8. The browser window showing the result of the file shown in Listing 1.8

Very often it becomes necessary to place on a Web page a text prepared in advance using a text editor that has already formatted the text on its own. In this case, the format of the text, its hyphenation and placement directly depend on the length of the line in characters, which was set in this text editor... If you place text on a Web page using conventional means, this formatting will naturally be broken. Therefore, a custom tag was introduced for such preformatted fragments. This tag<рrе> has a width parameter, the value of which is the length of the string in characters. Naturally, it is advisable to force the installation of exactly the font that was used to format the text before using this tag. So, to insert the preformatted text, we can use the following piece of code:

text.

IN this example we specify that the text should be displayed assuming that the string is sixty characters long. At the same time, the rules for "collapsing spaces" do not apply in the preformatted text either. The fact is that when a browser encounters several consecutive spaces in the normal text of a Web page, it collapses them into one space. And preformatted text does not undergo such a transformation, which allows you to preserve its formatting, which in the simplest text editors is carried out using white space characters. In HTML, by the way, the tab character is also considered a whitespace character.

It should also be noted that HTML provides the ability to display upper quotation marks using tags, which are usually used to highlight direct speech and some quotes. A tag is provided for quotes with its final twin ... And to frame direct speech, tags are usually used and... Moreover, the tag has the cite parameter, the value of which is the network address, also called the URL, of the Internet resource on which the quoted text was originally located. And together with the tag usually the lang parameter is used, the value of which is the code designation of the language, according to the punctuation rules of which the bounding quotes are placed. It's no secret that in different languages \u200b\u200bit is customary to use different quotation marks.

Also worth mentioning is the problem of hyphenation. Typically, Web page builders don't even think about this problem, and browsers don't bother with paginated word wrapping. If the word does not fit on the line, it simply wraps to another line. But this is not the only correct way to display text. A situation may well arise when you need to display text using hyphenation. HTML provides two types of hyphenation - explicit and the so-called "soft". Explicit hyphenation is created using an en dash character, usually replaced by numeric text substitutions "-" However, explicit hyphenation is inconvenient because when the browser viewport is resized, the line length may change, and the hyphenation still remains visible. Even if it is in the middle of the line. Therefore, most often they still use "soft" hyphenation. They are created using the "-" text substitution. At the same time, soft hyphenation characters are not visible in the text, and only if any word in which these characters were inserted does not fit entirely in the line, it is wrapped with a breakdown into syllables, according to the inserted "soft" hyphens. And only one of the soft hyphenation symbols in this word becomes visible.

Also, HTML with its tags allows you to display superscripts and subscripts. A couple of tags are used to create a superscript ^and, and the subscript must be tagged _and... Let's look at an example of using these tags.

Listing 1.9

"http://www.w3.org/TR/html4/strict.dtd"\u003e




<р>Water is H ₂0

How the browser renders the indexes is shown in Fig. 1.9.

Figure: 1.9. The browser window showing the result of displaying the file in Listing 1.9

Also to text design refers to the horizontal lines that often separate significant portions of the textual content of Web pages. A line is inserted into the text of an HTML document using a tag

The align parameter allows you to specify the horizontal alignment of the line. The parameter can have one of three preset values: left, right and center, which press the horizontal line to the left or right edge of the viewport, or center it, respectively. The default is center. If the tag

Listing 1.10

<р>This is a regular line displayed by default.

What a similar HTML document looks like when viewed with a browser is shown in Fig. 1.10.

And on this, perhaps, we can end the consideration of the possibilities of text formatting inherent in HTML.

Figure: 1.10. Browser window showing the result of displaying the file in Listing 1.10

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

All formatting tags can be divided into three groups:

1. Header tags ( h1-h6).

2. Tags for the design of the main text ( , , ,

, 
 etc.).
3. Grouping tags ( 

, 

, 

)

Header tags
Turns 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), 

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

 have to go 

, and not vice versa.

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

It will look like this in the browser:
Body Text Decoration Tags
Allows formatting at the character level. Let's consider what you can do with them.
Bold font
Needed to focus on the text. It is also important for search engines, they can highlight keywords.
Responsible for the bold type of tags 
 and .

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

Plain text. Reduced text.
Underline
This type of highlight 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 the information if it has already lost its relevance. The tag is intended for this 
.
Italics
It is needed to focus attention on the text, and can be created with a tag 
 or 
.

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

   in this way a, b, c, here program execution result , and this is  user entered text 
displayed like this
.

Quotes and definitions
The program code will look like 
in this way 
, variables are designated as follows: 
a, b, c 
, here 
program execution result 
, and this is 
user entered text 
... Retaining original formatting 
displayed like this 

.

 
Quote in the blockquote tag.
Quote inside cite container.Short quote with q tag.Highlighted definition.Abbreviation (NGO, IP).

General example
To better understand what tag is responsible for and how it works, look at the following code and the result of its execution.
 
Fatty text can be made with 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\u003d 16) indices. Del crosses out, ins - emphasizes.
Tags code, kbd, var and samp rarely used and needed to display program listing
 abbr is needed to denote abbreviations ( Html). The blockquote, cite and q tags are used to style quotes ( Already the sky was breathing in autumn)
The pre tag retains the original text formatting without removing spaces or line breaks.

The browser interprets this code like this:

Grouping tags
We need the text not to go in one continuous line, but to be broken into logical components.
The tags contain a paragraph.
 
First paragraph
Second paragraph


Tag 

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

 lets you 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 no 3D effect of the line, respectively.
 
Line above line. 
Line below the line.

Table of contents:


Hello dear blog readers. In the last article I looked at block tags for structuring text. And today we will consider registration html text-pages, i.e. Consider tags that will help highlight important pieces of text in order to attract the attention of visitors. We will also learn how to insert special characters into the page.
Selection of fragments of text. Strong and em tags.
Most important hTML tool used to highlight important fragments of text is tag 
... It makes the text bold. The tag can also make text in bold. ... Though tags  and  are similar in their action, but they are not equivalent. Tag  is a physical markup tag and just sets the text to bold. AND  is a logical markup tag and marks the importance of the selected text. Tag  is more important when search engine optimization the site and its contents carry more weight to search engines.

For italic selections of text fragments are applied tags  and 
... The content of these tags is drawn at an angle to simulate a handwritten font. 
 When developing websites, tags are often used to highlight text  and than tags  and ... Example of using tags , ,  and  for text formatting:


Html 
 (from the English. 
HyperText Markup Language 
 - "hypertext markup language"; pronounced h-ti-em-el) - standard 
document markup language 
 in The world wide web.

And it looks like this:
Let's apply tags  and  on our page from previous articles:

A site about cars.


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


Scientific language 
car 
 this is:



Mechanical motor trackless road vehicle with at least 4 wheels 
.




Car classification


Cars are of the following types:




Passenger;


Cargo;


SUV;


Buggy;


Pickup;


Sports;


Racing.



Result:

Except elements , ,  and  there are many tags in HTML to style the text of an html document. I quote short list such tags:

 - Abbreviation... displayed underlined in the browser by default;
 - Acronym... In contrast to the abbreviation, it stands for an established abbreviation. Displayed underlined;

 - small quote, displayed in italics;
 - a fragment of the program source code, displayed in monospaced font;


- marks the text, remote from a web page, displayed strikethrough;

 - means new term in a document, displayed in italics;

 - used to highlight text that has been added to new version the document is displayed underlined;

 - used to highlight data entered from the keyboardor for key names, displayed in monospaced font;

 - used to highlight quotes, the content is automatically quoted;

 - denotes data output by any program, displayed in monospaced font;

 - actually the same as , only is a physical markup tag, and  - logical. displayed in monospaced font;


 - selection variable name in the source code of the program, displayed in italics.
And this is how they are displayed in the browser:


Line break
As we learned from previous articles, block elements are used to translate strings, in particular the tag 
Highlighting paragraph.
Let's put copyright information on our web page:
All rights reserved. year 2013.


A site about cars.

Result:

And as we can see the lines are separated by too large a distance, as if they have nothing to do with each other. In this case, it is better to use tag 

... This tag sets line breakbut unlike the tag 
Does not indent the line. Let's apply the tag 
 on our page:
All rights reserved. year 2013. 

A site about cars.

Much better this way: 


Therefore, in some cases, when formatting text html page don't forget about the tag 
.
Insert special characters. Literals.
Sometimes you need to insert a special character into a web page, for example, such characters:<, >, ©. To insert special characters HTML uses literals. Is a sequence of characters that starts with the character &
 and ends with the character ;
, and between them is a sequence of letters - character code... So for inserting symbols<, >, © the following literals are used respectively:<, &rt; и.

All rights reserved. year 2013. 
A site about cars.

Now the page looks really cool:

 Below are the names of the most commonly used symbols:
Non-breaking space -

Left double quote - “
Left angle quotation mark - "
Left apostrophe - '
Right apostrophe - '
Right double quote - "
Right angle quotation mark - & raquo.
A special place among these symbols is occupied by the "non-breaking space". If it is necessary that the hyphenation is not performed in some place of the text line, then insert a "non-breaking space" there. In addition to the non-breaking space literal, you can use paired tag .
 The nobr tag notifies the browser to display text without hyphenation. However, the use of this tag can lead to the appearance of a horizontal scroll bar in the browser window and the user will have to scroll the text horizontally to see it in full, which is very inconvenient. Also, this tag is not part of the HTML specification, which leads to invalid code. Therefore, I advise you to use this tag only as a last resort when decorating the text of the html page.

HTML also allows you to insert any character that is supported by the Unicode encoding. For this, a literal with the following structure is used: <код символа>;
... You can find out the code of the desired symbol either on the Internet, or you can use the utility "Table of symbols"shipped with Windows. You can run it like this: "Start-\u003e All Programs-\u003e Accessories-\u003e System Tools-\u003e Symbol Table" or press WIN + R and type in the window execute charmap. The Symbol Table window appears.

If you select a character in the list of symbols that cannot be entered from the keyboard, an inscription of the form will appear on the left side of the status line "Key: Alt +<код символа>". Take this character code and insert it into the literal. For example, let's insert the © symbol into our page using the symbol code. We select this symbol in the “Symbols table” and in the status bar on the left side we see the inscription “Key: Alt + 0169”. We take the code "0169" and in our web page, instead of the literal, insert ©
:
All rights reserved. ©
 year 2013. 
A site about cars.

And we make sure that everything is displayed correctly on the page.
That's it for today. As always, I'll summarize:
for line break apply without indentation  tag 

;
and to insert special characters use literals kind: &<имя символа>;
 or &<код символа>
.
In the next article I will tell you how to insert pictures into a page, so I advise
HTML tags - the basis of the HTML language. Tags are used to delimit the beginning and end of elements in markup.
Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and end (closing) tag. The start and end tags contain the tag name.
All HTML elements are divided into five types:
empty elements —  ,  , 
 ,  ,  , 
 ,  ,  , 
 

Used for storage additional information about the page. This information is used by browsers to process the page, and search engines - to index it. In the block  there may be multiple tags  , since, depending on the attributes used, they carry different information.
 

Measurement indicator in the specified range.