entranceThe html programming language for dummies. HTML basics for beginners in plain language
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 a regular text document, it can be created as in a regular text editor (Notebook), and in specialized, with code highlighting (Notepad ++, Visual Studio Code, etc.)... The HTML document has the extension .html.
An HTML document consists of a tree of HTML elements and text. Each element is denoted in the source 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 in themselves, it is written as an attribute value, for example, a tag 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 entry will be incorrect:Text
.HTML elements can have attributes (global, which apply to all HTML elements, and their own). Attributes are written in the opening tag of an 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 separated by a space,
The browser views (interprets) an HTML document, building its structure (DOM) and displaying it according to the instructions included in this file (style sheets, 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 correlating style sheets with page elements.
HTML document consists of two sections - heading - between tags
… and the content part - between the tags … .Web page structure
1. The structure of the HTML document
HTML follows the rules found 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 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.
Elements inside the tag , form a document tree, the so-called document object model (DOM)... In this case, the element is the root element.
Rice. 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 of all the tags it contains:,
, ,
Descendant- an element located within one or more types of elements. For example,
is a descendant and elementIs a descendant at the same time for
and .Parent element- an element associated with other elements of a lower level, and located in the tree above them. Figure 1
and ... TagParent only for .
Child element- an element directly subordinate to another element of a higher level. In Figure 1, only the elements
, ,
AND
Nursing element- an element that has a common parent element with the considered one, the so-called siblings. Figure 1
and - elements of the same level, as well as elements , and
They are sisters among themselves.
1.1. Element
1.2. Element
Chapter
... contains technical information about the page: title, description, keywords for search engines, encoding, etc. The information entered in it does not appear in the browser window, but contains data that tells the browser how to handle the page.1.2.1. Element </h4>
<p>Required section tag <head>is the tag <title>... The text placed inside this tag is displayed in the title bar of the web browser. The length of the title should be no more than 60 characters in order to completely fit into the title. The heading text should contain as complete a description of the content of the web page as possible.</p>
<h4>1.2.2. Element <meta></h4>
<p>Optional section tag <head>is a single tag <meta>... It can be used to set a description of the page content and keywords for search engines, the author of the HTML document, and other metadata properties. Element <head>can contain multiple elements <meta>because, depending on the attributes used, they carry different information.</p><p>
<meta name="description" content="Description of page content">
<meta name="keywords" content="Keywords separated by commas">
</p><p>The description of the page content and keywords can be simultaneously specified in several languages, for example, in Russian and English:</p><p>
<meta name="description" lang="ru" content="Description of page content">
<meta name="description" lang="en" content="Description">
<meta name="keywords" lang="ru" content="Keywords separated by commas">
<meta name="keywords" lang="en" content="Keywords">
</p><p>Using the tag <meta>you can prohibit or allow the indexing of a web page by search engines:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>To automatically reload the page after a specified period of time, you need to use the refresh value:</p><p>
<meta content="30">
</p><p>The page will reload in 30 seconds. To send a visitor to another page, you need to specify the URL in the url parameter:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Table 2. Attributes of the tag <meta>
<tbody><tr><th style="width: 20%;">Attribute</th>
<th></th>
</tr><tr><td>charset</td>
<td>Specifies the character encoding for the current HTML document: <meta charset="UTF-8">
</td>
</tr><tr><td>content</td>
<td>Contains free text that defines the value associated with the http-equiv or name attribute, depending on their value.</td>
</tr><tr><td>http-equiv</td>
<td>Controls browser actions on a given web page (equivalent to HTTP headers). When rendering the page, the browser will follow the instructions given in the attribute: <br>default-style indicates the preferred style for use on the page. The content attribute must contain the id of the element <link>which refers to a CSS stylesheet, or element id<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
using element ... The element does not require an end tag. This element defines the relationship between the current page and other documents. There can be several such elements on the page. The entry will look like this:
| Attribute | Description, accepted value |
|---|---|
| crossorigin | Specifies whether CORS (a browser technology that allows a web page to access resources on a different domain) should be used when retrieving an image from a site. anonymous - the browser automatically adds the Origin header to the cross-domain request, which contains the name of the domain from which the request was made. If the server does not respond with the CORS header Access-Control-Allow-Origin: * (or the domain name instead of an asterisk), the image will be blocked from uploading. use-credentials - if the server does not provide credentials using Access-Control-Allow-Credentials: true, then the image upload will be blocked. |
| href | The main attribute of the tag, the value is the path to the file with styles. |
| hreflang | Determines the language of the text in the referenced document. |
| media | Specifies the type of device to which the link resource should be applied. |
| nonce | A randomly generated string variable on the server that specifies the rules for using inline styles to protect content. The attribute value is a string of text. |
| rel | The attribute defines the relationship between the current document and the referenced document. alternate - a link to the same document, but in a different format (for example, printable pages, translation, mirror, RSS or Atom feed), . archives - indicates that the referenced document is of historical interest. The link can point to a collection of records, documents, and other materials. author is a link to the page about the author of the document or to the page with the contact details of the author. bookmark refers to the closest ancestor of the article that is the linking link, or to the section of the article that is most closely related to the element if there is no parent. external is used to indicate that the linked page is not part of this site. first specifies a link to the first document in a sequence of documents. help is a link to a document with help. icon defines the path to the icon that will be used for the current document. last indicates a link leading to the last document in the sequence of documents. license refers to the copyright information for the document. next indicates that this document is part of a series and that the link leads to the next document in the series. nofollow indicates that the link is not approved by the author of the page or that the link is of a commercial nature. noreferrer indicates that the client request header containing the url of the request source should not be passed on following the link. pingback specifies the address of the pingback server, which makes it possible for the blog to automatically notify sites that link to it. prefetch specifies that the linking file should be cached in advance. prev indicates that this document is part of a series and that the link points to the previous document in the series. search indicates that the referenced document contains a search interface and associated resources. sidebar indicates that the referenced document, if possible, will be shown in an additional browser context, and some browsers, when clicking on the hyperlink, opens a window to add the link to the bookmark bar. stylesheet is a link to an external file that will be used as the stylesheet for this document. tag indicates that the tag the hyperlink points to is for the given document. up indicates that the page is part of a hierarchical structure and that the hyperlink leads to a higher level of the resource in the structure. |
| sizes | Specifies the size of the icons for visual display. The sizes attribute is used only in conjunction with rel = "icon", and can take the following values: widths height - defines a list of sizes separated by spaces, each size must be in the format - widths height (icon sizes are set in pixels), for example: ; any - the icon can be scaled to any size. |
| title | Specifies the title of the link or the name of a set of alternative style sheets. The attribute value is text. |
| type | Specifies the MIME type of the document being referenced. In this case, it takes the value "text / css". |
1.2.5. Element Document body Note that HTML documents have the extension .html.
So, in order from the example.
- document type (doctype)
This construction is always indicated at the beginning of the document so that the browser "understands" correctly which version of HTML is used to build the document.
Due to the fact that HTML is constantly evolving, it has several versions, like any software product. The current version of HTML is the 5th and given in the example doctype is relevant.
In principle, there is no point in delving into the study of document types, because with the release of HTML5 this construction has become a standard. Just insert it at the beginning of your document every time you start coding your website layout.
- the beginning of the document
The first tag we see after the doctype is .
HTML tag- structural unit of HTML document markup. HTML code is made up of bricks called tags. Each tag has its own function, and learning the HTML markup language is ultimately about learning the tags and their properties in a document.
I would like to note that learning HTML is not as difficult as it might seem at first glance. Learning the tags used in the markup of the document is not such a big burden on the brain.
So, the markup of the document starts with the tag and ends with a closing tag... Each tag that contains other tags or elements must be closed closing tag... For example, , ,
, etc.Tag is required, as it contains the entire structure of the document and is a wrapper for the rest of the elements.
Tag
Further, we see tag , which contains other elements that are not yet clear to us. Contains other elements - this means that the elements or tags are located between the opening and closing tags of the structure:
<тег>content or other tags
Tag
is intended for storing meta information of an HTML document, that is, information that is not displayed in the document itself, but is important and largely determines how the document will look and how to behave.This tag is required in the document.
Tag - document title</h4>
<title>Heading
Heading
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,