To make our WEB page look more presentable, we will divide the text into paragraphs and select the title. HTML has 6 levels of heading for sections of a document, numbered from 1 to 6. Headings are declared with a pair of tags with appropriate level numbers, for example,
- the heading of the first level section, and - the heading of the sixth level section. Titles differ from ordinary text in the size and width of the letters. The first level heading h1 is usually displayed in a very large font, while the heading level six h6 is displayed very small.Titles
Do not confuse document section headings with the previously discussed document heading defined by
.We use the first sentence as the title of the text - For this, it is enough to limit it with tags
and
.Insert tags into the text of the file other.html
and
so that they limit the first sentence of the text, and this piece of code took the following form:Welcome to SD Company Page!
Let's review the acquired result.
Save the file by choosing the Notepad menu command File - Save.
The save operation must always be done before viewing the document, because it opens the file for viewing, loading it into the computer's RAM from the disk. If after editing the HTML code you do not save the file, then you will not see any configurations in the browser.
Restore the browser window by clicking its button on the Taskbar.
Press the F5 button or the Refresh button on the toolbar of the program's working window. The other.html file will be reloaded and you will see what the first level header looks like in the browser window.
See how the titles of the other 5 levels will look, changing the numbers in the tags: h2, h3, and so on. After each configuration, do not forget to save the file and refresh the image in the browser window.
When you finish the experiments, again restore the tags in the other.html file.
.By using the 6 levels of headings that HTML makes available, you can make a document that is easy to read with an intuitive structure. Remember that your document will always read significantly better if it has precise divisions into sections and subsections.
Align headings
By default, the title is aligned to the left of the page. But it can also be right-aligned or centered. For right-alignment in a tag
the attribute align = "right" is used, and for centering - align = "center". An obvious indication of left-side alignment is also allowed - align = "left".
Add to tag
the align = "center" attribute to center the title. This element should take the following form:
Welcome to SD Company Page!
In the future, we will not remind you of the need to save the file with the initial code and update the image in the browser before viewing.
How to make text bold in HTML
Now let's move on to the rest of the text. Let's increase its size and make the text bold italic. Paired tags are used to set bold style .
Insert in the file other.html the opening and closing tags so that they limit the text Here you will find out ... This element should take the following form:
How to make text italic in HTML
Italic style is set using tags .
Insert an HTML tag into the starting code and so that the edited element takes the following form:
Here you will learn about our activities, about software products our company and the equipment we produce
Markup elements can be nested, as in this structure, where the element … nested in element …... Modern browsers are capable of handling nested tags correctly. Therefore, you need to make sure that the order of nesting is not disturbed. Browser performance will be difficult if nesting is broken. For example, such an entry will be incorrect: …... Nesting is a very important part of the overall culture of HTML coding.
How to make text underlined in HTML
With a pair of tags you can set the underlined style of a text piece, limited by these tags, and using a pair of tags - show text in teletype font.
It should be noted that recently the tag is simplified and underlining is done with styles. equivalent ... Yes, the new analog looks more cumbersome, but to the chagrin this is more true. The main thing in this favor is that the bulky version is cross-browser, in other words, it is suitable for all browsers, when both Not all browsers support it.
How to grow text in HTML
Now let's increase the font size of the text. This can be done in various ways.
Tags increase the font size of the text enclosed between them.
Add tags to the beginning and end of the above piece of code, respectively and so that the element takes the following form:
Here you will learn about our activities, about the software products of our company and about the equipment that we produce.
Using tags you will be able to reduce the font size of the text to match the initial one.
Another method of specifying the font size is with tags with a size attribute. The values for this attribute are integers from 1 to 7. In this case, the value 1 corresponds to the smallest font size, and the value 7 - the largest.
Using instead of tags view tags , see how the font size of the text changes with different values of the size attribute - from 1 to 7.
You can also use numbers from 1 to 7 with a + (plus) or - (minus) sign as the value for the size attribute. In this case, the font size accordingly increases or miniaturizes, in comparison with the initial, for example, tags will increase the font size, in comparison with the current one, by one level. Check it out.
Set the value of the size attribute to 5 for the chunk of text in question: ... The HTML code for this piece should be like this:
Here you will learn about our activities, about the software products of our company and about the equipment that we produce..
In tags the color attribute can also be used to indicate the color of the font, delimited by text tags. The values for this attribute are the same as for the previously discussed attributes that describe the background and text color of the document.
By default, the paragraph with the text Here you will find out ... is aligned to the left. Center it horizontally using tags
Insert tags
Note that we used the tags to center the paragraph.
Attention! For 2010 tags ,
=
=
There are also a huge number of other obsolete tags that cannot be described in this article, therefore it is better to immediately familiarize yourself with specialized WEB sites on this issue. But the main ones I laid out here a bit higher
Allocation codes
HTML allows two approaches to font selection of text fragments. On the one hand, you can directly indicate that the font in a certain area of the text can be bold or italic, in other words, it is obvious to indicate the typeface of the text, as we did in this experiment. On the other hand, you can mark any piece of text as having some good-against-normal, logical style, leaving the browser to interpret that style. Thus, the logical style shows the role of a text piece, for example, of great importance in comparison with ordinary text, or the fact that this piece is a quote. In your own work, you can use the following tags that define logical styles. Check how they work in different browsers.
- used to define a word. The text is displayed in italics by default.
- for emphasizing words and strengthening. Text is displayed in italics by default.
- for highlighting the titles of books, films, performances, and so on, it is displayed in italics by default.
- for fragments of program code. Shown on the display in a fixed-width font.
- used for text that the user enters from the keyboard. May be displayed in different fonts in different browsers. Deprecated tag.
- serves to display program messages. Displayed in a fixed-width font. Deprecated tag.
- for particularly important fragments. Usually in bold.
- used to indicate that a part of a text or a word is a symbolic variable, in other words, text that can be replaced by different expressions. Displayed in italics by default. Deprecated tag.
The HTML 4.0 specification offers a more progressive method for specifying styles for text and other parts — using a special language called Cascading Style Sheets, CSS. Stylesheets are a huge achievement in the field of WEB design, expanding the ability to improve the appearance of pages. Style sheets make it easy to define line spacing, padding, colors for text and background, font size and style, and so on. Most parts of HTML can be styled using the style attribute, which is placed inside the opening tag of an element. Pairs of the form "property: value" are used as the value of the style attribute. For example, in a piece of code describing a section heading,
the style = "color: blue" attribute specifies that the color property is blue, in other words, the first level heading text should be displayed in blue.
Align styles
Let's see how to use the cascading style sheet language to specify the style of a text piece that begins with words Here you will find out ...
To specify the font thickness, use the font-weight property with the values lighter (narrow), bold (bold), bolder (bold), for example, style = "font-weight: bold".
To define italic style, use the font-style property set to italic. Therefore, to make the text bold italic, you should find the style attribute like this: style = "font-weight: bold; font-style: italic". Pay attention: characteristics can be placed in any order and must necessarily share a semicolon.
If you need to specify the font size, then you should use the font-size property, the values of which can be specified in relative or absolute values. Relative values are percentages, and points (pt), pixels (px), centimeters (cm), millimeters (mm) are used as absolute values. For example:
style = "font-size: 200%"
style = "font-size: 16pt"
style = "font-size: 100px"
By specifying absolute, not relative, sizes, you deprive users viewing your pages of the ability to increase or decrease the size of fonts using the browser menu command in accordance with their vision and monitor resolution. The fonts will only be displayed in the size you specified. Therefore, it is better to indicate the font size as a percentage. In this case, the font size will be smaller or larger by the indicated number of percent than when formatted using the default HTML tag.
To determine the method of horizontal alignment of text, use text-align property with values left, right, center, justify. Thus, to indicate that the text Here you will find out ... should be formatted in bold italic style with a size of 150% of the initial and aligned in the center, you should find its style as follows:
style = "font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
We will use this attribute in tags<р>that allow you to present text as a separate paragraph.
Edit HTML element, including text Here you will find out ... by removing the tags
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Here you will learn about our activities, about the software products of our company and about the equipment that we produce.
You see, HTML allows you to use a variety of style design techniques. However, the use of the cascading table language CSS styles is more desirable.
Other alignment and style options
We've only seen one use case for the style sheet language, where a style definition is placed specifically within the tag of the element you are describing.
This is done using the style attribute, which is used with most standard HTML tags. But there are other uses for CSS as well.
In standard HTML, without embedding style sheets, to assign certain parameters to any element, such as color, size, position on the page, and the like, you have to outline these characteristics for each element every time, even if 10- ki of such parts that do not differ from one another. You have to insert the same piece of HTML code into the page 10 times, increasing the file size and the time it takes to download it from the network.
Style sheets operate in a different, more comfortable, and economical way. To assign certain features to an element, you must outline this element once and find this description as a style, and in the forthcoming just indicate that the element that you want to design in a suitable way must take the characteristics of the style you described. Comfortable, isn't it?
Moreover, you can save the style description not in the text of your WEB page, but in separate file- this will allow you to use the style description on any number of WEB pages. And another related advantage is the ability to change the design of any number of pages by correcting only the style description in one separate file.
In addition, the style sheet language allows you to work with page font design at an even higher level than standard HTML.
Currently, the CSS language has a fairly large number of parameters for parts of HTML that it can control. Using "safe", in other words compatible with the largest number browsers CSS elements- characteristics of the font, colors of parts and background, characteristics of text and borders - you can significantly facilitate your work and make your WEB pages more attractive in terms of text design.
We continue to work with fonts and in this lesson we will look at how to set properties that give the font a bold or italic look. Before that, we have already considered how create bold or italic type via Html tags. But as we already know, Html should not be used to decorate the document, it is intended only to create markup, page structure, so you need to design everything through the style sheet CSS... And now let's look at how such properties are set.
Italic CSS font
The property helps to make text in italics. font-style:; , which is assigned the value italic , which stands for "Font Style - Italic".
Now let's imagine that there are many paragraphs on the page and some of them need to be italicized. What we do is create a class for the desired paragraph, and then indicate that an element with such a class should be italic.
Html
Fourth paragraph Fourth paragraph Fourth paragraph
We set the property for italic font.
If you have created such paragraphs and set a property for them, then the text of the second paragraph has become italic. This is what we set the property for the entire paragraph, but now let's complicate and set italic only for two words in the fourth paragraph. How to do this? V Html in the lesson, we parsed the logic level tag ... This tag is just used for such situations when a class needs to be set for some part of an element. And so in the fourth paragraph we embed a tag and write a class for it class ="italic">
... As a result, we get the following record:Html
First paragraph First paragraph First paragraph First paragraph
Second paragraph Second paragraph Second paragraph Second paragraph
Third paragraph Third paragraph Third paragraph Third paragraph
Fourth paragraph Fourth paragraph Fourth paragraph
Fifth paragraph Fifth paragraph Fifth paragraph Fifth paragraph
Italic (font-style: italic;)
The second paragraph and part of the fourth paragraph are now displayed in italics. V demo this is clearly shown.
Bold CSS
To ask bold font another property is used, named font-weight:; in other words, it is also called font weight. Saturation is initially set to normal that is, the weight of the font is normal, and by setting the value bold it will become bold.
Bold (font-weight: bold;)
You can also set the saturation value in numbers from 100 before 900 with step 100 ... Meaning normal equates to a figure 400 and the value bold figure 700 ... Meaning 900 not supported by all fonts, so by setting this value, you may not notice the difference from the value 700 ... This condition looks as follows.
Bold (font-weight: 700;)
V html code they do exactly the same: if you need to select the entire paragraph, then set it new class, if a part of the text, then use the tag class ="italic"> ... Let's look at a small example:
Html
First paragraph First paragraph First paragraph First paragraph
Second paragraph Second paragraph Second paragraph Second paragraph
Third paragraph Third paragraph Third paragraph Third paragraph
Fourth paragraph Four paragraph Four paragraph
Fifth paragraph Fifth paragraph Fifth paragraph Fifth paragraph
Bold (font-weight: bold;)
As a result, we have highlighted in bold text part of the fourth paragraph, where it is at the same time italic, and the entire fifth paragraph. These are two more properties we studied. They are used quite often, so it is worth remembering that:
- The italic font is specified by: font-style: italic; .
- Bold is set by: font-weight: bold; .
- To return the font to normal weight, the value is set: font-weight: normal; or value font-weight: 400 ; , which in this case means the same thing.
Here we have examined two more properties of fonts. Look in Demo what should have turned out for you in the end, and we move on to studying the following properties.
There are three ways to make text bold on HTML page, but do not rush to immediately use any one you like, since such a selection can have different meanings and affect the optimization of the site for the search engine.
Bold with strong tag
This method is suitable if you want to highlight an important part of the text in bold. HTML tag is a logical formatting tag and its essence: "underline" the importance of the selection.
There are other boolean formatting tags in HTML. For example, a tag makes text italic and indicates emphasis on the highlighted phrase.
Other types of text selection are described in the article:.
Plain text highlighted important piece of text... Plain text.
Bold text using the b tag
Plain text bold text... Plain text.
Bold CSS
Bold text can be made not only with special HTML tags. You can achieve output in bold on any tag by setting the font-weight property to it: bold; (does not work for all fonts).
Such selection will be stylistic in nature, without adding logical weight to the selected text.
In addition, you can select either a specific tag or a group of elements at once by specifying styles through a CSS class.
CSS property inside style attribute:
Bold text.
Bold text.
The text is in regular font.
Bold text.
What to do if you can't make text bold
If you can't make the text bold, most likely your site has overridden CSS element styles. In this case, you will have to adjust these styles. In most cases, this can be done through the main CSS stylesheet file. If you do not understand this, contact the webmaster. Most likely, solving this problem will take no more than 5 minutes of work (although, of course, there may be exceptions).
In this article, we will talk about how to select text. in italics HTML. As with bold text, italicized text can be made in three ways:
- Tag i HTML;
- Tag em HTML;
- CSS property font-style.
Let's consider all three options for how you can make italics in HTML, discuss the subtleties of this issue and what methods are more convenient and correct to use in certain situations.
Italic text: tag
Tag i(italic), similar to the tag b for bold text, it is used to physically highlight italic text (this means that only the style of the text changes). Tag application i:
Website builder "Nubex"
Thus, the required part of the text is placed between the tags .
Italic text: tag
Although the tag i remains valid, from the point of view of site optimization it is better to use the tag em to highlight logically important sections of the text. It means that search robots take into account the importance of the text placed between tags :
Website builder "Nubex"
Result:
Website builder "Nubex"
But do not forget that the text enclosed in tags i and em, although they are displayed almost the same (in all modern browsers), in their essence they are not quite identical, as noted above. Therefore, you need to use tags as needed: tag em HTML to frame important sections of the text, and apply visual italic design using a tag i or CSS styles. Now let's look at using CSS styles for italic text highlighting.
Italic text powered by CSS
To set styles for displaying fonts in CSS, use the property font-style, which can take on the following values: oblique(italic text) italic(italics) and normal(regular font).
It is worth remembering that italic font and inclined, in their essence, are not the same. Italics is a special font that is analogous to handwritten text, and inclined formed by tilting the normal font to the right.
Attribute application font-style on practice:
Our sites are, indeed, huge step in web development.
We do for real quality sites.
But it must be remembered that some browsers text with the property font-style: oblique; can be interpreted as italic rather than italic text.
Hello dear blog readers! This article will focus on text formatting tags... Bold or italicized text is a prime example. We will also consider the influence of some tags on the internal optimization of the site and the rules for their writing. You can read about that in the article given. By the way, you can find similar text design elements in many text editors, for example, in Word.
Tags are divided into 2 types: block and inline tags. When using the former, you can change the content of a part of the text (lines, individual fragments or words), while the latter are. The formatting tags we'll look at in this article are predominantly lowercase.
Rules and order of writing tags
You already know what start and end tags are. If not, then read the article at the very beginning of this material. In short, there are two types of tags: single (for example, transfer to new line) and container (paired). So, all text formatting tags are paired... This means that any element has a start and end tag, and the selection must be placed between them. For example, the correct selection of a phrase would look like this: Selected snippet
When the browser processes this fragment, you will see the following text: Selected snippet. By the way, all tags are not displayed in the RSS feed ().
The main thing when writing tags is to keep them closed. Otherwise, all text on the page will be bold (in the example with the tag ). But there are times when you need to highlight a certain fragment in bold and italics at the same time. But there is no tag that performs this action. There is only one way out of this situation: use two tags at the same time. It doesn't matter in what order you use them. Therefore, by writing the text with tags like this:
Selected snippet
or like this:
Selected snippet
You will still get Selected snippet in italics and bold at the same time. However, it is preferable to use the first option, because initially it was the only and correct one. Also, do not forget that each browser can handle tags differently (), depending on the settings. Now let's move on to the formatting tags themselves.
Bold and Italicizing Text - Tags , , and
Most Popular Text Formatting Tags - Emphasizing It bold and in italics... They are usually used to give importance to a piece. The first case serves to select a fragment containing useful information or keywords... Italics are used for the same purposes as bold text, but the information is less important because italics are less visible in the background of body text than bold text.Consider first bold text... There are two tags used for this action - and ... Differences in appearance no. Although, given that any browser can interpret each element differently, you may be able to see any differences. This is what the text in tags looks like and in the form already processed by the browser:
Text in strong tags
Text in b tags
And here is what these two lines look like in the source code of the page:
Text in strong tags Text in b tags
We can observe the same situation in the case of italicized tags and ... Try to find the differences between the two examples:
Text in em tags
Text in tags I
But source:
Text in em tags Text in tags I
So, the considered bold and italicized tags do not actually differ, but why then do we need, for example, the tag if there's ? After all, the latter contains only one character (not counting the parentheses) and, therefore, is easier to write. The thing is that the tags and affect. If you surround keywords with these tags, it will have a beneficial effect on the website's promotion. The main thing is not to overdo it - the maximum text should be 5% bold text in the tag. , and the same amount of italics in the tag .
If you just want to highlight some moment in the text, then use the tag or ... In general, I think that search engines also consider the text in these tags as more important, but on internal optimization they still have less impact than and .
Slash text tags - , and
Now let's look at a few tags that use a trait in text styling. The best known to you from text editors — tag
or underline. This tag does not affect the ranking (as far as I know), but it will help to highlight some text and focus on it. I gave an example of using this tag just above. There are two more tags that are similar in purpose - and ... Both serve the function of strikethrough text. You can use this tag in any situation: if you update a document (or rather a part of it), you can cross out the old one and add a new one; if you are going to write something that deviates from the topic of the material; something that does not correspond to moral and ethical standards.
The differences between these two tags are only in their writing, as a result of which it is preferable to use the first one, since firstly, it is more convenient to write, and secondly, there will be less HTML-code on your page, and search engines love it.
Tag and attributes - font parameters of the text
Now, consider a tag that is not used without attributes. With it, you can set parameters for a specific piece of text. In general, it is now preferable to use (cascading style sheets) because they can greatly shorten the entire HTML code of the page. So, let's look at the same tag . For him there is everything three attributes:
- face- the font itself. For example, Arial, Courier or Verdana. You can list a few, tk. not all users have an extensive set of fonts, and by writing a few in the face attribute, the browser will be able to choose which one to use, or rather, which one is present in the system;
- size- an attribute indicating the size of the text. It can be expressed both in arbitrary units and in pixels;
- color- text color. This attribute can be used both in HTML-codes of colors and in words. The former are of the form #FFFFFF (where F is any number or letter from A to F), and the latter are written in simple words(for example, red is red).
This is what the text in the tag looks like using each attribute:
This text has a size of 6px
This text is red This text is in Arial font This text is red and 5px in sizeAnd here is what you will see after processing the written code: 
Blocky text design elements - headers -, paragraph
, paragraph
Finally, we will look at the block elements that are used in almost every document. These are heading and paragraph tags. Let's consider the first. There are 6 types of headings and each has its own tag. Each species has only its own serial number and is recorded using tags
, ,..., ... This is what all the headers look like when processed:
... This is what all the headers look like when processed:
The number after the word title matches the number in the tag
Now let's talk about the paragraph highlight tag.
The function of this tag is to separate the text between from other similar text with an empty line. If you look at the source code of a document, you can see the following:
The green boxes have one paragraph, the red boxes have another. And this is how this code looks after being processed by the browser (the arrow points to an empty line):
As a result, we get a rather noticeable separation of one paragraph from another, which is beneficial - reading becomes more convenient.
So the article about document formatting tags... There are much more of them than I described in this material. It's just that you need to tell a lot about some of them, as a result of which separate articles with a full review will be devoted to them.!
Service
