Rules for constructing HTML documents. Nested rules Rules html general rules fantasy

Example underscores text

Tags and

Tags display text with a horizontal line through it. Canceled tag. The tag should be used instead. For example:

Example of strikethrough text.

Currently, the tag is not supported by all browsers, so for now it is recommended to use it in combination with the tag. Namely, you can put a couple of tags inside a container tag

... .

Tag

The tag displays text in a font larger (than the untagged part of the text) size. Instead of this element, it is better to use heading tags, for example,

Larger font size.

Tag

The tag displays text in a smaller font size. Since there is no tag in HTML that is opposite in effect to the tag, the tag can be used for these purposes. Most browsers support nested tags, but this approach is not recommended. For example:

Smaller font size.

Tag

The tag moves text below the line level and displays it (if possible) in a smaller font size. Convenient to use for mathematical indices. For example:

Example font for subscript.

Tag

The tag moves the text above the line level and displays it (if possible) in a smaller font size. Convenient to use for assigning powers of numbers in mathematics. For example:

Example font for superscript.

Tag

The tag displays blinking text. This tag is not part of the HTML specification and is only supported by the Netscape browser. Experienced developers rarely resort to using this tag, since the presence of blinking characters on the page annoys many users.

Tag

A container tag is analogous to a block level tag. Can be used when you need to mark a piece of text to set its properties, and cannot use any other structural formatting tag.

The Microsoft Internet Explorer browser additionally allows the use of the following tag parameters: DIR, DATAFLD, DATAFORMATAS, DATASRC. A description of the parameters can be found in the second part of the book.

Rice. 1.3. Using nested text formatting tags

Formatting tags can be nested inside each other. In this case, you need to carefully ensure that one container is located entirely in another container. In Fig. Figure 1.3 shows an example of nesting an italic element within a bold element. The following HTML code fragment is used:

This is a bold font.

This italics.

And here is the text bold and italic

Tag

The tag specifies the font parameters. It refers to text-level physical formatting tags.

Assigning font parameters directly in the document text violates the basic idea of ​​separating the content of the document and describing the form of presentation of the document. Therefore, in the HTML 4.0 specification this tag, as well as the tag, are classified as canceled. Their further use is not recommended.

Despite these dire warnings, it appears that physical formatting can be considered acceptable for the simplest documents. In addition, the easiest way to start learning the basics of formatting is with the rules for directly specifying element formats. A novice developer still has to grow up to style design.

The tag refers to sequential elements and therefore cannot include block level elements, e.g.

Or

The following parameters can be set for a tag: FACE, SIZE and COLOR. Note that the Netscape browser also allows the use of two additional parameters: POINT-SIZE and WEIGHT, the description of which is omitted.

FACE

The FACE parameter is used to specify the type of font in which the user's viewer will display text (if such a font is available on the computer). The value of this parameter is the name of the font, which must exactly match the name of the font that the user has. If no such font is found, this instruction will be ignored and the default font will be used.

You can specify one or several font names, separating them with commas. This is a very useful property, since different systems may have almost identical fonts with different names. Another important quality is to set preferences for using fonts. The font list is scanned from left to right. If the user's computer does not have the font listed first, an attempt is made to find the next font, and so on.

Here is an example of using the FACE parameter:

Purpose of fonts




An example of specifying a font name.

In Fig. Figure 1.4 shows how the Netscape browser displays an example. In the example, the Verdana font is indicated as the preferred font; if it is absent, the Arial font will be used, etc.

Rice. 1.4. Netscape browser example display

SIZE

This parameter is used to specify font sizes in arbitrary units from 1 to 7. The specific font size depends on the viewer you are using. It is generally accepted that a “normal” font size corresponds to a value of 3.

Default font size settings, as well as the amount of absolute font size change, vary between browsers. In Fig. Figure 1.5 shows the Netscape browser settings window, which sets the default fonts.

The font size is indicated both as an absolute value (SIZE=2) and as a relative value (SIZE=+1). The latter method is often used in combination with setting the base font size using the .

Note

When specifying font sizes, entries like "2" and "+2" (unlike most programming languages, in which the unary "+" sign can be omitted) give fundamentally different results.

Here's an example that uses different methods for assigning font sizes. An example display is shown in Fig. 1.6.

Rice. 1.5. Netscape browser font settings window

Rice. 1.6. Assigning font sizes

Assigning font sizes

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

COLOR

This option sets the font color, which can be specified using standard names or in the #RRGGBB format. Here is an example of a document with multi-colored text.

Choosing a font color

Green text


Red text

Tag

The tag is used to indicate the default font size, type, and color used in the document. These values ​​are required for the entire document, but can be overridden in necessary places using the tag. After the closing tag, the tag's effect is restored. Default font settings can be overridden multiple times in a document, meaning a tag can appear any number of times in a document.

Note

The tag can also appear in a section of the document.

Note that there is no closing tag for the tag.

The parameters can be exactly the same as for the tag, namely: FACE, SIZE and COLOR. The purpose and rules for writing parameters are similar.

Note

The Netscape browser does not allow the FACE tag parameter.

Let's give an example of using the tag.

Assigning font sizes

Text written in the default font.

Font size 2.

Font size 4.

Text after table

The example above overrides the default font size twice. Initially it is 3 (default). Then it is set to 2, then 4. Pay attention to the display of this example (Fig. 1.7). It can be seen that the tag assignment does not work for tables. This is typical for many browsers, although it formally violates the idea of ​​using the tag.

Rice. 1.7. Displaying example WITH TAG (Netscape browser)

Formatting an HTML Document

Dividing into paragraphs

Any text, be it a school essay, a note in a newspaper or a technical description of a device, has a certain structure. The elements of such a structure are headings, subheadings, tables, paragraphs, etc.

One of the first rules for drawing up almost any document is to divide its text into separate paragraphs that express a complete thought. HTML documents are no exception to this rule. When creating documents using text editors, breaking into paragraphs is done by entering a newline character. Most editors implement this when you press the key. In HTML documents, newlines do not create a new paragraph.

HTML assumes that the author of the document knows nothing about the reader's computer. The reader has the right to set any window size and use any of the fonts available to him. This means that where the line hyphen occurs is determined solely by the viewer and the end user's settings. Because line feeds in the original document are ignored, text that looks great in the document's author's editor window may turn into solid, unreadable text in the viewer window.

You can avoid this trouble by using a special paragraph division tag.

Before the beginning of each paragraph of text you should place a tag

Closing tag

Note

Browsers typically interpret multiple paragraph tags in a row

As one. The same applies to the line feed tag
. Therefore, it is not possible to create multiple empty lines using these tags.

Tag

Can be specified with the horizontal alignment parameter ALIGN. Possible parameter values ​​are given in table. 1.4. The default is left alignment.

Table 1.4. ALIGN Parameter Values

Note that justification (ALIGN = JUSTIFY) has not been supported by browsers for a long time. Many HTML language descriptions specify only three options for alignment parameter values ​​(LEFT, CENTER, and RIGHT). Currently, all popular browsers can perform width alignment. Some problems with creating justified documents are also discussed in Chapter 8.

Note

The lack of justification currently seems surprising. This mode is used very often for printed publications. It is enough to pick up any newspaper or look closely at the paragraphs of this book - they are all aligned in width. However, until recently, justification was not allowed for HTML documents. Just a couple of years ago, no browser had such a mode. Thus, readers who are still using the Netscape browser version 3.x will not be able to see straight lines in the document. You can try to predict what other capabilities browsers will have in the future by comparing the capabilities of powerful text editors and modern browsers. An example of features that have not yet been implemented would be automatic hyphenation, etc.

Line translation

When displaying text documents in a browser, the location of line breaks within a paragraph is determined automatically depending on the size of the fonts and the size of the viewing window. Line breaks can only be carried out using word separator characters (for example, spaces). Sometimes in documents you need to set a forced line feed, which is implemented regardless of the browser settings. This is done using the forced line feed tag.
, which does not have a corresponding closing tag. Enabling a tag
into the document text will ensure that subsequent text is placed at the beginning of a new line. For example, this approach can be used to create list-type structures without using special list markup tags. Or, for example, this tag cannot be used to display poems, etc.

Here is an example of using forced line feed (Fig. 1.8):

Using forced line feed

Over darkened Petrograd

November breathed the autumn chill.

Splashing with a noisy wave

To the edges of your slender fence,

Neva was tossing around like a sick person

Restless in my bed.

A.S. Pushkin. Bronze Horseman

Rice. 1.8. Tag
can be used to force a line feed

Unlike the paragraph tag

When using the tag
an empty string will not be generated.

Using a tag
requires caution - it is possible that the browser has already made a line break one or two words before it encountered your tag
. This happens if the reader's viewer window width is smaller than the same setting of the program with which you tested your document. In this case, it may turn out that only one word remains on a line in the middle of a paragraph, thereby ruining the beauty of the document layout.

Note

