Document title tags. Required tags. HTML Document Structure

These tags include elements that are located in the container . All these tags are not directly displayed in the browser window, except for the tag

Site description specified using a tag and description values, usually displayed in search engines or directories when displaying search results. The keywords value is also intended primarily to increase the site's ranking in search engines; it lists the keywords found on the web page (example 5.3).

Example 5.3. Using keywords

Keywords can be listed separated by spaces or commas. Search engines themselves will convert the entry into the form they use.

Tags are important elements displaying the structure of an HTML document. To help the browser distinguish them from plain text, they are enclosed in angle brackets. A tag indicates the start of some mapping instruction. If this statement applies to the entire document, then this tag does not have its closing twin. But most tags still have a pair that terminates the effect of the first tag. For example, every Web page should begin with the tag , and end with its closing twin . Note that the closing tag differs from the opening tag only by the presence of a forward slash after the first angle bracket.

Also, some tags have parameters that specify the rule for displaying content. A little later we will see an example of how these parameters are used, but for now we will just note that these parameters can only be specified in the opening tag.

The names of tags and their parameters can be written in any case, both in large characters and in lowercase. The HTML analyzers built into every browser do not pay attention to the case of characters, which are used to write all the service constructs of HTML documents.

Naturally, as in any computer language, you cannot do without comments, the contents of which are not processed by the browser and are not displayed. They serve only for the convenience of the developer, for internal documentation of the structure of the document. Comments are included between fragments<-- и-->. Here is an example of creating comments: <--Это комментарий -->

Any Web page is structurally divided into two parts: header and body. The header indicates service information about the entire Web page, and in the body of the Web page we already describe its contents along with the rules for its display. In this case, the title of the Web page is limited by tags And , and the body of the document is indicated by tags And . But according to the rules of good programming style, the identifier of the HTML standard used is also placed before the header. Thus, the structure of any Web page looks like this:

"http://www.w3.org/TR/html4/strict.dtd">


Document title


Document body

First tag with all its parameters and is the same identifier that tells the browser which version of HTML was used to create this Web page. This rather cumbersome and incomprehensible construction is actually an alien from the language of more high level XML. It is understood that in the future browsers will be able to work simultaneously with both regular Web pages written in XML and HTML documents. Therefore, with this bright future in mind, this identifier tag is used. The exact date of this bright future, as usual, is unknown, so very often this identifier is neglected without any consequences. But forethought, as we know, is better than hindsight, so it’s better to still use the identifier.

Now let's look at the title. It may include: a tag that displays the name of this Web page, a tag that defines the style of the Web page, a tag for the script being executed, and so-called metadata. The styling of Web pages will be discussed in the second chapter, and the scripts to be executed in the third. We'll talk about metadata a little later, but now we'll learn how to use the name of a Web page.

You probably noticed that when loading a Web page, the short name of the downloaded document appeared in the very top line of the browser. To create such a header, use the tag with the corresponding closing pair. The initial block of a Web page with such a heading might look like this:

The title of a Web page should never be neglected, as it is the very first thing a Web site visitor sees. The header is displayed before the page content is even loaded. Therefore, you should choose it carefully.

We have dealt with the first part of the structure of the Web page; now we can move on to the body of the HTML document, its main part. As we already know, the content of a Web page is located between tags And . In the simplest case, it can be ordinary text. The browser will interpret it correctly and display it. Let's try to see this with an example.

To create our first Web page, we will need a regular text editor. Standard Notepad will do just fine. It will be enough for us to create text file, the contents of which are shown in Listing 1.1.

"http;//www.w3.org/TR/htral4/strict.dtd">





Good day to everyone who has visited my humble site.

Don't forget that when saving a file, you should set it to htm extension or html. If you then launch it for execution, simply click on its name in Windows Explorer, then the default browser installed in operating system, and the HTML document will already be loaded into it. What our first Web page looks like in a browser Internet Explorer visible in Fig. 1.1.

Rice. 1.1. The result of viewing the file shown in Listing 1.1 in a browser

But it should be noted that the tag may contain additional options. We already said a little earlier that parameters are included in the start tag of the design. Now it's time to see how it actually happens.

