HTML Basics contains the basic rules HTML language, description of the structure of an HTML page, relationships in the structure of an HTML document between HTML elements.
An HTML document is a regular text document that can be created either in a regular text editor (Notepad) or in a specialized one with code highlighting (Notepad++, Visual Studio Code, etc.) . An HTML document has a .html extension.
An HTML document consists of a tree of HTML elements and text. Each element is identified in the source document by a start (opening) and an ending (closing) tag (with rare exceptions).
The start tag shows where the element begins, the end tag shows where it ends. The closing tag is formed by adding a slash / before the tag name: .... Between the start and closing tags is the content of the tag - the content.
Single tags cannot store content directly; it is written as an attribute value, for example, a tag will create a button with the text Button inside.
Tags can be nested inside each other, for example,
Text
. When investing, you should follow the order in which they are closed (the “matryoshka” principle), for example, the following entry will be incorrect:Text
.HTML elements can have attributes (global, applied to all HTML elements, and their own). Attributes are written in the opening tag of the element and contain a name and value, specified in the format attribute name="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 and only one id value. Multiple class values are written separated by a space, . The class and id values must consist only of letters, numbers, hyphens, and underscores, and must begin with only letters or numbers.
The browser views (interprets) the HTML document, building its structure (DOM) and displaying it in accordance with the instructions included in this file (style sheets, scripts). If the markup is correct, the browser window will display an HTML page containing HTML elements - headers, tables, images, etc.
The interpretation process (parsing) begins before the web page is fully loaded into the browser. Browsers process HTML documents sequentially, from the beginning, while processing CSS and relating style sheets to page elements.
An HTML document consists of two sections - the header - between the tags ... and the content part - between the tags ....
Web page structure 1. HTML document structureHTML 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 are valid for a particular HTML type. Each version of HTML has its own DTD.
DOCTYPE is responsible for the correct display of a web page by the browser. DOCTYPE specifies not only the HTML version (eg html) but also the corresponding DTD file on the Internet.
...
The elements inside the tag form a document tree, the so-called document object model, DOM (document object model). In this case, the element is the root element.
Rice. 1. The simplest structure of a web page To understand the interaction of web page elements, it is necessary to consider the so-called “family relationships” between elements. Relationships between multiple nested elements are classified as parent, child, and sister.
An ancestor is an element that contains other elements. In Figure 1, the ancestor for all elements is . At the same time, the element is the ancestor of all the tags it contains: ,
. . . etc.
A descendant is an element located within one or more element types. For example, is a descendant of , and the element
Is a descendant of both and .
A parent element is an element that is related to other elements at a lower level and is located above them in the tree. In Figure 1 and . Tag
Is parent only to .
A child element is an element that is directly subordinate to another element at a higher level. In Figure 1 there are only elements , ,
And are children of .
A sister element is an element that has a common parent element with the one in question, the so-called elements of the same level. In Figure 1 and are elements of the same level, as well as elements , and
They are sisters to each other.
1.1. Element 1.2. ElementSection ... contains technical information about the page: title, description, keywords For search engines, encoding, etc. The information you enter there is not displayed in the browser window, but it contains information that tells the browser how to process the page.
1.2.1. ElementThe required section tag is . The text placed inside this tag appears in the title bar of the web browser. The title should be no more than 60 characters long to fit completely in the title. The title text should contain as much as possible full description web page content.
1.2.2. ElementAn optional section tag is a single tag. With its help, you can set a description of the page content and keywords for search engines, the author of the HTML document, and other metadata properties. An element can contain multiple elements because they carry different information depending on the attributes used.
The description of the page content and keywords can be simultaneously specified in several languages, for example, in Russian and English:
Using a tag, you can block or allow indexing of a web page by search engines:
To automatically reload the page after a specified period of time, you need to use the refresh value:
The page will be reloaded after 30 seconds. To redirect the visitor to another page, you need to specify the URL in the url parameter:
The first tag is the identifier of the HTML standard being used. The example shown is set to conform to the latest HTML5 standard.
Header informationThe container contains information for browsers and search engines.
Between a pair of tags... the entire content of the web page is stored, which is displayed on the monitor screen in the browser window.
What is HTML and what is it intended for - 3.7 out of 5 based on 3 votes
Before starting to study, I propose to consider what html is and what it is intended for.
HTML stands for Hyper Text Markup Language, which can be translated as hypertext markup language. Internet pages are created using this language.
HTML is not a programming language. It is intended for marking text documents. That is, by and large, we use it to format the text.
So how can we edit text using HTML? The fact is that the HTML language consists of tags. Each tag determines how the text on your page will look.
To put it another way, each tag gives a specific command to your browser (the program with which you view Internet pages), the browser understands this command and displays ready-made text formatted in a certain way on your screen.
Therefore, you do not see the code itself; the browser displays ready-made formatted text and graphics on your monitor screen. If you want to see for yourself html code and tags that are used to format the text that you are currently reading, then go through your browser Internet Explorer to the menu item > View and from the drop-down list select item > Source. Look at the picture.
As a result, a window containing the code will open. Similar to the one you can see in the second picture. You can scroll and look at this code, it mainly consists of tags, which in most cases have text inside. Thus, without going into details, we can say that each tag determines where, how, what font, what color your text will look like.
But in fact, HTML tags can do more than just format text; with them you can insert an image on a page, create tables, create links, and much more.
Each tag performs its own specific functions, and in order to learn how to create web pages, you need to know what this or that tag is intended for. I think that now you understand a little what html is.
First, let's look at what a tag is. To put it very simply, tags consist of ordinary English characters or words, only these letters and words are designed in a certain way.
Each tag consists of angle brackets,< >inside which certain symbols are placed. Most of them consist of opening and closing.
For example, the tag is opening and the tag is closing. As you can see, they differ in the presence of a slash / in the closing symbol. If you place any word between them, for example, hello, it will be displayed in bold. Everything that is enclosed in angle brackets in this case is not displayed on the screen, but is a kind of command for the browser that the word that is enclosed between these tags should be displayed in bold.
There are naturally many tags and each of them performs its own specific functions. All other tags and the entire HTML as a whole work on approximately the same principle. When you request any document from the Internet, your browser downloads the html code, interprets it properly and displays ready-made formatted text, graphics, tables, etc. on your screen.
The purpose of this lesson was to give you an idea of what HTML is; in the next lessons we will begin to study this markup language. To make it easier for you to learn the material, I recommend starting to study the lessons with the simplest ones, smoothly moving on to more complex ones, for example in the following sequence: at the beginning, study how a document is used to set and produce, learn how to set, etc. to more complex.
To create HTML pages you can use special programs, such as , and you can create pages using a simple text editor, which is available in any version of Windows.
When creating a website, the first thing you need to imagine is how the web page is formed. This is a kind of “foundation” in website building. Therefore, before delving into more complex website creation technologies, it is recommended to have at least basic knowledge of HTML. In this lesson we will get acquainted with HTML, analyze the structure of an HTML document and practical examples Let's consolidate the acquired knowledge.
What is HTML?HTML stands for HyperText Markup Language. This language is responsible for exactly how hypertext will be displayed on site pages. Now let's figure out what hypertext is? It's no secret that a single web page can contain a lot of different types of information, be it text, some tables, graphs, videos, audio, etc. So, all this information can be called in one word - hypertext.
Note that HTML is a markup language, not a programming language. This language does not have any logical functions and it is impossible to perform any mathematical calculations in it. HTML pages have the extension .html or .htm and are processed by browsers - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera, etc.
Now let's figure out how the browser understands what and how to display on a web page? It's very simple. The hypertext markup language HTML has built-in commands called tags. It is by them that the browser is oriented.
HTML Document StructureAny HTML document(web page) must have a certain structure. This will avoid possible problems when opening pages in browsers. As an example, let's look at a page that contains the following HTML code: