How to learn html language. Modern HTML lessons for beginners

Twitter

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 the very concept of HTML includes various methods for designing hypertext documents, design, hypertext editors, browsers and much more. A user who has mastered this language gains the ability to do serious things using simple methods and, most importantly, quickly, which is considered very good in the modern world!

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) are the starting or ending 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, this is a variable that has a standard name and can be assigned a specific 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 (similar to a still from a movie). It is also possible that instead of the term “frame” in specialized literature and localized software products you can find 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) is a program transferred to the client’s computer as a 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 posted on the World Wide Web.
Website ( site) - a set of Web pages located in one place and interconnected.
Browser ( browser) is a program for viewing Web pages.
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, some Web pages are more convenient to view using certain browsers. Extensions are created only by well-known companies that develop software for the WWW, and ordinary users can improve their Web pages through 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, HTML version 3.2 appeared. 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 the 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
main text of the web page.
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 the general structure of the 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 does not appear 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 the TITLE tag. My advice: never make very long text in this tag ( 65 characters is enough).

This element contains service information that 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 visible part of the 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 design of the page, 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 that determine the intensity of the colors red, green, and blue (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) in an HTML document the following tag is used ( provides a complete description of the attributes of this tag):

Lists

(list) were developed in HTML, no doubt influenced by the success of text editors. A list differs from ordinary text, first of all, in that the user does not need to think about numbering its items: HTML takes on this task. 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 the general appearance of the list ( and allow you to specify attributes), while others specify its 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 highlighting of a 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 schemes, 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 a 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 new table row is being defined. 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. After a new TR element appears, the description of the next line begins, and so on 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 website pages to have a modern look, be multifunctional, beautiful and dynamic. This is impossible with standard HTML tools, 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 as source text in a page and is executed by the browser when the page is viewed. The script can be written in JavaScript, developed by Netscape, or in 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. Using the 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.
The script code 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!")
—
—
—
—

It's a simple page, but it includes a one-line script. Using the 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!

This article is not intended to be a comprehensive guide to HTML document markup language. It describes the basics of HTML - the basic principles, concepts and definitions of this technology, having mastered which, you can easily move on in the study of HTML coding.

Cool

Stammer

To study the lesson, download the archive with the necessary files.

HTML is a document markup language. The correct pronunciation is HTT.

Have you probably ever worked in the Word document editor or similar office applications? You probably know that this type of editor has rich capabilities for editing text, arranging elements, inserting pictures, etc.

Why, you might ask, write about word processors in an article on HTML? But why. If you figure it out, what is an office editor? This is an application for editing and displaying documents.

The key word here is document. That is, we create, edit and view a document in some program, in this case - in an office editor. If we open such a document in a simple text editor, for example, Notepad, we will see many strange symbols and signs. This mess of symbols is incomprehensible to humanity, but understandable to computers. Thanks to this internal language, the Word document takes on a certain structure and appearance in the editor itself, and the document appears before us in all its glory with formatted text and pictures in their place.

HTML is a document markup language for the browser. Word here is the browser, and the document is the HTML page. This is the very basis of HTML technology, the understanding of which is necessary in order not to confuse the markup language of web documents with programming languages. The name speaks for itself - using HTML we marking, where on the page the element, picture or text will be shown, and in what order they will appear next to each other.

Yes, simple typing and formatting of text in office applications has nothing to do with programming. But the observant reader will notice an important detail - in a word processor we type, edit and format text and pictures using visual buttons and menus, but why is HTML code written by hand? Why learn so many technical details of writing markup for a document?

In fact, there are a lot of editors with which you can create and edit HTML pages, similar to Word. That is, the source HTML code is hidden for us and we don’t get into it.

A sort of Word for HTML. These visual editors are called:

WYSIWYG editors - W hat Y ou S ee I s W hat Y ou G et. That is, if we translate it into Russian: what we see is what we get.

I call them "wuzivoogies". Although this is phonetically incorrect, it clearly demonstrates the meaninglessness of this invention. Beginners very often use such editors to create their first websites. Of course, this is convenient - you don’t need to delve into the study of tags, design styles and other, at first glance, unpleasant and complex things. The editor itself automatically converts our actions into HTML code.

But, as they say, nothing just happens. More specifically, this approach has very serious drawbacks. What prevents everyone from using visual editors to design HTML pages? The fact is that pages formed in this way usually have a lot of unnecessary code and a lot of errors from a semantic point of view. Now, of course, there are no problems with a high-speed Internet connection and the difference in page size of 400 kb and 100 kb is not significant for speed, however, optimized and correctly written HTML code eliminates many problems and provides many advantages, namely:

Competent HTML code has a positive effect on search engine optimization and the speed at which a search robot crawls a site. The kilobytes of code generated by the vuzivuga are not acceptable and even harmful;

The HTML code generated by the WYSIWYG editor has many semantic errors. That is, the tags generated by such an editor are used for other purposes, where they need to be used, for example, lists

A lot of unnecessary tags are generated and the document structure becomes bloated. Let's say you move an element in such a program, first to the right, then to the left, then to the center - each action leaves a trace in the source HTML code. The editor is a program and it cannot know what exactly you want to get as a result; it generates tons of code, taking into account all possible options for the behavior of the document in the browser.
As a rule, editors for the visual design of HTML code quickly become outdated. And due to the lack of interest on the part of professionals, they are generally deprived of support and stop developing. And HTML is evolving. Everything develops except the wuzivoogi. Accordingly, they cannot generate correct and modern code that would use new features and solutions.
To support and develop such projects is heavenly punishment. There can be no talk at all about using patterns and reusing code.

So, we will write HTML only with pens. Adequate tools for visual HTML editing have not yet been invented, and they are unlikely to appear. The HTML markup language is easy to learn and understand, and there are many tools for automating the writing of HTML code, but more on that in other lessons.

After tinkering a little with the WYSIWYG editor, young HTML gurus leave this futile task and move on.

HTML Document Structure

For classes, I recommend downloading and installing the Sublime Text editor. I highly recommend not using the built-in Windows Notepad for HTML layout if you don’t want to break your psyche in the early stages of learning HTML.

We decided that we would write the HTML document code manually, that is, type it up. HTML Layout is the process of creating an HTML document. In the common people and informed circles, it’s just layout. Any document has a structure and certain rules of construction. What elements does the code consist of, what is the structure of HTML?

Let's create an initial template on the computer - the index.html file, open it using an editor and paste the following code into it:

Header Document Body Please note that HTML documents have a .html extension.

So, in order from the example.

- document type (doctype)

This construction is always indicated at the beginning of the document so that the browser correctly “understands” which version of HTML is used when constructing 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 fifth and the doctype given in the example is current.

In principle, there is no point in delving into the study of document types, because with the release of HTML5 this design has become a standard. Just insert it at the beginning of the document every time you start creating a website layout.

- beginning of the document

The first tag we see after the doctype is .

An HTML tag is a structural unit of HTML document markup. HTML code is made up of building blocks 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 document markup is not such a big burden on the brain.

So, document markup starts with a tag and ends with a closing tag. Every tag that contains other tags or elements must be closed with a closing tag. For example, , , , etc.

The tag is mandatory because it contains the entire structure of the document and is a wrapper for other elements.

Tag

Next, we see the tag, which contains other elements that are not yet clear to us. Contains other elements - this means that the elements or tags are between the opening and closing tags of the construct:

content or other tags

The purpose of the tag is to store the 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 behave.
This tag is required in the document.

Tag - document title Title

Title is a required tag that contains textual meta information that appears in the browser or tab title. The tag must be in the . Also, the contents of this tag are used by search engines to display the document in search results.

Meta tag

Meta tag is a specialized tag designed to provide structured data about a page. Meta tags are most often used in the . Meta tags are not required in the structure of an HTML document.

Favicon

Attaches a file with a favicon image to the document. Favicon is a miniature icon displayed next to the document title in a browser tab. A favicon is a graphic file measuring 16 x 16 (or 32 x 32) pixels, which can have various formats, such as png, jpg, ico, gif. The ico format is traditionally used. Animated favicons are gif files containing animation. You can see an animated favicon, for example, on VKontakte, when a new message arrives.

CSS document styles

Includes a CSS file with HTML styling to the document.

CSS- cascading HTML document styles. Each tag that is located in the tag has a set of properties, such as color, width, height, position relative to other elements. All these properties are CSS styles that can be exported to an external file. The design connects external files to the HTML document, including CSS styles.

Note: The href property of a construct specifies the location of the external file. In our example, the file style.css And favicon.ico, are located in the same folder as the file index.html. does not have a closing tag.

Tag

The tag contains code or a link to a javaScript file and is most often used inside a tag, although Google's Page Speed Optimization tool recommends using this tag at the end of a document, before the closing tag.

In our example, an external file is connected script.js, which is located in the same folder as the main index.html file.

