What is HTML and why is it needed? HTML language

HTML Basics contain 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 one Text Document, can be created both in a regular text editor (Notepad) and 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 letters or numbers only.

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 structure

HTML 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 object model document, DOM (document object model). In this case, the element is the root element.


Rice. 1. The simplest structure web pages

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 .

Parent element - an element that is related to other elements by more than one low level, and located on the tree above them. In Figure 1 and . Tag

Is parent only to .

Child element- an element directly subordinate to another element of 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. Element

Section ... 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. Element

The 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. Element

The optional section tag is 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 url parameter:

Table 2. Tag attributes Attribute
charset Specifies the character encoding for the current HTML document:
content Contains arbitrary text that specifies the value associated with the http-equiv or name attribute, depending on their value.
http-equiv Controls browser actions on a given web page (equivalent to HTTP headers). When rendering the page, the browser will follow the instructions specified in the attribute:
default-style specifies the preferred style to use on the page. The content attribute must contain the ID of the element that references the CSS style sheet, or the ID of the element that contains the style sheet.
refresh indicates the time in seconds before the page is reloaded or the time before redirecting to another page if the content attribute contains the line "url=page_address" after the time.
Automatic reboot pages after a specified period of time, in in this example, after 30 seconds:

If you need to immediately redirect the visitor to another page, you can specify the URL in the url parameter:
name Associated with the value contained in the content attribute. Should not be used if the element already has the http-equiv , charset , or itemprop attributes set.
application-name specifies the name of the web application used on the page.
author specifies the name of the document's author in free format.
description defines short description to the page content, for example:

generator specifies one of the software packages used to create the document, for example:
.
keywords contains a list keywords, separated by commas, corresponding to the page content, for example:
.
Also, the name attribute can take the following values ​​from the extended specification, such as creator, googlebot, publisher, robots, slurp, viewport, although none of these have been officially adopted yet.
1.2.3. Element

Inside this element, styles that are used on the page are set. CSS is used to set styles in an HTML document. There may be several such elements on a page.

Inside this element you can write formatting code for both the web page elements themselves and the entire web page.

.paper ( width: 200px; height: 300px; background-color: #ef4444; color: #666666; )

To connect a given style to an element, you need to assign the appropriate name to the element using the class (or id) attribute:

...

CSS code can be embedded directly into the markup element as the value of the style attribute, for example:

1.2.4. Element

You can also set styles for a document using another method - write them in a separate file with the .css extension, for example, style.css.

There are two ways to connect a file with styles to a web page:
via the @import url directive

@import url(style.css);

using the element. The element does not require a closing tag. This item defines the relationship between current page and other documents. There may be several such elements on a page. The entry will look like this:

Table 4. Tag attributes Attribute Description, accepted value
crossorigin Specifies whether CORS (a browser technology that allows a web page to access resources from another domain) should be used when retrieving an image from a site.
anonymous — the browser automatically adds an Origin header to a cross-domain request, containing 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), then loading the image will be blocked.
use-credentials - If the server does not provide credentials using Access-Control-Allow-Credentials: true , then image loading 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 sets rules for using inline styles to protect content. The attribute value is a text string.
rel The attribute defines the relationship between the current document and the document being referenced.
alternate - a link to the same document, but in a different format (for example, pages for printing, translation, mirror, feed in RSS or Atom format),
.


archives - indicates that the linked document is of historical interest. The link may point to a collection of records, documents, or other materials.
author link to a page about the author of the document or to a page with the author’s contact information.
bookmark is a reference to the article's closest ancestor that is the link, or to the section of the article most closely related to the element if there is no ancestor.
external is used to indicate that the page being linked to is not part of this site.
first specifies a link pointing to the first document in a sequence of documents.
help link to a help document.
icon specifies the path to the icon that will be used for the current document.
last indicates a link leading to last document in the sequence of documents.
license A link to the copyright information for a document.
next indicates that this document is part of a series and that the link goes to the next document in that series.

nofollow indicates that the link is not endorsed by the page's author 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 when following the link.
pingback specifies the address of the pingback server, which allows the blog to automatically notify sites that link to it.
prefetch specifies that the referenced file should be cached in advance.
prev indicates that this document is part of a series and that the link is to a previous document in that series.