When using the tag
To break text around an image or table, you can set the CLEAR parameter to stop text wrapping. You can read about this in chapters 3 and 4.

Tags u

There are situations when you need to perform the opposite operation - disable line feed. There is a container tag for this. Text marked with this tag is guaranteed to be on one line, regardless of its length. If the resulting line extends beyond the browser's viewing window, a horizontal scroll bar will appear.

Note

To ensure the continuity of text located in table cells, there is a special parameter of the NOWRAP tag . You can learn more about this in Chapter 4.

By marking up text using the non-breaking line tag, you can get very long lines. To avoid this, you can indicate to the reader's browser the location of a possible line feed, which will be performed only when necessary (the so-called "soft" line feed). This can be done by placing a tag (Word BReak) in the right place in the text, which is the same as the tag
, does not need a closing tag.

Note

The tag is not supported at all by the Netscape browser. The Microsoft Internet Explorer browser recognizes this tag only in text marked with tags.

Headings inside an HTML document

Along with the title of the entire document, a Web page can use headings for individual parts of the document. These headings can have six different levels (sizes) and are pieces of text that stand out on the screen when the browser displays the page.

The tags , , , , and are used to mark up headings. These tags require a corresponding closing tag. Heading number 1 is the largest (top-level heading), and heading number 6 is the smallest. Heading tags are block-level elements, so they cannot be used to mark up individual words of text to increase their size. Heading tags insert a blank line before and after the heading, so no paragraph or line break tags are needed.

Heading tags can be specified with the horizontal alignment parameter ALIGN. Possible values ​​of the parameter are the same as the alignment parameters of the paragraph tag

(see table 1.4).

An example of using headings of different levels with different alignment (Fig. 1.9):

Heading examples

Heading size 1

Heading size 2

Heading size 3

Heading size 4

Heading size 5

Heading size 6

Body of the document

Rice. 1.9. Display headings in different sizes

Horizontal lines

Another method of dividing a document into parts is to draw horizontal lines. They visually emphasize the completeness of a particular area of ​​the page. Nowadays, a raised, pressed line is often used to indicate the “volubility” of a document.

The tag allows you to draw a raised horizontal line in the window of most viewing programs. This tag is not a container, so it does not require a closing tag. A blank line is automatically inserted before and after the line. Tag parameters are presented in table. 1.5.

Table 1.5. Tag options

Example:

This example sets a horizontal line that takes up half the width of the viewport and is positioned in the middle of the window. Note that the alignment options only make sense when the line does not occupy the entire width of the window.

Note

The Netscape browser does not allow the COLOR tag parameter.

Using preformatted text

As you can see in the sections above, special tags should be used to break up text into paragraphs and force a line break. However, there are times when it is necessary to include text in an HTML document that already has formatting done in the traditional way using newlines, the required number of spaces, tab characters, etc. To solve such problems, a special container tag is provided Defining pre-formatted ( n reformatted) text.

The text marked with the tag will be displayed as it looks in a regular text editor. A monospaced font will always be used for display. This will give you more control over the document viewer's output, although at the expense of some flexibility.

One of the options for using this tag is tables built without using special table markup tags. Other important

The application is to display large blocks of program code (Java, C++, etc.) on the screen, preventing the browser from reformatting them.

Text inside a container Can contain text-level formatting except the following: , , , , , , , , . It is not acceptable to include block-level formatting elements, such as heading tags, within preformatted text. The paragraph tag, logically, should also not occur inside preformatted text, but if it does, it will implement a new line transition (without creating an empty one).

Note

The tag has an optional WIDTH parameter, the purpose of which is to tell the browser the maximum length of a line of preformatted text. Depending on this value, the browser could select the desired font and/or indentation to optimally display the preformatted text. The default value has been suggested to be 80. Other recommended values ​​are 40 and 132. Note that for readers with significant computing experience, these numbers speak volumes. In fact, modern browsers ignore the WIDTH parameter.

There are several more tags that solve a similar problem. These include the , AND tags. All three of these tags are marked as deprecated in the HTML 4.0 specification. This means that browsers will no longer support them in future versions. It is recommended to use the tag instead of these tags.

Tag

A container tag is a block-level element that serves to highlight a fragment of a document. The purpose of this selection is to control the parameters of this fragment, which is usually done by assigning styles. Here's an example:

(Document fragment)

In this example, a fragment of an HTML document is framed with tags to set some of its properties. In this case, all text elements of the selected fragment will be displayed in green. An analogue of a text level tag is the element.