So, friends, we have looked at the main elements that are used most often in the tag. In addition to these elements, there are a number of others that are more specific and optional.

Body aka body

This is where all the fun and visually tangible things begin in the HTML layout of a document.

Let's move on directly to the layout of the visible part of the page. Everything that we write and layout inside the tag will be displayed in the browser. Let's open our file index.html in the browser in order to clearly see what we are doing in the editor.

The tag can contain any HTML tags necessary to design the document and provide its functionality (form). I will provide a table of the most used tags and briefly describe each one. You can immediately run the examples given in the editor.

Tag	Description
	A tag for creating links in a document. Example: link text The href attribute specifies the document to which the link will lead.
,	Makes text italics or bold (emphasized). Example: italic text bold (emphasized) text
, , , , ,	Document headings. There are 6 levels of headings in total, but in practice only h1 to h4 are used. There should be only one heading in the document, highlighted with the h1 tag, as the main heading of the document. Examples: First level heading Second level heading Third level heading... etc.
,	Document lists. They are a numbered or bulleted list. The element of such a list is the tag Examples: Bullet list item 1 Bullet Item 2 Numbered list item 1 Numbered list item 2
	Paragraph. This tag defines a paragraph of text separated from other paragraphs. It is highly recommended to close this tag. Example: The appearance of HTML markup is largely determined by CSS styles. However, some webmasters choose not to use styles in the early stages of a project.
	Picture. Using this tag, you can insert a picture into the HTML markup. Be sure to include alternative text for all images - the "alt" attribute. This tag is self-closing. Example:
+ +	Forms and input elements. Forms are designed to enter information into the system on the server. A kind of feedback between the user and the site. For example, forms are used when you need to send some message to the server. In addition, forms can perform other functions, but the main task is to send data to the server. An example is a simple form for sending a message, in which the site user indicates his name, E-mail and some text: Message text
	Defines a substring within a string. Used to style part of a line using CSS. One of the most frequently used tags. Without design, it does not manifest itself in any way in the browser. Example: Learning HTML, in most cases, does not cause any difficulties for beginners.
,	Tags are designed to insert video and audio into a document. The closing tag is required. Examples: The controls parameter tells us that the page should display media content controls, just like a regular audio/video player.
	Truly a royal tag. The most used and popular tag in HTML page markup. This is a block element designed to manage blocks on the site. The concept of “wonderful” layout is often used - this means that all blocks on the site are laid out using these tags. May contain other tags. Example: Text in a nested block All elements, in most cases, are styled with CSS style properties. The closing tag is required.
	This tag loads an external page into the document. Example:

We have not considered all the tags, and this is not necessary at this stage. The main thing is to understand the basic idea of HTML, learn how to use the tags presented above, and then move on.

Please note that all names in the included files must be written in Latin characters, without spaces.

For example, don't:

This is necessary for greater compatibility of page content. In addition, standards for writing HTML code dictate.

So, now we know some basics of HTML: what structure a typical HTML document should have, we know some of the most popular tags, it’s time to get down to the most delicious part - namely, cookies.

Practical assignment on HTML layout

If you haven't downloaded the archive with examples yet, do so. For example, you can look at the example.html file, which was also in the archive.

Unpack the archive and create an index.html file in the folder with the unpacked files. Open the created file using the Sublime Text text editor;
Create an initial document structure with a doctype, a tag containing and and proceed to edit the contents of the tag;
Open the readme.txt file and complete the appropriate tasks in the index.html file you created. To check the result, open index.html in your favorite browser.

This concludes the lesson on the basics of HTML, in the next lesson “CSS Basics” we will learn how to manage the styles of document elements, get to know cascading style sheets, learn how to use style classes and make our layout beautiful and colorful.

With this series I want to open a series of lessons dedicated to HTML. I made this decision because I would like to try to teach users how to create websites from scratch. This thought has been in my head for quite some time. The only question that arose was where to start, with HTML or proceed directly to installing the engine and further configuring it.

But if you start by learning the engine, then some of the users who do not know HTML will be left out. So I decided to start with the basics and do it in such a way that even any beginner could figure out what and how.

So what is HTML?

The abbreviation itself stands for Hypertext Markup Language (HyperText Markup Language).

To put it simply, HTML is a special markup language that tells the browser how to display a particular web page. That is, what font should the text be shown in, what order should the elements be arranged in, which elements should be displayed underlined, etc. And depending on what element the browser encounters, in accordance with the rules laid down in the browser itself, this element will appear that way displayed. However, these rules can then be changed, but I will talk about this in my next lessons, which will be devoted to CSS.