search indicates that the referenced document contains an interface for search and related resources.
sidebar indicates that the linked document will be shown in additional browser context, if possible, and some browsers, when you click a hyperlink, open a window to add the link to your bookmarks bar.
stylesheet link to external file, which will be used as the style sheet for this document.
tag indicates that the hyperlinked tag applies to this document.
up indicates that the page is part hierarchical structure, and that the hyperlink leads to more high level resource in the structure.
sizes Specifies the size of 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 dimensions are specified in pixels), for example:
;
any - the icon can be scaled to any size.
title Defines the title of a 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 in this case it takes the value "text/css" .
1.2.5. Element Table 5. Tag attributes Attribute Description, accepted value
async The attribute indicates that the script will run asynchronously with the rest of the page (the script will start executing at the same time the page loads).
charset Defines character encoding
crossorigin Determines whether CORS will be used when loading external scripts (using the src attribute).
anonymous - before loading the script into a cross-domain request, the browser automatically adds the Origin header, without passing access parameters (cookie, X.509 certificate, login/password for basic authentication via HTTP). If the server response does not contain the Access-Control-Allow-Origin: domain name header, the script will not be loaded.
use-credentials — before loading the script into a cross-domain request, the browser automatically adds an Origin header indicating access parameters (cookie, SSL certificate or login/password pairs). If the server response does not contain the Access-Control-Allow-Credentials: true header, the script will not be loaded.
defer Interpretation of scripts is delayed until the document is rendered on the user's device.
nonce Provides security by protecting against cross-site scripting attacks (XSS, cross site scripting). Sets rules for using built-in scripts using nonce values ​​and hashes. During page rendering, the browser calculates hashes for each inline script and compares them with those listed in the CSP. Downloads from resources not included in the “white list” are blocked.
src Indicates the location of the file with the script; the attribute value is the url of the file containing the JavaScript program.
type Used to declare the script language used to compose the content of the tag.
1.3. Element

This section contains all the contents of the document. Available for the element.

Table 5. Tag attributes Attribute Description, accepted value
onafterprint An event that fires after a page is sent for printing or after the print window is closed.
onbeforeprint An event that fires before a page is sent for printing.
onbeforeunload The event fires when the visitor initiates a transition to another page or clicks “close window”. Allows you to display a message in the confirmation dialog to let the user know if they want to stay or leave the current page.
onhashchange The event is fired when the hash part of the URL changes, for example when the user goes from example.domain/test.aspx#page1 to example.domain/test.aspx#page2 .
onmessage An event occurs when a message is received through an event source.
onoffline The event is triggered by the browser when the browser determines that the Internet connection has been lost.
online The event is triggered by the browser when the Internet connection has been restored.
onpagehide The event occurs when the user leaves the page through navigation, such as clicking a link, refreshing the page, filling out a form, etc.
onpageshow The event occurs when the user navigates to the web page, after the onload event.
onunload The event is triggered if the page does not load for some reason, or when the browser window is closed.

Hello dear reader. It's time to talk about HTML markup language, with the help of which absolutely all Internet sites were created - both Russian and bourgeois and even Chinese. But this is not a programming language, as some people think, but a hypertext markup language.

Let me remind you that hypertext is text that contains links to other pages and documents. The markup language shows where and how some text element should be placed, for example, a paragraph, heading, list, etc. The CSS language, closely related to HTML, is responsible for the design of these elements, which makes the design of website pages beautiful, readable and lightweight. for unloading the page code.

Except CSS html can be extended with language functions PHP programming and JavaScript, which give pages interactivity, i.e. ability to respond to user actions.
Using all these tools, you can build a website of any complexity and any functionality. The HTML language itself is responsible only for markup

Web page from inside




This is my website



This is my text

In this code below you see tag commands, which are sometimes called descriptors. They are enclosed in angle brackets. Tags are mostly paired. Opening and closing, with a forward slash. All HTML markup language code is nested within each other, and resembles a “matryoshka doll”, where one container is nested inside another.

The figure below shows the decoding of this code:

And here's what the same page looks like: Mozilla browser Firefox. I showed where the text is displayed header Title and text tag Body

How to create an html page

For clarity, copy the text with the tags above into any text editor, for example, notepad, and save it to your desktop. Click right button and select "rename". Instead of the .txt extension, like a regular one text file, specify the extension.html or .htm. The notepad icon will change to a browser icon, which you can click to see your first web page.

