Today I will tell you how to make words in bold on a website using HTML and CSS. This design is used when you need to highlight certain information on a page. Moreover, we are talking not only about headings, but also about simple words, phrases in the text. This is implemented quite simply.
To highlight certain text in bold, special HTML tags are used - and ... For example the following code:
| Plain text. Thumbnail. Strong bold text. |
Plain text.
Thumbnail.
Strong bold text.
The output gives the following picture:
The last two options visually look the same, but they differ slightly from each other. Tag specifies the simple stylistic boldness of a word, while adds a certain semantic "enhanced" (important) meaning. That is, the last line is not just bold text, but some kind of important information... In principle, for search engines it is recommended to use exactly .
You can also see bold text in HTML using styles:
An example of bold text.
Sample text with bold word.
The site displays it like this:
While the bold HTML code works correctly, it shouldn't. All design styles should be rendered in CSS file... Therefore, in the example above, you had to for tags
AND specify the appropriate class, and then write its appearance in the stylesheet. These are the rules for coding. So for bold in HTML, use the tag .
Bold CSS text
To do in CSS bold the font uses the font-weight property. With its help, the "saturation" of the text fragment is indicated. Values can range from 100 to 900, but the most commonly used ones are:
- bold (bold) - 700 by default;
- normal - 400 by default.
There are also options for the bolder and lighter values, which change the font depending on the parent to more or less bold, respectively.
To set bold text in CSS, you need to set some style to this or that element, for example:
Plain text with oily discharge in the center.
strong (font-weight: bold;)
Here I would like to note one small nuance that I was told on - if you create a new class for some element, then it is advisable to use a more or less "understandable name". For example, in the example above, the class = "my-bold-font" style looks more logical than class = "new-font", because you can partly understand its purpose. This is a plus for those who will look and use your layout in the future.
In the next article, I'll tell you about some interesting bold fonts that I managed to find.
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 sections of the document, numbered from 1 to 6. Headings are declared with a pair of tags with the appropriate level, for example,
- the heading of the first level section, and - the heading of the sixth level section. Titles differ from regular 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 selecting the Notepad menu command File - Save.
The save operation should 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 update the image in the browser window.
When you finish the experiments, again restore the tags in the other.html file.
.Using 6 levels of headings at your disposal HTML language, you can make an easy-to-read document with an intuitive structure. Remember that your document will always read significantly better if it has precise divisions into sections and subsections.
Aligning headings
By default, the title is aligned to the left of the page. But it can also be right-aligned or centered. For right-side 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 get down 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 learn ... This element should take the following form:
How to make text italic in HTML
Italics are 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 able to correctly handle nested tags. 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 describing 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 for 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, it is possible to mark any piece of text as having some good from the usual 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. Text is displayed in italics by default.
- for emphasizing words and strengthening. Text is displayed in italics by default.
- to highlight the titles of books, movies, performances, and so on 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. It can 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 CSS (Cascading Style Sheets). 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 header,
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 less or more by the indicated number of percent than when it was designed with HTML help tag by default.
To determine the method of horizontal alignment of text, use the text-align property with the values left (left), right (right), center (center), justify (width). 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 different methods style design. However, the use of the CSS cascading style sheet language 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 of the 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 one simply indicate that the element that you want to design in a suitable way must take the characteristics of the style described by you. 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 the font design of pages even more the highest 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- font characteristics, 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.
or exploring tags that format HTML text
Your attention is presented to one of the key and simplest lessons of the tutorial.
- HTML text is the main component of most of the Internet pages.
- By key phrases in the body of the HTML page users can find your site.
- HTML text can be of any size and color at your discretion. You can also define the type of font and its volume.
- HTML font size is usually set in pixels.
- HTML text formatting widespread, formatting tags are used.
See below tags that format HTML text:
- Tags: → bold HTML text(bold font).
- Tags → bold HTML text(bold font).
- Tags: → monospaced HTML text(monospaced font).
- Tags:
- Tags: → monospaced HTML text(monospaced font).
- Tags: → HTML text, the size is larger than usual (large print).
- Tags: → HTML text, the size is smaller than usual (small print).
- Tags: → oblique HTML text(italic font).
- Tags: → oblique HTML text(italic font).
- Tags: → oblique HTML text(italic font).
- Tags: → underlined HTML text(underlined font).
- Tags:
- Tags: → HTML text(font) in subscript.
- Tags: → HTML text(font) superscript.
HTML text formatting: strikethrough, underlined text
Result: ... monospaced font
Result: ... font size larger than normal
Result: ... italic font
Result: strikethrough text (strikethrough font)
Result: superscript
C The formatting given above should only be applied to small sections of text. Use CSS if you want to set a specific font for the whole page, or for several lines, for example.
Html provides us with some possibilities in terms of text formatting. Today I will tell you how to make an italic font in html, both for a standard font and a non-standard one. In the second case, you will need to consider something for everything to work.
How to write italic in html?
To begin with, in the html itself there are two tags that give the text an italic style. These are em and i. By the way, the second one is built into the html editor of the wordpress engine, in which I am now writing this article... How are these tags different? In fact, today I would not like to loudly declare that they are somehow different.
In general, em is used to highlight words that need to be pronounced with special intonation, while i is just visually highlighting the text. But let's not bother with this, because it is not known whether this is actually the case.
What are the css properties for italic text?
This is the font-style property and its italic value. There is also the oblique value and it turns the text into italic. Is there any difference between these values? Virtually none. By the way, in detail about this and others css properties for the text, read the corresponding article, where everything is laid out on the shelves.
How do I display a custom font in italics?
The fact is that if you connect a non-standard font via Google fonts, then in this case you must check the box when connecting at least 1 italic font style. If you do not do this, then when you try to make such a font italic, italics will be displayed in one of the standard fonts. By the way, you can read about connecting non-standard fonts in this article.
In this screenshot you can see a fragment of the font connection via Google service Fonts.
As you can see, there is a check mark next to at least one italic style. Now, when using the necessary tags or style property, it is true that this font will become italic, and not some other one.
Thus, we have sorted out all the points that are in working with italics. I dare not detain you any longer.
One of the easiest ways to highlight a word or phrase in text is to use a different lettering. So you can underline a word or phrase, using bold pages easily allows you to highlight words using different styles - italic, underlined, bold.
Bold type as a way to highlight the main thing
The most striking and catchy words look highlighted in bold. Such words and phrases immediately catch the eye. So, in order to learn how to quickly select the necessary places in the text, you should remember the special HTML-code. Bold font set using a paired tag.
Before a word or phrase, a sentence that should be highlighted, an opening tag is placed ... After the last letter in the text to be highlighted, there is a closing tag... Anything between these two tags is bold when displayed in a browser.
Other selection options
So, we found out that you can select text using a different style. We decided that the most simple and at the same time effective use of fat HTML font... Now let's talk about other selection options.
So, you can highlight text in italics using the paired tag , underline it with ... This is the most simple ways highlighting text.
There are also lesser known and used tags that can be used to highlight words and sentences in the text. So, in order to cross out the text, it is enough to use ... A paired tag will help make the text monospaced. ... If you need to create superscript use , bottom - .
In this case, as before, the text you need must be between the opening and closing tags. As you can see, there is nothing difficult, the main thing is to remember these codes or write them down.
Using multiple fonts
If you want to make the text more expressive, you can use more than just bold type. HTML markup allows you to simultaneously highlight a word using multiple faces. So, you can make a word bold, strikethrough, and italic at the same time.
At the same time, one thing must be remembered - all tags must be closed sequentially. For example, the correct entry might be:
- the selected text.
If you close the tags in a different order, the text will not be highlighted correctly. An example of an erroneous entry:
- the selected text.
In this case, the browser will get confused and will not understand what exactly you want from it.
By the way, here it can be noted that the three variants of the style - bold, underlined and italic - are easy to remember if you know the hotkeys in Word. There, the style is set using the same letter-keys while holding down Ctrl.
As you can see, you can use more than italic or bold type. HTML markup lets you highlight words as easily as regular Word.
conclusions
To highlight text, not only a variety of colors and shades, different size and type of font, but also its style are widely used. Moreover, it is with the help of a different outline that one or another fragment of the text can be beautifully and easily distinguished.
In order to change the font style, you should use any tag you know. The bold font of an HTML page is the most striking and visible, and therefore is used most often for emphasis.
