CSS italics: change the font style. HTML5: Old Tags New Assignment Which Tag Italicizes
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 italic in HTML, discuss the subtleties of this issue and what methods are more convenient and more 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 text. This means that search engine spiders 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 text, and apply visual italic design using a tag i or CSS styles. Now let's look at using CSS styles for italic text selection.
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 regular 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; may not be interpreted as italic text, but as italic.
Description
Specifies the style of the font - regular, italic, or italic. When text is set to italic or italic, the browser consults the system to find a suitable font. If the specified font is not found, the browser uses a special algorithm to simulate the desired type of text. The result and quality may not be satisfactory, especially when printing a document.
Syntax
font-style: normal | italic | oblique | inherit
The values
normal Normal text style. italic Italic style. oblique Italic style. Italic and italic, though similar, are not the same thing. Italic is a special typeface that imitates handwriting, while oblique is formed by tilting ordinary characters to the right. inherit Inherits the parent's value.HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The result of this example is shown in Fig. 1.
Figure: 1. Applying the font-style property
Object Model
document.getElementById ("elementID") .style.fontStyle
Browsers
Internet Explorer 7.0 or later does not support the inherit value.
Browsers always render text oblique as italic.
In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the website page. Although not only the size of the letters is important, but also their color, thickness and even family.
Tags and attributes when robot with html fonts
The hypertext language has a large set of tools for working with fonts. After all, it is text formatting that is the main task of html.
The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.
Consider the tags that are used to work with fonts in html and their attributes. The main one is the tag ... Using the values \u200b\u200bof its attributes, you can set several characteristics of the font:
- color - sets the color of the text;
- size - font size in conventional units.
Positive attribute values \u200b\u200bfrom 1 to 7 are supported.
- face - used to set the font family of the text to be used inside the tag ... Several values \u200b\u200bare supported at once, separated by commas.
Only the text between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.
Also in html there are a number of paired tags that specify only one formatting rule. These include:
- - sets bold font in html. Tag the action is similar to the previous one;
- - the size is larger than the default;
- - smaller font size;
- - italicized text. Similar tag ;
- - underlined text;
- crossed out;- - display text only in lower case;
- - in upper case.
Plain text
Thumbnail
Thumbnail
More than usual
Less than usual
Italics
Italics
Underlined
Crossed out
Style attribute capabilities
In addition to the described tags, there are several more ways to change the font in html. One of them is using the generic style attribute. Using the values \u200b\u200bof its properties, you can set the font display style:
1) font-family - property sets the font family. Enumeration of several values \u200b\u200bis possible.
Changing the font in html to the next value will happen if the previous family is not installed on the user's operating system.
Writing syntax:
font-family: font name [, font name [, ...]]
2) font-size - the size is set from 1 to 7. This is one of the main ways you can increase the font in html.
Writing syntax:
font-size: absolute size | relative size | value | interest | inherit
You can also set the font size:
- In pixels;
- In absolute value ( xx-small, x-small, small, medium, large);
- In percents;
- In points (pt).
Font-size: 7
Font-size: 24px
Font-size: x-large
Font-size: 200%
Font-size: 24pt
3) font-style - sets the style of writing the font. Syntax:
font-style: normal | italic | oblique | inherit
Values:
- normal - normal spelling;
- italic - italic;
- oblique - right-leaning font;
- inherit - inherits the spelling of the parent element.
An example of how to change the font in html using this property:
font-style: inherit
font-style: italic
font-style: normal
font-style: oblique
4) font-variant - converts all uppercase letters to uppercase. Syntax:
font-variant: normal | small-caps | inherit
An example of how to change the font in html with this property:
font-variant: inherit
font-variant: normal
font-variant: small-caps
5) font-weight - allows you to set the thickness of the writing of the text (saturation). Syntax:
font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Values:
- bold - sets the html bold font;
- bolder - fatter relative to normal;
- lighter - less saturated relative to normal;
- normal - normal spelling;
- 100-900 - sets the font thickness in numeric equivalent.
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: normal
font-weight: 900
font-weight: 100
The font property and html font color
Font is another container property. Internally, it combined the values \u200b\u200bof several properties designed to change fonts. The font syntax is:
font: font-size font-family | inherit
Also, fonts used by the system in inscriptions on various controls can be set as a value:
- caption - for buttons;
- icon - for icons;
- menu - menu;
- message-box - for dialog boxes;
- small-caption - for small controls
- status-bar - status bar font.
font: icon
font: caption
font: menu
font: message-box
small-caption
font: status-bar
font: italic 50px bold "Times New Roman", Times, serif
In order to set the font color in html, you can use the color property. It allows you to set the color using both a keyword and rgb format. And also in the form of a hexadecimal code.
Now we are going to study the main tags. Let's start with what tags are required on the page, forming its structure.
Block. The structure of the simplest page
A site page is a plain text file with the extension .html... This file contains the text of the HTML page along with the tags. This file must have the following tags: tag , which should contain the text of the entire site (everything written outside this tag will be ignored by the browser), and inside it there should be two more tags: tag
for the service content of the page and the tag - for the main text, which is visible on the browser screen.To service content that is located inside the tag
, many different things come in, but for now we only need two of them. This is a tagSee this link for how this example looks in a browser.
I think after you read about the basic structure of the page, you still have some confusion about how it all looks in practice. Therefore, I made a special video in which I will show you how to make your first HTML page and run it in a browser (in it I will also tell you about the page title, about encodings, about code design). Take a look at it and only then move on to further reading:
Well, now that we have learned how to create the simplest pages, we will move on to exploring useful tags that should be used inside a tag
... These will be tags for paragraphs, headings, lists, links and other useful things. So let's get started.Block. Paragraphs
One of the main elements of the page are paragraphs... They can be compared to paragraphs in a book - each paragraph starts on a new line and has a so-called red line (this is when the first line of the text of the paragraph is slightly indented to the right). There is no red line by default, but it is easy to do (more on that later).
A paragraph is created using the tag
Thus:
This is a paragraph.
This is another paragraph.
And one more paragraph.
This is a paragraph.
This is another paragraph.
And one more paragraph.
Block. Headings h1, h2, h3, h4, h5, h6
In addition to paragraphs, are important on the page headlines... They can also be compared to titles from a book - each chapter has its own title (the title of this chapter) and is divided into paragraphs, which also have their own titles. Well, and the main text of the page is in paragraphs.
Headers are created using tags
,
,
,
,
,
... They have varying degrees of importance. In the title h1 should have the title of the entire HTML page, in h2 - name blocks pages in h3 - the name of the subblocks, and so on.
,
,
,
... They have varying degrees of importance. In the title h1 should have the title of the entire HTML page, in h2 - name blocks pages in h3 - the name of the subblocks, and so on.
,
... They have varying degrees of importance. In the title h1 should have the title of the entire HTML page, in h2 - name blocks pages in h3 - the name of the subblocks, and so on.
All headings are bold by default and have different sizes (this can be changed through CSS, but more on that later). See example:
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
This is how the code will look in the browser:
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
Block. Fatty
You already know that the default headers are fatty... However, you can also make plain text bold - just take it into the tag ... See example:
This is plain text, and this is fatty text.
This is how the code will look in the browser:
This is plain text, and this is fatty text.
should be used inside some other tag, such as a paragraph. In this case, paragraphs create the overall structure of the page (paragraphs and headings), and the tag b makes individual pieces of text bold.
Block. Italics
In addition to fatty, you can also make italics using the tag :
This is plain text, and this is italic text.
This is how the code will look in the browser:
Block. Lists
Along with paragraphs and headings, there is another important element of the page - this is the lists... Such elements are probably familiar to all Internet users. They are a listing of something (a list) point by point. There is usually a filled circle next to each item on the list (it is called marker list).
Lists are created using the tag
- , inside which tags must go
- ... Tag ul specifies the list itself, and in tags li list items should be put (that is, one li corresponds to one list marker). Note that you cannot use li tags alone. See example:
This is the title title - The first item on the list.
- The second item on the list.
- The third item on the list.
This is how the code will look in the browser:
- The first item on the list.
- The second item on the list.
- The third item on the list.
Lists created via tag ulare called disordered lists. This name was given to them because there are also ordered lists that have number bullets instead of dot markers. Such lists instead of the ul tag have the tag
- , and items of such lists are also created through tags li.
- The first item on the list.
- The second item on the list.
- The third item on the list.
- The first item on the list.
- The second item on the list.
- The third item on the list.
Let's make an ordered list using the tag ol:
This is the title title This is how the code will look in the browser:
The convenience of ordered lists is that I can insert a new list item anywhere - and the numbering itself will be rearranged (that is, I do not have to follow it in case of any changes, as I would if I arranged it manually ).
Block. Links
Links are the elements that make the internet out of the internet. By clicking on the links, we can go from one page of the site to another. If they did not exist, the Internet would be just a collection of pages that are in no way connected with each other.
This is the title title Link to phphtml.net site.This is how the code will look in the browser:
Links are absolute and relativemoreover, they can lead both to your site and to someone else's. It is better to show these difficult moments, rather than describe them in text, so I made the following video for you. Take a look at it and only then move on to further reading:
Block. Pictures
Let's now figure out how to place picture on your website page. This is what the tag is for
which has a required attribute src, which stores the path to the image file.
How it works, let's see the following example:
This is the title title 
This is how the code will look in the browser:
Note that the tag
does not require an end tag.
Block. Links in the form of pictures
Link maybe not only text, but also picture - the tag is enough for this
nest in tag as in the following example. Click on the picture - and you will follow the link to the phphtml.net website (to later go back to the book - click the "back" button in the browser):
This is the title title
This is how the code will look in the browser:
Block. Line break
Remember what will happen if you make, for example, two paragraphs side by side - in this case, the text that lies in each of them will begin with new strings.
Let's see this with the following example:
This is the title title This is the first paragraph.
This is the second paragraph.
This is how the code will look in the browser:
This is the first paragraph.
This is the second paragraph.
There are, however, situations where we would like to have one paragraph, but some text in it begins on a new line. Why might this be needed? For example, I want to type a poem, but I don’t want to break each line of it into a separate paragraph, since that would not be very logical.
To do this, in the place where the line break should be, write the tag
... Note that this tag is special and does not have an end tag.Let's see how it works with the following example:
This is the title title This is the first line of text
and this is the second.This is how the code will look in the browser:
This is the first line of text
and this is the second.Block. HTML comments
Almost all programming languages \u200b\u200bhave such a concept as "comments".
Greetings Friends.
After another long break, I remembered that I had not written a single line for a long time. Of course, there are reasons for this, because there is always some reason to come up with an excuse, right? In fact, every day I study the Video Course, which I have already mentioned a couple of times, but for now I will not say anything more about this, you will soon find out everything.
So, since nothing came to my mind, what can I write about. I decided to look at the statistics, what interests Runet users on HTML, WordPress, DLE and similar topics. And you know what? There is still something to write about. There seem to be answers to all the questions that I have found, but not always in an understandable form. And in general it became interesting to write something like that.
Today we'll talk about HTML. Namely, how to highlight text in bold and italics, and also talk about highlighting with color.
Make text bold.
To make text bold, you don't need to tinker with CSS styles or come up with any other complexities. HTML already has this capability. At the same time, we can not only make the text bold, but also make some emphasis on it with the help of selection. The emphasis can be made for search engines or any special browsers or programs. The main thing is not to overdo it with the accentuation of the text in the article or on the page with some kind of information, as this can have a detrimental effect at least on the promotion of this HTML page.
So, to just make the text bold, we can use the tag ... This tag refers to elements of physical markup, while setting the text to bold without placing any emphasis on it. This tag is paired, which means that it has both an opening tag and an end tag. Also, since the element is inline, it must be in some kind of block element like
Sample code:
thumbnail
Result:
thumbnail
In this case, we just made the text bold and that's it.
But it happens that we need not just select the text, but emphasize it. For this we can use the boolean markup tag ... Not only does the text highlighted by this tag carry more weight to search engines. But in theory, it should be different from the tag in speech browsers, for example intonation. However, I can neither confirm nor deny this information, is it so?
In this case, everything is absolutely the same as in the case of a simple bold selection, only we are focusing, and not just a selection.
Sample code:
Result:
It's pretty simple, isn't it?
Italicizing text.
In this case, everything is not more complicated than in the first one. And our situation is absolutely the same. We can highlight text with two options in HTML. Again, using either the physical markup tag or the logical tag, with which we again focus on the selected text.
To make the text italicized, we will use the tag ... This element is paired and inline, which tells us what we should use, both the opening tag and the closing tag. And also have to use it inside a block element. And in this case, the most appropriate block element is the paragraph tag
Sample code:
text in italics
Result:
text in italics
And of course we can emphasize the text at the same time by making it italic using the tag ... This item is the same as , except that the text is italicized rather than bold.
Sample code:
the text on which we have emphasized
Result:
the text we emphasized
And the last thing I would like to talk about today is highlighting the text with color.
Unfortunately, we don't have a tag for highlighting text in HTML. But still, this method is not difficult.
So, to highlight a specific part of the text with color, we can wrap the desired part of the text with a tag , which is a generic tag and is used inside a block element. In our case, the block element is the tag
But add not enough. You also need to specify the style parameter, which will allow you to add CSS properties to the necessary text, specify the property itself (color), which will help to set a specific color. Finally, specify a value for the color property. But the question may arise: "What should I indicate?" It is necessary to indicate the HTML-code of the color in which we want to "paint" the text. HTML color codes can be found.
Now, to make it clearer, consider an example.
Sample code.
text to highlight color
In this case, we highlight one word: with color. I also want to note that the tag is paired, and we have to close it where the property should end.
Result:
the text to be highlighted
In these simple ways, we can manipulate the text on our page. I also want to note that everything that we just talked about works on both WordPress and DLE, because any engine uses HTML to render pages. That is why HTML can be called the foundation of any site, no matter what CMS you have.
I hope I have explained everything clearly.
Good luck Friends. Coming soon ... There will be interesting news ...