Large html font. Formatting the text of an html page (part 2). with the names of different models

Font on page

The font size tag in html is perhaps sub, sup and strong, which somehow resize the letters. But html offers very little possibilities in this regard. There was, of course, the font tag, but today it has long been deprecated. If you are really curious about how to change the font size more flexibly, then you need to turn to the possibilities of CSS.

CSS font-size property

In CSS, you can set any amount of text and this can be done not only in pixels, but also in other units of measurement. Most often it is set in pixels, but it can be done differently. For example, as a percentage. The parent element's font is taken as 100%.

For example, if we set the amount of text as a percentage to some paragraph and it lies in the body tag, then for it 100% will be equal to the size specified for the body. Accordingly, if the tag has a font of 12 pixels, then to set the paragraph size to 24 pixels, you need to write like this:

p (font-size: 200%)

This is if you use interest. Another popular relative value is em, or the font height of the parent element. Prescribing relative values ​​is better because when you change the size of the text, everything will change proportionally and will be displayed well.

You can also adjust the size using the larger and smaller keywords, which set the text size to be larger or smaller, respectively, than that of the parent element.

selector (font-size: larger)

The text in the element with the desired selector will become larger than that of the parent. Html tags sizes exist, but they are not recommended. These are big and small tags. Wrapping the text in them allows you to slightly increase or decrease the size of the letters compared to the parent element. But today it is better to use css if you need to set a value.

The size of the main elements on the web page

With regard to sizing the rest of the elements, everything is the same: you need to use css for this purpose, not html. In general, you can set attributes such as width and height in the tag, but this is inconvenient. And most importantly, it does not meet the standards that dictate that appearance and the structure must be separated from each other by placing them in separate files.

For this reason, it is common to use the width and height css properties to determine the width and height of an element.

img (width: 50px; height: 50px)

First of all, I want to digress a little from the topic and talk about my code examples, for example, in the previous chapter, I did not depict the full page code anywhere, but only showed it like this:

• Html
• CSS
  • introduction
  • types of documents
  • style types
• PHP

And now back to our chapter, to perform all these functions listed in the title, there is a tag-container.

Now let's get back to our topic.

In order to change the size, font or color of the text of a separate area in HTML, there is a container tag separate piece of text

Let's start in order, and learn how to change the color of the text of a separate section, for this purpose in the tag FONT need to put an attribute COLOR like this:

color = "red"> a separate piece of text Attribute values color the same as for the bgcolor text attributes of the body tag, that is, we can set them in words in English (Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal , Fuchsia, Aqua) or RGB color numbers (# 000000- #FFFFFF)

face = "Tahoma"> a separate piece of text Fonts serve to make the text look more extraordinary, but there is one problem, the fonts that you have (you can see them in C: WINDOWSFonts) may not appear on your visitors, the second problem with fonts is that some fonts can only be used in Cyrillic (in Russian letters) or vice versa only with the Latin alphabet (English letters), there is of course a third type that fits both the Latin and Cyrillic alphabet. In the list below, I will show which fonts are standard and are on all computers and also suit any letters:

• Arial
• Cosmic sans
• Courier
• Garamond
• Helvetica
• Verdana
• Tahoma
• Times
• Times New Roman

Now let's move on to the dimensions, you can change the size of the text in HTML using two tags font and / or BASEFONT.
Let's start with BASEFONT, this tag is used to change the base color, font and size of the text, for example:
....text....
This tag is not a container, i.e. has no backtag. The color and font of the text is set as in the tag FONT, but to change the size of the text, use the attribute SIZE with a value from 1 to 7. This tag can be used several times in the text: size = "4"> .... text ....
size = "6"> .... text ....
size = "3"> .... text ....
The default text size = "3", this size can be omitted. In the first example we increased the whole text by one, in the second line we increased it to "6", and in the third we returned it to the default text again.
Now I want to sadden you, this tag was introduced in the HTML-4.01 version, and accordingly only Internet Explorer is supported in the browser, other browsers simply ignore it, so it's better not to use this tag at all !!!
And use only the tag FONT with the SIZE attribute it is supported by almost all browsers. SIZE attribute, also takes values ​​from 1 to 7, but these sizes can be set from "-2" to "+4"
text
text
text
text
text
text
text
The FONT tag, like BASEFONT, can contain several attributes:
size = "5" color = "red" fase = "Tahoma, Times, Verdana"> .... text ....

It would seem, why know HTML tags for text, if now almost any admin panel has a convenient one that sets them automatically?

The fact is that formatting content on a website is fundamentally different from working in office applications. It is not enough just to give the text an attractive look, because not only the display of a web page, but also its promotion in search engines depends on the correct design.

HTML tags and attributes: syntax basics

Any text has a hidden code that "explains" to the computer what and how to display on the screen. All information is recorded using a set of universal elements.

Basically, HTML tags for text are commands that add specific blocks to a page or change their appearance. The correct recording format looks like this:

Please note that not all tags are paired. For example,
(line skip) or

Why you can't copy articles from Word and other programs into the site editor

Although modern office programs use the same HTML tags for text, 99% of the time native code is unusable for web pages. Even if the document is displayed normally in the application itself, the formatting may get lost when inserted into the site. In addition, due to the large number of unnecessary tags and attributes, search engines cannot adequately analyze the content of the page. Which, in turn, makes it difficult to promote your resource.

To get clean and relevant code, you first need to clear the text of HTML tags generated by a regular editor. There are several ways to do this:

1. "Run" the article through "Notepad" and only then insert it into the site. The application erases all HTML, so after that you have to reformat the text again (using the editor tools or manually).
2. Write and publish articles via LiveWriter. The popular blog editor immediately generates the correct code. And in a separate tab you can see how the text will look on the site.
3. Use HTML Cleaner. This online service does not destroy the entire code, but only extra fragments. Filters allow you to choose which tags to keep. There is also a powerful visual formatting editor that adds already optimized commands to the code.

Paragraphs

This element is present in almost all articles. Each paragraph should be located inside such a container - this simplifies formatting and allows you to maintain a consistent style across all pages of the site. For convenience, the tag

They always write on a new line.

Alignment

The separate HTML "Text Alignment" tag has long been out of use. Instead, the generic ALIGN attribute was created. To change the position of the text block on the page, you must select one of 3 values ​​- CENTER, RIGHT or LEFT. Likewise, you can set the alignment for other elements - for example, headings.

In some situations, other tags are used for alignment, for example, you can position using the element

Headings and subheadings

The subheading system allows you to create a logical structure for your content. When the text is divided into semantic blocks, it is much easier for the reader to concentrate and assimilate new information. Search engines also analyze headlines to understand which requests to promote the page on. This is why SEO experts recommend using thematic keys in them.

HTML uses six levels of subheadings - from

before

... There is a clear hierarchy in this system:

• ...

  ... The main article, product in the online store, etc.). There can only be one in the text

  ... As a rule, it contains the main keyword.

