This page has been robot translated, sorry for typos if any. Original content here.

Here you can learn about typical HTML techniques with illustrative examples.

Here you can learn about the typical techniques of the HTML language with illustrative examples ...
Any web page starts with a tag (tag - label) title <head> ... </ head>
Here is an example of a simple header:
<html>
<head>
<title>Y.Net HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<html>
<head>
<title>Y.Net HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
Now we define the following parameters: background color and text color, you can specify background image background = ".." , text color of links, visited and active links, left margin = 40pix:
<body bgcolor="#FFFFFF" text="#000000" background="fon2.gif" link="#0033FF" vlink="#6600FF" alink="#FF0033" leftmargin="40"> where, bgproperties = " fixed " will make the background still for page scrolling

Sometimes it is necessary to align the text or picture in the middle of the page or frame:
In addition, you can align on the edge (left - left and right - right)
<div align="center"><pre> текст </pre></div>
This sets the size and font of the text, and the color of "text 2" will be changed to blue:
<font face="Times New Roman, Times, serif" size="3"> текст 1 <font color="#0000CC"> текст 2 </font>
Bold text is indicated as <b> text </ b> , and oblique as: <i> text </ i>
To align the text width should be inserted: <p align = justify> t e to c t </ p>

An example of a <marquee> tag - a running line (the font is set in advance):
<marquee> Это текст для бегущей строки </marquee> You can also insert images into this tag:
<marquee><img src="/site/html/img/horse.gif" width="116" height="57">
Пример бегущей строки с произвольным текстом .. </marquee>
And what it actually looks like:
An example of a running line with arbitrary text ..


It must be borne in mind that the capital letters of the <tag> do not affect its execution, that is, </ font> is equivalent to </ FONT>, etc., and any tag has an effect from <tag> to </ tag> (from label to tags) and should not intersect with other tags

This is a title tag with a size of = 3 (1-6), it will always align to the border of a window or frame when the window is resized: <H3> Header Text </ H3>

The following tag will indicate a hyper link to another page with the specified address: <A HREF=" http://address "> link text </A>
But you can specify any file instead of the address, then it will be downloaded by the browser, and if the file type cannot be displayed on the page, it will be transferred to the download program for download to the manager
Further, instead of the text, you can specify a picture of size x on y with a frame its thickness = 0, if you remove the frame attribute from the tag, then it defaults to 1. <a href=" папка/file.htm "><img src=" папка/рисунок " width=" x " height=" y " border=" 0 "></a> here is another example of a link tag, here you can go to page.htm (in the root folder), and a new browser window will open ( target = _blank ), and the font of the link text will be of size = 2:
<a href=" page.htm " target=_blank ><font size="2">текст ссылки</font></a>

A simple drawing (without a link) is inserted like this:
<img src=" папка/рисунок " width=" x " height=" y " alt="описание при наведении"> And if you specify the address of the picture from any available URL, it will not be any different from the downloaded files from your site (of course while the link is alive):
<img src=" http:// URL-адрес" width=" x " height=" y "> It is possible to make links within one page, with an indication of the label at the transition point, the name of the label is highlighted with a #:
<A href="page.htm#Name1">текст ссылки</A> At the place of transition you need to set the following label: <A name=Name1>LINK</A> If you insert the following code before a text link, it will not be underlined , and when you hover, change its color to red "RED"
<STYLE>
A:LINK, A:VISITED, A:ACTIVE { text-decoration: NONE; }
A:HOVER { text-decoration: NONE ;color: RED ; }
</STYLE>
<STYLE>
A:LINK, A:VISITED, A:ACTIVE { text-decoration: NONE; }
A:HOVER { text-decoration: NONE ;color: RED ; }
</STYLE>
Instead of RED, you can specify as usual from # 000000 to #FFFFFF, or in the rgb format (red, green, blue) for example: rgb (255,0,0) , and if the color is not specified, then it is assumed by default - a living example of such a link is in front of you, instead of the address I stuck <a href="#"> :
When you hover over the following link, it will change instead of color - its own inscription:
<A HREF="адрес" ONMOUSEOVER="innerText='с курсором';" ONMOUSEOUT="innerText='без курсора';" >исходная ссылка</A> <A HREF="адрес" ONMOUSEOVER="innerText='с курсором';" ONMOUSEOUT="innerText='без курсора';" >исходная ссылка</A> Try: source link