Note that it is not advisable to use direct assignment of style properties of a separate fragment, as is done in the example, in accordance with the concept of separating the structure of the document and its presentation. You should use style sheets, which will be discussed in the second part of the book.

Tag

The container tag is designed to horizontally align all elements in the middle of the browser viewport. It is block level and is useful for centering elements such as tables, since they cannot be centered by assignment

ALIGN=CENTER tag

Essentially a tag is a short form of the following entry: . Further use of the tag is also undesirable for the reasons noted in the previous section.

Including comments in a document

You can include comments in an HTML document that are not visible to the reader. They can consist of any number of lines and must begin with the tag. Anything contained within these tags will not be displayed on the screen when viewing the page.

How to write correct CSS code?

Without knowing the basics, it is impossible to move forward. Moreover, these basics must be trained to a subconscious level. You must know all the rules for writing clean, understandable code by heart and apply them everywhere. Start right with your current or, at most, your next project. This will be your CSS bible

Below, see 15 golden rules for writing user-friendly and professional CSS code

CSS-reset is a certain piece of code that is written at the beginning of our style file, in which all values ​​are reset and all the basic parameters are set for all styles, which we would most likely have to write for each specific id/class. This allows you to shorten the code later, as well as avoid differences in display between browsers.

Here is a CSS-Reset example taken from http://meyerweb.com/eric/tools/css/reset/index.html

/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del , dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul , li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q: before, q:after ( content: ""; content: none; ) /* remember to define focus styles! */:focus ( outline: 0; ) /* remember to highlight inserts somehow! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tables still need "cellspacing="0"" in the markup */ table ( border-collapse: collapse; border-spacing : 0; )

For example, to write a long

Border-top: 5px; border-right: 10px; border-bottom: 15px; border-left: 20px;

we can write briefly:

Border: 5px 10px 15px 20px;

that is, clockwise starting from the top.

Mainly abbreviated border, margin, padding, font and background.

You can see more details about this

But colors can be reduced like this:

If the color code consists of 3 repeating digits, then you can simply write down these three digits.
For example: #FFFFFF can be written as #FFF, or #990055 can be written as #905, but #F091A4 cannot be abbreviated.

Use comments wherever you should - they really help organize the code, making it more understandable for yourself and for those who will work with it

It looks something like this:

/* Your comment here */

Comment:

a) Title of the style page - write who the author of the code is and when it was written

b) Mark style sections - this will organize all the code into sections.
For example:

c) Comment on problem areas. For example, those where the page may have differences in different browsers. For example:

Input /* IE6 Problem */

d) Write small comments to those with whom you work - for example, when something needs to be improved.

With small css files it is not difficult to track all the colors of the site.
But what if we have 5000 lines of code? - you can’t allow the wrong colors to be used.
For this purpose, there is a color legend - that is, a list of the colors that we use in our file. For example:

/* /* light blue: #4595be /* dark blue: #367595 /* red for links: #9F1212 ************************** ******/

Most beginning layout designers get confused by these concepts, but there is a rule that allows you to avoid confusion.

Position:absolute positions the object relative to the page - no matter where it is located in the HTML stream. The default value is 0 on the left and 0 on the top.

Usually this option is not used because it is inconvenient and has limited options. But what will be useful to you is that if you set the parent (“wrapper”) of our element to Position: realtive, then Position: absolute will be aligned Relative to the upper left corner of the parent. So you can add this property as needed. Clearly in the picture:

Sometimes browsers like IE6 and IE7 simply force us to use hacks. Khaki is an immediate error for the validator. So put it in special css files for each browser.
You can see special entries for hacks for each browser and how to put them into separate files

This is not something that gets noticed very often, but it helps avoid problems across different browsers.

The idea is this: instead of using padding on the parent, we use margin on the child elements. So, instead of

#main-content ( padding-left: 10px )

#main-content ( ) #main-content #left-column ( margin-left: 10px )

There is nothing wrong with using padding, but experience shows that margin is better

If you want to assign a float to an element, then write overflow: hidden to its parent

Ul ( overflow: hidden; ) ul li ( float: left; )

Without this property, the element may flow unattractively; problems may also arise when setting margins or borders.

If you want the element not to be floated, specify clear:both below the floated element. This is often used instead of overflow: hidden;

A fairly well-known problem in IE6 with doubling margins on float elements. That is, if we need 20px, then we have to write 10px, because this indent doubles. Although IE6 is already dying out, and many designers do not spend time optimizing the site for it, still a small piece of code will make the display in it more pleasant. So, let's put