If the extension is not displayed, then you need to do the following.

Find on your computer: Appearance and Personalization - Folder Options - View.

It is always useful to show file extensions so that attackers cannot count on you to open a file with an infection like “gift.jpg”, which will actually be “gift.jpg.exe”. It is very easy, without the extension that Windows hides by default, to mistake the malware launch file with a hidden .EXE extension for a regular picture.

Watch a video on creating HTML pages


Programs for creating HTML pages

Writing Html hypertext markup code manually without experience can seem like an ordeal test of attentiveness and endurance. But, believe me, only by strengthening your skills in this way will you be able to proudly call yourself a webmaster.

For intelligent writing control html code manually there are many programs with code highlighting. Among amateur developers, the most popular are Notepad++, PHP Designer, Dreamweaver

The last two programs are paid, but old versions, which are no worse than new ones, can be found on the Internet for free and legally used for your needs. is a visual editor. It itself converts your text with design into code. In any case, you will not regret getting to know this tool.

Why then learn to write code by hand? The thing is that any visual editors, even the editor built into WordPress, sometimes generate so much garbage own code that the pages weigh many times more than those written with the help of the head and hands. Yes, if you also consider that search engines Now they pay attention to the cleanliness of the code, then you will inevitably think about studying HTML in order to control the entire process.

In general, Dreamwaver will replace a good teacher at first. Use this program and see how an html page is written. The main thing is, don’t be lazy to look at top window programs where the code is generated. Note for yourself where the program does something unnecessary.

What is a browser really?

Many people believe that the browser is designed to search for sites on the Internet, and that this is its purpose. Thus, in the understanding of the PC user, an erroneous opinion is created about the purpose of the browser. In fact, a browser is a program for interpreting html code, CSS code, JS code, etc. In other words, it is an application software tool for displaying web pages and other documents.

The capabilities of modern browsers are truly great. After all, web pages contain graphics, videos and texts different formats. The browser reads the html code, sees the video material embedded there, graphic and text code and displays all this correctly on device screens. Tags help him with this, these ordinary English words in angle brackets.

The browser sees, using tags, which part of the text that it interprets is the name of the site, which is the heading, what needs to be presented as a paragraph, where to place the picture and simultaneously solve many problems related to different languages, embedded in plain HTML.

Language HTML markup and main tags
tells the browser that this is an HTML document
here is information for search engines
content is displayed in the browser window
page title
Headings: from largest to smallest
Bold and italic text highlighting
link text Tells the browser that this is a link with the text "link text"

Creating a new paragraph

paragraph alignment (left, right, justify or center )
Tells the browser to create the form

This table is provided to show only the main descriptors.

IN modern version HTML5 appeared along with new tags great amount new opportunities that website developers never dreamed of 10 years ago.

Styles in an html document

When a browser displays the content of a web page, it displays headings in one style, paragraph text in another, and different font sizes. This is enabled by default in every browser. But we want to see individual designs for web pages, and CSS comes to the rescue here. Cascading Style Sheets Language. WITH using CSS you can set the design of any element, you can create any design for a web document.

CSS is a styling addition to the HTML language and would not exist without it.

Styles in Html are implemented like this:

Head>

Hr ( color: sienna; )

P (margin-left: 20px; )

Body ( background-image: url ("images/back40.gif"); )

If an external style file styles.css is used, then it is connected to the html document like this:

An example of writing CSS rules:

p(color: black; font: x-small).

Tells the browser what the paragraph color is

black-black, and the font size is x-small (small)

This is how, for example, I style the content at the beginning of each article on this blog.

Announcements
(border: 2px outset green;
border-radius: 10px;
width: 360;
font-family: "Yeseva+One";
font-size: 16px;
line-height: 1.2em;padding:10px 10px 10px 20px;
margin:10px auto 20px;
text-align:left;
background-color: #a7cece;
}

V last line there is an interesting fragment: background-color: #a7cece ;

#a7cece is the html color. Using the HEX character set - the hexadecimal system: numbers from 0 to 9 and letters from A to F, you can set absolutely any color. This is set to a nice aquamarine color.

TO CSS theme I'll be back in separate posts.