Most often, a parameter is a name-value pair.

Let's look at simple example. The bgcolor parameter allows you to set the background color on which the content of the Web page will be displayed. For example, if we want to use a green background, then we should use the following construction:

It should be noted that all text values parameters are usually enclosed in quotation marks. We will learn about how colors are set in the following sections of this chapter, but now let’s return to the tag parameters .

About the parameter bgcolor, which allows you to set the background color of a Web page, we already know. Let's consider the remaining parameters.

• Parameter background allows you to use any background as a background graphic image. The value of the parameter is the address of this image, i.e. its URL.
• Parameter text specifies the font color that will be used to display the text content of the Web page.
• Parameter link allows you to set the color with which text hyperlinks embedded in the content of a Web page will be displayed in the browser viewing window.
• Parameter vlink sets the color of hyperlinks that the user has already visited in the current session.
• Parameter alink specifies what color will be used to display hyperlinks selected by the user.
• Parameter lang indicates in what language the text content of the Web page is written. The value is the two-letter language codes given in RFC 1766. In fact, we don't need to know all of these codes. In the vast majority of cases we will use Russian or English language. Their codes are "gu" and "en" respectively.

In addition to the above parameters, the tag may have two identifying parameters id And class, but in practice they are almost never applied to this tag.

As you can see, everything is simple and unpretentious. Now is the time to learn what metadata is. Metadata can most likely be defined as non-displayable information about a document. It is used to identify a document and indicate the display mode of a Web page. To embed metadata into a Web page, use the tag . Most often it looks like this:

However, setting your own variables is only necessary if Web pages are processed using a specialized Internet application. But such a need arises quite rarely. So, it turns out that this metadata does not provide any real benefit? This is wrong.

As we all know, it is not enough to simply put a website on the World Wide Web. We still need to make sure that it gets included in the search engine lists. We will not now consider the entire procedure for registering a site on search engines, especially since each such machine has its own registration procedure. We are interested in something else.

Where do search engines get information about the content of a particular Web page? Just from metavariables. The most commonly used metavariables are keywords and description. The keywords variable contains as its value a list of keywords for the Web page. And the description variable is intended to store a brief annotation of the Web page. Let's give an example of using such metadata. Let's assume that our Web page is devoted to the complex and sensitive issue of proper feeding of hamsters. Then its structure should look something like this:

"http://www.w3.org/TR/html4/strict.dtd">


All about feeding hamsters

description" contferit="Web page about feeding small animals
rodents, in particular hamsters, in home conditions">


Oh, these little cute animals are hamsters. ,

Naturally, bearing in mind that the identification of the content of Web pages by search engines is carried out using keywords specified by the developer, there may be a temptation to enter into their composition words that do not reflect the essence of the document, but are often requested by search engine visitors. I should note that this trick may not work. The fact is that search engines often also scan the text of the Web page itself, and if a keyword does not appear in it, then it is simply not taken into account.

You should also pay attention to the fact that when specifying keywords, we added to the tag additional parameter lang. We have already said that this parameter is intended to indicate the language in which this or that text is written. In our example, we indicated that the listed keywords are written in Russian, i.e.: we can define sets of keywords in several languages, using several tags for this .

Metadata also allows you to transmit so-called HTTP headers. Here it is necessary to make a small technical digression. All HTML documents are transmitted using specialized programs called Web servers using a specific set of rules. This set of rules for receiving and transmitting information is called a protocol in the computer industry. A set of rules for transferring Web pages and data from remote users called the HTTP (HyperText Transfer Protocol). This protocol has a set of directives and variables that are often called HTTP protocol headers.

We are not faced with the task of studying all the variables HTTP protocol, it will be enough for us to know about its most frequently used headings. First of all, it is worth mentioning the Expires variable, which allows you to set the so-called expiration date of a Web page. The fact is that browsers and some other communication programs store the Web pages visited by the user in a cache, and then, when the user requests them again, they slip these copies to him, thus saving the time of retrieval. But Web pages are still updated quite often. Therefore, the user may receive an outdated copy.