I propose to start by looking at an example of the simplest web page that can be. Now you should not focus your attention on what certain tags mean. There is a time for everything, for starters, just pay attention to where everything is in the code and how it all relates to what is displayed in the browser. Consider an example HTML document:

Page title One day in my life Preparing for a concert

Today I woke up early because I had a hard day ahead. After all, today I have to perform at a concert in front of a hundred spectators. And to make sure everything goes well, I have to repeat the rehearsal program

Everything went without a hitch. No one from our team lost the rhythm, and as it turned out, everyone was worrying in vain.

Everyone performed well, although I think there was a moment when our drummer lost his tempo. But we cleverly got out of the situation.

First, you will need to type this text in some text editor (I find the most convenient is Notepad ++) and save the file under the name index .html somewhere on your disk. When you double-click on the saved file, you will see a page that looks something like this.

Please note that the tags themselves are not displayed, but the content itself that is located between them is displayed. And from here you can conclude that tags act as a design element in HTML.

Look at the source code. As you may have already noticed, there is a small indent before the word “One”. However, the browser did not take it into account; it simply swallowed it silently, as if it had never existed. Moreover, if you try to put many spaces between words, they will all be perceived by the browser as one space - HTML has this feature.

And here’s another piece of advice: when writing HTML code, train yourself to indent those tags that are nested within others. For example, the title and body tags are nested within the html tag. This means that when you write these tags, do not forget to indent them accordingly. Usually they are done using two spaces or tabs - this is a matter of taste. Why is this necessary? Now, in that small piece of the document that I gave as an example above, there is not much information, so it is quite problematic to get confused there. However, if there are many nested elements on the page, then nothing will be easier than getting lost in this huge code and having difficulty figuring out which part of the document you are in now. So it’s better to accustom yourself to a good style right away, then you will understand it yourself and it will serve you well in the future.

It is also worth indicating the bare minimum of tags that should be in the HTML document. I'm talking about this part:

But even if this part is missing, most browsers will turn a blind eye to all this and still display your page. However, such a frivolous style of coding, in which a person skips a large number of tags, is bad writing form, so it is advisable to have all these elements on your page in any case. Otherwise, this may pose a compatibility problem with other browsers, which could ultimately affect the appearance of your site, and as a result, traffic.

In addition, you can write comments in an HTML document - this is purely service information that is intended exclusively for you. Usually these are some important notes that serve as a reminder for you or just something worth paying attention to. Comments are not processed by the browser, which means that the user will not see them. They are usually written like this:

Now let’s try to figure out for ourselves which tag in our example above is responsible for what.

The html tag means that the output of html code begins.

head – service information section. Among other things, there is title , which is responsible for the text in the title of the browser window. This section can also be treated as information that we want to tell the browser about this page.

body – the main part of the document begins.

h 1 – heading.

h 2 – subtitle.

p – paragraph.

That's probably all! If this was your first HTML document, then congratulations! Yes, he doesn't look as great as we would like. But nevertheless, we have material that we can already work on. And in the next lessons, everything will be even more interesting, and we will slowly touch on working with cascading style sheets (CSS).

< Назад

To comment, you need to register.

With the development of web technologies, there is no shortage of information in the modern world. Anyone can find books, courses, trainings on a topic of interest. There is a lot of information even on very exotic destinations.

It would seem that now people should know more, have a higher level of intelligence, and develop new skills. But unfortunately, this is not entirely true. How often have you started learning something new and then given up without achieving any significant results?

How often do people start learning new foreign languages, history, programming and other disciplines without ultimately obtaining the necessary knowledge, skills and abilities?

At the same time, there is no shortage of information. Quite the contrary. So, what is the reason for these failures in learning something new? I asked myself the same question, seeing how many people start learning web development, website design, and then give up halfway through. Or they continue to study, but the learning process is very slow.

But first of all, you need to decide what exactly he wants and how much he is willing to pay for it.

If your goal is to create a website or blog, you don't have to learn programming, just read mine.

But if you want to become a web developer, you will have to study and study again.

Nowadays there is enough material on the Internet on both HTML and . However, the percentage of people who successfully completed the training and are well versed in this topic is not so high.

So I decided to write an article about what prevents people from becoming good web specialists, and how to deal with it. Below you will find a list of viruses that kill your dreams and a recipe with which you will achieve your goals.

According to my observation, all people can generally be divided into two types:

Reflective
Active

This observation is very important in the sense that people often study theory, but do not know how to do anything in practice. When mastering the same website layout, students watch all the video tutorials in one gulp, but do not want to practice.