When replacing text with pictures, we get a similar tag construction:
<A HREF="page.htm" onMouseOver=" document.image.src ='../ but1.gif '; return true;" onMouseOut=" document.image.src ='../ but_.gif '; return true;"> <IMG SRC="../ but_.gif " border=0 name=image ></a> <A HREF="page.htm" onMouseOver=" document.image.src ='../ but1.gif '; return true;" onMouseOut=" document.image.src ='../ but_.gif '; return true;"> <IMG SRC="../ but_.gif " border=0 name=image ></a> Try:

It should also be borne in mind that when creating a menu of several buttons, in addition to the names of graphic files — but1.gif, but2.gif, but3.gif, you must change the names of their attributes (otherwise, guidance images will not be displayed): document.image1.src .. name=image1
document.image2.src .. name=image2
document.image3.src .. name=image3
document.image1.src .. name=image1
document.image2.src .. name=image2
document.image3.src .. name=image3


The simplest counter on your page, you only need to specify the "URL" and the number of digits (here = 3):
For example, the address of this page: http://www.shram.kiev.ua/site/html/index.shtml <a href="http://counter.co.kz" target="_blank"><img src="http://counter.co.kz/CounterCoKz?page=www.shram.kiev.ua&style=odometer_sm&digits=4" alt="Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!" border="0" width="60" height="20"></a> <a href="http://counter.co.kz" target="_blank"><img src="http://counter.co.kz/CounterCoKz?page=www.shram.kiev.ua&style=odometer_sm&digits=4" alt="Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!" border="0" width="60" height="20"></a> Counter counter.CO.KZ is a free counter for every taste!

Setting page header for indexing in search engines:
<meta name="allow-search" content="yes">
<meta http-equiv="distribution" content="global">
<meta name="robots" content="all">
<!-- набор ключевых слов для поиска страницы -->
<meta name="allow-search" content="yes">
<meta http-equiv="distribution" content="global">
<meta name="robots" content="all">
<!-- набор ключевых слов для поиска страницы -->
If you make two htm pages in advance, then with the following code you can combine them into one in the form of two screen frames that can be shifted to the right and left (% - shows their original position, ie in the middle):
<FRAMESET cols=50%,*>
<FRAME name="" marginWidth=10 marginHeight=10 src=" page1.htm " frameBorder=yes>
<FRAME name="" marginWidth=10
marginHeight=10 src=" page2.htm " frameBorder=yes></FRAMESET>
<FRAMESET cols=50%,*>
<FRAME name="" marginWidth=10 marginHeight=10 src=" page1.htm " frameBorder=yes>
<FRAME name="" marginWidth=10
marginHeight=10 src=" page2.htm " frameBorder=yes></FRAMESET>
Here is an example of a table tag (frame = 0, indent = 0, space = 0, width = 500)
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="112">
<div align="center"> имя 1 </div>
</td>
<td width="21">&nbsp;</td>
<td width="70">120</td>
<td width="279"><img height=16 src="n_php/rd.gif" width=120 ></td>
...
</tr>
</table>
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="112">
<div align="center"> имя 1 </div>
</td>
<td width="21">&nbsp;</td>
<td width="70">120</td>
<td width="279"><img height=16 src="n_php/rd.gif" width=120 ></td>
...
</tr>
</table>
By changing the width of the picture with = .., you can make visual diagrams:
name 1
120
name 2
100
name 3
130

In html it is possible to load a pop-up window with the desired address and parameters:
<body .. onload="window.open('http://АДРЕС', 'заголовок', 'resizable=yes height=200, width=400')"..> onload - when loading,
onunload - when closing the page.

It should be noted that this command will not work on hosting not supporting virtual server scripts and dhtml protocol (narod.ru, boom.ru, mail.ru, chat.ru, by.ru, tam.ru, aka.ru, and others. )

Sound and video are <EMBED src=" файл.mid " width="40" height="15" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="true"></EMBDED> into the page by the following tag: <EMBED src=" файл.mid " width="40" height="15" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="true"></EMBDED> Instead of the .mid file, you need to insert the audio file * .mid, * .wav or * .avi - the video file.

Additional attributes:
width = "40" height = "15" - the size of the control panel
controls = "smallconsole" - the remote becomes small
autostart = "false" - do you need to play your file again (true - yes)
loop = "true" - repeat the clip from the very beginning (false - no)
play_loop = "3" - how many times (here 3 times)
hidden = "true" - hide the movie clip (false - no)



If you just insert a link to a video file, the browser itself launches plug-ins to play it (by default) ...