Many languages have been invented, but HTML is one of the most special and most sought after languages. Many other key programming endeavors are associated with it. A lot becomes available when the developer’s mind is familiar with the markup language HyperText Markup Language (HTML).
In essence, there is nothing complicated in HTML, and in a few minutes, anyone who is farthest from programming and the Internet will create an HTML page in notepad. An example worthy of attention, simplicity, indeed, accessible to everyone.
general description
An HTML file is one page on a site, although one can argue with that, but the fact that one file is one page is understandable for a start.
The HTML file begins with a DOCTYPE header, which indicates that the type of the file is HTML. All page elements (tags) are indicated in angle brackets. Each pair ("<" and ">") includes one HTML tag. Usually HTML tags are paired, that is, for each "tag" there is a "/ 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 largest tag in the file is the HTML itself, which includes only two tags: HEAD and BODY. In the first, various descriptions are made, links to other files necessary for the page are indicated, PHP and JavaScript scripts may be present. The second one records the content of the page. Also in the form of tags and scripts.
Simple HTML Page
An example of creating such a page is given below in the article. Consider it carefully.
HEAD Section
The main purpose of the HEAD tag is a general description of the page and common scripts, although the latter is a fairly relative concept. Usually only two things are given significant significance here:
- keywords and page description;
- links to other files (* .css and * .js).
To display the content of a page, the contents of this section are only of indirect importance, since it indicates that somewhere in other files there are CSS rules for tags and scripts in other languages.
The HTML page has a title (TITLE), which is displayed when the visitor moves the mouse to the tab where the page is open. This is an important point, since 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 need to create an HTML page in a notebook, it is undesirable to clutter up the example with unnecessary constructions.
LINK and SCRIPT links should be given special attention. The first indicates the location of the CSS stylesheet, the second indicates the location of the JavaScript code file. There may be many such links.
If scripts should be approached when knowledge of HTML is strengthened, then cascading style sheets should be addressed immediately. CSS files provide, in particular, HTML tagging rules.
BODY Section
Actually, an example HTML page - this is the BODY section. It is here that contains all the information, all the content of the page of the site. 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 a browser and the same example in a text editor, in particular notepad, are far from the same thing. In the first case, we have ready-made HTML text in which all scripts are executed. For example, PHP worked out its part and formed the necessary tags instead of its code in the right places. JavaScript also fulfilled its mission, although there is still a separate discussion about it.
HTML is tags, not scripts. 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 (reloading), but also at the moments when the page is in the visitor’s browser, and he is studying it.
A simple HTML page code example (BODY section only) is shown below.
And in the visitor’s browser, it looks like the following.
The code did not specify how the elements displayed by the browser should look. All visible design is in CSS rules. In this case, the referenced Mcss / scPhpWordRW.css file (see the very first example HTML page).
Unlike HTML, the CSS theme is simpler, there are very accessible rules and their number is small when the example of creating an HTML page requires nothing but notepad. Everything is very accessible for instant development:
Here it is shown how the scLogo_vDoc tag is simply described, and this description is such that in the normal state the tag displays the vDoc-logo.png image, and when the mouse is above it, vDoc-logo-h.png is displayed.
HTML description structure
The language does not imply any structure and the concept of syntax is very relative. There are no variables, but there are tons of possibilities. The fundamental basis of hypertext is that there is an element (tag) that must have a name.
The name, in the case of a paired tag, is made up of the actual name (tagName) and angle brackets ("<" + tagName + ">"), if it comes to the beginning of the tag, and "</" + tagName + ">", if written its end.
An example HTML page with attribute descriptions is located below in the text.
A tag can have attributes, then they are placed after the space after the tag name to the closing angle bracket ">". Attributes, if the tag has them, are recorded only at its beginning. The content of the tag is what is between the beginning of the tag and its end.
General HTML Descriptions
HTML allows you to describe block and inline elements. The former 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.
Line items are generally displayed in a single stream, that is, as indicated in the page file, and displayed on the screen. The display of the general flow can be influenced when the page is loading. The placement, visibility, and other properties of block elements can be influenced at any time using JavaScript code.
In addition to simple elements, HTML offers to describe tables and forms. These elements are very in demand in "everyday site building."
Description of the table: tags TABLE, TR, TD
Using the TABLE tag, you can create a table, specify a number of TR rows and in each row a certain number of TD cells. In contrast to the usual table organization, due to the peculiarities of HTML markup, the table organization is limited to this declaration, because 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 independently.
The basic position of HTML: do everything that is indicated, but nothing of what 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 merge the cells vertically or horizontally, you will have to calculate everything very carefully.
An example HTML page with a description of a simple table is clearly shown in the article.
Here is a table with a size of three rows in three columns, and in the first row, instead of the TD tag, the TH - column header was used. These two tags do not have a special difference, but it is quite possible to use the first to distinguish the first row of the table, and in CSS you can attach your own style to TH, 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.
An example HTML page describing a simple form:
There are many more options for using forms, but the main features are as follows. You can specify input fields, you need to assign them design and handlers for analyzing user input. You can specify hidden fields and transfer background information from the page. You can specify the buttons for transmitting information, clicking on which initiates the process of transmitting information.
HTML usage
Knowing the hypertext language is an indispensable condition for working 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.
PHP was defined in the previous example. PHP runs on the server, so a page with this form has flown from the server to a browser with filled fields. In particular, the TestOnBlur function mentioned in the INPUT tag (onblur event handler) received all the parameters as text fields.
JavaScript works in the browser, and in order for the button to send data back to the server to work correctly, that is, the design: onclick = jQuery ('# to'). Val ('cart'), you need to have an idea not only about what jQuery is, but also what is #to, val, cart. More specifically, you need to know the basic HTML tags and the general rules for applying CSS styles to them.
This is quite enough to quickly raise your qualifications in any specialization in the field of Internet programming.