HTML Program code. HTML Basics

Many languages have been invented, but HTML is one of the special and most popular languages. Many other key developments in programming are associated with it. Much becomes possible when the developer's mind has knowledge of the markup language - HyperText Markup Language (HTML).

In essence, there is nothing complicated in HTML, and in a few minutes anyone who is far from programming and the Internet will be able to create an HTML page in Notepad. An example worthy of attention, simplicity that is truly accessible to everyone.

general description

An HTML file is one page of the site, although this can be argued, but the fact that one file makes up one page is clear to begin with.

The HTML file begins with a DOCTYPE header, which states that the type of this file- HTML. All page elements (tags) are indicated in angle brackets. Each pair ("<» и «>") includes one HTML tag. Usually HTML tags come in pairs, that is, for each “tag” there is a “/tag”. Both are enclosed in angle brackets. There are single tags, the most popular of which is “br/” - transition to the next line.

The largest tag in the file is the HTML itself, which contains only two tags: HEAD and BODY. In the first one they are made various descriptions, links to other required page files may be present PHP scripts and JavaScript. 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. Let's look at it carefully.

HEAD section

Main purpose - general description pages and general scripts, although the latter is a rather relative concept. Usually only two things are given significant importance here:

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

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

An HTML page has one that is displayed when the visitor moves the mouse to the tab where the page is open. This 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 Notepad, it is not advisable to clutter the example with unnecessary constructs.

If scripting should be approached once knowledge of HTML is established, then Cascading Style Sheets should be addressed immediately. IN CSS files In particular, the rules for formatting HTML tags are given.

BODY section

Actually, the example HTML page is the BODY section. This is where all the information, all the content of the site page is contained. 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 an example HTML web pages in a browser and the same example in a text editor, in particular notepad, is far from the same thing. In the first case, we have a ready-made HTML text in which all the scripts are executed. For example, PHP did its part and formed its code in the right places necessary tags. JavaScript has also fulfilled its mission, although it remains to be discussed separately.

HTML is tags, not scripts. Ultimately, only the content of the page is displayed in the browser, 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 moment of loading (overload), but also at the moments when the page is in the visitor’s browser, and he is studying it.

A simple example (BODY section only) is shown below.

And in the visitor’s browser it looks like this:

The code did not specify what the elements that the browser would display should look like. All visible design is in CSS rules. IN in this case in the Mcss/scPhpWordRW.css file that was linked (see the very first example of the HTML page).

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

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

Structure of HTML descriptions

The 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 fundamental basis of hypertext is that there is an element (tag) that necessarily has a name.