How to Learn HTML Markup Language
  • The Internet is full of reference books on HTML (html). I like the site http://htmlbook.ru. I come here often for reference material. I recommend it to save time.
  • Andrey Bernatsky. Be sure to check it out!
  • I like books from American authors. This is a fascinating self-teaching textbook of the HTML/CSS language with such a cool presentation of the material that you will read without stopping. Everything is told simply and clearly. You can download it for free online, but it’s better to buy it and work with it like a book.

Most The best way to master the HTML markup language (HTML) means downloading the most famous training courses on the RuNet, and some of them are completely free. Go to Evgeniy Popov’s website and download tons of useful educational information. For vocational training read the information.

Everyone uses the Internet and everyone browses different sites, and probably everyone would like to place their website on the Internet, but this is not easy to do, there are many reasons for this. However, in order for you to be able to host a quality website, you just need to know the basics “ WEB programming", which is the HTML language. In this article we will look at the main elements, tags, attributes, and even write the first web page.

Hyper Text Markup Language - "HTML" ( hypertext markup language) many have long ceased to consider it just a programming language. Since itself HTML concept includes various methods design of hypertext documents, design, hypertext editors, browsers and much more. A user who has mastered this language gains the ability to do serious things simple methods and, most importantly, quickly, that in modern world considered very good!

In the HTML language, you can create your own multimedia products and distribute them on CDs, and all these products, made in the form of sets of HTML pages, do not require the development of specialized software, since everything necessary for working with data ( Web browsers) have become part of the standard software on most personal computers.

  • Element ( element) is a construct of the HTML language. This is an object that contains data and allows it to be formatted in a specific way. Any Web page is a set of elements. One of the main ideas of hypertext is the possibility of nesting elements.
  • Tag ( tag) - start or end markers of an element. Tags define the boundaries of the action of elements and separate elements from each other. In the text of a Web page, tags are enclosed in angle brackets, and the end tag is always followed by a slash.
  • Attribute - a parameter or property of an element. In other words, it is a variable that has standard name and which can be assigned a certain set of values: standard or arbitrary. Character attribute values ​​are expected to be enclosed in straight quotes, but some browsers allow you to omit the quotes. This is because the attribute type is always known in advance. Attributes are located inside the start tag and are separated from each other by spaces.
  • A hyperlink is a piece of text that is a pointer to another file or object. Hyperlinks are necessary to enable navigation from one document to another.
  • Frame ( frame) - this term has two meanings. The first is the document area with its own scroll bars. The second value is one image in a complex ( animated) graphic file(looks like a still from a movie). It is also possible instead of the term “frame” in specialized literature and localized software products You may come across the term “frame” or “frame”.
  • An HTML file or HTML page is a document created in the form of hypertext based on the HTML language. Such files have the extensions htm or html.
  • Applet ( applet) - a program transferred to the client’s computer in the form separate file and launched when viewing a Web page.
  • Script or script ( script) is a program included in a Web page to expand its capabilities.
  • Extension ( extension) is an element that is not included in the language specification, but is used to provide the ability to create a new and interesting formatting effect.
  • CGI ( Common Gateway Interface) is a general name for programs that, running on a server, allow you to expand the capabilities of Web pages. For example, without such programs it is impossible to create interactive pages.
  • HTML code is a hypertext document in its original form, with all elements and attributes visible.
  • Web page is a document (file) prepared in hypertext format and placed in World Wide Web.
  • Website ( site) - a set of Web pages located in one place and interconnected.
  • Browser ( browser) - a program for viewing Web pages.
    • () - copying files from the server to the client computer.
  • URL( Uniform Resource Locator) or uniform resource locator, the address of some object on the Internet, i.e. A typical URL for WWW looks like: http://www.name.domain/filename.

All elements of language can be divided into three groups. The first includes elements that create the structure of a hypertext document. The use of such elements is a necessary formality that cannot be neglected. The second group includes elements that create formatting effects. Their use is dictated by the specific requirements for the document, the imagination and competence of the developer. The third group includes elements that allow you to manage software installed and running on the client computer. Often such elements are created automatically when a developer uses a hypertext editor or similar program to insert an object into a document.

Although the HTML specification is a standard, new elements are being added to the language ( extensions). Therefore, it is more convenient to view some Web pages using certain browsers. Extensions are created only by well-known companies that develop software for WWW, and ordinary users can improve their Web pages using programming. Applets allow you to remove the limitations of HTML and give scope to the developer's imagination.

