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

Тут ви можете дізнатися про типові прийомах мови HTML на наочних прикладах

Тут ви можете дізнатися про типові прийомах мови HTML на наочних прикладах ...
Будь-яка веб-сторінка починається з тега (tag - ярлик) заголовка <Head> ... </ head>
Ось приклад простого заголовка:
<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>
Тепер визначимо наступні параметри: колір фону і тексту, можна вказати фоновий малюнок background = "..", колір тексту посилань, відвіданих і активних посилань, ліве поле = 40pix:
<body bgcolor="#FFFFFF" text="#000000" background="fon2.gif" link="#0033FF" vlink="#6600FF" alink="#FF0033" leftmargin="40"> де, bgproperties = " fixed "зробить фон нерухомим для скролінгу сторінки

Іноді необхідно вирівнювання тексту або малюнка по середині сторінки або фрейма:
Крім цього можна вирівнювати по краю (лівому - left і правому - right)
<div align="center"><pre> текст </pre></div>
Так задається розмір і шрифт тексту, причому колір "текст 2" буде змінений на синій:
<font face="Times New Roman, Times, serif" size="3"> текст 1 <font color="#0000CC"> текст 2 </font>
Жирний текст позначається так <b> текст </ b>, а похилий так: <i> текст </ i>
Для вирівнювання тексту по ширині потрібно вставити: <p align = justify> т е к с т </ p>

Приклад тега <marquee> - рядка, що біжить (шрифт задається заздалегідь):
<marquee> Это текст для бегущей строки </marquee> В цей тег також можна вставляти малюнки:
<marquee><img src="/site/html/img/horse.gif" width="116" height="57">
Пример бегущей строки с произвольным текстом .. </marquee>
І як це виглядає насправді:
приклад рядка, що біжить з довільним текстом ..


Потрібно мати на увазі що великі літери <тега> не впливають на його виконання, тобто </ font> рівноцінно </ FONT> і т.п., і будь-який тег має дію від <тег> до </ тег> (від мітки до мітки) і не повинен перетинатися з іншими тегами

Це тег заголовка з розміром = 3 (1-6), він буде завжди вирівнюватися по межі вікна або фрейму при зміні розміру вікна: <H3> Текст Заголовку </ H3>

Наступний тег вкаже Гіппер посилання на іншу сторінку з вказаною адресою: <A HREF=" http://адрес "> текст посилання </A>
Але можна замість адреси вказати будь-який файл, тоді він буде завантажений браузером, а якщо тип файлу не може бути відображений на сторінці, то він буде переданий на скачування програмі download - менеджеру
Далі замість тексту можна вказати малюнок розміром x на y з рамкою її товщина = 0, якщо з тега прибрати атрибут рамки то за замовчуванням він = 1. <a href=" папка/file.htm "><img src=" папка/рисунок " width=" x " height=" y " border=" 0 "></a> ось ще один приклад тега посилання, тут здійснюється перехід на сторінку page.htm (в кореневій папці), причому буде відкрито нове вікно броузера (target = _blank), а шрифт тексту посилання матиме Pазмер = 2:
<a href=" page.htm " target=_blank ><font size="2">текст ссылки</font></a>

Простий малюнок (без посилання) вставити ось так:
<img src=" папка/рисунок " width=" x " height=" y " alt="описание при наведении"> А якщо вказати адресу малюнка з будь-якого доступного URL-адреси, то він нічим не буде відрізнятися від завантажених файлів з вашого сайту (звичайно поки жива посилання):
<img src=" http:// URL-адрес" width=" x " height=" y "> Є можливість робити посилання в межах однієї сторінки, із зазначенням мітки в місці переходу, ім'я мітки виділяється позначкою #:
<A href="page.htm#Name1">текст ссылки</A> У місці переходу потрібно встановити наступну позначку: <A name=Name1>LINK</A> Якщо перед текстовим посиланням вставити наступний код, то вона не буде підкреслено , а при наведенні змінить свій колір на червоний "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>
Замість RED можна вказати як зазвичай від # 000000 до #FFFFFF, або в форматі rgb (red, green, blue) наприклад: rgb (255,0,0), а якщо колір не вказано, то він приймається за замовчуванням , - живий приклад такого посилання перед вами, замість адреси я встромив <a href="#">:
При наведенні курсора на наступне посилання вона буде змінювати замість кольору - свій напис:
<A HREF="адрес" ONMOUSEOVER="innerText='с курсором';" ONMOUSEOUT="innerText='без курсора';" >исходная ссылка</A> <A HREF="адрес" ONMOUSEOVER="innerText='с курсором';" ONMOUSEOUT="innerText='без курсора';" >исходная ссылка</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> <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> Пробуємо:

Потрібно також враховувати, що при створенні меню з декількох кнопок крім імен графічною - ких файлів - but1.gif, but2.gif, but3.gif ви повинні міняти і імена їх атрибутів (інакше малюнки наведення не показуються): 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


Найпростіший лічильник на вашу сторінку, потрібно лише вказати "URL-адресу" і число цифр (тут = 3):
Наприклад адресу цієї сторінки: 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.CO.KZ - безкоштовний лічильник на будь-який смак!

Налаштування заголовка сторінки для індексації в пошукових системах:
<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">
<!-- набор ключевых слов для поиска страницы -->
Якщо ви заздалегідь зробите дві htm-сторінки, то за допомогою наступного коду їх можна об'єднати в одну у вигляді двох екранних фреймів, які можна зрушувати вправо і вліво (% - показує їх вихідне становище, тобто посередині):
<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>
Ось приклад тега таблиці (рамка = 0, відступ = 0, пробіл = 0, ширина = 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>
Змінюючи ширину малюнка with = .., можна робити наочні діаграми:
ім'я 1
120
ім'я 2
100
ім'я 3
130

В html є можливість завантажити спливаюче вікно з потрібним адресою і параметрами:
<body .. onload="window.open('http://АДРЕС', 'заголовок', 'resizable=yes height=200, width=400')"..> onload - при завантаженні,
onunload - при закритті сторінки.

Потрібно зауважити що дана команда не буде працювати на хостингу що не підтримує скрипти віртуального сервера і протоколу dhtml (narod.ru, boom.ru, mail.ru, chat.ru, by.ru, tam.ru, aka.ru, і ін. )

Вставка звуку і відео на сторінку проводиться таким тегом: <EMBED src=" файл.mid " width="40" height="15" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="true"></EMBDED> Замість файл.mid треба вставити звуковий файл * .mid, * .wav або * .avi - відео файл.

Додаткові атрибути:
width = "40" height = "15" - розмір пульта управління
controls = "smallconsole" - пульт стає маленьким
autostart = "false" - чи треба програвати знову ваш файл (true - так)
loop = "true" - повторювати ролик з самого початку (false - ні)
play_loop = "3" - скільки разів (тут 3 рази)
hidden = "true" - сховати пульт ролика (false - ні)



Якщо вставити просто посилання на відео файл, то броузер сам запускає плагіни для його відтворення (за замовчуванням) ...