The name, in the case of a paired tag, is made up of the name itself (tagName) and angle brackets (“<» + tagName +«>"), If we're talking about about the start of the tag, and ""if its end is recorded.

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

A tag can have attributes, in which case they are placed with a space after the tag name before the closing angle bracket ">". Attributes, if a tag has them, are written only at the beginning of the tag. The content of a tag is considered to be what is between the beginning of the tag and its end.

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 desired place in the HTML page display area, and have a specific size.

Inline elements in general case are displayed in one thread, that is, as they were specified in the page file, they are displayed on the screen. The display of the overall flow can be influenced when the page loads. On placement, visibility and other properties block elements can be influenced at any time via JavaScript code.

Besides simple elements,HTML offers to describe tables and forms. These elements are in great demand in “everyday website building”.

Table description: tags TABLE, TR, TD

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

The principle position of HTML is to do everything that is specified, 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 merge cells vertically or horizontally, you will have to count everything very carefully.

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

Shown here is a table of three rows by three columns, and in the first row, instead of the TD tag, the TH tag - the column heading - was used. These two tags are not particularly different, but it is quite possible to use the first one to distinguish the first row of the table, and in CSS you can attach own style, which sets it apart from other TDs.

Form description: tags FORM, INPUT

Forms are the most popular 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 HTML page describing a simple form:

There are many more options for using forms, but these are the main possibilities. You can specify input fields, assign them a design and handlers to analyze the data entered by the user. You can specify hidden fields and transmit background information from the page. You can designate buttons for transmitting information, clicking on which initiates the process of transmitting information.

Using HTML

Knowing the hypertext language is a job in 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 indicated in the previous example. PHP runs on the server, so the page with this form flew from the server to the browser with the fields filled in. In particular, the TestOnBlur function mentioned in the INPUT tag (onblur event handler) received all parameters as text fields.

JavaScript runs in the browser, and in order for the button to send data back to the server to work correctly, that is, the construction: 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 basic HTML tags and general rules application to them CSS styles.

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

Traveling across the expanses World Wide Web, you were able to notice how different design and capabilities of web pages. But not every one of you knows that all this diversity is implemented on the basis of language HTML.

Everything you see on the page - text, pictures, tables and other elements that form the semantic content of the web page, called content, are created using markup language HTML. Right-click on any web page and select the item from the drop-down menu "HTML view code" or « Source» – will appear text editor with symbols and icons that are incomprehensible to you - this is HTML-page code.

Any WWW document can contain stylized and formatted text, graphics and hyperlinks to various Internet resources. To realize all these possibilities, it was developed special language descriptions of WWW documents called HyperText Markup Language (HTML), that is, Hypertext Markup Language.

Description of the web page on HTML language is a set of instructions interpreted by a browser program.

A document written in HTML is text file, containing the actual text that carries information to the reader, and markup tags. Tags are sequences of characters defined by the HTML standard that serve as instructions to the browser.

According to these instructions, the program places text on the screen and includes pictures stored in separate graphic files, and forms hyperlinks with other documents or Internet resources. Thus, an HTML file takes on the appearance of a Web document only when it is interpreted by the browser.

However, there is one significant flaw in the standard HTML language. For example, in order to describe the layout of paragraphs in content and their design, it is necessary to describe these properties for each paragraph, even if there are 10 or 20 paragraphs on one page. And, imagine that the site can have 100 pages. As a result, you need to insert the same piece of HTML code into the page twenty or two hundred times, increasing the file size.

What a headache for programmers! To make life easier for poor webmasters, they were invented Cascading Style Sheets(CSS)- cascading style sheets.

CSS operates in a different, more convenient and economical way. To design paragraphs in the site content, a code or design style is written once. This code or style description is saved in separate file. Further it is necessary only when HTML help mark up the text into paragraphs, and CSS will take care of their design. The code is reduced tens and hundreds of times.

Placing style descriptions in a separate file is very convenient, especially if the site has more than one page. For example, to change decor all paragraphs on the site, just change the code in the style sheet.

CSS together with HTML can work wonders, all thanks to the division of labor in creating web pages. The markup of page elements is based on HTML, and visual design elements are given using CSS tables

CSS Style Sheets- an attempt to separate the details of the page design from its structure and content.

For now, this is a Chinese letter for you. But I won’t pretend to be a guru and write another tutorial “What is HTML and CSS”. You will find a whole carload of similar information on the Internet, plus many published textbooks. If you want to go deeper into the topic, the flag is in your hands. Do not be afraid, HTML And CSS are very simple, and any teapot can master them. But there is no need to rush into this yet.

By own experience I know that it is better not to overload the teapot’s brain with unnecessary information, otherwise it, i.e. the brain will boil ahead of time. Don't believe the smart guys on various sites who claim that creating a website needs to start with learning HTML and CSS. I have for you good news– you don’t have to write the HTML code yourself, because smart people came up with CMS .

< Как работает браузер

And it translates as “hypertext markup language.” Hypertext is a special method of navigating Internet pages, implemented in the form of hypertext links. By clicking on these links you can easily navigate the site structure. Transitions in this case do not occur linearly, i.e. you always have the opportunity to go to any page of the site, the link to which is visible in this moment.

Markup refers to certain rules and properties that are assigned to page elements. They are implemented in the form of so-called tags. For example, to indicate that specific text on the page should be located in its center; it can be marked using the center tag. See HTML code specific page possible through him context menu. For example, to access this code in Firefox browser you need to right-click within the page and select “Page Source Code”.

How does HTML code work?

HTML code is a set of short tags containing page elements. All this code is stored in a file with the extension .html or .htm. When you open such a file in a browser, the code is interpreted by it, and the finished page is displayed in the program window. Knowing the language HTML markup, create own page Almost anyone can.

What are the types of tags?

Tags are separate constructs within HTML code. This is plain text enclosed inside angle brackets "". You can see tags in the HTML code of almost any page. The tags themselves are not displayed on the pages; they display a specific element that is encoded using tags. For example, if there is a picture on the page, then its HTML code contains the img tag.

HTML Limitations

Despite the fact that HTML code allows you to build a fairly high-quality hypertext page, it has its limitations. Pages containing exclusively such code are static, i.e. they lack dynamics, special effects and other possibilities. But they can be introduced using other languages, such as Java Script. The vast majority of modern websites are created using additional languages, which make them more lively and interactive.

Each web page has general structure basic html codes. Let's look at the most basic html codes of website pages

Html code of the simplest website (web page):

 Namepages

Textpages

In the site code itself, the case of letters does not matter; you can write both “HTML, BODY...” and “html, body...”.

T egi And serve to ensure that the document code is recognized as html.

– indicates that the “head” of the page begins – the page title and its technical information.

 Page title – page title. What is written between these two tags will be displayed in the browser header.

– the “head” of the page is over.

There are opening tags <тег> and closing . There are tags that do not need to be closed. Some tags, even if not closed, do not cause errors, but always close if they need to be closed.

Page text – between these tags there is all the content of the page – text, pictures, links, etc.

– the document has ended. Typically this is t tag y mill is added at the very end of the document.

Text formatting tags