HTML versions

The first version of HTML was developed in the early 90s by Tim BenersLee for one of the popular Mosaic browsers in the past. But at that time, neither the browser nor HTML itself had yet found a good use. HTML+ appeared in 1993, and this version also went virtually unnoticed. But the HTML language became widespread thanks to version 2.0, which appeared in June 1994. And from that moment on, the popularity of WWW has been increasing around the world. The standards included in version 2 have become so established that they are still used today.

HTML version 3.0, which appeared about a year later, introduced the ability to draw mathematical symbols ( integral signs, infinity, fractions, parentheses, etc.) using language elements. But the development of this project slowed down and did not gain further distribution.

In 1996 appeared HTML versions 3.2. This was a brilliant solution; it is enough to mention that frames were introduced into the language specification, which have now become very popular among website developers. To this day, all browsers support this version of HTML.

Official HTML 4 Specification ( Dynamic HTML) was developed in 1997. At this time, it was already obvious that the further development of hypertext would be carried out through web programming. This turned out to be much more effective than introducing new elements into the language.

Web page structure

Below is the code of the Web page, which is made in HTML, and using this page as an example, we will analyze its structure, but first, copy all the code into a regular text notepad and click “Save as” and save the file with html extension, i.e. after the name write.html

Structure of a web document Go to the end of the document Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 The first link is located here Should be located here
basic web text pages.
And I, for example, will insert here
several transfers,
so that you can
clearly observe
how does it work for you
links within the document,
otherwise if you have a large resolution,
You just won't notice the links being followed

HTML document notation. One of the principles of the language is multi-level nesting of elements. This element is the outermost one, since the entire Web page must be located between its start and end tags. In theory, this element can be considered as a formality. It has the version, lang and dir attributes, which are rarely used in this case, and allows the nesting of HEAD, BODY FRAMESET and other elements that determine the overall structure of the Web page. Naturally, all such documents end with an end tag.

< head >

The title area of ​​a Web page. In other words, its first part. Just like the previous element, HEAD serves only to form general structure document. This element can have lang and dir attributes.

< title >

An element for placing the title of a Web page. The line of text located inside this element is not displayed in the document, but in the title bar of the browser window. This element greatly influences promotion in the search engine because search engines pay special attention to TITLE tag. My advice: never make very long text in this tag ( 65 characters is enough).

This element contains official information, which is not reflected when viewing a Web page. There is no text inside it in the usual sense, so there is no end tag. Each META element contains two main attributes, the first of which defines the data type, and the second of which defines the content.

< body >

This element combines hypertext, which defines the Web page itself. This is the one visible part document that is developed by the auto page and which is displayed by the browser. Accordingly, the end tag of this element should be found at the end of the Web page. Inside the BODY element, you can use all the elements intended for Web page design. Within the start tag of the BODY element, you can place many attributes that serve to set the entire page. Let's look at them in order.

One of the most useful attributes of this tag, which has an impact on the page design, is

background="path to background file"

A simpler background design comes down to setting its color

bgcolor="#FFFFFF"

The background color is specified by three two-digit hexadecimal numbers, which determine the intensity of red, green and blue colors(rbg).

Since you can change the background of the page, you can also change the color of the text. For this purpose there is the following attribute

text="#RRGGBB"

To set the text color of hyperlinks, use the following attribute

link="#RRGGBB"

You can also specify a color change for the user's last selected hyperlink

Header element. There are six levels of headings, which are designated as follows.
Heading
Heading
Heading
Heading
Heading
Heading

Level 1 heading is the largest, and level 6 provides the smallest heading. For headings, you can use an attribute that specifies left, center, or right alignment:

align="left" align="center" align="right"

To create a new paragraph, use the tag

And to move to a new line without creating a paragraph - tag
i.e. transfer occurs. It is not necessary to close these tags. Of course, if you do not use in the tag

The ALIGN element, which can set paragraph alignment:

Left

Centered

Right

The text between these elements is aligned in width

Horizontal line ( horizontal rule) is a very common element. Firstly, because it makes it very easy and convenient to divide a page into parts. Secondly, because the author of the page has a very small selection of such design elements. The element does not have an end tag, but has a number of attributes for left, center, right, justification:

  • align="left"
  • align="center"
  • align="right"
  • align="justify"