• ...

  ... Subheadings of the second level break the text into semantic blocks. For example, if you are rating laptops, you can do a few

  with the names of different models.

• ...

  ... The third level is needed if the text between two

  also breaks down into small blocks. In our example, these can be evaluation criteria - "Performance", "Memory", "Video card", etc. for each model.

• ,

  ,

  ... In practice, they are extremely rare. But the general principle is the same - they should be “nested” in a top-level subheading block.

Be sure to maintain the correct hierarchy. Returning to our example, this means that you cannot immediately enter the names of the models as

or

... And even more so, use subheadings of different levels for homogeneous blocks (for example, highlight the laptop that took the last place in the rating using

).

And here is a diagram that will help you instantly understand and remember the correct heading structure in HTML.

Lists

Any enumerations and instructions are best formatted as lists using special HTML tags for text (a typical mistake is just a few paragraphs

Which start with a hyphen or number).

The structure of such blocks is very simple. First, we define the type of the list - bulleted or numbered.

All elements are between the opening and closing tags. Each item in the list starts on a new line and has a format. The number of elements is not limited.

Choice and its attributes

What can be changed using this font and color - and without adding new classes to the CSS. This is very convenient when you only need to select one sentence or fragment.

has several attributes:

• Face... Allows you to change the font of the text. You can list several options separated by commas (Tahoma, Verdana). If the user does not have the first font installed, the system simply uses the alternative.
• Size... To increase or decrease the text, enter a value between 1 and 7 in quotation marks.
• Color... Depending on the design, you can choose one of the standard shades (red, green, blue) or enter a code for any color of your choice.

Don't use paragraphs formatted with , instead of subheadings. Better to set the same styling parameters with the correct tag.

Ways to select text

Monotonous text is tiresome, even with paragraphs. It is recommended to highlight the key points graphically in order to attract attention and stir up the interest of the reader. Here are some commands to help you with this task.

... ... An extremely popular HTML tag. Bold text immediately catches the eye, and therefore it is convenient to use it to highlight important theses and facts.

Many confuse tags and ... There is no visual difference, but they work in different ways. The first one simply changes the appearance of the text, while the second acts as a "pointer" and highlights the most important fragments (thematic keywords and phrases for SEO).

... ... Elegant and strict italics are ideal for formatting scientific terms, foreign words and a variety of quotations. In serious publications, the titles of works of art are also marked with oblique text.

... ... Perhaps not a single HTML tag has caused so much controversy. Underline text is rarely used because this way highlighting has historically been associated with hyperlinks. If you use in articles, please note that this is only suitable for short fragments - no more than 1 line.

... ... An interesting tag that allows you to make a part very relevant in an advertisement - for example, to emphasize the contrast between the old and new prices.

... ... The easiest way to increase the font size without any additional parameters.

... ... Works on the same principle as the previous tag. The text located inside is reduced relative to the main one.

^... ... The correct name for this format is superscript. Basically, this tag is for math degrees and footnotes. It decreases the font size and shifts the selected text up.

_... ... Subscript is often found in various formulas. The selection is positioned below the main text.

Sense containers

Since some blocks were found in many texts, they began to create special tags for them. This simplifies formatting, because if each type of content has its own set of styles, it is enough to select a piece of text and indicate what information it contains.

... ... Tag for adding computer codes. Indispensable in programming articles with examples - commands are not executed, but displayed as plain text.

... ... Designed for quotations - for example, key excerpts from interviews.

... Brings out part of the text into a separate block. By default, the selection has a larger margin on the left, but in CSS you can also change the size, style, and color of the text.