People do not know how to apply the acquired knowledge
The acquired knowledge does not remain in memory, because it is not tied to practical activities

These problems are very important, because without the ability to implement acquired knowledge, all diligence on the path of learning becomes useless. Especially considering that when creating websites, a web developer is often faced with non-trivial tasks that require a creative approach.

Of course, there are solutions to such problems, but you need to find them yourself. No teacher will be able to describe to you all the difficulties that you may encounter when creating a website and give you ready-made solutions.

Thus, practice plays the most important role in developing you as a web developer. You will need to create dozens of web pages before you create something worthwhile.

The question here is: what is the best way to practice? The answer is quite simple: all tasks should simulate a real situation. That is, you must solve the problems that layout designers face in their work.

If you're studying web design, for example, you'll need to solve the day-to-day problems of web designers. Well, or at least try to do it.

But how can a beginner find such practical problems?

There are several options here.

The first is to go to freelance sites where programmers work and find real orders for existing projects. Next, write them down for yourself and start looking for solutions.

Of course, you won’t be paid for this, but you’re just learning, right? Although there are those who have the courage to take real orders at the training stage. I don't envy some employers)))

The disadvantage of this method is that you may not be able to solve the problem on your own. In this case, you yourself need to ask for help and advice from specialists.

Second, work on your own project. The tasks before you, of course, in this case will be real, but at the same time difficult. Again, many problems will often be difficult to solve for beginners.

Another difficulty is that any web project requires a lot of effort beyond programming, such as content creation, SEO optimization of the site, and so on. That is, it is quite difficult to develop a project and at the same time grow as a web developer.

The third, ideal option is to solve ready-made problems adapted to your level of preparation. These problems should have ready-made solutions, of course. So that if something happens, you can find the answer.

This option is ideal for beginners who decide to learn the topic of website creation.

But where can you find such ready-made, well-thought-out tasks? I asked myself the same question. As a result, I came to the conclusion that I should create a database of tasks and answers for every aspect of website development. So that a person receives the necessary knowledge step by step and immediately implements them, polishing his skills.

In this regard, I will begin work on developing practical tasks for HTML and CSS students. Then I will post a link to the tasks in this post. I will also include her in my videos on YouTube channel and on social network profiles. Another huge advantage of this solution is the possibility of live communication with me and other community members.

Now, let's look at what else you need to become a great web specialist.

I talked about the myth of multitasking. Unfortunately, many people already suffer from this syndrome. It involves taking on several tasks at once.

As a result, a person’s attention is scattered, and he cannot work at full capacity. Think about how many times during an hour you look at your phone or go to social media. networks?

How many times have you looked at your gadget, or checked your email before you reached this part of the article? If never, we can shake your hand. Most people do not know how to concentrate on something for more than 5-10 minutes.

Research shows that once a person takes a break from work, it takes an average of 25 minutes to regain their previous level of concentration. Can you imagine how unproductive it is to do several things at once?

Another problem is that once they start learning website layout, many people immediately move on to mastering web design and other disciplines. Spraying this way leads to mediocre results in all directions.

Of course, studying something for several months can be exhausting, and your motivation level will no longer be the same as when you started. It's much more tempting to start learning something new. However, you won't get far with this approach.

Moreover, HTML and CSS can be mastered in a month at a fairly good level. With due diligence you can do it even faster. Don't fall into the trap of multitasking. Immerse yourself completely in one topic, then move on to another.

It's no secret that there are quite popular knowledge bases on HTML and CSS on the Internet. Everything would be fine, however, studying these disciplines using such reference books, where there is no clear structuring of information, will greatly complicate learning.

If you have heard about Pareto's law, you should know that 20% of things produce 80% of the results. In the same way, there are basic things in website layout that you need to learn. It is on this foundation that your skill will grow.

The remaining details can be studied later. You will learn many nuances during practical training.

Human memory is somewhat like muscles. If a person plays sports and receives the right loads, his muscles will become stronger, more resilient and flexible. In the same way is memory. If you train her, she will become much stronger.

When studying the topic of website building, it is very important to constantly review the material you have covered. Especially if you stopped practicing for some reason. Without refreshing your memory, you can quickly lose the knowledge you have gained.

They say that a person's past can more or less predict his future. To some extent I agree with this. Often people don't achieve success because they have a habit of giving up halfway through.

This is a very common illness. And if a person has such a habit, it can serve him badly. My advice to you: if you have already started learning HTML and CSS, then finish it. Moreover, now you know how to do it as quickly as possible.