An HTML document can be very cumbersome, and not very convenient for the user who needs to quickly move to the desired section of the document. To do this, you can use the hyperlink mechanism. To do this, place the appropriate marks in the right places in the text.

Free text

In this case, a given line of the document is given a name, and therefore a hyperlink can be created to another part of the document, or even on another document, leading to that label.

To insert images ( Pictures) V HTML document the following tag is used ( provides a complete description of the attributes of this tag):

Lists

(list) were developed in HTML, undoubtedly influenced by the success text editors. A list differs from ordinary text, first of all, in that the user does not need to think about the numbering of its items: this HTML task takes on himself. If the list is supplemented with new items or shortened, numbering continues automatically. In the case of unnumbered lists, HTML precedes each item with marks: circles, rectangles, diamonds, and other images. Ultimately, the list takes on a decent form. There are two groups of such tags: some define general form list ( and allow you to specify attributes), and others ask it internal structure. You can use standard attributes in lists. There are several types of lists.

The most common is the unnumbered list ( unordered list). It is presented below:

  • List item 1
  • List item 2
  • List item 3

The ul element is a kind of highlight of the list. It allows you to separate one list from another. The li element represents each of the items.

Tables

They are one of the most necessary means of formatting data on a Web page. The main convenience is that the browser takes care of drawing the entire table. The size of the frame can be automatically adjusted to the size of the browser window and, of course, to the size of the lines of text and pictures in the table cells. In addition to everything else, tables allow you to solve many design problems: align parts of a page relative to each other, place pictures and text next to each other, manage color design, and so on. When creating tables, the principle of nesting is applied: inside the main table element (TABLE), a number of elements are created that define rows (TR), and inside these elements there are elements to describe each cell in the row (TD, TH).

In order to understand the structure of an existing table or develop new table, there is one rule that the sequence of elements describes the table from top to bottom and from right to left. For example, if a TABLE element is followed by a TR element, this indicates that a description begins new line tables. Everything behind this element will be placed on one line (from right to left). This could be a sequence of TD elements ( cells), another table and so on. Once the new TR element appears, the description will begin next line, etc. until the end of the table (tag).
The table can be aligned horizontally using the align attribute:

  • align="left" - left;
  • align="center" - in the center;
  • align="right" - to the right.

The table width can be set exactly in pixels or as a percentage of the page width in the browser window. For example: width=400 or width=50%

Two attributes are used to control the appearance of the frame. The fact is that the browser creates an image of the frame, simulating its three-dimensionality ( convex) using differences in illumination of the faces

Scenarios

Almost all web masters want their pages on the site to have modern look, were multifunctional, beautiful and dynamic. By standard means This is not possible in HTML, so different tools are used: applets, objects, cascading style sheets, and so on. But the most popular and widespread type ( reception) is the use of scripts.

A script is program code that is included in the text of a page as source text and is executed by the browser when the page is viewed. The script can be written in JavaScript, developed by Netscape, or on Visual Basic Script ( VBScript), developed by Microsoft.

This tag allows you to separate the script program text from other page information. The SCRIPT tag must include a language attribute, which specifies the language and can take the following values:

  • javascript - code in JavaScript;
  • vbscript - code in VBScript language.

The type attribute can also indicate the language type, although its use is not required. In order not to break all the rules, you can place the following definition inside the element:

type="text/javascript"

One of the coolest features of scripts is the ability to change the contents of a page as a result of program execution. But this is only a feature, not a rule. By using defer attribute(which does not accept any values) you can “tell” the browser that such changes will not be made. In some cases, this allows the page to load faster.

Of the standard attributes, you can use the charset attribute.

SCRIPT tag ( or a number of such elements) can be located either inside the HEAD element or inside the BODY element. If the script is inside the BODY element, it is also possible that some browser that does not support the SCRIPT element will perceive the program code as plain text and display it on the screen. To prevent this from happening, the script code is entered as a comment:

-
-
-

All modern browsers recognize this technique and ignore comment characters. If you need to enter a comment in the text of the script, then a different notation is used for this: two slashes // are entered at the beginning of the line.
Program code The script is executed when the page is loaded, i.e. when its contents are still visible on the screen. Below is an example of the simplest scenario ( display a message in the window).