Of course, there are ways to configure cache rules, but not everyone uses them. Therefore, it is better to play it safe and indicate the “expiration date” of the Web page. If it passes, then the browser, instead of using a copy from the cache, will still request the document from the Internet.

Tag , adapted to indicate the expiration date of a Web page, looks approximately like this:

The example shows that to indicate the name of the standard non-variable HTTP protocol, the parameter is used http-equiv, and to set the value of this variable, use the already familiar content parameter. It is also easy to notice that setting the date of last use of a document is done using the Expires variable, and its value must be specified in a certain text format with the time indicated according to the Greenwich meridian.

However, it may also happen that the information on the page is updated so quickly that it needs to be reloaded several times during one session. Such pages with information updated in real time are quite common, for example, in chat rooms or when displaying changes in stock quotes during the trading day on the stock exchange. In this case, you must use a variable called Refresh. The value of this variable is specified in seconds. Then the tag we are considering will take the following form:

<МЕТА http-equiv-"Refresh" cpntent=10>

A page with a similar design in the title block will automatically reload every ten seconds.

This concludes our discussion of the header structure of an HTML document. We move on to studying the structure of the main section of the Web page. As we remember, all information displayed in the browser viewing window is placed between tags And . About what opportunities it gives us to specify the rules for displaying the content of a Web page HTML language, we will find out in the following sections of this chapter. Here we consider only general structure HTML document.

HTML gives us the ability to set a unique identifier for each tag we use. Let's say, if our text is divided into paragraphs, then for each paragraph we can set its own specific name, and then, using some additional funds HTML language, control the display of these paragraphs. We can make some of them invisible, change the font color, i.e. change the rules for their display. Moreover, this applies not only to paragraphs, but to all parts of the content of a Web page that are enclosed in certain tags.

The id parameter is used to identify a tag. Let's return to the example with paragraphs of text. Looking ahead a little, we can say that paragraphs are indicated using a couple of tags <р> And . Thus, the creation of paragraphs that we can then distinguish is done using approximately the following construction:

<р id="р1">First paragraph
<р id="p2">Second paragraph

Values ​​of all parameters id must be unique in an HTML document. If a couple meets identical values, then these identifiers are simply ignored. Naturally, using the parameter id is optional. It makes sense to use it only in cases where the construction with the identified tag will be subject to styling (which we will talk about in the second chapter), or this tag will be a bookmark in the document, to which some kind of hyperlink will point, or the identified construction will processed dynamically using DHTML instructions, which we will learn about in chapter three. Identifiers are also used in cases where an HTML document is processed by specialized applications, but this is for very serious programmers. We don't really need this yet.

If the parameter id is used for unique identification, then using the parameter class we can assign a tag to one group or another. This option is used for styling purposes only. We simply divide some elements of the Web page into classes, and then it is enough to change the description of the class display rules in one place, and this change will automatically spread to all tags that are included in this class.

We also have access to methods for combining adjacent elements of a Web page into single blocks. All design elements of HTML documents are divided into two types. Inline elements, which are most often just text elements, and block elements. Inline elements can be part of a line, and block elements always occupy a separate place on the Web page and must always begin with new line. Naturally, block elements can include other block elements and inline elements. For obvious reasons, inline elements cannot include block elements.

Combining elements of a Web page into blocks allows you to apply a single design to them, to carry out some semblance of layout. It will be enough to change the location of the block by changing one unifying tag. Naturally, this is more convenient than changing the location of each element of the Web page individually.

The tag is used to combine block type elements

.
 Tag 
Allows text to be presented with specific formatting on the screen.  Pre-formatted text ends with an end tag
.  Within pre-formatted text, you can use: line feed, tab characters (shift by eight characters to the right), disproportionate Courier font installed by the browser.

List tags. There are three main types of lists in an HTML document: numbered, bulleted, and description list.
You can create nested lists by using different list tags or repeating ones within others.  To do this, you simply need to place one pair of tags (start and end) inside the other.  Whether nested list items will have the same markers denoting the list item depends on the browser.
Numbered lists.  IN In a numbered list, the browser automatically inserts the item numbers in order.  This means that if you delete one or more items from a numbered list, the remaining numbers will be automatically recalculated.
 
