Everyone uses the Internet and everyone browses various sites, and, probably, everyone would like to place their site 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 hTML language... In this article we will look at the basic 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 of formatting hypertext documents, design, hypertext editors, browsers and much more. A user who has mastered this language acquires 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 cd-disks, and all these products, made in the form of sets of HTML pages, do not require the development of specialized software tools, since everything you need to work with data ( Web browsers) became part of the standard software most personal computers.

• Element (element) - HTML construction. It is an object that contains data and allows you to format it in a specific way. Any Web page is a collection of elements. One of the main ideas of hypertext is the ability to nest elements.
• Tag (tag) - the start or end markers of the element. Tags define the scope 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 enclosed with a forward slash.
• Attribute (attribute) - parameter or property of the element. In other words, it is a variable that has a standard name and which can be assigned a certain set of values: standard or arbitrary. Character attribute values \u200b\u200bare assumed to be enclosed in straight quotation marks, but some browsers allow you to omit quotation marks. This is because the type of an attribute is always known in advance. Attributes are located inside the start tag and are separated from each other by spaces.
• Hyperlink - a piece of text that is a pointer to another file or object. Hyperlinks are necessary to enable you to navigate from one document to another.
• Frame (frame) - this term has two meanings. The first is a document area with its own scrollbars. The second value is one image in a complex ( animation) graphic file (similar to a still from a movie). It is also possible, instead of the term "frame" in special literature and localized software products, you can find the term "frame" or "frame".
• HTML file or HTML-page - a document created in the form of hypertext based on the HTML language. Such files have htm or html extensions.
• Applet (applet) - a program transferred to the client's computer as a separate file and launched when viewing a Web page.
• Script or script ( script) - a program included in a Web page to expand its capabilities.
• Expansion (extension) - an element that is not included in the language specification, but is used, providing the ability to create a new interesting effect formatting.
• 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 -hyper text Document in its original form, when all elements and attributes are visible.
• Web page - 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 related to each other.
• Browser (browser) is a program for viewing Web pages.
() - copying files from the server to the client computer.
• Url (Uniform Resource Locator) or a universal resource locator, the address of some object on the Internet, i.e. a typical WWW URL is: http: //www.name.domain/filename.

All elements of the language can be roughly divided into three groups. The first includes the elements that create the structure of the 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 specific requirements for the document, imagination and competence of the developer.The third group includes elements that allow you to manage by softwareinstalled 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.

Despite the fact that the HTML specification is a standard, this language is supplemented with new elements ( extensions). Therefore, some Web pages are easier to view with 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 the developer a lot of creativity.

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 then neither the browser nor the HTML itself had a good use yet. In 1993, HTML + appeared, and this version also went almost unnoticed. But HTML gained popularity thanks to version 2.0, which appeared in June 1994. And since that moment, the popularity of WWW has increased throughout the world. The standards included in version 2 became 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, brackets, etc.) using language elements. But the development of this project stalled and did not gain further distribution.

In 1996, HTML version 3.2 appeared. It was a brilliant decision, suffice it to mention that frames were introduced into the language specification, which are now quite popular with website developers. To this day, all browsers support this version of HTML.

The official HTML 4 specification ( Dynamic HTML) was developed in 1997. At this time it was already obvious that the further development of hypertext will be carried out through web programming. This turned out to be much more efficient 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, that is ... after the title write.html

Web document structure Go to End of Document<НR> <Н1>Heading 1 <Н2>Heading 2 <НЗ>Heading 3 <Н4>Heading 4 <Н5>Heading 5 <Н6>Heading 6 <НR> Here is located first link<а name ="list2"> <НR> <р>Should be located here
the main text of the web page.
And I, for example, will insert here
several hyphenation,
so that you can
clearly observe
how does it work for you
links within the document,
otherwise if you have a high resolution,
You just won't notice the following links.
<НR> <а name="list1"

Go to<а href ="#list">Start of document

To understand the structure of a Web page, you need to consider all of the elements that go into the above code.

< html>

HTML document designation. One of the principles of the language is the multilevel nesting of elements. This item is the most external, since the entire Web page must be located between its start and end tags. According to the idea, this element can be considered a formality. It has version, lang, and dir attributes, which are rarely used in this case, and allows nesting of HEAD, BODY FRAMESET, and other elements that define the overall structure of a Web page. Naturally, the end tag all such documents come to an end.

< head>

The title area of \u200b\u200bthe web page. In other words, the first part. Just like the previous element, HEAD serves only to form the overall structure of the document. This element can have the lang and dir attributes.

< title>

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

<МЕТА>

This element contains service information that is not reflected when viewing a Web page. Inside it, there is no text in the usual sense, so there is no end tag either. Each META element contains two main attributes, the first defining the data type and the second defining the content.

< body>

This element combines the hypertext that defines the actual Web page. This is the visible part of the document that the auto page develops and that is displayed by the browser. Accordingly, the end tag for this element should be found at the end of the Web page. Within the BODY element, you can use all the elements intended for the design of a Web page. Within the start tag of the BODY element, many attributes can be placed to set the entire page. Let's consider them in order.

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

background \u003d "path to background file"

A simpler background design comes down to setting its color

bgcolor \u003d "# FFFFFF"

The background color is specified by three 2-digit hexadecimal numbers that define the intensity of red, green and blue flowers (rbg).

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

text \u003d "#RRGGBB"

The following attribute is used to set the text color for hyperlinks

link \u003d "# RRGGBB"

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

<Н1>

Header element. There are six levels of headings, which are indicated as follows.
<Н1>Heading
<Н2>Heading
<Н3>Heading
<Н4>Heading
<Н5>Heading
<Н6>Heading

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

align \u003d "left" align \u003d "center" align \u003d "right"

To create a new paragraph, use the tag

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

The ALIGN element that can be set to align the paragraph:

Left aligned

Center

Right edge

The text between these elements is justified

<НR>

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

• align \u003d "left"
• align \u003d "center"
• align \u003d "right"
• align \u003d "justify"

<а name="метка">Free text

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

To insert images ( pictures) HTML document uses the following tag ( presented full description attributes of this tag):

Lists

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

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

• Item 1 of the list
• Item 2 of the list
• Item 3 of the list

The ul element is a sort of list selection. It allows you to separate one list from another. The li element denotes each item.

Tables

They are one of the most essential formatting tools for data on a Web page. The main convenience lies in the fact that the browser takes over the drawing of the entire table. The size of the frame can be automatically adjusted to the size of the viewport in the browser and, of course, to the size of the text and picture lines in the table cells. Among other things, tables allow you to solve many design problems: align parts of the page relative to each other, place pictures and text next to each other, control the color scheme, 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 are elements to describe each cell in a row (TD, TN).

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 TR element is specified after the TABLE element, this indicates that the description of a new table row begins. Everything behind this element will be placed on one line (from right to left). It can be a sequence of TD elements ( cells), another table, and so on. After the new TR element appears, the description begins next line, etc. to the end of the table (tag).
The table can be horizontally aligned using the align attribute:

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

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

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

Scripts

Almost all webmasters want their pages on the site to have a modern look, be multifunctional, beautiful and dynamic. Standard means HTML is not possible, so different tools are used: applets, objects, cascading style sheets, and so on. But the most popular and widespread type ( reception) is scripting.

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 in Visual Basic Script ( VBScript) developed by Microsoft.

This tag allows you to separate the text of the script program from other information on the page. The SCRIPT tag necessarily includes the language attribute, which defines the language and can take the following values:

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

The type attribute can also indicate the type of the language, although its use is optional. In order not to break all the rules, the following definition can be placed inside the element:

type \u003d "text / javascript"

One of the coolest things about scripting is the ability to change page content as a result of program execution. But this is only a feature, not a rule. The defer attribute (which takes no value) tells the browser that there will be no such changes. In some cases, this can speed up page loading.

The charset attribute can be used from the standard attributes.

SCRIPT tag ( or a number of such elements) can be located both inside the HEAD element and inside the BODY element. If the script is inside a BODY element, it is possible that some browser that does not support the SCRIPT element will interpret 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 script text, then a different notation is used for this: at the beginning of the line, enter two slashes //.
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 a window).

-
-
-
-
-
-
-
-

it simple pagebut it includes a single 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.
There is a case, for example, the page will be viewed in a browser that does not support scripting, for this the NOSCRIPT element is provided. Modern viewers ignore its contents. This element can be used in several ways. To begin with, you can display a declaration like the following inside it: “ 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 link to another HTML document. The NOSCRIPT element must be supplied with an end tag.

Here we are with you and considered 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!

HTML stands for Hyper Text Markup Language, i.e. hypertext markup language - the main building block of web pages, used to create and visual presentation web pages.

HTML adds markup to plain text. Hypertext contains various links through which web pages are linked. FROM using HTML everyone can create both static and dynamic sites. HTML is a language that describes the structure and semantics of the content of a web document. The content of a web page is marked up using tags that represent HTML elements. Examples of such elements are , ,

etc. These elements form the building blocks for any website.

HTML was invented in 1991 by a scientist, Tim Berners-Lee, and was originally intended for the exchange of documents between scientists at various universities. Tim Burns-Lee laid the foundations with his invention modern network Internet.

There are several versions of HTML. The language standard is constantly updated and supplemented, the consequence of this is that it comes out almost every year a new version HTML. The "HTML 2.0" version was the first standard of the HTML specification, which was published in 1995. HTML 4.01 is the major version of HTML that was published at the end of 1999 and is widely used today. Today the most popular version is HTML-5, which is an extension of HTML 4.01, and was published in 2012.

An HTML document or web page is a simple text document containing tags (which in turn are plain text enclosed in angle brackets<имя тэга>). A web page can be typed both in a regular text editor (Notepad, WordPad, Word, etc.), and in a specialized one with code highlighting (Notepad ++, Sublime Text, etc.). HTML documents are stored as .htm or .html files.

Online examples in every lesson

As you go through the material in each lesson, examples will be provided to help you understand each code in detail and, through practice, enjoy it. With our online HTML editor, you can edit an HTML document, and then click the orange "Run" button in the editor, which is located above the left editor window, to see the result. If you use a specialized HTML editor, then you can copy the example and see the results of your work in the browser installed on your computer.

Example HTML:

Try it yourself

This is the title

This is a paragraph.

Online HTML Examples

The HTML tutorial has over 100 online examples for you to help you master the markup language. It is better to see once than hear a hundred times! Theory plus practice is the key to your success in mastering HTML.

Hello friends!

I want to tell you what online resources and courses I used to learn HTML and CSS. With these tutorials, you can quickly and easily learn HTML and CSS from scratch to a very advanced level.

HTML, CSS for beginners from scratch and more.

Remember, in the last articles I already said that I will soon tell you about all the resources, sites, services, courses that I consider useful and effective for learning HTML and CSS? This time has come, today I will tell you what I used and where I continue to do at the present time.

What I will talk about has been tested on my own experience and I can vouch for the quality. If you use my recommendations, then the time wasted will not be wasted.

I will assume that you know at least in general terms what HTML and CSS are, what you can do with them, and why you need all this. The effectiveness of my recommendations and your training will depend on how well you already know these disciplines, what goals you set for yourself, and what level of skill you plan to achieve.

In this article I will focus on beginners, on those who are just taking their first steps in learning HTML and CSS, it is for them that my advice will be most relevant. After going through these stages, you will definitely understand whether you are interested in further studying and improving your skills. If yes, then continue to study and comprehend all the subtleties and new opportunities.

I myself am now at this stage, gradually passing advanced courses and lessons, studying the possibilities of HTML5 and CSS3. At the same time, I get great pleasure from classes, as well as from the feeling of flexibility, great opportunities and new ideas that are born in this exciting process.

My Way of Learning HTML and CSS

My first acquaintance with HTML and CSS took place in my first years at the institute (although I got carried away with programming much earlier), then I understood what each of them was responsible for. In those days, it was still customary to actively use inline styles, and build a page grid using tables. Only a few switched to divs, which I did not yet know anything about and did not attach importance to these points.

Having somehow figured out the basic points, I lived with this inferior and outdated knowledge for a long time. I tried to create my own pages, add styles to them. More recently, I have, as a result of which the design has changed.

And then, after many days digging in the code, I realized how limited and insufficient my knowledge is. What is it like invisible frames, in which you place yourself and live in them, getting used to this state of affairs. There was no freedom in the implementation of creative ideas and thoughts.

There were endless questions: "How to do this and not spoil everything else?", Which I solved. I don’t remember that my thoughts lingered for a long time on such questions: “is it right to do this in this situation and am I not inventing a second bicycle with my clumsy hands?”.

The time came when this state of affairs ceased to suit me, and I decided to finally take the situation under control. At the end of the year, this idea appeared on the pages of the article about. But now these plans are being implemented, and all I can do is think: "what was stopping me, and why didn't I do it earlier?" This is similar to how I recently mastered and now manage to capture thoughts in the form of sentences.

How to learn HTML and CSS from scratch?

I repeat once again that there are always several options for achieving the goal. I will describe my experience as I think it's good enough to talk about it.

Stages of learning HTML and CSS

It is most convenient to break the whole process into stages:

• Familiarity with HTML and learning the basics
• Familiarity with CSS and mastering basic concepts
• Advanced level. Learning HTML5 and CSS3

It is well known and we all have repeatedly tested that repetition is necessary for memorization. But so that the process is not boring, we will not repeat the same thing many times. Instead, we will refer to different sources at each stage, thus expanding our knowledge and understanding.

And even if somewhere one of the points seems not entirely clear, in another place you will close all the white spots, feel confident and can easily move on.

Adhering to this plan, you will gradually get acquainted with technologies, it is easy to memorize everything in practice, as a result you will become very strong specialists in HTML and CSS, you will know new technologies in HTML5, CSS3, as well as the best and most modern approaches in page layout.

Best HTML and CSS tutorials

And here are the resources themselves, which I will refer to and which I urge to actively use:

• Courses
• Codecademy HTML & CSS Course... We will only use the lessons. Tests and Projects are paid there, we can do without them.
• HTML Academy... You can use my affiliate code 1115104d039 to get a good discount on advanced courses.

The school should also be mentioned Code school, where the quality of the presentation of the material is high, but it is paid and will be convenient only for those who know English perfectly.

Perhaps I will also note the reference book htmlbook.ru, which you will often find in the future, using a search engine.

It is no coincidence that E. Popov's courses are in the first place. This person will be your guide in the early stages.

The strongest and most serious school of Russian-language resources, I consider HTML Academy, it is there that I now take advanced courses that are available only by subscription, but it is not at all expensive (300 rubles per month) compared to Code School (the price there is from 20 to 30 dollars depending on the promotions). By using my HTML Academy affiliate code - 1115104d039 you get a discount when you sign up.

Every time we will turn to HTML Academy after Popov and Codecademy courses, this will allow you to feel calmer and more confident in solving problems, some of which are quite serious. After all, not everyone has iron nerves.

Learning plan for easy mastering of HTML and CSS

I suggest you stick to this plan. I did this myself, I liked the result and the learning process itself.

1. ... What you learn there and how to get it, see my article.
2. Codecademy HTML & CSS course. Unit 1, Unit 2, Unit 3
3. HTML Academy, six first courses before the course "Acquaintance with CSS", its later
4. ... See my article for details.
5. Codecademy HTML & CSS Course... Unit 4, Unit 5, Unit 6. This concludes using Codecademy.
6. HTML AcademyStarting with the course "Introduction to CSS" 5 courses, ending with the course "Styling text with CSS"
7. Course: Practice HTML5 and CSS3
8. HTML Academy, all remaining courses from the basic level, starting with the "Block model of the document" and ending with the course "Final tests". Someone might think that Popov's course on layout should be taken after HTML Academy (i.e., swap the last two steps). This point of view also deserves respect, but it seems to me that you will take courses from HTML Academy more responsibly after you turn the pages suggested by Eugene yourself, and you will remember it better.
9. Advanced level. We only have the HTML Academy school left, where we need to go through further levels by subscription. Don't forget about my affiliate code, which I mentioned above. Study "Advanced Courses" and "Preprocessors". At the time of this writing, I am on the Linear Gradients course. I plan to complete all these courses.

Here's a plan of work outlined for those who want to learn how to be well versed in HTML and CSS. It may seem that all this is very long and difficult. As you know, fear has large eyes. It all starts with the first step. If you are not lazy and diligently study in your free time, the list will be reduced.

Undoubtedly, I did not talk about other resources that may also be useful. If you know such people, not necessarily only from HTML and CSS, then tell us about them! It will be great if you leave information in the comments.

Courses in HTML5 and CSS3, modern layout and web design

I decided to tell you about a few more courses on HTML and CSS, as well as on the topics of modern layout, web design and website creation. My HTML and CSS learning plan that I suggested above is tested and gives excellent results... But, perhaps, it will be inconvenient for someone to jump over different sources, they want everything to be in one place. In this case, it will be more pleasant and even more effective to study professional author's courses with detailed lessons that I will talk about.
Below I will just give you a list of training courses, and you yourself see who will like what.

• Practice on the basics of responsive layout in HTML5 and CSS3
• HTML5 and CSS3 from Zero to Pro
• Practice of website layout for mobile devices
• Web Design: A Practical Course in Landing Page Creation
• The web designer is a professional. Creation of popular layouts
• Modern trends in web development
• All about creating websites
• A step-by-step plan for creating a website
• JavaScript & jQuery from scratch to pro
• Secrets of Practical SEO
• Modern PHP: Working with VKONTAKTE
• Learn to create beautiful, modern sign and sell pages
• Blogging school

Just one more minute. I thought, what if the topic

HTML basics contain the basic rules of the HTML language, a description of the structure of an HTML page, relationships in the structure of an HTML document between HTML elements.

HTML document is a regular text document, can be created as in a regular text editor (Notebook), and in specialized, with code highlighting (Notepad ++, Visual Studio Code, etc.)... HTML document has the extension .html.

An HTML document consists of a tree of HTML elements and text. Each element is identified in the source document with a start (opening) and end (closing) tag (with rare exceptions).

Start tag shows where the element starts, the ending shows where it ends. End tag is formed by adding a slash / before the tag name:<имя тега> … ... Between the start and end tags is the content of the tag - content.

Single tags cannot store content directly in themselves, it is written as an attribute value, for example, a tag will create a button with text Button inside.

Tags can be nested within each other, for example,

Text

... When investing, you should follow the order of closing ("matryoshka" principle), for example, the following would be incorrect:

Text

.

HTML elements can have attributes (global, which apply to all HTML elements, and their own). Attributes are written in the element's opening tag and contain a name and value specified in the format attribute name \u003d "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 \u200b\u200band only one id value. Multiple class values \u200b\u200bare separated by a space,

... The class and id values \u200b\u200bmust only consist of letters, numbers, hyphens, and underscores, and must begin with only letters or numbers.

The browser views (interprets) an HTML document, building its structure (DOM) and displaying it according to the instructions included in this file (style sheets, scripts). If the markup is correct, then the browser window will display an HTML page containing HTML elements - headers, tables, images, etc.

Interpretation process (parsing) starts before the web page is fully loaded into the browser. Browsers process HTML documents sequentially from the beginning, while processing CSS and correlating style sheets with page elements.

HTML document consists of two sections - heading - between tags … and the content part - between the tags …

.

Web page structure

1. The structure of the HTML document

The HTML language 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 \u200b\u200bare valid for a particular HTML type. Each HTML version has its own DTD.

DOCTYPE is responsible for the correct display of the web page by the browser. DOCTYPE defines not only the HTML version (like html), but also the corresponding DTD file on the Internet.

Elements inside the tag , form a document tree, the so-called object model document, DOM (document object model)... Moreover, the element is the root element.

Figure: 1. The simplest structure of a web page

To understand the interaction of elements of a web page, it is necessary to consider the so-called "Family relationship" between elements. Relationships between multiple nested elements are categorized as parent, child, and sibling.

Ancestor - an element that contains other elements. In Figure 1, the ancestor for all elements is ... At the same time, the element is the ancestor for all the tags it contains:

,

, ,