Тут ви можете дізнатися про типові прийомах мови 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 - при завантаженні,
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 - ні)



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