What is HTML. HTML - what is this extension? HTML for beginners: codes, files and editors. How to create an HTML file

And it translates as “hypertext markup language.” Hypertext is a special method of navigating Internet pages, implemented in the form of hypertext links. By clicking on these links you can easily navigate the site structure. Transitions in this case do not occur linearly, i.e. you always have the opportunity to go to any page of the site, the link to which is currently visible.

Markup refers to certain rules and properties that are assigned to page elements. They are implemented in the form of so-called tags. For example, to indicate that certain text on a page should be centered, you can mark it with the center tag. You can see the HTML code of a specific page through its context menu. For example, to access this code in the Firefox browser, you need to right-click within the page and select “Page Source Code”.

How does HTML code work?

HTML code is a set of short tags containing page elements. All this code is stored in a file with the extension .html or .htm. When you open such a file in a browser, the code is interpreted by it, and the finished page is displayed in the program window. Knowing the HTML markup language, almost anyone can create their own page.

What are the types of tags?

Tags are separate constructs within HTML code. This is plain text enclosed inside angle brackets "". You can see tags in the HTML code of almost any page. The tags themselves are not displayed on the pages; they display a specific element that is encoded using tags. For example, if there is a picture on the page, then its HTML code contains the img tag.

HTML Limitations

Despite the fact that HTML code allows you to build a fairly high-quality hypertext page, it has its limitations. Pages containing exclusively such code are static, i.e. they lack dynamics, special effects and other features. But they can be introduced using other languages, such as Java Script. The vast majority of modern websites are created using additional languages ​​that make them more lively and interactive.

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, let's sort it out HTML document structure and use practical examples to consolidate the knowledge gained.

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 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 Structure

Any 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:

...

Let's look at what is included in this structure in order:

1. The first thing that goes in an HTML document is the version indication (first line). For correct operation, this line should be specified when laying out the web page.

3. Then comes the area for the top of the site (header). The tag is used for this . In the header we indicate the name of our page by placing the page title between the tags . Next, the encoding of the HTML document is indicated (fifth line). This is done to display the Cyrillic alphabet correctly. Closing the header area with a tag.

4. Meta tag “description” - a summary of the page, intended for search engines. This tag is important for search engine optimization and must be filled out.

5. Meta tag “keywords” - keywords that may appear on the page. This tag is also intended for search engines. This tag is rarely used nowadays.

6. The body of the page opens with a tag and closes, accordingly, with the tag. The body of a web page usually contains the main content - text, video, audio and other information.

Thus, we have answered the question of what is HTML and studied the structure of an HTML document. The information received in this lesson are basic concepts, you cannot do without them. We will talk about more complex things in other lessons.

I'll probably start from the beginning...

The HTML language is not inherently a programming language. It is a markup language for hypertext documents. In other words, he is responsible for the location in the document of your texts, drawings, tables... intended for life on the Internet. It’s impossible to force him to calculate how much two times two is, there are no logical functions in it, but it’s beautiful and, most importantly, easy to post the information that two times two is four - that’s easy. This language is read using programs familiar to you, called browsers (browsers), which “know” the standard commands of the html language, and “chewing” them, display documents on the computer monitor in the form in which the web master - the document compiler - wants to present them.

Now about commands - they are called descriptors, but more often - tags.

Let's go back to our first page... so we wrote:

Hello World!!!

So this is what is written between<…>- they are called tags; they are not visible to the reader who looks at your page, but are clearly visible to the browser that stumbles upon the tag understands it as a signal that next there will be a document that needs to be read and displayed on the monitor in the required form... and here is the tag indicates that the document has ended and nothing more is required from it, that is, the browser, and it can rest with a clear conscience.

So what did we write? and how does the browser read it?

Browser thoughts:

- the beginning of the document.. again a lot of work..
- look at the English dictionary and translate “head”…there’s no problem with sawdust in my head!! ... here is the basic service information about the document.. so what do they want from me?
- the whole name is over.. you can move on..
- yeah, and besides the name, we don’t keep any more nonsense thoughts in our heads..
- The “body” of the document, everything that is written below is put on public display
Hello World!!! - how nice! Enough already!!!

- move the text to the next line... I can even guess what will be in it...
My name is (your name here), this is my first page!- well, yes it is.. they can’t come up with anything more original..
- that's all? Show nothing else?
- Well, that's the end!! Do not wake up, do not turn over, in case of fire, take out first!!

This is roughly how reading our page works.. As you can see, the browser is a rather capricious type, so it needs to give clear and precise commands, otherwise it will swear.. and out loud.. and therefore let’s remember the following things:

1) It is necessary to remember once and for all that if there is an opening tag <…> then there must be a closing one

Although there are exceptions, such as our tag
- it does not require closure because it only says that it should be written on a new line. By the way, try adding a couple more of the same before the line “My name is..” and you will see that as a result it has noticeably dropped down.. (Well, of course, save the changes in notepad, and click the “refresh” button in the browser)