I was very surprised when I read about the results of studies in which people had to get out of a maze by constantly choosing one of two doors. Ultimately, each of them walked towards the exit. They also had the opportunity to surrender at any time.

As a result, more than 90% of people gave up at the moment when they literally had to open one more door that led to the exit. That is, they surrendered at the moment when victory was already at hand. But they were frightened by the unknown of when exactly they would find a way out. We can say that they simply did not have enough faith.

Somehow I began to practice an approach called information hunger. Its essence is not to absorb information that has no practical value to me. Well, or at least try to do it.

This includes news, all kinds of programs, etc. This approach has several huge advantages.

Firstly, this is attention. Our attention is very expensive to spend on events and phenomena that are insignificant to us.

Secondly, with a fresh head it is much easier to master useful information.

Thirdly, you will not have a reason to engage in unnecessary conversations, discussions and arguments on useless topics.

Fourthly, it is no secret that the information provided by the media is not always reliable.

There are many other reasons not to create an information dump out of your mind. I just listed a few of them. But I think even these are enough to start filtering incoming information. In general, I advise you to start practicing this approach sometime.

And that's all for me. I hope this post was useful to you. If so, please repost this article on social media so that more people can benefit from it.

Hi all!!! I'm very glad that you decided to conquer the heights of HTML basics and this is the right choice. After all, before creating your first website, you need to know the basics of HTML. Moreover, you will have to deal with HTML coding on a website more than once. I highly recommend checking out the HTML tutorials for beginners on my blog, and I guarantee that after completing this course, you will be able to create a web page or even a website yourself with ease.

Let's get started! First, let's find out
HTML – (from English. H ypert ext M arkup L anguage) is a hypertext markup language. It was first developed by British scientist Tim Berners-Lee in 1991-1992. HTML was only intended to mark up text, pictures, and tables on web pages. Now programming languages such as JavaScript and VBScript can also be inserted into an HTML document.

HTML is not a programming language; it is intended only for marking up text documents.

To learn HTML, you just need to have a Browser and Standard Notepad or .
To open Standard Notepad, do the following on your computer: “Start” => “Programs” => “Accessories” => “Notepad” .

If you have heard about programs that simplify the work of writing HTML code (Microsoft FrontPage, Adobe Dreamweaver), then I do not recommend using them at this stage of training. Train your skills in a standard notepad or in the Notepad++ text editor, and when you complete this course, you will be able to use programs to speed things up. Subscribe to my blog updates and read how to use Microsoft FrontPage and Adobe Dreamweaver.

For better understanding, I have prepared an example. Look carefully at the picture:

Explanation.

1). Any HTML document begins with this line:

With this line we tell the browser that our HTML document complies with the international specification version 4.01. Thanks to this line, your page will look the same.
It is not necessary to remember this line; the HTML document will work without it. This is just so you are aware of what it is.

2). and is the beginning and end of the document.

3). and - the head of the document. Additional service tags are often inserted here; one of these tags is . You will learn about other service tags in further lessons; at this stage of training, this information is enough.

4). and - document title.
This header will be displayed in the browser:

in search I am index or in Google.

5). and - the body of the document.
Here is the content of the document, for example, text, pictures, tables, music, movies, etc. You will learn more about how to insert music, text, pictures into the body of the document in the following lessons.

Note:

You will often read and hear the word “tag”.
A tag is everything that is between the brackets< >. For example: , , , ,
,

etc. - all these are tags.
Tags are not visible when viewing the page in a browser, but everything that is not in brackets will be displayed in the browser when viewing.

There are many tags and they have different purposes.

There are tags that need to be closed. For example,
open the tag

and be sure to close the tag

And there are single tags, for example, this one
.

A tag is a kind of container that can contain text, pictures and other tags...

○ Pay attention to the correct sequence of opening and closing tags:

...

The tag that we opened first is closed last, the second one is penultimate, etc.

○ Here is an example of an incorrect sequence of opening and closing tags. With this order, there may be errors on the web page:

...

The error was in and.
Be careful when writing code.

Ready code.
This is what the finished standard mandatory HTML code for a web page looks like.

Page title Page text, tables, pictures, music and video.

Do not be discouraged if you understand little or almost nothing from everything written above. In the second lesson there will be more practice, and you will be able to manually write everything yourself and see how HTML works.

Continue to the next lesson

How to learn html language. Modern HTML lessons for beginners

Popular articles

Latest articles

Sections

Pages

Special projects

Contacts