Many languages ​​have been invented, but the HTML languagebelongs to a number of special and most demanded. Many other key initiatives in programming are associated with it. Much becomes available when the knowledge of the markup language is present in the developer's mind - HyperText Markup Language (HTML).

sample html page

In essence, in HTML there is nothing complicated, and througha few minutes anyone, the most distant from programming and the Internet person, will create an HTML page in a notebook. An example that deserves attention is simplicity, which is really accessible to everyone.

general description

The HTML file is one page of the site, although this can be argued, but the fact that one file is one page is understandable for a start.

The HTML file starts with the DOCTYPE header, in thewhich indicates that the type of this file is HTML. All elements of the page (tags) are indicated in angle brackets. Each pair ("<" and ">") includes one HTML tag. Typically, HTML tags are paired, that is, there are "/ tag" for each "tag". Both are enclosed in angle brackets. There are single tags, of which the most popular "br /" is the transition to the next line.

The biggest tag in the file is HTML itself, inwhich includes only two tags: HEAD and BODY. In the first, different descriptions are made, links to other pages are specified, PHP and JavaScript scripts may be present. In the second, the content of the page is recorded. Also in the form of tags and scripts.

Simple HTML page

An example of creating such a page is listed below in the article. Consider it carefully.

The author's example is not a picture

Section HEAD

The main purpose of the HEAD tag is a general description of the page and common scripts, although the latter is a relatively relative concept. Usually, only two things are important here:

  • keywords and description of the page;
  • links to other files (* .css and * .js).

To display page content, the content of this section has only an indirect meaning, because it indicates: somewhere in other files there are CSS rules for tags and scripts of other languages.

The HTML page has a title (TITLE) thatIt is displayed when the visitor brings the mouse to the tab where the page is open. This is an important point, because it makes the page significantly more presentable, easier to say, signed with readable text.

html web page example

META tags are important in Internet programming in general, but when you want to create an HTML page in a notebook, the example is undesirable to clutter with redundant constructs.

Links LINK and SCRIPTAttention. The first one points to the place where the CSS stylesheet resides, the second to the location of the JavaScript code file. There can be many such references.

If the scripts should be approached, when knowledgeHTML will be strengthened, then cascading style sheets should be paid attention immediately. In the CSS files are, in particular, the rules for the design of HTML tags.

Section BODY

Actually, an example of an HTML page is thissection BODY. It is here that contains all the information, all the content of the site page. All information is presented in the form of tags and scripts, for example inserting JavaScript code or pieces of PHP-programs.

It is important to understand that the example of an HTML web page inbrowser and the same example in a text editor, notepad in particular, this is not the same thing. In the first case, we have the finished HTML-text, in which all the scripts are executed. For example, PHP has worked its part and has generated the necessary tags instead of its code in the right places. JavaScript also fulfilled its mission, although there is still a separate conversation about it.

simple html example page

HTML is a tag, not a script. Ultimately, the browser displays only the content of the page, only its tags. There is no PHP code there.

JavaScript is in a special position, its concern is to serve the page not only at the time of loading (overload), but also when the page is in the visitor's browser, and the user is studying it.

A simple example of the HTML page code (only the BODY section) is listed below.

The author's example is not a picture

And in the visitor's browser, it looks like the one shown below.

The author's example is not a picture

The code did not specify how to look likeelements that the browser displayed. All visible design is in CSS rules. In this case, in the file Mcss / scPhpWordRW.css, which was referenced (see the very first example of an HTML page).

Unlike HTML, the CSS theme is simpler, therevery affordable rules and their number is small, when an example of creating an HTML page does not require anything other than notepad. Everything is very accessible for instant mastering:

The author's example is not a picture

This shows how a tag is simply describedscLogo_vDoc, and this description is such that in normal state the tag displays the image vDoc-logo.png, and when the mouse is above it, vDoc-logo-h.png is displayed.

HTML Description Structure

Language does not imply any structure andthe concept of syntax is very relative. There are no variables, but there are a lot of possibilities. The basic basis of hypertext is that there is an element (tag) that necessarily has a name.

The name, in the case of a pair tag, is composed of the proper name (tagName) and angle brackets ("<" + tagName + ">"), if it is the beginning of the tag, and "</" + tagName + ">" if its end.

An example of an HTML page describing the attributes is located below in the text.

The author's example is not a picture

A tag can have attributes, then they are placedthrough a space after the tag name to the closing angle bracket ">". Attributes, if they have a tag, are written only at the beginning of the tag. The content of the tag is what is between the beginning of the tag and its end.

The general content of the HTML descriptions

HTML allows you to describe block and lowercaseelements. The first occupy a certain area in the browser window, can be positioned absolutely, that is, in the right place in the display area of ​​the HTML page, and have a specific size.

an example of creating an html page

The line items are generally displayedone thread, that is, as indicated in the page file, and are displayed. The display of the total flow can be affected when the page loads. The placement, visibility and other properties of block elements can be affected at any time by means of JavaScript code.

In addition to simple elements, HTML offers the description of tables and forms. These elements are very much in demand in "everyday site building".

Description of the table: tags TABLE, TR, TD

Using the TABLE tag, you can create a table,indicate a certain number of rows TR and in each row some number of TD cells. Unlike the usual tabular organization, due to the peculiarities of HTML markup, the spreadsheet organization is limited to this declaration, so if the developer wants to have a rectangular table in which the number of columns in all rows is the same, then he must follow it himself.

sample HTML html page

The basic position of HTML: do everything that is indicated, but nothing that is not understood. In some cases, the number of columns in each row of the table is not so important, but if you need to combine cells vertically or horizontally, you will have to count everything very carefully.

An example of an HTML page describing a simple table is clearly shown in the article.

The author's example is not a picture

Here is a table in the size of three rows per threecolumns, and in the first row, instead of the TD tag, the TH tag was used - the column header. There are no special differences between these two tags, but you can use the first one to distinguish the first row of the table, and in CSS to TH you can attach your own style, which distinguishes it from other TDs.

Form description: FORM, INPUT tags

Forms are the most requested part of HTML tags. Using forms, you can transfer information. Actually, the page itself is the output of information, but the form is its input.

Example of an HTML page with a simple form description:

The author's example is not a picture

The use of forms is much greater, butthe main possibilities are as follows. You can specify the input fields, assign them the design and handlers to analyze the user input. You can specify hidden fields and send background information from the page. You can designate the buttons for transferring information, clicking on which initiates the transfer of information.

Using HTML

Know the language of hypertext is an indispensable conditionwork on any specialization in the field of Internet programming, but if you need to write programs in PHP or JavaScript, then you need to know HTML + CSS perfectly.

The PHP language was denoted in the previous example. PHP runs on the server, because the page with this form has flown from the server to the browser with the filled fields. In particular, the function TestOnBlur, mentioned in the INPUT tag (onblur event handler), received all parameters in the form of text fields.

creating a html page in the example notebook

The browser runs JavaScript, and tothe button for sending data back to the server worked correctly, that is, the design: onclick = jQuery ("# ​​to"). val ("cart"), you need to have an idea not only about what jQuery is, but what is #to, val , cart. More precisely, you need to know the main HTML tags and the general rules for applying CSS styles to them.

This is quite enough to quickly improve their qualifications for any specialization in the field of Internet programming.

</ p>