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

Here you can learn about the typical techniques of HTML in illustrative examples

Here you can learn about the typical techniques of the HTML language in case studies ...
Any web page begins with a tag (tag) <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: the background color and the text, you can specify the background image background = ".." , the 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"> fixed " will make the background still for page scrolling

Sometimes you need to align text or a 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>
So the size and font of the text is set, and the color "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 referred to as <b> text </ b> , and oblique is: <i> text </ i>
To align the text with the width, you need to insert: <p align = justify> the text </ p>

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


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

This is a header tag with a size of 3 (1-6), it will always be aligned around the window or frame border when changing the window size: <H3> Header Text </ H3>

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

A simple drawing (without reference) is inserted like this:
<img src=" папка/рисунок " width=" x " height=" y " alt="описание при наведении"> And if you specify the address of the picture from any available URL, then it will not differ 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 the same page, with a placemark in the transition,
<A href="page.htm#Name1">текст ссылки</A> The following label should be set in the transition location: <A name=Name1>LINK</A> If you insert the following code before the text link, it will not be underlined , and when hovering will change its color to a 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 # FFFFFFF, or in the rgb (red, green, blue) format , for example: rgb (255,0,0) , and if the color is not specified, it is accepted by default , - a living example of such a link in front of you, instead of the address, I stuck <a href="#"> :
When you hover over the following link, it will change its color instead of its own:
<A HREF="адрес" ONMOUSEOVER="innerText='с курсором';" ONMOUSEOUT="innerText='без курсора';" >исходная ссылка</A> <A HREF="адрес" ONMOUSEOVER="innerText='с курсором';" ONMOUSEOUT="innerText='без курсора';" >исходная ссылка</A> Try: source link

When replacing the text with pictures, we get a similar construction of the tag:
<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 taken into account that when creating menus from several buttons other than graphic file names - but1.gif, but2.gif, but3.gif, you must change the names of their attributes (otherwise, the guidance pictures 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 just need to specify the "URL" and the number of digits (here = 3):
For example, the address of this page is: 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 of visits Counter.CO.KZ - free counter for every taste!

Setting the page title 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 pre-make two htm pages, then using the following code they can be combined into one as two screen frames that can be shifted to the right and left (% - shows their original position, i.e. 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>
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>
Changing the width of the picture with = .., you can draw a visual diagram:
name 1
120
name 2
100
name 3
130

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

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

Inserting audio and video into a page is done 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 file.mid, you need to insert an audio file * .mid, * .wav or * .avi - a video file.

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



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