2) All documents must have the following code template:

- start of document
- beginning of the head
- closing the head
- beginning of the body
- body closure
- end of document

These tags are required! They must always be written for each new page, and only in this order! Don't try to turn everything upside down...

3) About the order:

Opening and closing tag by type<…> is a kind of container, a box into which other tags can be stored - smaller boxes... therefore, according to logic, the document should look like this:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
content

If you write, for example, like this:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
content

It will turn out to be rubbish that doesn’t fit in your head, the “big” one is already closed, and the “small” one “sticks out” from it, which is locked in the “middle”, and the “content” has scattered everywhere.. It’s hard for even a person to imagine what’s there talking about the browser.. Clearly structure the code of your page, otherwise nothing will work..

Well, we have learned how to write simple text, a start has been made! in the next chapter I will talk about what you can do with it..

When writing a website, create a folder in any convenient place on your hard drive, call it whatever you want, as long as it is clear... save your pages in this folder, giving them meaningful names... options like aaa.html, 123.html will lead to confusion and confusion... At this stage, this advice will not seem practical, but in the future it will greatly facilitate your work. Imagine, for example, at least 20-30 such files whose names you need to keep in mind in order to cross-reference them. Order first!

When writing code, I advise you to adhere to “good writing style”, that is, write tags in a “ladder” manner as one tag is nested within another. Over time, you will understand that reading code written like this:






Hello World!!!

My name is Carlson, this is my first page!



Much easier than this:






Hello World!!!

My name is Carlson, this is my first page!



And even more so than this:

Hello World!!!
My name is Carlson, this is my first page!

Although this is a matter of habit... it’s still better to get used to writing “legibly”.

For the emergence of HTML, the modern world has one scientist at the European Council for Nuclear Research (Conseil Européen pour la Recherche Nucléaire, CERN) to thank. This scientist's name is Timothy John Berners-Lee. The first version of HTML was created for the purpose of formatting scientific documents. It is structural formatting without elements of description of color schemes, font parameters, etc. Thus, HTML originally made it possible to highlight headings, paragraphs, lists, and similar structural elements in text. The result of processing or “playing” HTML should not depend on the technical features of the hardware for its visualization, since it did not contain the parameters of this visualization. Over time, this feature of hypertext markup language was partially lost.

So, the appearance of the first versions of HTML dates back to 1986, and in 1991 HTML was significantly improved and began to be used specifically for transmitting hypertext across the World Wide Web. They say that the world-famous abbreviation HTML, which stands for Hyper Text Markup Language, appeared exactly in the early 90s of the last century. And now a short excursion into the pedigree of markup languages. The first version of the hypertext markup language HTML was created based on the Standard Generalized Markup Language (SGML), which in some way can be considered a prototype of the eXtensible Markup Language. The XML standard has gained immense popularity in our time due to the large number of its extensions used in computer technology. To completely confuse the reader, I’ll immediately add that subsequently, based on XML, the hypertext markup language XHTML (Extensible Hypertext Markup Language) was developed, which essentially replicates HTML. As a result, we have the acronyms SGML, HTML, XML and XHTML, and we need to understand which is which. In fact, everything is simple: SGML is nothing more than a set of rules on the basis of which any markup language can be built. HTML is one of these languages ​​- the SGML application. In other words, SGML defines what markup elements should look like, and HTML defines what exactly elements should be and how they should be interpreted by browsers. XHTML, in turn, is an application of XML, and XML itself is nothing more than a simplified version of SGML. , despite the fact that they are very similar in appearance, they have significant hidden differences, which, for the most part, lie in the principle of their processing.

Now let's return to the history of HTML development. So, until 1994, HTML was still used only for structural markup of data, although it already included tags for highlighting text in bold or italics. In the same 1994, the W3C (World Wide Web Consortium) organization was created - the World Wide Web Consortium, which is headed, quite logically, by the same Tim Berners-Lee, and in 1995 the HTML 2.0 recommendation was published. The creators of HTML already understood that over time their brainchild would evolve from a language of static text markup into the main tool for creating dynamic Internet resources. The main addition of HTML 2.0 was the appearance as part of the language of forms with sets of user controls that were to be used for the user to enter parameters for HTTP requests.

After the release of the second version, work immediately began on the next generation of HTML. In 1997, the HTML 3.2 recommendation was released, which supplemented the markup language with tables, frames, images and some other important tags. But the most important achievement of the 3rd version is that its authors again returned to the problem of visualizing markup in the browser, remembering that HTML should only mark up the structure of the document and should not directly contain parameters for graphic styles for displaying elements in the browser. The result of their work on HTML 3.2 was the emergence of an independent CSS language (Cascading Style Sheets) - cascading style sheets, the code of which can now be connected to the HTML markup code and thereby customize the appearance of the page.

