Text located between tags<ВIG> or will, respectively, more or less standard.

Top and lower indexes

With tagov and You can set the upper and lower indexes necessary to record trademarks, copyright characters, links and footnotes. The tags in question allow you to create inside the text area upper or lower indexes of any size. So that they seem less than the surrounding text, you can use tags and from attribute Font. Size \u003d -1, which reduces the font size.

Attribute SizE.

Attribute Size Tag Allows you to set the size of the text in this area. If you do not use a tag To specify a certain font size on the entire page, the default is received 3. Some browsers tag Do not support, so it is desirable to use it only within the text area. In other cases, it is better to use tags<Н1>, <Н2>, <НЗ> etc. The main advantage of taga It is that after the end of the action, it does not break the string as tags<Нn>. Therefore tag It is very useful for changing the font size in the middle of the line.

Attribute Solor.

If you want to make your page more colorful, you can use the attribute of the SOLOr in the FON tag, and then the only restriction will be the color palette on the user's computer.

Tags, managing the display form, are shown in the table.

These tags allow nesting, so they all have the beginning and end tag. When using such tags, it should be remembered that their display depends on the user-interface settings that may not be coincided with the settings of the hypertext developer.

Creating lists in HTML

Lists are an important means of structuring text and apply in all marking languages. NTML includes the following types of lists: non-measured list (unordered) (Unortered Lists

), numbered list (ordered) (Ordered Lists
) And the list of definitions. Tags for non-measured and numbered lists are the basis of HTML. HTML 3.2 adds multiple attributes to lists tags to select different types of markers in non-measured lists and different numbering schemes in numbers. You can enable such attributes and the list tags themselves (List Item
1. ) To change the type of marker in the middle of the list. After the appearance of a new attribute, all subsequent markers on the list will have the same appearance.

   Disordered Lists - Tag

   Non-measured list. The non-measured list is designed to create text type:

   • first element of the list;
   • the second element of the list;
   • third element of the list.

   Recorded this list In the form of a sequence:

   • first element of the list
   • the second element of the list
   • third List Element

   Tags - these are the tags of the beginning and end of the non-measured list, tag

