home » Auto-Moto » DOCTYPE. HTML standards. Valid layout. HTML and XHTML standards. This is a text title

DOCTYPE. HTML standards. Valid layout. HTML and XHTML standards. This is a text title

If you open any web page, it will contain typical elements that do not change from the type and focus of the site. Example 4.1 shows the code simple documentcontaining the main tags.

Example 4.1. Web page source

Sample web page

Heading

First paragraph.

Second paragraph.

Copy the contents of this example and save it in the c: \\ www \\ folder as example41.html. After that launch the browser and open the file via the menu item File\u003e Open File (Ctrl + O)... In the Select Document dialog box, specify the file example41.html. The web page shown in Fig. 4.1.

Figure: 4.1. Example execution result

Element is intended to indicate the type of the current document - DTD (document type definition, document type description). This is necessary for the browser to understand how the current web page should be interpreted, since HTML exists in several versions, and there is also XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs in syntax. So that the browser does not "get confused" and understands according to which standard to display the web page and it is necessary to set .

There are several types , they differ depending on the version of HTML they are targeting. Table 4.1. lists the main types of documents with their description.

Tab. 4.1. Valid DTDs

DOCTYPE	Description
HTML 4.01
	Strict HTML syntax.
	Transitional HTML syntax.
	Frames are used in the HTML document.
HTML 5
	There is only one doctype in this version of HTML.
XHTML 1.0
	Strong XHTML syntax.
	Transitional XHTML syntax.
	The document is written in XHTML and contains frames.
XHTML 1.1
	The developers of XHTML 1.1 anticipate it will gradually replace HTML. As you can see, this definition has no division into types, since the syntax is the same and obeys clear rules.

The difference between strict and transient document descriptions is the different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving. Transitional HTML is more "relaxed" about some code flaws, so this type is preferable in certain cases.

For example, in strict HTML and XHTML, the tag , but in transitional HTML it can be omitted or omitted. At the same time, remember that the browser will display the document in any case, regardless of whether it matches the syntax or not. Such verification is carried out using a validator and is intended primarily for developers to track errors in the document. In what follows, we will mainly apply the strict<!DOCTYPE> , unless otherwise specified. This will allow us to avoid common mistakes and teach us to write syntactically correct code. You can often find HTML code without using<!DOCTYPE> , the web page will still be shown in such a case. However, it can happen that the same document is displayed differently in the browser when using<!DOCTYPE> and without it. In addition, browsers can display such documents in their own way; as a result, the page will "crumble", i.e. will be displayed in a completely different way than the developer needs. To avoid situations like this, always add<!DOCTYPE> to the beginning of the document.Tag <html> defines the beginning of the HTML file, inside it is the header ( <head> ) and document body ( <body> ).Document title, as the block is also called <head> , can contain text and tags, but the content of this section is not shown directly on the page, except for the container <title> . <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Tag <meta> is universal and adds a whole class of capabilities, in particular, using meta tags, as this tag is generically called, you can change the page encoding, add keywords, document description and much more. So that the browser understands that it is dealing with the UTF-8 encoding (Unicode transformation format, Unicode transformation format), this string is added. <title>Sample web page