By the release of version 4 of HTML in 1997, the W3C staff had rid their brainchild of those unnecessary elements that, with the advent of CSS, had become obsolete and compromised the idea of ​​​​separating structure markup from presentation parameterization. But no one would block a new version because of such trifles. The main achievement of the HTML 4.0 recommendations was the appearance of the page object model (Document Object Model, DOM), the elements of which could now be manipulated through scripting programming languages ​​executed by browsers. The most popular such programming language is JavaScript. HTML plus DOM plus JavaScript equals Dynamic HTML or simply DHTML, which marked a breakthrough in web design. Now elements of a loaded Internet page could change their appearance in response to user actions, as well as add new and delete existing elements. On December 24, 1999, the latest edition of the 4th version of the hypertext markup language, HTML 4.01, was released.

HTML5 has not yet received the status of an official W3C recommendation, but it is already clear that the HTML authors are continuing to work towards developing requirements for document object model support and JavaScript interpretation. Although HTML5 will receive a number of new tags, most of the recommendations still concern the behavior of the browser in the context of DHTML: there will be built-in support for drag-and-drop functions, the ability to draw on a virtual canvas, control browsing history, and share messages between pages, save execution context and much more. It is hoped that with the release of new HTML recommendations, the problems of lack of cross-browser compatibility, when the same JavaScript code is executed differently under different browsers, will gradually disappear. After all, the trend to define requirements for working with the object model and JavaScript will continue, and browser developers will be required (if they want their software products to be used) to follow these requirements.

HTML5 is scheduled for release in 2014. Perhaps by that time the W3C will have developed separate recommendations relating only to JavaScript programming, and HTML will eventually again become exclusively a markup language for document structure. Despite the fact that today is only 2012, many are already supported by the most popular browsers. Much that web designers previously had to do on their own (the same drag-and-drop), with the release of HTML5 will be supported at the browser level, and this development of events cannot but rejoice. We can only hope that the trend will continue.

Traveling through the vastness of the World Wide Web, you were able to notice how different design and capabilities of web pages. But not every one of you knows that all this diversity is implemented on the basis of language HTML.

Everything you see on the page - text, pictures, tables and other elements that form the semantic content of the web page, called content, are created using markup language HTML. Right-click on any web page and select the item from the drop-down menu "view HTML code" or "Source"– a text editor will appear with symbols and icons you don’t understand – that’s what it is HTML-page code.

Any WWW document can contain stylized and formatted text, graphics and hyperlinks to various Internet resources. To realize all these possibilities, a special language for describing WWW documents was developed, called HyperText Markup Language (HTML), that is, Hypertext Markup Language.

The HTML description of a Web page is a set of instructions interpreted by a browser program.

A document written in HTML is a text file containing the actual text that carries information to the reader, and markup tags. Tags are sequences of characters defined by the HTML standard that serve as instructions to the browser.

According to these instructions, the program places text on the screen, includes pictures stored in separate graphic files, and forms hyperlinks to other documents or Internet resources. Thus, an HTML file takes on the appearance of a Web document only when it is interpreted by the browser.

However, there is one significant flaw in the standard HTML language. For example, in order to describe the layout of paragraphs in content and their design, it is necessary to describe these properties for each paragraph, even if there are 10 or 20 paragraphs on one page. And, imagine that the site can have 100 pages. As a result, you need to insert the same piece of HTML code into the page twenty or two hundred times, increasing the file size.

What a headache for programmers! To make life easier for poor webmasters, they were invented Cascading Style Sheets(CSS)- cascading style sheets.

CSS operates in a different, more convenient and economical way. To design paragraphs in the site content, a code or design style is written once. This code or style description is saved in a separate file. Next, you only need to use HTML to mark up the text into paragraphs, and CSS will take care of their design. The code is reduced tens and hundreds of times.

Placing descriptions of styles in a separate file is very convenient, especially if the site has more than one page. For example, to change decor all paragraphs on the site, just change the code in the style sheet.

CSS together with HTML can work wonders, all thanks to the division of labor in creating web pages. The markup of page elements is based on HTML, and the visual design of the elements is given using CSS tables

CSS Style Sheets- an attempt to separate the details of the page design from its structure and content.

For now, this is a Chinese letter for you. But I won’t pretend to be a guru and write another tutorial “What is HTML and CSS”. You will find a whole carload of similar information on the Internet, plus many published textbooks. If you want to go deeper into the topic, the flag is in your hands. Do not be afraid, HTML And CSS are very simple, and any teapot can master them. But there is no need to rush into this yet.

From my own experience I know that it is better not to overload the teapot’s brain with unnecessary information, otherwise it, i.e. the brain will boil ahead of time. Don't believe the smart guys on various sites who claim that creating a website needs to start with learning HTML and CSS. I have good news for you - you don’t have to write the HTML code yourself, because smart people came up with CMS .

< Как работает браузер