2. (List Item) Specifies the tag of the list item. In addition to these tags, there is a tag that allows you to call lists - (List Header).

   Attributes of markers in a non-commercial list

   In order not to apply the same markers at different levels of nesting, you can use the Tire attribute. You can set any type of marker in an arbitrary location of the list. You can even mix different types Markers in the same list. Below are the following tags with standard markers attributes:

   The tag creates solid markers of this type, as in the default levels of the first level.
   The tag creates markers in the form of circles.
   The tag creates solid square markers.

   Ordered lists - tag

   Numbered lists. Tag

   Together with the attribute of Tyre \u003d HTML 3.2 allows you to create numbered lists using not only ordinary numbers, but also lowercase and uppercase letters, as well as lowercase and capital roman numbers. If necessary, you can even mix these numbering types in one list:

   <ОL ТYРЕ=l> The tag creates a list with numbering in format 1., 2., 3., 4., etc.<ОL ТYРЕ=А> The tag creates a list with the numbering in the format A., V., S., D., etc.

   The tag creates a list with numbering in the format a., B., P., D. etc.<ОL ТYРЕ=I> The tag creates a list with numbering in format I., II., III., IV. etc.

   Definition List - Tag

   List Tags (Definition List:

   ,

   ,

   ) Use to create a list of terms and their definitions. The tag is as follows.

   Term

   Definition

   The definable term is written on the same line, and its definition is on the next, with a small indentation to the right. Tag

   Allows you to create separate paragraphs with an indentation without numbering or markers. The indent is done from the left edge. If on the page several tags

   The text gradually shifts more and more right. At the end of the definition, place the closing tag

   . Remember that LT; DL tag\u003e shifts only the left border of the paragraph.

   Horizontal rules - tag<НR>

   Horizontal Rule (Horizontal Rule) is used to separate the document on the part. With the help of one tag<НR> You can give a page an original look. Try to experiment with the tag<НR>And you will receive lines, not quite similar to those that usually use.

   Formatted conclusion - tag<РRЕ>

   The use of this tag allows you to display the text "as is" (without formatting), the same symbols and with the same splitting of the lines.

   Application tag

   Text placed between tags andflickering. This tag is supported only by the Netscape Navigator browser. It should be used with great care.

   Online textbooks on the site

   HTML 4 textbook

   Tag container

   Tag container

   It is an element of a block level that serves to highlight the document fragment. The purpose of this selection is to manage the parameters of this fragment, which is usually performed by appointing styles. Let us give an example:

   (Document Fragment)

   In this example, the HTML document fragment is framed by tags

   and

   To specify some of its properties. In this case, all text elements The selected fragment will be displayed in green (green) color. Analogue tag

   text level is an element .

   Note that the immediate appointment of the style properties of a separate fragment as it is done in the example, it is not desirable to use in accordance with the concept of separating the structure of the document and its presentation. Style tables should be used, which will be discussed in the second part of the book.

   Tag

   Tag container

   Designed for horizontal alignment of all items in the middle of the browser viewing window. It has a block level and it is useful to use it for centering such elements, such as tables, as they cannot be centered by appointment.

   Align \u003d center tag

   .

   Essentially tag

   It is a brief form of the next record:

   . Further use of tag For reasons marked in the previous section, it is also undesirable.

   Any webpage consists of elements located on it, and almost always the block layout of the div is responsible for their placement. Of course, there is also a tabular layout using tags

   , ,

   , And there are even disputes about which it is better to use the system - block or tabular. However, in reality, you currently do not meet any of the modern, popular and convenient sites using only a table layout. At best, it is used only for what it is intended - that is, to create tables, but not to form the structure of the site itself. The fact is that the Div layout of the site allows you to set a set of CSS properties inaccessible to tables. In addition, the most important disadvantage of the tabular system is that the table will not be shown on the screen until it is fully loaded by the browser. If the entire site is made in the table, it will appear on the display only after the entire HTML page code is fully loaded. Div tag and Float property The base of the block system is the tag which is a container for content. Other containers may also contain inside . Use the DIV tag is not more difficult than. As a rule, the standard structure of the site is formed as follows: There is a main container (often he is assigned a class called Wrapper, Container, Main, etc.). Inside this container there are menu blocks, content parts, sidbar. By default, each new block is located from a new line. In order to locate the block on the left or right of another (for example, to arrange the Sidebar to the right), the Float property is used. By default, it has a "none" value, but you can also set the values \u200b\u200bof "Left" and "Right". Consider this property on an example with two blocks. Block for content Block for Sagebara This code will give the following result: Clear property It is important to take into account that the Float property extends not only to the block itself in which it is spelled out, but also on the subsequent element that will follow this block. That is, if we add another block to the two blocks described above, without pointing to it any properties, it will not be located with a new line, but will begin to the right of the second block. In order to avoid this, the block layout of the DIV uses the Clear property, which must be specified for that block that we want to arrange from a new line. Most often for this, it is set to "Both", but you can also specify the "Left" or "Right" values \u200b\u200bif we want not just to locate the block on new stringbut also ask him alignment. Complete the above example with a new item: Block for content Block for Sagebara New block located below Result: Indentation in block layout In addition to the location of the blocks, it is important for the setting of indents both between blocks and inside them. For this, respectively, the MARGIN and PADDING properties are used. Indents are defined separately for the top, right, lower and left parts of the element. They can be specified by one line by listing four values: Margin: 20px 10px 0 40px The block with such parameters will be located on 20 pixels below the superior element, for ten pixels from the repaid element, will have a zero indent from the bottom and will have an indent of the size of 40 pixels on the left. If all the same indicators indicate in the Padding property, it will be internal indents for the content in relation to the blocks of the block in which it is located. You can also specify individual properties for individual faces using Margin-Top, Margin-Bottom, Margin-Left, Margin-Right (and similar to Padding). In this case, if some of the faces are not specified, the indentation from its part will be zero or will be determined by the common CSS properties specified for blocks on the page. In this article, we will get acquainted with the main elements of the Bootstrap grid, as well as we will analyze several examples in which we consider how to apply these mesh elements to develop a site layout. Bootstrap 3 and 4 mesh mesh elements The main elements of the Bootstrap 3 and 4 mesh are: proter containers - elements with CONTAINER or.Container-Fluid class; rows - element with class ROW; adaptive blocks - Elements, with one or more COL classes. Welcome container - This is the first element from which the creation of a page layout or some of its independent part begins. Its main purpose is set the width of the layout being developed. Bootstrap 3 and 4 wrapsing containers are 2 types. First (Container) is designed to create adaptively fixed layout, and the second (Container-Fluid) - for adaptively rubber (adaptive-flexible) layout. Adaptively fixed layout It is characterized by the fact that it has a conditionally constant width, which on some diases of the viewport browser has one value, and on the arcs - the other. For example, in Bootstrap 3, 4 ranges (control points) are defined: XS (default), SM (VIEWPORT width View more than 768px), MD (VIEWPORT width more 992px), LG (VIEWPORT width View More 1200px). Welcome container (Container) Sets the layout: at the XS Dipazone, the width equal to the width viewport browser; at the SM dip, 750px width; on the MD dip, 970px width; at the LG dip, equal to 1170px. Width of the same adaptive rubber layout It does not have a fixed value, it is always equal to the width of the browser vieport. Welcome container In addition to setting the width, the layout also lines it in the center of the page and sets the internal fields (Padding) to the left and right to 15px. A row is also a container, but for adaptive blocks of the Bootstrap grid. In bootstrap 3 its main role is create negative indents (margin) to the left and right 15px. In Boostrap 4, it not only sets negative indents, but also performs the Flex container function. Those. if a this element Do not establish, then adaptive blocks will not have behaviors characteristic of them at all. The principle of using the element "row" is very simple, it is always must act as a parent for adaptive blocks. Those. If some element (win container or adaptive unit) is necessary position using adaptive blocks, before creating them first install a number, and already in it these blocks. The adaptive block is an element that have an adaptive width. Those. Its width on the same viewport can have one value, and on the other - another. Installing the behavior of the adaptive block is carried out using one or more COL classes. CLA Class syntax: Col- (Breakpoint) - (Number_Columns) (Breakpoint) is check Pointwhich defines the minimum width viewport, starting with which this class will act. Bootstrap 3 for use is available by default four control points (XS, SM, MD and LG), and in Bootstrap 4 - five checkpoints (without designation, SM, MD, LG and XL). Control points are given in ascending order of the Width ViewPort, starting with which they begin to act. (Number_Columns) is the width of the adaptive blockwhich he will have starting with this control point. The width of the adaptive block is indicated using bootstrap columns (integer) by default from 1 to 12. This number determines what part of the width it will have regarding its block (element "row"). The minimum width of the adaptive block is 1/12 (8.3%), and the maximum - 12/12 (100%). For example, the adaptive block with the COL-XS-6 COL-SM-4 COL-MD-3 COL-LG-2 class will (Bootstrap 3): on the XS device, have a width of 6 bootstrap columns, i.e. 50% (6/12 * 100%) relative to the width of the "row" element; on the SM device to have a width of 4 bootstrap columns, i.e. 33.33% (4/12 * 100%) relative to the width of the "row" element; on the MD device to have a width of 3 bootstrap columns, i.e. 25% (3/12 * 100%) relative to the width of the element "row"; on the LG device there is a width of 2 bootstrap columns, i.e. 16.67% (2/12 * 100%) relative to the width of the "row" element. If some checkpoint do not specify, then the action of this class will spread to the following control points. This is due to the fact that in CSS Bootstrap Media queries are built using a minimum width. For example, the adaptive block with the class COL-XS-8 COL-MD-6 will (Bootstrap 3): on the checkpoint XS and SM have a width of 8 bootstrap columns, i.e. 66.7% (8/12 * 100%) relative to the width of the element "row"; on the MD and LG device, a width of 6 bootstrap columns, i.e. 50% (6/12 * 100%) relative to the width of the "row" element. By default, adaptive blocks have a width of 12 bootstrap columns, i.e. 100%. If you have some kind of block, starting with XS should have this value, it can not be indicated. For example, the adaptive block with the COL-MD-6 COL-LG-9 class will (Bootstrap 3): at the XS and SM control point, have a width of 12 bootstrap columns, i.e. 100% (12/12 * 100%) relative to the width of the element "row"; on the MD device to have a width of 6 bootstrap columns, i.e. 50% (6/12 * 100%) relative to the width of the "row" element; on the LG device there is a width of 9 bootstrap columns, i.e. 75% (9/12 * 100%) relative to the width of the "row" element. Adaptive blocks in Bootstrap are located lines. Adaptive blocks with the total number of bootstrap columns are not more than 12 may fit in one line. Blocks that are not placed in the first line are transferred to the following line, etc. In bootstrap 3 when creating a layout there is one very important momentwhich is associated with the fact that adaptive blocks not always tolerated to the next line. This behavior of adaptive blocks is explained by the fact that they are floating in this version of the framework (Float: Left). For example, in this markup, the third adaptive unit is not located on the second line, but sticks to the first adaptive block: #1 #2 #3 To correct it is necessary before the adaptive unit, which should begin with a new line, add an empty DIV element with ClearFix class. #1 #2 #3 Basic rules for creating a layout using Bootstrap mesh elements The main steps of creating a web page layout: create basic sections (for example: Header, Main, Footer); create inside each section a wrapper container; place the inside of each wool container, the markup of which must be made using adaptive blocks, the element "row"; create the necessary structure within each row using adaptive blocks; place inside the necessary adaptive blocks whose marking must be made using adaptive blocks, the element "row"; perform paragraph 5; perform paragraphs 6 and 7 until the desired structure of the created layout is reached. As an example, create the layout below on bootstrap 3 and 4. Layout layout on bootstrap 3: Header. A1. A2. A3. A4. A5. A6. B1. B2. B3. B4. Layout layout on bootstrap 4: Header. A1. A2. A3. A4. A5. A6. B1. B2. B3. B4. Did not find an answer to your question? Look at here State Services Personal Account State Supervisory Cabinet- Entrance on SNILS and Telephone Single telephone rescue service in the Russian Federation