Tag defines the title of the web page, this is one of the important elements designed to solve many problems. IN <a href="https://bilimdon.ru/en/kakoi-linuks-vybrat-dlya-organizacii-kakoi-distributiv-operacionnoi-sistemy-na-baze-linux-skachat-i.html">operating system</a> Windows title text is displayed in the left <a href="https://bilimdon.ru/en/strelka-v-pravom-verhnem-uglu-na-androide-chto-oznachayut-znachki-na-telefone.html">upper corner</a> browser windows (fig. 4.2). <img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy> Figure: 4.2. Browser header view Tag <title> is required and must be present in the document code.Be sure to add a closing tag</head> to indicate that the document's title block is complete.Document body <body> designed to accommodate tags and content of the web page. <h1>Heading</h1> HTML offers six different levels of text headings that indicate the relative importance of the section after the heading. So, the tag <h1> represents the most important first level heading, and the tag <h6> serves to indicate a level six heading and is least significant. By default, the first level heading is displayed in the largest bold type, and the next level headings are smaller. Tags <h1>...<h6> refer to block elements, they always start with <a href="https://bilimdon.ru/en/preobrazovanie-stroki-v-chislo-1s-8-3-novye-funkcii-raboty-so.html">new line</a>and after them other items are displayed on the next line. In addition, white space is added before and after the title.  Some text can be hidden from display in the browser by making it a comment. Although the user will not see such text, it will still be transmitted in the document, so by looking <a href="https://bilimdon.ru/en/kak-otkryt-kod-html-brauzere-kak-otredaktirovat-i-sohranit-ishodnyi.html">source</a>, hidden notes can be discovered. HTML basics contain the basic rules of the HTML language, a description of the structure of an HTML page, relations in the structure of an HTML document between HTML elements. HTML document is normal <a href="https://bilimdon.ru/en/vosstanovit-kontekstnoe-menyu-windows-7-vosstanovlenie-v-kontekstnom-menyu-punkta-sozdat---tekstovy.html">text Document</a>, can be created as usual <a href="https://bilimdon.ru/en/sed-linuks-dobavit-simvol-v-konec-stroki-ispolzuem-potokovyi.html">text editor</a> (Notebook), and in specialized, with code highlighting (Notepad ++, Visual Studio Code, etc.)... HTML document has the extension .html. An HTML document consists of a tree of HTML elements and text. Each element is denoted in the original document by a start (opening) and end (closing) tag (with rare exceptions). Start tag shows where the element starts, the ending shows where it ends. End tag is formed by adding a slash / before the tag name:<имя тега> … </имя тега> ... Between the start and end tags is the content of the tag - content. Single tags cannot store content directly, it is written as an attribute value, for example, a tag <input type="button" value="Button"> will create a button with text Button inside. Tags can be nested within each other, for example, Text ... When investing, you should follow the order of closing ("matryoshka" principle), for example, the following would be incorrect: Text . HTML elements can have attributes (global, which apply to all HTML elements, and their own). Attributes are written in the element's opening tag and contain a name and value specified in the format attribute name \u003d "value". Attributes allow you to change the properties and behavior of the element for which they are set. Each element can be assigned multiple class values \u200b\u200band only one id value. Multiple class values \u200b\u200bare separated by a space, <div class="nav top"> ... The class and id values \u200b\u200bmust only consist of letters, numbers, hyphens, and underscores, and must begin with only letters or numbers. The browser views (interprets) an HTML document, building its structure (DOM) and displaying it according to the instructions included in this file (stylesheets, scripts). If the markup is correct, then the browser window will display an HTML page containing HTML elements - headers, tables, images, etc. Interpretation process (parsing) starts before the web page is fully loaded into the browser. Browsers process HTML documents sequentially from the beginning, while processing CSS and matching style sheets to page elements. HTML document consists of two sections - heading - between tags <head> … </head> and the content part - between the tags <body> … </body> . <h2>Web page structure</h2> <h3>1. The structure of the HTML document</h3> The HTML language follows the rules contained in the document type declaration file (Document Type Definition, or DTD)... A DTD is an XML document that defines which tags, attributes and their values \u200b\u200bare valid for a particular HTML type. Each HTML version has its own DTD. DOCTYPE is responsible for the correct display of the web page by the browser. DOCTYPE defines not only the HTML version (like html), but also the corresponding DTD file on the Internet. <!DOCTYPE html>  <html> <head>  <meta charset="UTF-8">  <title>...

Elements inside a tag , form a document tree, the so-called document object model (DOM)... Moreover, the element is the root element.

Figure: 1. The simplest structure of a web page

To understand the interaction of elements of a web page, it is necessary to consider the so-called "Family relationship" between elements. Relationships between multiple nested elements are categorized as parent, child, and sibling.

Ancestor - an element that contains other elements. In Figure 1, the ancestor for all elements is ... At the same time, the element is the ancestor for all the tags it contains: