Example of an HTML page and the basic principles of creating

Many languages have been invented, but the HTML language is one of the most special and most sought-after languages. It involves many other key initiatives in programming. Much becomes available when the knowledge of the markup language is present in the developer's mind - HyperText Markup Language (HTML).

In essence, in HTML there is nothing complicated, and in a few minutes any one, the most remote from programming and the Internet person, will perform the creation of 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, which indicates that the file type 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, which includes only two tags: HEAD and BODY. In the first, various 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.

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), which 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.

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

Links LINK and SCRIPT should be given special attention. 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 knowledge of HTML is strengthened, then cascading style sheets should be paid attention immediately. In CSS files, there are, in particular, rules for the design of HTML tags.

Section BODY

Actually, an example of an HTML page is the BODY partition. 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 in the browser and the same example in a text editor, notepad in particular, is far from the same. In the first case we have the finished HTML-text, in which all the scripts are executed. For example, PHP has fulfilled 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.

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 (overloading), 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.

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

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

Unlike HTML, the CSS theme is simpler, there are very 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:

This shows how the scLogo_vDoc tag is simply described, and this description is such that in the normal state, the tag displays a picture of vDoc-logo.png, and when the mouse is over it, vDoc-logo-h.png is displayed.

HTML Description Structure

Language does not imply any structure, and the concept of syntax here 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 "" if Its end.

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

A tag can have attributes, then they are placed after a space after the tag name before 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 line items. 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.

The string elements are generally displayed in one 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

With the help of the TABLE tag, you can create a table, specify a number of rows of TRs, and in each row a number of TD cells. In contrast to the usual tabular organization, due to the peculiarities of HTML markup, the tabular 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.

The basic position of HTML: to 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.

Here is a table with a size of three rows per three columns, with the TH-column heading used instead of the TD tag in the first row. 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:

Variants of the use of forms are much greater, but the 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 process of transferring information.

Using HTML

To know the language of hypertext is an indispensable condition for 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, so the page with this form has flown from the server to the browser with the fields filled. In particular, the TestOnBlur function, mentioned in the INPUT tag (onblur event handler), received all parameters as text fields.

In the browser, JavaScript works, and in order for the send button to work properly back to the server, that is, the design: onclick = jQuery ('# to'). Val ('cart'), you need to have an idea not only of what jQuery is, But also 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 raise their qualifications for any specialization in the field of Internet programming.