and ends with the tag
 
.

Bulleted lists.  For For bulleted lists, the browser typically uses bullets for the list item.  The type of marker is usually configured by the browser user.
A numbered list begins with a start tag 
and ends with the tag
.  Each list element starts with a tag<ы>.

Font formatting. HTML allows two approaches to font selection of text fragments.  On the one hand, you can directly indicate that the font in a certain section of the text should be bold or italic, i.e.  change the physical style of the text.  On the other hand, it is possible to mark some piece of text as having some non-normal logical style, leaving the interpretation of that style to the browser.
Graphics inside an HTML document. One of the most attractive features of the WEB is the ability to include graphical and other types of data in an HTML document.
There are two ways to use graphics in HTML documents.  The first is the embedding of graphic images into a document, which allows the user to see images directly in the context of other elements of the document.  This is done using the tag .  This tag is dotted, i.e.  it doesn't close.  Tag syntax:

The required parameter has the same syntax as a standard URL.  This URL tells the browser where the
drawing.  The drawing should be kept in graphic format supported by the browser.  Today it is GIF formats, JPG, PNG.  They are supported by most browsers.
ALT="text"
This optional element specifies text that will be displayed in a browser that does not support graphics or with image graphics disabled.  This is usually a short description of the image that the user could or will be able to see on the screen.  If this parameter is absent, then most browsers display an empty frame in place of the picture.  Tag recommended if users are using a non-graphical browser, such as Lynx, and for search engine indexing.  The text is also visible when you hold the mouse cursor for some time without moving over the image as a system tooltip under the cursor.
Most browsers allow you to include background picture, which will be duplicated as tiles in the bathroom and displayed in the background of the entire document.  This is the second way.  Some users like background graphics, some don't.  An unobtrusive translucent pattern (wallpaper) usually looks good as a background for most documents.
Hypertext links are a key component that makes the WEB attractive to users.  By adding hypertext links (hereinafter referred to as links), the user makes the set of documents connected and structured, which allows him to obtain the information he needs as quickly and conveniently as possible.
Links have a standard format that allows the browser to interpret them and perform the necessary functions (call methods) depending on the type of link.  Links can point to another document, a special place of this document or perform other functions, such as requesting a file.  You can use text or an image or both as a hyperlink.
Link structure in an HTML document. In order for the browser to display a link to a URL, you must place text or an image inside the hyperlink tag.  The HTML syntax is as follows:
<А HREF="URL">text-or-image-that-will-be-highlighted-as-a-link

Tag<А HREF="URL">opens the description of the link, and the tag– closes it.  Any text located between these two tags is highlighted in a special way by the web browser.  Typically this text appears underlined and highlighted.  The image is framed by a rectangular frame.  The text that represents the URL is not displayed by the browser, but is used only to perform its intended actions when the link is activated (usually by clicking on highlighted or underlined text).
Links to tags within the document. You can link to different areas or sections of the same document by using special hidden labels for those sections.  This allows you to quickly move from section to section within a document without scrolling the screen.  As soon as the user clicks on the link, the browser will move him to the specified section of the document, and the line containing the label for this section will be placed on the first line of the browser window (if the “length” of the document in the browser window is sufficient).



				

				










			
				

			Read more:
				


     

        

            
                
            
        
 2024-09-08 01:06:17
        
How to pay for a purchase on Aliexpress from a mobile phone?
    
 

        

            
                
            
        
 2024-09-07 01:10:21
        
How to save and restore Firefox tabs - Session Manager Installing a session manager
    
 

        

            
                
            
        
 2024-09-07 01:10:21
        
Why can’t I log into VK and what to do?
    
 

        

            
                
            
        
 2024-09-07 01:10:21
        
Determining the device ID for driver installation
    
 

        

            
                
            
        
 2024-08-03 01:08:19
        
Installing and configuring the Mozilla Thunderbird email client
    
 

        

            
                
            
        
 2024-08-01 01:08:07
        
What to bring from this country