Display: inline /* IE6 Problem */

for an element that has a float applied to it

Sprite pictures are a very convenient thing. They give an overview of the entire page's graphics and reduce loading times.

If you know English, then here

Take the time to make the site structure clear. Put everything on the shelves.
For example:

Here “Website Name” is the name of the site we are working with. This folder contains the HTML files for the site, plus the assets and styles folders.
The assets folder contains files that can be downloaded from the site, such as archives or PDF files. The styles folder contains, in turn, the css, images, javascript folders.

• css - contains all css files such as reset.css, layout.css and main.css
• images - all pictures of the site. This folder can also be divided into sections.
• javascript - all javascript files.

This diagram is approximate and can be displayed in different ways. The idea is that it helps you work faster and makes the site clearer and neater.

Optional advice - It is better to write the names of classes and id styles, observing a tree structure, so that everything is clear and visual.

Everything is quite simple - pixels load the code less, since the document does not have to calculate percentages of relative values.

The problem with relative quantities is the transmission of this relativity.
To make it clear, I will explain with an example:

body ( font-size: 62.5% ) means font-size: 1em, that is 10px.

If #blog-content needs 14px, write:

#blog-content ( font-size: 1.4em; )

Now if the H3 tag inside #blog-content needs 20px, then it could be set like this:

#blog-content ( font-size: 1.4em; ) #blog-content h3 ( font-size: 2.0em )

Everything would be fine, but we have relativity. And these 2.0em are applied to 1.4em
#blog-content’a , and as a result, the size we will get is 28px.

So use fixed values.

New browsers do not have this problem; it all comes down to a number of older browsers, led by IE6.
The problem is that in older browsers pseudo-classes (like :hover) only work when applied to a tag a, that is

#header ul li:hover ( background-color: #900 )

doesn't work in IE6

This problem is fixed with jQuery

Use selectors where possible

For example, use instead

#main-content.main-header

#main-content h1

Be careful with grouping selectors

After all, relative values ​​can play wrong here if you use them

If everything is ok in this example,

Main-content div,.main-content p ( color: #000; )

On this note, be careful with relative values.

Main-content div,.main-content p ( line-height: 1.3em; )

To write successful code, avoid constantly wrapping one thing into another and so on.
Learn h1, ul and p tags.
The key to success is simple - practice, practice, practice

Good luck with your training)

» »

Rules are part of our world and constantly guide our daily actions. In almost every area of ​​our lives there are rules - rules of behavior, rules of etiquette, rules of crossing the street - the list can be endless.

What are the rules? It is a set of instructions that must be followed or obeyed. There are many English words that imply rules, or refer to rules:

• Cautions - warning
• Commandments – order, directive
• Directions - instructions
• Forewarnings - warning
• Guides
• Guidelines
• Instructions - instructions
• Laws - laws
• Policies - settings
• Procedures
• Regulations - rules
• Warnings - warnings

Google shortcode

Rules affect us every day and are hard to avoid even in the simplest of places, even when we are just walking down the street it is impossible to miss all the signs posted around us giving warnings and indicating to the rules to follow. The easiest way to explain a rule is to write it down in a book or put up signs that everyone can see. Here are some rules posted in the form of signs that we can often see on the streets and in public places, known as warning signs.

• no cycling – you cannot ride bicycles
• no entry – entry is prohibited
• no skating allowed - you cannot roller skate
• beware of oncoming bicycles - beware of oncoming bicycles
• Keep clear = do not block this area – do not occupy this area
• you can’t fill your gas cans here - you cannot fill gas cylinders
• poison = do not eat it – poison = you can’t eat
• no smoking allowed - no smoking
• beware of people crossing the road - be careful, pedestrians
• no parking allowed – parking is prohibited
• do not drop litter - do not throw garbage
• no children allowed – children are not allowed
• no photography allowed – photography is prohibited
• please clean up after your dog – clean up after your dog
• danger of death – danger, high voltage electricity nearby – dangerous! – dangerous, high voltage
• no spitting allowed - you can’t spit

As you can see, there are a lot of rules around us, and we must follow them, although it must be said that sometimes people do not follow the rules, they break the rules, or go against the rules. the rules), sometimes they are “caught” and punished (they are punished). If you break a rule, you may be forced to pay money, i.e. a fine/penalty, or worse, may force you to go to the police station.

Have you ever broken the rules? People who always follow the rules are called “law abiding”, and people who break the rules are called “law breakers”.

Finally, we would like to wish you “be good!” , “follow the rules!”, “stay out of trouble!”