-
-
-
- Just a script
-
- alert("You've written your first script!")
-
-
-
-

This simple page, but it includes a one-line script. By using alert method A message is displayed before loading. And it will hang until the user clicks on the OK button, the download will not continue.
It is possible that the page will be viewed in a browser that does not support scripting; the NOSCRIPT element is provided for this. Modern viewing programs ignore its contents. This element can be used in several ways. To begin with, you can display an ad inside it like the following: “ Your browser cannot execute the script required to view this web page!»Secondly, inside the element you can develop a simplified version of the page, without scripts. Third, you can create a link to another HTML document. The NOSCRIPT element must have an end tag.

So we looked at the basics of such a WEB programming language as HTML. Even after reading this short article, you already have an idea, and even the ability to program in this language. Good luck!

Welcome to the pages of my blog. HTML is a simple markup language that is used to create web pages. I said it was simple so that you wouldn't be intimidated by learning it. The html language is simply ideal for beginners - it is much more difficult to immediately master a programming language from scratch, but html is actually much simpler.

In this article I want to tell you how to learn this language most quickly and effectively, so that within a month or two you know it perfectly. Do you think it's impossible? I started learning html at the end of March. At the end of May, I already knew 90% of the tags needed for work without any problems.

How to learn a language for free?

Of course, for the fastest learning, you should find several useful sites. First, you will need the html reference. Even seasoned programmers use it, because it is simply impossible to keep dozens of tags and their attributes in your head.

From the reference books I can recommend to you - htmlbook. This is a really cool site that collects all the tags and shows the result of their work with a detailed description. But this is just a guide additional tool, the greatest effect can be achieved with real practice.

Interactive courses

And here I’m talking about interactive courses. This is the ability to write code and immediately see how it is displayed. During the courses you will be given assignments. First, simple ones, for example, turning the text into a title or making a table. Then it’s more difficult. Eventually you will gain an understanding of what you can do with using HTML. If you think that you have to pay for this, you are mistaken.

is a wonderful site with courses on html and css. The first 16-18 courses are free! If you want to continue your studies and gain access to paid ones, you will have to pay 300 rubles per month or 1800 per year. Personally, I gave 300 rubles, I completed everything in a month paid courses and got a lot of benefit from it.

Importance of records

Another piece of advice from me – write it down! Write down all information that is new and important to you. Without writing it down, you risk not retaining the necessary knowledge in your memory. Personally, I have three general notebooks on my shelf, almost completely filled with writing, and from time to time I look at them when I forget this or that property.

Parallel study of html and css

HTML is just one web technology that creates the structure and layout of a web page. CSS is entirely responsible for design in website development. These languages ​​need to be learned simultaneously because they interact with each other.

Independent practice

Once you have gained some knowledge, you can practice on your own. How to do it? Try laying out an article with pictures, a table, a nested list, a simple two-column page layout, or something else. You have to practice because that's the only way to quickly ingrain in your brain an understanding of how things work. The best thing, of course, is to find yourself a teacher in this matter, but most likely you will have to pay for this.

Lessons from the webformyself team

Webformyself is a wonderful Internet portal that provides a ton of information on website building. You can find a lot on their website free articles on HTML, CSS and website layout, but they also released paid video tutorials, the purpose of which is to convey useful knowledge to you as quickly as possible.

At the end of the day, you should have a reason why you are learning these web technologies. This is usually done in order to learn how to create website layouts yourself. If you also have this goal, then an excellent option for you would be to purchase access to premium lessons on webformyself.com. As a result, you can get not only access to lessons on HTML and CSS, but also many others. For example, JavaScript and WordPress.

There is useful lessons, I would also like to note the opportunity to make up my first layout using lessons. This is very important because you will receive good practice, after which you will be able to get better at it yourself, trying to create other layouts for sites that you find on the Internet.

How long does it take to learn languages?

On average, HTML and CSS can be learned very quickly with the right approach. For example, it took me several months. If you know where to get knowledge, the learning process can be speeded up several times.

Good sites with useful materials I gave it to you - then it’s up to you. In principle, the above resources are the best on the Internet. For example, more than one hundred thousand people have completed courses from Htmlacademy, and more than 87 thousand people have subscribed to Webformyself updates.