|
Здесь вы можете узнать о типичных приёмах языка HTML на наглядных примерах
Здесь вы можете узнать о типичных приёмах языка HTML на наглядных примерах...Любая веб-страница начинается с тега (tag - ярлык) заголовка
Вот пример простого заголовка:
<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>
Вместо RED можно указать как обычно от #000000 до #FFFFFF, или в формате rgb(red, green, blue) например: rgb(255,0,0) , а если цвет не указан, то он принимается по умолчанию, - живой пример такой ссылки перед вами, вместо адреса я воткнул <a href="#">:
<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>
Пробуем: 
Нужно также учитывать, что при создании меню из нескольких кнопок кроме имён графичес - ких файлов - but1.gif, but2.gif, but3.gif вы должны менять и имена их атрибутов (иначе рисунки наведения не будут отображаться):
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>
Настройка заголовка страницы для индексации в поисковых системах:
<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>
Вот пример тега таблицы (рамка=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"> </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 - нет)
Если вставить просто ссылку на видео файл, то броузер сам запускает плагины для его воспроизведения (по умолчанию)...
Created/Updated: 25.05.2018