09.01.10
учебник вебмастеру
Учебник для вебмастера доступно и наглядно показывает как можно создать и оформить сайт используя такие языки программирования как HTML и JavaScripts. Приведены конкретные примеры Java скриптов и HTML кода.[pagename:С чего начинать|Текст|Цвет и фон|Изображения|Изображения-карты|Ссылки|Стили|Мета-теги|Таблицы|Списки|Формы|E-mail формa|Горизонтальные линии|Список элементов HTML|Раскладка цветовой гаммы по RGB-составляющим|Спецсимволы в HTML|Курсоры|Фильтры для текста|Фильтры для изображений|Дополнительные возможности тега BODY|JavaScript|События|Окна с сообщениями|Кнопки]

С чего начинать?

Для начала Вам нужно выбрать редактор. Существует два вида редакторов: визуальные (WYSIWYG What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и редакторы, работающие напрямую с HTML кодом.
Если Вы не имеете ни малейшего представления o HTML, то для начала вам подойдут редакторы первой группы, нaпpимep:
Nvu или Word

Ecли хотите научиться работать с HTML кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь - HTML редактором InStyle  В дистрибутив InStyle входит самоучитель для новичков, позволяющий быстро освоить приемы работы с html-кодом и научиться создавать самые яркие и красочные страницы своими руками.  

Откройте Блокнот или редактор и скопируйте в него:

Примечание: Все, что выделено красным Вы исправляете, а мои комментарии, выделенные черным, - удаляете. Последнее делается по желанию, т.к. Обозреватель игнорирует комментарии.

< !--Пример HTML документа.-->
< html >
< head >
< !--Следующая строчка - кодировка.-- >
< meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
< title > Ваш заголовок < /title >
< /head >
< body >
< !--Теперь указываем название шрифта (лучше два, можно и больше, через запятую), его размер и цвет.-- >
< font face="Verdana,Sans-serif" size="2" color="#000000" >
< b > Название Вашего раздела < /b > < p >
Здесь Ваш текст.
< p >
< !--Далее встраиваем графический файл в документ. И будет он у нас по центру.-- >
< center >
< img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку" >
< /center >
< /font >
< /body >
< /html >

Сохраните документ как htm файл (например, 001.htm) и запустите. Вы создали первую свою страницу. Поздравляю!

Теперь расскажу немного о тегах - знаках, располагающихся в скобках. Большинство тегов имеют открывающийся элемент < > и закрывающийся < / > . Между ними и находятся коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тегом < HTML > и заканчиваться закрывающим < /HTML > . Дальше идет заголовок < HEAD > < /HEAD > . Между этими тегами всегда должна находиться информация о кодировки страницы, в нашем случае < meta http-equiv="Content-Type" content="text/html; charset=windows-1251" > , и теги определяющие название страницы < TITLE > < /TITLE > . Только теперь между тегами содержимого документа < BODY > < /BODY > можно располагать свою информацию, рисунки, видеофайлы, аудиофайлы...

Размеры графического файла (в пикселях) по горизонтали и по вертикали, а также выпадающую подсказку можно не указывать, но тогда страничка грузится дольше, не забывайте об этом. И еще - большие картинки Обозреватель может игнорировать, если Вы не укажите их размеры.

__________________________

Текст

Большинство HTML документов имеют заголовок. Для его создания используют теги < Hn > < /Hn > , где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.

< H1 > Заголовок < /H1 >

< H2 > Заголовок < /H2 >

< H3 > Заголовок < /H3 >

< H4 > Заголовок < /H4 >

< H5 > Заголовок < /H5 >
< H6 > Заголовок < /H6 >
Для создания нового абзаца используется тег < P > , а для перехода на новую строчку без создания абзаца - тег < BR > . Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге < P > элемент ALIGN, которым может задаваться выравнивание абзаца:

< P ALIGN=LEFT > По левому краю < /P >

< P ALIGN=CENTER > По центру < /P >

< P ALIGN=RIGHT > По правому краю < /P >

< P ALIGN=JUSTIFY > Текст, находящийся между этими элементами выравнивается по ширине < /P >

Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами:

< B > Жирный текст < /B >
< I > Курсив < /I >
< U > Подчеркнутый < /U >
< STRIKE > Перечеркнутый < /STRIKE >
< SUP > Верхний индекс < /SUP >
< SUB > Нижний индекс < /SUB >

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега (можно сразу указывать несколько параметров в одном теге). Например, открывающийся тег < FONT > (закрывающийся тег < /FONT > обязателен) может иметь несколько атрибутов:

SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами < FONT SIZE=n > < /FONT > , где n - цифровое значение, Вы придадите ему нужный вам размер:

< font size="1" > Пример 1 < /font >
< font size="2" > Пример 2 < /font >
< font size="3" > Пример 3 < /font >
< font size="4" > Пример 4 < /font >
< font size="5" > Пример 5 < /font >
< font size="6" > Пример 6 < /font >

FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семейства шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

< font face="Times New Roman" > Times New Roman < /font >
< font face="System" > System < /font >
< font face="Arial" > Arial < /font >
< font face="Courier" > Courier < /font >
< font face="Verdana" > Verdana < /font >
< font face="Comic Sans MS, Tahoma" > Comic Sans MS < /font >

COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

< font COLOR="red" > Красный < /font >
< font COLOR="#FF0000" > Красный < /font >

С помощью элемента STYLE тега < SPAN > (закрывающийся тег < /SPAN > обязателен) можно задавать выделение текста любым цветом:

< SPAN STYLE="BACKGROUND-COLOR: lightgreen" > Светлозеленый < /SPAN >

< SPAN STYLE="BACKGROUND-COLOR: yellow" > Желтый < /SPAN >

< SPAN STYLE="BACKGROUND-COLOR: lightblue" > Светлосиний < /SPAN >

______________________________

Цвет и фон

Цвет и фон страницы выбираются по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.

Итак сначала про цвет. Для его вставки в строку с тегом < BODY > Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид. Данные два примера заполняют страницу документа красным цветом.

< BODY BGCOLOR="RED" > (использовано название цвета)
< BODY BGCOLOR="#FF0000" > (использован шестнадцатиричный вид цвета)

Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:

< BODY BACKGROUND="images.gif" >

Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предполагаеться, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

На два уровня вниз.

Параметр="Folder_1/Folder_2/images.gif"

На два уровня вверх.

Параметр="../../images.gif"

Подобное указание путей применяется для разных элементов, например, ссылок, рисунков, файлов.

Тег < BODY > может также иметь параметры отступов в документе (определяются числовым значение).

leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу

< BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0" >

В данном теге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок. О них будет рассказано в других статьях.

__________________________

Изображения

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

< IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2" >

В таблице находится описание каждого параметра данной конструкции:

SRC Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь.
ALIGN Выравнивание изображения в документе:
left - по левому краю.
right - по правому краю.
top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
BORDER Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).
WIDTH Ширина изображения в пикселях.
HEIGHT Высота изображения в пикселях.
HSPACE Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.
VSPACE Вертикальный отступ в пикселях. Не обязательный параметр.
ALT Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.
NAME Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.
LOWSRC Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Пример обычной вставки изображения в электронный документ Вы можете наблюдать ниже. Вместо названия файла я вставил изображения папки. Подведите курсор к рисунку, чтобы увидеть подсказку.

< IMG SRC=" Папка " BORDER="0" ALT="Папка" WIDTH="17" HEIGHT="16" >

Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне Обозревателя еще до загрузки изображения. Параметр alt можно не указывать, но вдруг у человека не загрузилась картинка, он хоть будет знать, что она собой представляет.

__________________________

Изображения-карты

Карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие.

Здесь приводится HTML код  примера. 

< IMG SRC="Map_example.jpg" BORDER="0" WIDTH="200" HEIGHT="160" ALT="Пример изображения-карты" USEMAP="#Map_example" >
< MAP NAME="Map_example" >
< AREA SHAPE="rect" COORDS="11,11,70,24" TITLE="Ссылка 1" HREF="URL" >
< AREA SHAPE="rect" COORDS="70,72,128,83" TITLE="Ссылка 2" HREF="URL" >
< AREA SHAPE="rect" COORDS="190,136,128,149" TITLE="Ссылка 3" HREF="URL" >

Как видите, чтобы создать карту нужно вставить в тег < IMG SRC="" > атрибут USEMAP="#name", где name - имя карты (значок # обязателен). В примере использовалось название Map_example. Я пропускаю остальные атрибуты в этом теге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущей статье

Далее описываем активные области карты. Начинаем с открывающегося тега < MAP NAME="name" > (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тегом < /MAP > .

Между этими тегами помещаем описание каждой активной области изображения: < AREA SHAPE="форма" COORDS="координаты" HREF="адрес" TITLE="альтернативный текст" > . Элемент < AREA > имеет следующие атрибуты и их значения:

SHAPE Описывает форму выделяемой области, возможные значения:
RECT - прямоугольник
CIRCLE - круг
POLY - многоугольник
DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.
COORDS Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE:
RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
NOHREF Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца
ALT Альтернативный текст для выделенной области, используется невизуальными браузерами.
TITLE Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
TARGET Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ
__________________________

Ссылки


Введение. Создание обычной гипперссылки. Вверх

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

< A HREF="URL" TARGET="Окно" TITLE="Подсказка" > Название ссылки < /A >

Параметры элемента < A > представлены в таблице:

HREF URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения:
_top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет).
_blank - загружает гиперссылку в новом окне браузера.
_self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать).
_parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
TITLE Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

Для примера я создал ссылку на документ 002.htm под рисунком (смотрите ниже). Предпологаеться, что оба документа находяться в одной папке.

< p align=center >
< img border=0 src="015.jpg" Width="520" Height="390" alt="Мой рисунок" > < br >
< a href="002.htm" target="self" title="Пример ссылки" > LINK < /a >
< /p >

Щелкнув на ссылку откроеться другой документ, в данном случае 002.htm.


Графический файл в роли ссылки. Вверх

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

< a href="URL" target="Окно" >
< img border="
0" src="Рисунок" width="Ширина" height="Высота" TITLE="Подсказка >
< /a >


Ссылка на e-mail. Вверх

Вы можете также создать ссылку на e-mail, в это случае нужно в качестве URL’a прописать следующее:
mailto:адрес электронной почты
Например:
< a href="mailto:lenin@zeos.net" > Мое мыло < /a >

Почтовая гиперссылка имеет несколько параметров (не обязательных):
?subject - Тема пиcьма
&Body - Текст вашего сообщения
&cc - Копии письма через запятую
&bcc - Скрытые копии письма через запятую

title="Выпадающая подсказка" Ставиться по желанию и распологаеться отдельно от параметров почтовой ссылки (смотрите расположение кавычек на примере ниже).

< a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки" > Мое мыло < /a >

Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполнеными полями. Останется только написать письмо и отправить.


Закладки. Вверх

Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.

Ссылка на закладку в том же документе имеет следующий вид:
< a href="#Имя закладки" > Название раздела < /a >

А так выглядит ссылка на закладку в другом документе:
< a href="Имя документа#Имя закладки" > Название раздела < /a >

Сама закладка будет такой:
< A NAME="Имя закладки" > < /a >

Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку. Вверху данной страницы находится содержание, оформленное как ссылки на определенные закладки, находящиеся в этом же документе.


Ссылки и цвет. Вверх

Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег < BODY > нужно добавить еще несколько параметров.

text - цвет текста.
link - цвет ссылки.
vlink - цвет пройденой ссылки.
alink - цвет активной ссылки, когда подводиться к ней курсор.

< BODY text="black" link="blue" vlink="purple" alink="red" >

Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в теге < BODY > .

__________________________

Стили (CSS)

CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.

Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.

Описания стилей находятся в тегах < STYLE > < /STYLE > и размешаются между тегами < HEAD > < /HEAD > . Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :

Описываем стили под именем Example :
< STYLE > < !--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
-- > < /STYLE >

Здесь вызываем описания стилей :
< div class="Example" > Пример < /div >

Если Вы распологаете стили в отдельном файле, тогда между тегами < HEAD > < /HEAD > каждого HTML документа нужно добавить ссылку на CSS файл:

< LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css" >

Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги < STYLE > < /STYLE > . Например:

У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
< !--
   A { text-decoration: none; }
   A:hover { color: #FF0000; text-decoration: underline; }
-- >

Ссылка на него в HTML документе будет выглядить так:
< LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css" >

Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.

< H3 STYLE="font-family:Verdana; font-size:150%; color:red" > Пример < /H3 >

В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.

Свойства шрифта:
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
Пример:
P {font-family: Verdana, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный)
Пример:
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тегов H1, H2, H3:
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

Свойства текста:

text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста
Пример использования для тега Н4:
H4 {text-decoration: underline;} (подчеркивание)
H4 {text-decoration: line-through;} (зачеркивание)
text-align Определяет выравнивание элемента.
Пример:
P {text-align: left} (выравнивание по левому краю)
P {text-align: right} (выравнивание по правому краю)
P {text-align: justify} (выравнивание по ширине)
P {text-align: center} (выравнивание по центру)
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
Пример использования для тега H1:
H1 {text-indent: 60pt;}
line-height Управляет интервалами между строками текста.
Пример:
P {line-height: 50 %}

Цвет элемента и фона:

color Определяет цвет элемента I {color: yellow;}
Пример использования для тега H3:
H3 {color: #0000FF;}
background-color Устанавливает цвет фона для элемента.
Пример использования для тега H3:

< H3 style=”background-color:gold; color:brown;” > Пример < /H3 >

Пример

Свойства границ:
margin-left (слево)
margin-right (справо)
margin-top (сверху)
margin-bottom (снизу)
Устанавливают значения отступов вокруг элемента.
Пример использования для рисунка:
IMG { margin-left: 20pt}
IMG { margin-right: 20pt}
IMG { margin-top: 20pt}
IMG { margin-bottom: 20pt}
Единицы измерения:
px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты
__________________________

Мета-теги

Мета-теги - информация для Обозревателя и поисковых машин. В HTML документе всегда размещаются между тегами < HEAD > < /HEAD > . Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать. Приведены самые полезные.

Кодировка. (обязательный мета тег) Указав его, Обозреватель будет правильно отображать текст страницы.
< meta http-equiv="content-type" content="text/html; charset=Кодировка ">
Пример: < meta http-equiv="content-type" content="text/html; charset=Windows-1251">

Показ дополнительного файла перед основным. Вы можете использовать этот мета-тег для переадресации, не прибегая к навороченным скриптам.
< Meta name="Refresh" Content="число (в секундах); Url=имя файла с расширением" >
Пример: < Meta name="Refresh" Content="10; Url=INDEX.HTM" >
Данный пример загружает документ INDEX.HTM через 10 секунд.

Указание имени автора. Впишите свое имя или Nickname.
< Meta name="Author" Content="имя автора" >
Пример: < Meta name="Author" Content="Владимир Дригалкин" >

Описание документа. Текст, который Вы укажите в этом теге, будет отображаться поисковиками. Длинна описания не должна превышать 200 символов.
< Meta name="Description" Content="описание" >
Пример: < Meta name="Description" Content="Все про взлом программного обеспечения. Инструменты, вирусы, исходники." >

Ключевые слова для поисковиков. Укажите поисковикам, по каким словам им осуществлять поиск информации, содержащейся на Вашей странице. Не пишите в этом тэге одних и тех же слов. Длинна списка до 800 символов.
< Meta name="Keywords" Content="слова через запятую или пробел ">
Пример: < Meta name="Keywords" Content="crack cracking взлом" >

Указание E-Mail.
< Meta name="Reply-to" Content="адрес E-Mail" >
Пример: < Meta name="Reply-to" Content="Lenin@INC.net" >

Дата создания сайта.
< Meta Name="Date" Content="месяц, число, год и время через пробел" >
Пример: < Meta Name="Data" Content="May 28 1999 15:34 Am" >

__________________________

Таблицы

Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Примечание: В данном примере создана таблица с фиксированой шириной (WIDTH="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.

Такая таблица реализуется следующим кодом:

< TABLE BORDER="2" WIDTH="200"
BGCOLOR="#00FF00" >
< TR >
< TD > Ячейка 1 < /TD >
< TD > Ячейка 2 < /TD >
< /TR >
< TR >
< TD > Ячейка 3 < /TD >
< TD > Ячейка 4 < /TD >
< /TR >
< /TABLE >

Таблица начинается открывающимся тегом < TABLE > и завершается закрывающимся < /TABLE > .
Тег < TABLE > может включать следующие аттрибуты:

WIDTH="n" Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
BORDER="n" Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
BORDERCOLOR="#FFFFFF" Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета.
BGCOLOR="#FFFFFF" Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число.
BACKGROUND="image.gif" Заполняет фон таблицы изображением.
CELLSPACING="n" Определяет расстояние между рамками ячеек таблицы в пикселях.
CELLPADDING="n" Определяет расстояние в пикселях между рамкой ячейки и текстом.
ALIGN=LEFT Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).
FRAME="значение" Управляет внешней окантовкой таблицы, может принимать следующие значения:
VOID - окантовки нет (значение по умолчанию).
ABOVE - только граница сверху.
BELOW - только граница снизу.
HSIDES - границы сверху и снизу.
VSIDES - только границы слева и справа.
LHS - только левая граница.
RHS - только правая граница.
BOX - рисуются все четыре стороны.
BORDER - также все четыре стороны.
RULES="n" Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n):
NONE - нет линий (значение по умолчанию).
GROUPS - линии будут только между группами рядов.
ROWS - только между рядами.
COLS - только между колонками.
ALL - между всеми рядами и колонками.

Таблица может включать заголовок, который распологается между тегами < CAPTION > < /CAPTION > . Он должен быть непосредственно после тега < TITLE > . К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы:

TOP - значение по умолчанию, заголовок над таблицей по центру.
LEFT - заголовок над таблицей слева.
RIGHT - заголовок над таблицей справа.
BOTTOM - заголовок под таблицей по центру.

Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом < TR > и завершаются закрывающимся < /TR > , а каждая ячейка таблицы начинается тегом < TD > и завершается < /TD > . Данные теги могут иметь такие аттрибуты:

Следующие атрибуты могут применятся для строк и ячейек.
ALIGN=LEFT Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).
VALIGN=CENTER Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю).
BGCOLOR="#FFFFFF" Устанавливает цвет фона строки или ячейки.
BACKGROUND="image.gif" Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячейек.
WIDTH="n" Определяет ширину ячейки в n пикселях.
HEIGHT="n" Определяет высоту ячейки в n пикселях.
COLSPAN="n" Растягивание ячейки по горизонтали. Например, < TD COLSPAN="2" > означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n" Растягивание ячейки по строке. Например, < TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.
NOWRAP Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку
BACKGROUND="image.gif" Заполняет фон ячейки изображением.

Кроме этого, любая ячейка таблицы может быть определена не тегами < TD > < /TD > , а тегами < TH > < /TH > - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект   (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (  - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).

И еще - имейте ввиду, что теги, устанавливающие шрифт ( < B > , < I > , < FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.

__________________________

Списки

Пронумерованные списки:
В данном случае Обозреватель автоматически будет проставлять числа перед каждым элементом списка. Начинается пронумерованный список с тэга < OL > и завершается тэгом < /OL > . Например:

< OL >
< LI > Один
< LI > Два
< LI > Три
< LI > Четыре
< LI > Пять
< /OL >
  1. Один
  2. Два
  3. Три
  4. Четыре
  5. Пять

Тэг < OL > может иметь следующие параметры:

TYPE - вид счетчика:
A - большие латинские буквы
a - маленькие латинские буквы
I - большие римские цифры
i - маленькие римские цифры
1 - обычные цифры

START - устанавливает число, с которого будет начинатся отсчет.

Следующий пример отображает список, пронумерованный большими латинскими буквами и начинающийся с восьмой цифры:

< OL TYPE="I" START="8" >
< LI > Восемь
< LI > Девять
< LI > Десять
< LI > Одиннадцать
< LI > Двенадцать
< /OL >
  1. Восемь
  2. Девять
  3. Десять
  4. Одиннадцать
  5. Двенадцать

Непронумерованные списки:
Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя.

Непронумерованный список начинается открывающимся тэгом < UL > и завершается тэгом < /UL > . Каждый элемент списка начинается с тэга < LI > . Например:

< UL >
< LI > Один
< LI > Два
< LI > Три
< LI > Четыре
< LI > Пять
< /UL >
  • Один
  • Два
  • Три
  • Четыре
  • Пять

Тэг < UL > может включать параметр TYPE со значениями disc, circle, square.

< UL TYPE=disc > < LI > disc < /UL >
  • disc
< UL TYPE=circle > < LI > circle < /UL >
  • circle
< UL TYPE=square > < LI > square < /UL >
  • square

Данные значения - это внешний вид маркера, который по умолчанию ставится в виде диска, т.е. disc.

Списки определений:
Списки определений имеют следующий вид:

< DL >
< DT > Термин
< DD > Определение термина
< DD > Определение термина
< DD > Определение термина
< DD > Определение термина
< /DL >
Термин
Определение термина
Определение термина
Определение термина
Определение термина

С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.

COMPACT >

Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.

__________________________

Формы

Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяються для опроса посетителей, покупки чего-либо, отправки електронной почты.

Принцип работы форм следующий: посетитель, зашедший к вам на страничку заполняет форму, а после нажатия определенной кнопки форма берет данные из заполненых полей и отправляет их в назначенное место.

Формы размещаются между тегами < FORM > < /FORM > . HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег < FORM > может содержать следующие атрибуты:

ACTION Обязательный атрибут. Определяет, где находится обработчик формы.
METHOD Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
ENCTYPE Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Для внесения информации пользователем в форму используется элемент < INPUT > Это и есть поля, в которые пользователь вводит информацию. Каждый элемент < INPUT > включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы, применяемых элементов < INPUT > :

TYPE=text Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах):

< INPUT TYPE=text SIZE=20 NAME=User VALUE="LENIN INC" >

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст LENIN INC, который пользователь может изменить.

TYPE=password Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):

< INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10 >

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов.

TYPE=radio Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:

< INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED > Да
< INPUT TYPE=radio NAME=Question VALUE="No" > Нет
< INPUT TYPE=radio NAME=Question VALUE="Possible" > Возможно

Да
Нет
Возможно

Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible.

TYPE=checkbox Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

< INPUT TYPE=checkbox NAME=Comp VALUE="CPU" > Процессоры
< INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED > Видеоадаптеры
< INPUT TYPE=checkbox NAME=Comp VALUE="Scan" > Сканеры
< INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED > Модемы

Процессоры
Видеоадаптеры
Сканеры
Модемы

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem.

TYPE=hidden Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело.

< INPUT TYPE=hidden NAME=version VALUE="1.1" >

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=submit Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:

< INPUT TYPE=submit VALUE="Отправить" >

TYPE=reset Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:

< INPUT TYPE=reset VALUE=" Сброс " >

Формы могут содержать поля для ввода большого текста < TEXTAREA > :

< TEXTAREA NAME=address ROWS=5 COLS=50 >   Наберите здесь сообщение < /TEXTAREA >

Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тегами < TEXTAREA > < /TEXTAREA > , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом < SELECT > (содержит обязательный атрибут NAME, определяющий имя меню) и завершается закрывающимся < /SELECT > . Между ними находятся теги < OPTION > , определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег < OPTION > может включать атрибут selected, показывающий, что данный элемент выбран/отмечен по умолчанию.

< SELECT NAME="имя" >  
< OPTION VALUE="option_1" selected >
текст 1 
< OPTION VALUE="option_2" > текст 2 
< OPTION VALUE="option_n" > текст n 
< /SELECT >

Тег < SELECT > может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню < SELECT MULTIPLE > в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE=число.

< SELECT MULTIPLE SIZE=3 NAME="имя" >  
< OPTION VALUE="option_1" selected >
текст 1 
< OPTION VALUE="option_2" > текст 2 
< OPTION VALUE="option_n" > текст n 
< /SELECT >
__________________________

E-mail формa

Для того чтобы отправить сообщение по электронной почте не обязательно набирать его непосредственно в почтовой программе, а можно это сделать, воспользовавшись формами на странице. Кроме этого можно еще организовать и проверку полей формы, на тот случай, если пользователь решил поиграться.

Данная форма реализуется следующим кодом:

< FORM NAME="mailer" METHOD="post" ACTION="" ENCTYPE="text/plain" onSubmit="(document.mailer.action += mailtoandSubject)" >
< table border=2 align=center cellspacing=1 cellpadding=2 BgColor=#000FFF >
< tr > < td > < FONT size="2" color="#FFFFFF" > Имя: < /font > < /td >
< td > < INPUT TYPE="text" NAME="Name" size="24" on="msg(this.form)" > < /td > < /tr >
< tr > < td > < FONT size="2" color="#FFFFFF" > Тема: < /font > < /td >
< td > < INPUT TYPE="text" NAME="Subject" size="24" on="msg(this.form)" > < /td > < /tr >
< tr > < td > < FONT size="2" color="#FFFFFF" > Сообщение: < /font > < /td >
< td > < TEXTAREA NAME="Message" COLS=40 ROWS=6 on="msg(this.form)" > < /TEXTAREA > < /td > < /tr >
< tr > < td colspan=2 align=center > < INPUT TYPE = "submit" VALUE = "Отправить" ONCLICK="return checkIt()" >
< INPUT TYPE=reset VALUE=" Сброс " > < /td > < /tr > < /table >
< /FORM >

А это программа, которая будет проверять, заполнил ли пользователь все поля и отправлять форму:

< SCRIPT LANGUAGE="JavaScript" >
function checkIt() {
// функция проверки полей формы
//-----------
if (document.forms.mailer.Name.value != "") { // функция проверки поля Name
} else {
alert("nОбласть "Имя" в форме. nnПожалуйста, введите свое имя.");
// выводит сообщение, если поле Name не заполнено
document.forms.mailer.Name.focus(); // возврашает курсор на поле Name
return false;
}
//-----------
if (document.forms.mailer.Subject.value != "") {
// функция проверки поля Subject
} else {
alert("nОбласть "Тема" в форме. nnПожалуйста, введите тему.");
// выводит сообщение, если поле Subject не заполнено
document.forms.mailer.Subject.focus(); // возврашает курсор на поле Subject
return false;
}
//-----------
if (document.forms.mailer.Message.value != "") {
// функция проверки поля Message
return true; // ВСЕ ОТЛИЧНО
} else {
alert("nОбласть "Сообщение" в форме. nnПожалуйста, напишите сообщение.");
// выводит сообщение, если поле Message не заполнено
document.forms.mailer.Message.focus(); // возврашает курсор на поле Message
return false;
}
//-----------
}
function msg() {
// функция отправки
document.mailer.action = "mailto:Ваша@почта.ua"
mailtoandSubject = (('?Subject=' + document.mailer.Subject.value) + '&Body=' + document.mailer.Message.value);
}
< /SCRIPT >

Смените значение переменной Ваша@почта.ua на Вашу почту, куда будут приходить заполненные формы. Данная форма содержит поля ИМЯ, ТЕМА и СООБЩЕНИЕ. Разумеется, вы можете изменить названия этих полей, а также добавить/удалить новые строчки. При этом нужно будет внести некоторые изменения в программу проверки/отправки сообщения.

Каждому полю формы присвоено определенное имя, которое задано атрибутом NAME. При нажатии на кнопку "Отправить" происходит вызов функции checkIt(). Если поле не заполнено выводиться окно с сообщением с кнопкой Ok, после нажатия на которую курсор переходит на незаполненное поле. Остальные функции проверки работают также (я разделил их вот таким комментарием //-----------, чтобы Вам было удобнее добавлять или удалять функции). Последняя функция должна содержать значение return true;. Именно это значение уведомляет об успешном окончании проверки и завершает проверку полей формы, так что решать, где его поставить - Вам.

Такие формы использует почтовую программу пользователя и, если она не настроена, ничего не отправится.

__________________________

Горизонтальные линии

Тег HR (Horisontal Rule) вставляет в текст горизонтальную разделительную линию. Может иметь следующие атрибуты:

WIDTH Определяет длину линии в пикселях или процентах от ширины окна Обозревателя.
SIZE Оопределяет толщину линии в пикселях.
ALIGN Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:
left - выравнивание по левому краю документа.
right - выравнивание по правому краю документа.
center - выравнивание по центру документа (используется по умолчанию).
NOSHADE Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
COLOR Определяет цвет линии. Работает только в Internet Explorer.

Примеры линий:

< HR >


< HR WIDTH="50%" ALIGN="left" SIZE="0" >


< HR WIDTH="80%" SIZE="3" >


< HR NOSHADE WIDTH="80%" SIZE="20" >


< HR NOSHADE WIDTH="80%" COLOR="Blue" SIZE="8" >


Вместо линии можно реализовать и квадрат:

< HR NOSHADE ALIGN="left" WIDTH="18" COLOR="Red" SIZE="18" >


Расположить несколько квадратов в одну строку, к сожалению, нельзя.

________________________

Список элементов HTML


Базисные элементы. Вверх

Тип документа < HTML > < /HTML > (начало и конец файла)
Имя документа < TITLE > < /TITLE > (должно быть в заголовке)
Заголовок < HEAD > < /HEAD > (описание документа)
Тело < BODY > < /BODY > (содержимое страницы)

 
Определение структуры. Вверх

Заглавие < H? > < /H? > (стандарт определяет 6 уровней)
с выравниванием < H? ALIGN=LEFT|CENTER|RIGHT > < /H? >  
Секция < DIV > < /DIV >  
с выравниванием  < DIV ALIGN=LEFT|RIGHT|CENTER > < /DIV >  
Цитата < BLOCKQUOTE > < /BLOCKQUOTE > (обычно выделяется отступом)
Выделение < EM > < /EM > (обычно изображается курсивом)
Дополнительное выделение < STRONG > < /STRONG > (обычно изображается жирным шрифтом)
Отсылка, цитата < CITE > < /CITE > (обычно курсив)
Код < CODE > < /CODE > (для листингов кода)
Пример вывода < SAMP > < /SAMP >  
Ввод с клавиатуры < KBD > < /KBD >  
Переменная < VAR > < /VAR >  
Определение < DFN > < /DFN > (часто не поддерживается)
Адрес автора < ADDRESS > < /ADDRESS >  
Большой шрифт < BIG > < /BIG >  
Маленький шрифт < SMALL > < /SMALL >  


Внешний вид. Вверх

Жирный < B > < /B >  
Курсив < I > < /I >  
Подчеркнутый < U > < /U > (часто не поддерживается)
Перечеркнутый < STRIKE > < /STRIKE > (часто не поддерживается)
Перечеркнутый < S > < /S > (часто не поддерживается)
Верхний индекс < SUP > < /SUP >  
Нижний индекс < SUB > < /SUB >  
Печатная машинка < TT > < /TT > (изображается как шрифт фиксированой ширины)
Форматированый < PRE > < /PRE > (сохранить формат текста как есть)
Ширина < PRE WIDTH=? > < /PRE > (в символах)
Центрировать < CENTER > < /CENTER > (как текст, так и графика)
Мигающий < BLINK > < /BLINK > (наиболее осмеянный элемент)
Размер шрифта < FONT SIZE=? > < /FONT > (от 1 до 7)
Изменить размер шрифта < FONT SIZE="+|-?" > < /FONT >  
Базовый размер шрифта < BASEFONT SIZE=? > (от 1 до 7; по умолчанию 3)
Цвет шрифта < FONT COLOR="#$$$$$$" > < /FONT >  
Выбор шрифта < FONT FACE="***" > < /FONT >  
Многоколоночный текст < MULTICOL COLS=? > < /MULTICOL >  
Пробел между колонками < MULTICOL GUTTER=? > < /MULTICOL > (по умолчанию 10 точек)
Ширина колонки < MULTICOL WIDTH=? > < /MULTICOL >  
Пустой блок < SPACER >  
Тип пустого блока < SPACER TYPE=horizontal|vertical| block >  
Величина пустого блока < SPACER SIZE=? >  
Размеры пустого блока < SPACER WIDTH=? HEIGHT=? >  
Выравнивание < SPACER ALIGN=left|right|center >  


Ссылки и графика. Вверх

Ссылка < A HREF="URL" > < /A >  
Ссылка на закладку < A HREF="URL#***" > < /A > (в другом документе)
< A HREF="#***" > < /A > (в том же документе)
На другое окно < A HREF="URL" TARGET="***| |_blank|_self|_parent|_top" > < /A >  
Определить закладку < A NAME="***" > < /A >  
Отношение < A REL="***" > < /A > (часто не поддерживается)
Обратное отношение < A REV="***" > < /A > (часто не поддерживается)
Графика < IMG SRC="URL" >  
Выравнивание < IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT| RIGHT >  
Выравнивание < IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE|ABSBOTTOM >  
Альтернатива < IMG SRC="URL" ALT="***" > (выводится если картинка не изображается)
Карта < IMG SRC="URL" ISMAP > (нужна также программа)
Локальная карта < IMG SRC="URL" USEMAP="URL" >  
Определение карты < MAP NAME="***" > < /MAP >  
Области карты < AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF >  
Размеры < IMG SRC="URL" WIDTH=? HEIGHT=? > (в точках)
Окантовка < IMG SRC="URL" BORDER=? > (в точках)
Отступ < IMG SRC="URL" HSPACE=? VSPACE=? > (в точках)
Заменитель в низком разрешении < IMG SRC="URL" LOWSRC="URL" >  
Обновить < META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL" >  
Включить об'ект < EMBED SRC="URL" > (вставить об'ект в страницу)
Размер об'екта < EMBED SRC="URL" WIDTH=? HEIGHT=? >  


Разделители. Вверх

Параграф < P > < /P > (закрывать элемент часто не обязательно)
Выравнивание < P ALIGN=LEFT|CENTER|RIGHT > < /P >  
Новая строка < BR > (одиночный перевод строки)
Убрать выравнивание < BR CLEAR=LEFT|RIGHT|ALL >  
Горизонтальный разделитель < HR >  
Выравнивание < HR ALIGN=LEFT|RIGHT|CENTER >  
Толщина < HR SIZE=? > (в точках)
Ширина < HR WIDTH=? > (в точках)
Ширина в процен- тах < HR WIDTH="%" > (в процентах)
Сплошная линия < HR NOSHADE > (без трехмерных эффектов)
Нет разбивки < NOBR > < /NOBR > (запрещает перевод строки)
Перенос < WBR > (разбить строку)


Списки. Вверх

Неупорядоченный < UL > < LI > < /UL > ( < LI > перед каждым элементом)
Компактный < UL COMPACT > < /UL >  
Тип метки < UL TYPE=DISC|CIRCLE|SQUARE > (для всего списка)
< LI TYPE=DISC|CIRCLE|SQUARE > (этот и последующие)
Нумерованый < OL > < LI > < /OL > ( < LI > перед каждым элементом)
Компактный < OL COMPACT > < /OL >  
Тип нумерации < OL TYPE=A|a|I|i|1 > (для всего списка)
< LI TYPE=A|a|I|i|1 > (этот и следующие)
Первый номер < OL START=? > (для всего списка)
< LI VALUE=? > (этот и следующие)
Список определений < DL > < DT > < DD > < /DL > ( < DT > =термин, < DD > = определение)
Компактный < DL COMPACT > < /DL >  
Меню < MENU > < LI > < /MENU > ( < LI > перед каждым элементом)
Компактное < MENU COMPACT > < /MENU >  
Каталог < DIR > < LI > < /DIR > ( < LI > перед каждым элементом)
Компактный < DIR COMPACT > < /DIR >  


Фон и цвета. Вверх

Фоновая картинка < BODY BACKGROUND="URL" >  
Цвет фона < BODY BGCOLOR="#$$$$$$" > (порядок: красный/ зеленый/ синий)
Цвет текста < BODY TEXT="#$$$$$$" >  
Цвет ссылки < BODY LINK="#$$$$$$" >  
Пройденная ссылка < BODY VLINK="#$$$$$$" >  
Активная ссылка < BODY ALINK="#$$$$$$" >  


Специальные символы. (обязаны быть в нижнем регистре) Вверх

Специальный символ &#?; (это код ISO 8859-1)
< <  
> >  
& &  
" "  
Торговая марка ТМ ®  
Copyright ©  
Неразделяющий пробел    


Формы. Вверх

Определить форму < FORM ACTION="URL" METHOD=GET|POST > < /FORM >  
Посылка файла < FORM ENCTYPE="multipart/form-data" > < /FORM >  
Поле ввода < INPUT TYPE="TEXT|PASSWORD|CHECKBOX| RADIO|IMAGE|HIDDEN|SUBMIT| RESET" >  
Имя поля < INPUT NAME="***" >  
Значение поля < INPUT VALUE="***" >  
Отмечен < INPUT CHECKED > (checkboxes и radio boxes)
Размер поля < INPUT SIZE=? > (в символах)
Максимальная длина < INPUT MAXLENGTH=? > (в символах)
Список вариантов < SELECT > < /SELECT >  
Имя списка < SELECT NAME="***" > < /SELECT >  
Число вариантов < SELECT SIZE=? > < /SELECT >  
Множественний выбор < SELECT MULTIPLE > (можно выбрать больше одного)
Опция < OPTION > (элемент который может быть выбран)
Опция по умолчанию < OPTION SELECTED >  
Ввод текста, размер < TEXTAREA ROWS=? COLS=? > < /TEXTAREA >  
Имя текста < TEXTAREA NAME="***" > < /TEXTAREA >  
Разбивка на строки < TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL > < /TEXTAREA >  


Таблицы. Вверх

Определить таблицу < TABLE > < /TABLE >  
Окантовка таблицы < table border=? > < /TABLE >  
Расстояние между ячейками < TABLE CELLSPACING=? >  
Дополнение ячеек < TABLE CELLPADDING=? >  
Желаемая ширина < TABLE WIDTH=? > (в точках)
Ширина в процентах < TABLE WIDTH="%" > (проценты от ширины страницы)
Строка таблицы < TR > < /TR >  
Выравнивание < TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM >  
Ячейка таблицы < TD > < /TD > (должна быть внутри строки)
Выравнивание < TD ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM >  
Без перевода строки < TD NOWRAP >  
Растягивание по колонке < TD COLSPAN=? >  
Растягивание по строке < TD ROWSPAN=? >  
Желаемая ширина < TD WIDTH=? > (в точках)
Ширина в процентах < TD WIDTH="%" > (проценты от ширины страницы)
Цвет ячейки < TD BGCOLOR="#$$$$$$" >  
Заголовок таблицы < TH > < /TH > (как данные, но жирный шрифт и центровка)
Выравнивание < TH ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM >  
Без перевода строки < TH NOWRAP >  
Растягивание по колонке < TH COLSPAN=? >  
Растягивание по строке < TH ROWSPAN=? >  
Желаемая ширина < TH WIDTH=? > (в точках)
Ширина в процентах < TH WIDTH="%" > (проценты ширины таблицы)
Цвет ячейки < TH BGCOLOR="#$$$$$$" >  
Заглавие таблицы < CAPTION > < /CAPTION >  
Выравнивание < CAPTION ALIGN=TOP|BOTTOM > (сверху/снизу таблицы)


Фреймы. Вверх

Документ с фреймами < FRAMESET > < /FRAMESET > (вместо < BODY > )
Высота строк < FRAMESET ROWS=,,, > < /FRAMESET > (точки или %)
Высота строк < FRAMESET ROWS=* > < /FRAMESET > (* = относительный размер)
Ширина колонок < FRAMESET COLS=,,, > < /FRAMESET > (точки или %)
Ширина колонок < FRAMESET COLS=* > < /FRAMESET > (* = относительный размер)
Ширина окантовки < FRAMESET BORDER=? >  
Окантовка < FRAMESET FRAMEBORDER="yes|no" >  
Цвет окантовки < FRAMESET BORDERCOLOR="#$$$$$$" >  
Определить фрейм < FRAME > (содержание отдельного фрейма)
Документ < FRAME SRC="URL" >  
Имя фрейма < FRAME NAME="***"|_blank|_self| _parent|_top >  
Ширина границы < FRAME MARGINWIDTH=? > (правая и левая границы)
Высота границы < FRAME MARGINHEIGHT=? > (верхняя и нижняя границы)
Скроллинг? < FRAME SCROLLING="YES|NO|AUTO" >  
Постоянный размер < FRAME NORESIZE >  
Окантовка < FRAME FRAMEBORDER="yes|no" >  
Цвет окантовки < FRAME BORDERCOLOR="#$$$$$$" >  
Содержание без фреймов < NOFRAMES > < /NOFRAMES > (для просмотрщиков не поддерживающих фреймы)


Язык JAVA. Вверх

Applet < APPLET > < /APPLET >  
Applet - имя файла < APPLET CODE="***" >  
Параметры < APPLET PARAM NAME="***" >  
Applet - адрес < APPLET CODEBASE="URL" >  
Applet - имя < APPLET NAME="***" > (для ссылок из других частей страницы)
Альтернативный текст < APPLET ALT="***" > (для программ не поддерживающих Java)
Выравнивание < APPLET ALIGN="LEFT|RIGHT|CENTER" >  
Размеры < APPLET WIDTH=? HEIGHT=? > (в точках)
Отступ < APPLET HSPACE=? VSPACE=? > (в точках)


Разное. Вверх

Комментарий < !-- *** -- > (игнорируется просмотрщиком)
Пролог HTML 3.2 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN" >  
Поиск < ISINDEX > (означает начальную точку поиска)
Приглашение < ISINDEX PROMPT="***" > (текст приглашения для поля ввода)
Запустить поиск < A HREF="URL?***" > < /a > (используйте действительно знак вопроса)
URL этого файла < BASE HREF="URL" > (должно быть в заголовке)
Имя базового окна < BASE TARGET="***" > (должно быть в заголовке)
Отношение < LINK REV="***" REL="***" HREF="URL" > (должно быть в заголовке)
Метаинформация < META > (должно быть в заголовке)
Стили < STYLE > < /STYLE >  
Программа < SCRIPT > < /SCRIPT >  
________________________

Раскладка цветовой гаммы по RGB-составляющим

В верстке страниц Вы можете использовать как шестнадцатиричный код (RGB), так и названия цветов, Обозреватель нормально распознает и то и другое.

Color's name R G B Color
alicemblue F0 F8 FF  
antiquewhite FA EB D7  
aqua 00 FF FF  
aquamarine 7F FF D4  
azure F0 FF FF  
beige F5 F5 DC  
bisque FF E4 C4  
black 00 00 00  
blanchedalmond FF EB CD  
blue 00 00 FF  
blueviolet 8A 2B E2  
brown A5 2A 2A  
burlywood DE B8 87  
cadetblue 5F 9E A0  
chartreuse 7F FF 00  
chocolate D2 69 1E  
coral FF 7F 50  
cornflowerblue 64 95 ED  
cornsilk FF F8 DC  
crimson DC 14 3C  
cyan 00 FF FF  
darkblue 00 00 8B  
darkcyan 00 8B 8B  
darkgoldenrod B8 86 0B  
darkgray A9 A9 A9  
darkgreen 00 64 00  
darkkhaki BD B7 6B  
darkmagenta 8B 00 8b  
darkolivegreen 55 6B 2F  
darkorange FF 8C 00  
darkochid 99 32 CC  
darkred 8B 00 00  
darksalmon E9 96 7A  
darkseagreen 8F BC 8F  
darkslateblue 48 3D 8B  
darkslategray 2F 4F 4F  
darkturquoise 00 CE D1  
darkviolet 94 00 D3  
deeppink FF 14 93  
deepskyblue 00 BF FF  
dimgray 69 69 69  
dodgerblue 1E 90 FF  
firebrick B2 22 22  
floralwhite FF FA F0  
forestgreen 22 8B 22  
fushsia FF 00 FF  
gainsboro DC DC DC  
ghostwhite F8 F8 FF  
gold FF D7 00  
goldenrod DA A5 20  
gray 80 80 80  
green 00 80 00  
greenyellow AD FF 2F  
honeydew F0 FF F0  
hotpink FF 69 B4  
indiandred CD 5C 5C  
indigo 4B 00 82  
ivory FF FF F0  
khaki F0 E6 8C  
lavender E6 E6 FA  
lavenderblush FF F0 F5  
lawngreen 7C FC 00  
lemonchiffon FF FA CD  
ligtblue AD D8 E6  
lightcoral F0 80 80  
lightcyan E0 FF FF  
lightgoldenrodyellow FA FA D2  
lightgreen 90 EE 90  
lightgrey D3 D3 D3  
lightpink FF B6 C1  
Color's name R G B Color
lightsalmon FF A0 7A  
lightseagreen 20 B2 AA  
lightscyblue 87 CE FA  
lightslategray 77 88 99  
lightsteelblue B0 C4 DE  
lightyellow FF FF E0  
lime 00 FF 00  
limegreen 32 CD 32  
linen FA F0 E6  
magenta FF 00 FF  
maroon 80 00 00  
mediumaquamarine 66 CD AA  
mediumblue 00 00 CD  
mediumorchid BA 55 D3  
mediumpurple 93 70 DB  
mediumseagreen 3C B3 71  
mediumslateblue 7B 68 EE  
mediumspringgreen 00 FA 9A  
mediumturquoise 48 D1 CC  
medium violetred C7 15 85  
midnightblue 19 19 70  
mintcream F5 FF FA  
mistyrose FF E4 E1  
moccasin FF E4 B5  
navajowhite FF DE AD  
navy 00 00 80  
oldlace FD F5 E6  
olive 80 80 00  
olivedrab 6B 8E 23  
orange FF A5 00  
orengered FF 45 00  
orchid DA 70 D6  
palegoldenrod EE E8 AA  
palegreen 98 FB 98  
paleturquose AF EE EE  
palevioletred DB 70 93  
papayawhop FF EF D5  
peachpuff FF DA B9  
peru CD 85 3F  
pink FF C0 CB  
plum DD A0 DD  
powderblue B0 E0 E6  
purple 80 00 80  
red FF 00 00  
rosybrown BC 8F 8F  
royalblue 41 69 E1  
saddlebrown 8B 45 13  
salmon FA 80 72  
sandybrown F4 A4 60  
seagreen 2E 8B 57  
seashell FF F5 EE  
sienna A0 52 2D  
silver C0 C0 C0  
skyblue 87 CE EB  
slateblue 6A 5A CD  
slategray 70 80 80  
snow FF FA FA  
springgreen 00 FF 7F  
steelblue 46 82 B4  
tan D2 B4 8C  
teal 00 80 80  
thistle D8 BF D8  
tomato FF 63 47  
turquose 40 E0 D0  
violet EE 82 EE  
wheat F5 DE B3  
white FF FF FF  
whitesmoke F5 F5 F5  
yellow FF FF 00  
yellowgreen 9A CD 32  
________________________

Спецсимволы в HTML

Возможно, некоторые символы у Вас не будут правильно отображатся. Зависит это от используемого шрифта.

Вид Код Описание
Различные знаки
¡ ¡ перевернутый восклицательный знак
¢ ¢ цент
£ £ фунт стерлингов
¤ ¤ денежная единица
¥ ¥ иена или юань
¦ ¦ разорванная вертикальная черта
§ § параграф
¨ ¨ diaeresis = spacing diaeresis
© © знак copyright
ª diaeresis = spacing diaeresis
© © знак copyright
ª feminine ordinal indicator
« « левая двойная угловая скобка
¬ ¬ знак отрицания
­ ­ место возможного переноса
торговая марка
® ® знак зарегистрированной торговой марки
¯ ¯ macron = spacing macron = overline = APL overbar
° ° градус
± ± плюс-минус
² ² верхний индекс "два" - "квадрат"
³ ³ верхний индекс "три" - "куб"
´ ´ acute accent = spacing acute
µ µ микро
pilcrow sign = paragraph sign
· · middle dot = Georgian comma = Greek middle dot
¸ ¸ cedilla = spacing cedilla
¹ ¹ верхний индекс "один"
º º masculine ordinal indicator
» » правая двойная угловая скобка
¼ ¼ дробь - одна четверть
½ ½ дробь - одна вторая
¾ ¾ дробь - три четверти
¿ ¿ перевернутый вопросительный знак
Латинский и греческий алфавит
À À latin capital letter A with grave = latin capital letter A grave
Á Á latin capital letter A with acute
  latin capital letter A with circumflex
à à latin capital letter A with tilde
Ä Ä latin capital letter A with diaeresis
Å Å latin capital letter A with ring above = latin capital letter A ring
Æ Æ latin capital letter AE = latin capital ligature AE
Ç Ç latin capital letter C with cedilla
È È latin capital letter E with grave
É É latin capital letter E with acute
Ê Ê latin capital letter E with circumflex
Ë Ë latin capital letter E with diaeresis
Ì Ì latin capital letter I with grave
Í Í latin capital letter I with acute
Î Î latin capital letter I with circumflex
Ï Ï latin capital letter I with diaeresis
Ð Ð latin capital letter ETH
Ñ Ñ latin capital letter N with tilde
Ò Ò latin capital letter O with grave
Ó Ó latin capital letter O with acute
Ô Ô latin capital letter O with circumflex
Õ Õ latin capital letter O with tilde
Ö Ö latin capital letter O with diaeresis
× × знак умножения
Ø Ø latin capital letter O with stroke = latin capital letter O slash
Ù Ù latin capital letter U with grave
Ú Ú latin capital letter U with acute
Û Û latin capital letter U with circumflex
Ü Ü latin capital letter U with diaeresis
Ý Ý latin capital letter Y with acute
Þ Þ latin capital letter THORN
ß ß latin small letter sharp s = ess-zed
à à latin small letter a with grave = latin small letter a grave
á á latin small letter a with acute
â â latin small letter a with circumflex
ã ã latin small letter a with tilde
ä ä latin small letter a with diaeresis
å å latin small letter a with ring above = latin small letter a ring
æ æ latin small letter ae = latin small ligature ae
ç ç latin small letter c with cedilla
è è latin small letter e with grave
é é latin small letter e with acute
ê ê latin small letter e with circumflex
ë ë latin small letter e with diaeresis
ì ì latin small letter i with grave
í í latin small letter i with acute
î î latin small letter i with circumflex
ï ï latin small letter i with diaeresis
ð ð latin small letter eth
ñ ñ latin small letter n with tilde
ò ò latin small letter o with grave
ó ó latin small letter o with acute
ô ô latin small letter o with circumflex
õ õ latin small letter o with tilde
ö ö latin small letter o with diaeresis
÷ ÷ знак деления
ø ø latin small letter o with stroke, = latin small letter o slash
ù ù latin small letter u with grave
ú ú latin small letter u with acute
û û latin small letter u with circumflex
ü ü latin small letter u with diaeresis
ý ý latin small letter y with acute
þ latin small letter y with acute
þ latin small letter thorn
ÿ ÿ latin small letter y with diaeresis
Α Α греческая заглавная буква альфа
Β Β греческая заглавная буква бета
Γ Γ греческая заглавная буква гамма
Δ Δ греческая заглавная буква дельта
Ε Ε греческая заглавная буква эпсилон
Ζ Ζ греческая заглавная буква дзета
Η Η греческая заглавная буква эта
Θ Θ греческая заглавная буква тета
Ι Ι греческая заглавная буква иота
Κ Κ греческая заглавная буква каппа
Λ Λ греческая заглавная буква лямбда
Μ Μ греческая заглавная буква мю
Ν Ν греческая заглавная буква ню
Ξ Ξ греческая заглавная буква кси
Ο Ο греческая заглавная буква омикрон
Π Π греческая заглавная буква пи
Ρ Ρ греческая заглавная буква ро
Σ Σ греческая заглавная буква сигма
Τ Τ греческая заглавная буква тау
Υ Υ греческая заглавная буква ипсилон
Φ Φ греческая заглавная буква фи
Χ Χ греческая заглавная буква хи
Ψ Ψ греческая заглавная буква пси
Ω Ω греческая заглавная буква омега
α α греческая строчная буква альфа
β β греческая строчная буква бета
γ γ греческая строчная буква гамма
δ δ греческая строчная буква дельта
ε ε греческая строчная буква эпсилон
ζ ζ греческая строчная буква дзета
η η греческая строчная буква эта
θ θ греческая строчная буква тета
ι ι греческая строчная буква иота
κ κ греческая строчная буква каппа
λ λ греческая строчная буква лямбда
μ μ греческая строчная буква мю
ν ν греческая строчная буква ню
ξ ξ греческая строчная буква кси
ο ο греческая строчная буква омикрон
π π греческая строчная буква пи
ρ ρ греческая строчная буква ро
ς ς греческая строчная буква сигма (final)
σ σ греческая строчная буква сигма
τ τ греческая строчная буква тау
υ υ греческая строчная буква ипсилон
φ φ греческая строчная буква фи
χ χ греческая строчная буква хи
ψ ψ греческая строчная буква пси
ω ω греческая строчная буква омега
Знаки пунктуации
bullet - маленький черный кружок
многоточие ...
одиночный штрих - минуты и футы
двойной штрих - секунды и дюймы
надчеркивание
косая дробная черта
Стрелки
стрелка влево
стрелка вверх
стрелка вправо
стрелка вниз
стрелка влево-вправо
Математические операторы
ƒ ƒ latin small f with hook = знак функции = florin
частный дифференциал
произведение последовательности - знак произведения
сумма последовательности
минус
квадратный корень
бесконечность
пересечение - cap
интеграл
почти равно - асимптотически стремится
не равно
тождественно
меньше либо равно
больше либо равно
Прочие символы
lozenge
черный знак масти "пики"
черный знак масти "трефы" - shamrock
черный знак масти "червы" - valentine
" " двойная кавычка - APL quote
& & ampersand
< < знак "меньше"
> > знак "больше"
Œ Œ латинская заглавная лигатура OE
œ œ латинская строчная лигатура oe
Š Š latin capital letter S with caron
š š latin small letter s with caron
Ÿ Ÿ latin capital letter Y with diaeresis
ˆ ˆ modifier letter circumflex accent
˜ ˜ small tilde
zero width non-joiner
zero width non-joiner
zero width joiner
en dash
em dash
левая одиночная кавычка
правая одиночная кавычка
нижняя одиночная кавычка
левая двойная кавычка
правая двойная кавычка
нижняя двойная кавычка
кинжал (крест)
двойной кинжал (крест)
промилле
левая угловая одиночная кавычка
правая угловая одиночная кавычка
? ? валюта евро
________________________

Курсоры

Здесь представлены курсоры, которые Вы можете использовать на своих страницах. Для отображения соответствующего курсора нужно создать таблицу и поместить тест между любыми из представленных ячейек:

cursor:crosshair < td style=CURSOR:crosshair; > Ваш текст < /td >
cursor:move < td style=CURSOR:move; > Ваш текст < /td >
cursor:e-resize < td style=CURSOR:e-resize; > Ваш текст < /td >
cursor:ne-resize < td style=CURSOR:ne-resize; > Ваш текст < /td >
cursor:nw-resize < td style=CURSOR:nw-resize; > Ваш текст < /td >
cursor:n-resize < td style=CURSOR:n-resize; > Ваш текст < /td >
cursor:sw-resize < td style=CURSOR:sw-resize; > Ваш текст < /td >
cursor:se-resize < td style=CURSOR:se-resize; > Ваш текст < /td >
cursor:s-resize < td style=CURSOR:s-resize; > Ваш текст < /td >
cursor:w-resize < td style=CURSOR:w-resize; > Ваш текст < /td >
cursor:text < td style=CURSOR:text; > Ваш текст < /td >
cursor:wait < td style=CURSOR:wait; > Ваш текст < /td >
cursor:help < td style=CURSOR:help; > Ваш текст < /td >
________________________

Фильтры для текста

Фильтр Mask. Вверх

Выделяет текст, как будто бы Вы выделили его мышью.

Синтаксис:
STYLE="filter:Mask(Color='Color')"
Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.

Пример:
< P STYLE="filter:Mask(Color='Red'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center;"> Пример < /P > ;

Пример


Фильтр Shadow. Вверх

Создает тень текста

Синтаксис:
STYLE="filter:Shadow(Color='Color', Direction='Direction')"
Color - цвет тени.
Direction - направление тени (от 0 до 315).

Пример:
< P STYLE="filter:Shadow(Color='#000000', Direction='130'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Red;" > ; Пример < /P > ;

Пример


Фильтр Shadow. Вверх

Добавляет тень к тексту.

Синтаксис:
STYLE="filter:Shadow(Color='Color', OffX='Offx', OffY='Offy', Positive='Positive')"
Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)

Пример:
< P STYLE="filter:Shadow(Color='#7FFF00',OffX='3',OffY='3',Positive='1'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Green;" > ; Пример < /P > ;

Пример


Фильтр FlipH. Вверх

Переворачивает текст горизонтально.

Синтаксис:
STYLE="filter:FlipH"

Пример:
< P STYLE="filter:FlipH; width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Red;" > ; Пример < /P > ;

Пример


Фильтр FlipV. Вверх

Переворачивает текст вертикально.

Синтаксис:
STYLE="filter:FlipV"

Пример:
< P STYLE="filter:FlipV; width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Red;" > ; Пример < /P > ;

Пример


Фильтр Glow. Вверх

Создает эффект сияния.

Синтаксис:
STYLE="filter:Glow(Strength='Strength', Color='Color')"
Strength - сила, с которой текст засияет (0-100)
Color - цвет, которым текст засияет.

Пример:
< P STYLE="filter:Glow(Strength='3', Color='#00FF00'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: DarkGreen;" > ; Пример < /P > ;

Пример


Фильтр Wave. Вверх

Делает текст волнистым.

Синтаксис:
STYLE="filter: Wave( Freq='Freq', Add='Add', LightStrength='LightStrength', Phase='Phase', Strength='Strength')"
Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн

Пример:
< P STYLE="filter:Wave(Freq='5', Add='0', LightStrength='1', Phase='2', Strength='2'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Green;" > ; Пример < /P > ;

Пример


Фильтр Blur. Вверх

Размывает текст в определенную сторону.

Синтаксис:
STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"
Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Пример:
< P STYLE="filter:Blur(Add='1',Direction='30',Strength='10'); width: 200; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Blue;" > ; Пример < /P > ;

Пример

Обратитие внимание: цвет размытия не задается, фильтр задает его сам; в данном примере определен только цвет текста. ____________________________

Фильтры для изображений

Фильтр Alpha. Вверх

Осветляет изображение.

Синтаксис:
STYLE="filter:Alpha(Opacity='Opacity', FinishOpacity='Finishopacity', Style='Style', StartX='X', StartY='Y', FinishX='X', FinishY='Y')"
Opacity - степень осветления (0-100. 0 светло, 100 темно).
FinishOpacity - конечная степень осветления (0-100. 0 светло, 100 темно).
Style - метод осветвления (число: 0(без осветвления), 1(линия) 2(круг) 3(прямоугольник)
StartX, StartY, FinishX, FinishY - координаты осветвляемой области

Пример:
< IMG STYLE="filter:Alpha(Opacity='90',FinishOpacity='45',Style='2')" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < /P >


Фильтр Blur. Вверх

Размывает изображение в определенную сторону.

Синтаксис:
STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"
Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Пример:
< IMG STYLE="filter:Blur(Add='1',Direction='310',Strength='10')" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < /P >


Фильтр Invert. Вверх

Инверсия изображения

Синтаксис:
STYLE="filter:Invert"

Пример:
< IMG STYLE="filter:Invert" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < /P >


Фильтр Gray. Вверх

Делает изображение черно-белым

Синтаксис:
STYLE="filter:Gray"

Пример:
< IMG STYLE="filter:Gray" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < /P >


Фильтр Chroma. Вверх

Определенный цвет делается прозрачным.

Синтаксис: STYLE="filter:Chroma(Color='Color')"
Color - цвет выделения в шестнадцатиричном виде (напр. #000000) или название цвета на английском, например, Black, Red, Blue, Green.

Пример:
< IMG STYLE="filter:Chroma(Color='#000000')" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < /P >


Фильтр Xray. Вверх

Негативное изображение

Синтаксис: STYLE="filter:Xray"

Пример:
< IMG STYLE="filter:Xray" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < /P >


Фильтр RevealTrans. Вверх

Появление изображения.

Синтаксис:
STYLE="filter:revealTrans(Duration='Duration', Transition='Transition')"
Duration - время, за которое появится изображение (в секундах)
Transition - эффект (совершенно разные эффекты от 0 до 23). Значение 23 меняет эффект появления изображения после каждой перезагрузки страницы.

Пример использования:
< SCRIPT >
< !--
function Start()
// Функция запуска фильтра. Кнопка Показать.
{
RevealTransFilter.filters.item(0).Apply()
RevealTransFilter.filters.item(0).Play()
RevealTransFilter.style.visibility=""
}
function Clear()
// Функция скрытия изображения. Кнопка Сброс.
{
RevealTransFilter.style.visibility="hidden"
}
// -- >
< /SCRIPT >
< IMG id="RevealTransFilter" STYLE="filter:revealTrans(Duration=1, Transition=12);VISIBILITY: hidden;" SRC="
Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения" > < br >
< input type=button value=" Показать " OnClick="Start()" >
< input type="reset" value=" Сброс " OnClick="Clear()" >

________________________

Дополнительные возможности тега BODY

Неподвижный фон.
Вы можете сделать фон своей страницы неподвижным, т.е. прокручивая страницу фон будет оставатся на месте.

< BODY background="Фоновое изображение" bgproperties=fixed >

Зеркальное отображение страницы и прокрутки.
Используя данную конструкцию можно перенести прокрутку на левую сторону, а содержимое страницы выравнить по правому краю.

< BODY dir=rtl >

Надпись в статусной строке
Следующим параметром можно задать текст, котый будет отображен в статустной строке.

< BODY OnLoad="window.defaultStatus='Этот текст будет отображатся в строке состояния'" >

Задание параметров < BODY > в стиле.
Данный код будет интересен Web-дизайнерам, применяющим стили. Он размещает на странице фоновое изображение в единственном числе, которое расположено в 13 пикселях от верхнего и в 13 пикселях от правого края и при прокрутки документа остается неподвижным. Если на странице будут находиться таблицы, при прокрутки они будут закрывать фоновое изображение.

< STYLE TYPE="text/css" > < !--
BODY { background: url("
Фоновое изображение");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 13px 13px;
background-color: #FFFF00 }

-- > < /STYLE >

Параметры:
background: url("Фоновое изображение"); - определяет фоновое изображение, например, Fon.gif.
background-attachment: fixed; - определяет неподвижность фонового изображения при прокрутки страницы.
background-repeat: no-repeat; - данный параметр запрещает размножать изображение, убрав его, изображение будет размножено по всей странице. background-position: 13px 13px; - определяет позицию фонового изображения: от верхнего края и от левого края.
background-color: #FFFF00; - определяет цвет фона всего документа в шестнадцатиричном виде (как в примере) или названиями цветов - Red, Green и т.д.

________________________

JavaScript

JavaScript - это язык для составления сценариев, позволяющих выполнять разные действия непосредственно на машине пользователя. Распологаются данные сценарии внутри HTML документов.

JavaScript применяется для проверки правильности заполнения форм, создания удобной навигации, вообщем различных сервисов.

Каждая вставка сценария JavaScript в HTML-документ начинается открывающим тегом < SCRIPT > и завершается закрывающим < /SCRIPT > . Открывающий тег < SCRIPT > может иметь необязательный атрибут LANGUAGE равным JavaScript. В связи с появлением еще одного скриптового языка VBScript рекомендуется использовать этот атрибут. Кроме того, обратите внимание на использование тегов комментария < !-- и //-- > . Если страница, содержащая сценарий, будет загружена в Обозреватель не поддерживающий языки сценариев, строки программы, засоряя экран, будут выведены как обычный текст. Если же использовать тег комментария, то такой браузер пропустит текст программы, воспринимая его как комментарий. Двойная косая черта перед закрывающим текст скприпта тегом комментария гарантирует, что тег не будет воспринят Обозревателем как оператор JavaScript:

< SCRIPT LANGUAGE="JavaScript" >
< !--
alert("
Добро пожаловать !")
//-- >
< /SCRIPT >

Результатом выполнения этого скрипта будет вывод на экран сообщения: Добро пожаловать !

JavaScript может содержавть следующие элементы:

Операторы Производят действия над одним или несколькими операндами или переменными. Операторы разделяются друг от друга точкой с запятой ";".
Функции Последовательность операторов, выполняющих какую-либо задачу. Синтаксис:

< SCRIPT LANGUAGE="JavaScript" >
< !--

function NameFunction()
{
alert("Добро пожаловать !")
}
//-- >
< /SCRIPT >

< BUTTON TYPE="SUBMIT" ONCLICK="NameFunction();" > Пример < /BUTTON >

Имя функции (NameFunction) произвольно и определяется программистом. Для того чтобы вызвать функцию достаточно указать имя функции и круглые скобки, в которых могут находится передаваемые параметры.

Данный пример демонстрирует вызов функции NameFunction при нажатии кнопки NameFunction, после чего функция выполняет метод alert - отображение окна с текстом (параметром) Добро пожаловать !

Методы Функции, которые сразу совершают какое-то действие над объектом. Метод представляет собой функцию, связанную с объектом.
События (обработчики событий) Действия, которые произвел пользователь: щелкнул на ссылке (кнопке), подвел курсор мышки над каким-либо объектом, щелкнул в текстовом поле для его заполнения (передал фокус этому элементу) и т.д. Они позволяют программисту отслеживать действия пользователя (события) по отношению к странице HTML.
Комментарии Примечания программиста, которые будут игнорированы интерпритатором. Однострочные комментарии начинаются с символа "//". Многострочные комментарии начинаются с "/*" и заканчиваются "*/".

// Комментарий ограничен данной строкой

/* Комментарий начинается здесь
и заканчивается здесь*/

Переменные Переменные объявляются при помощи ключевого слова var, за которым следует имя переменной. Возможно объявление сразу нескольких переменных, в этом случае они разделяются запятой. Кроме того, переменные могут быть сразу инициализированы при объявлении, т.е. им будет присвоено значение.

var NameofVariable1, NameofVariable2 = 567;

Здесь переменная NameofVariable1 просто объявлена, а переменная NameofVariable2 еще и инициализирована при объявлении и ей присвоено значение 567.

Областью видимости переменной является текущая функция или, в случае объявления вне функции, весь текущий документ (web-страничка).

var globalString;
function bracket()
 {
  var localString = "[" + globalString + "]";
  document.write(localString);
 }

В вышеприведенном примере переменная globalString может быть использована в любой функции или сценарии текущего документа (такие переменные называют глобальными для данного документа), а переменная localString видна только внутри функции bracket (такие переменные называют локальными переменными функции). Как Вы видите, при инициализации локальной переменной мы можем использовать значение глобальной переменной.

Типы переменных:

  • численный;
  • логический;
  • строковый;
Численные переменные могут содержать целые числа и числа с плавающей точкой. Целые числа могут быть выражены в обычном десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении.

Логические переменные могут иметь только два значения: true (истина) или false (ложь). Вместо true и false можно использовать соответственно 1 и 0.

Строковые переменные содержат любое количество символов - строку. При присваивании строковой переменной значения (строки) строка всегда окружена одинарными или двойными кавычками.

var variable1 = 534, variable2 = true, variable3 = "строка";

Мы объявили переменные:
variable1 - численная;
variable2 - логическая;
variable3 - строковая;

А использование обратного слеша "" позволяет вставлять в строку специальные символы:

document.write(""Сделайте это", - сказал он.");

выводит фразу "Сделайте это", - сказал он.

________________________

События

OnClick Реагирует на одинарный щелчок курсора мыши.

< A HREF="#null" OnClick="alert('Пример события OnClick'); return false" LANGUAGE="Javascript" > Пример < /A >

OnDblClick Реагирует на двойной щелчок курсора мыши.

< A HREF="#null" OnClick="return false" OnDblClick="alert('Пример события OnDblClick')" LANGUAGE="Javascript" > Пример < /A >

OnDragStart Реагирует на перетаскивание курсором мыши.

< A HREF="#Eventondragstart" LANGUAGE="VBscript" ID="egOnDragStartLink" OnClick="self.event.returnValue=false" TARGET="HTMLib_content" > Пример < /A >

< script LANGUAGE="VBScript" >
< !--
Sub egOnDragStartLink_OnDragStart
egOnDragStartLink.innerText="Поперетаскивать захотелось ?" self.event.returnValue=false
l=setTimeOut("ResetOnDragStartExample()",3000)
End Sub
Sub ResetOnDragStartExample()
egOnDragStartLink.innerText="Еще хочется ?"
End Sub
//-- > < /script >

Заданное по умолчанию действие перемещения было отменено. Нормальное действие должно было бы загрузить документ, вызванный ссылкой .

OnHelp При одинарном щелчке курсором мыши можно нажать кнопку F1, при этом отобразится подсказка с инструкциями о том, что данная ссылка реагирует на двойной щелчок курсором мыши.

< A HREF="other_page.html" LANGUAGE="Javascript" onclick="return false" OnHelp="alert('Дважды нажмите ссылку, что бы документ открылся.');return false" ondblclick="alert('Это просто пример - ничего не откроется...')" > Пример < /A >

OnKeyDown Реагирует при нажатии и держании клавиши.

< A HREF="#null" OnKeyDown="alert('Пример события OnKeyDown')" LANGUAGE="Javascript" > Пример < /A >

OnKeyPress Реагирует при нажатии клавиши.

< A HREF="#null" OnKeyPress="alert('Пример события OnKeyPress')" LANGUAGE="Javascript" > Пример < /A >

OnKeyUp Реагирует при отпускании клавиши.

< A HREF="#null" OnKeyUp="alert('Пример события OnKeyUp')" LANGUAGE="Javascript" > Пример < /A >

KeyCode Содержит символ клавиши (UNICODE) , которая была нажата, чтобы заставить события onkeypress, onkeydown или onkeyup работать.
OnMouseDown Реагирует на нажатие кнопки мыши.

< A HREF="#null" OnMouseDown="alert('Пример события OnMouseDown')" LANGUAGE="Javascript" > Пример < /A >

OnMouseMove Реагирует всякий раз, когда мышь пользователя перемещается поверх определенного текста в документe. В следующем примере, когда пользователь проводит по тексту курсором мыши, в статустной строке отображается разный текст:

< p onmousemove="top.status='Здесь ПЕРВЫЙ комментарий...'" STYLE="cursor:default" ALIGN="center" > Здесь первый комментарий, < em onmousemove="top.status='Здесь ВТОРОЙ комментарий...';self.event.cancelBubble=true;return true" > здесь второй < /em > , и снова первый. < /p >

Здесь первый комментарий, здесь второй, и снова первый.

OnMouseOut Реагирует когда курсор мыши оставляет ссылку.

< A HREF="#null" OnMouseOut="alert('Пример события OnMouseDown')" LANGUAGE="Javascript" > Пример < /A >

OnMouseOver Реагирует когда курсор мыши пользователя входит в область ссылки.

< A HREF="#null" OnMouseOver="alert('Пример события OnMouseOver')" LANGUAGE="Javascript" > Пример < /A >

OnMouseUp Может использоваться, чтобы выполнить функции сценария после того, как мышь пользователя была нажата и отпущена - противоположность события OnMouseDown.

< A HREF="#null" OnMouseUp="alert('Пример события OnMouseUp')" LANGUAGE="Javascript" > Пример < /A >

OnSelectStart Исполняется всякий раз, когда пользователь начинает выбирать некоторый текст, который является содержанием элемента.

< table BORDER="8" BgColor="red" WIDTH="65%" cellspacing=8 >
< tr > < td >
< p ID="paraSelectStart" > Выбор любого элемента из этого текста заставит изменять его цвета ... иногда дико
< script LANGUAGE="VBScript" >
< !--
Sub paraSelectStart_onselectstart()
Dim hexColor
Dim hexColor2
hexColor=hex(rnd*16777215)
if hexColor > "ffffff"then hexColor="ffffff"
hexColor2=hex(rnd*16777215)
if hexColor2 > "ffffff"then hexColor2="ffffff"
on error resume next
set elRef=document.all("paraSelectStart")
elRef.style.backgroundColor=hexColor
elRef.style.color=hexColor2
self.event.returnValue=false
End Sub
//-- >
< /script >
< /td > < /tr >
< /table >

Выбор любого элемента из этого текста заставит изменять его цвета

Пример совместной работы событий OnMouseOver, OnMouseOut и свойства status :

< A HREF="#null" onMouseOver="status='Добро пожаловать !' ;return true" onMouseOut="status='Домашняя страничка Владимира Дригалкина' ;return true" > Пример < /A >

При загрузке документа в статусной строке одна информация, при попадании указателя мыши в область ссылки - другая, а после выхода указателя мыши из этой области - третья.

________________________

Окна с сообщениями

Используя методы Alert, Confirm и Prompt можно выводить сообщения пользователю. Сообщение, выводимое с помощью метода alert, используется для вывода предупреждений, какой-нибудь информации. Метод confirm используется для сообщений, требующих принятия решения пользователем - в окне находятся две кнопки - "Ok" и "Отмена". При использовании метода prompt диалог кроме самого сообщения содержит поле для ввода текста.

Метод Alert
В виде кнопки :
< INPUT TYPE=submit VALUE=" Метод Alert " LANGUAGE="Javascript" onclick="alert('Здесь Ваше сообщение')" >

В виде ссылки :
< A HREF="URL" onclick="alert('Здесь Ваше сообщение')" LANGUAGE="Javascript" > Метод Alert < /A >
Метод Alert

Метод Confirm
В виде кнопки :
< INPUT TYPE=submit VALUE=" Метод Confirm " LANGUAGE="Javascript" onclick="confirm('Здесь Ваш вопрос')" >

В виде ссылки :
< A HREF="URL" onclick="confirm('Здесь Ваш вопрос')" LANGUAGE="Javascript" > Метод Confirm < /A >
Метод Confirm

Метод Prompt
В виде кнопки :
< INPUT TYPE=submit VALUE=" Метод Prompt " LANGUAGE="Javascript" onclick="prompt('Здесь Ваш запрос')" >

В виде ссылки :
< A HREF="URL" onclick="prompt('Здесь Ваш запрос')" LANGUAGE="Javascript" > Метод Prompt < /A >
Метод Prompt

Вот пример практического применения метода confirm. Script определяет открыл ли пользователь страницу во фрейме, если нет - выводит запрос:

Пример использования метода Confirm.

При нажатии пользователем кнопки Ok, программа загрузит файл Frame.htm (см. код ниже), если нажмет Отмена - ничего не произойдет, а точнее пользователь не покинет текущую страницу, на которой в нашем случае будет красоваться сообщение ERROR.

< html >
< head >
< title >
Пример практического применения метода Confirm < /title >
< meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >

< script language="javascript" > < !--
if (self==parent) {
if (confirm('
Это окно - составляющее Фрейма nи не может быть открыто самостоятельно!nn Загрузить стартовую страницу?')) location.href="Frame.htm" };
//-- > < /script >

< /head >
< body >

< br > < br > < br > < br >
< p align="center" >
< font face=verdana size="7" color="red" >
< b > ERROR < /b >
< /font >
< /p >

< /body >
< /html >

________________________

Кнопки


Добавить в Избранное. Вверх

На своей странице Вы можете установить кнопку, при нажатии на которую пользователь добавлял бы ее в Избранное:

< FORM >
< BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" >
Добавить в избранное < /BUTTON >
< /FORM >

В виде ссылки эта кнопка будет выглядить так:

< A HREF="#nul" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" > Добавить в избранное < /A >

Измените значение http://lenininc.narod.ru/ на свой адрес, значение LENIN INC на имя вашего сайта.


Сделать страницу стартовой. Вверх

Следующий код реализует кнопку, при нажатии на которую страница делаеться стартовой:

< FORM >
< BUTTON TYPE="SUBMIT" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://lenininc.narod.ru/'); return false;" >
Сделать стартовой < /BUTTON >
< /FORM >

В вдие ссылки:

< A HREF="#nul" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://lenininc.narod.ru/'); return false;" > Сделать стартовой < /A >

Измените значение http://lenininc.narod.ru/ на свой адрес.


История посещений (Назад/Вперед). Вверх

Использование объекта History дает возможность возвращаться на URL, который был посещен перед этим, и переходить на URL, посещенный перед этим. Список посещенных URL содержится в меню go Обозревателя. Делается это, используя методы объекта History: back() и forward().

< FORM >
< INPUT TYPE="button" VALUE=" Назад " ONCLICK="history.back(-1)" >
< INPUT TYPE="button" VALUE=" Вперед " ONCLICK="history.forward(1)" >
< /FORM >

В виде ссылок эти кнопки будут выглядеть так:

< A HREF="javascript:history.back()" > Назад < /A >
< A HREF="javascript:history.forward()" > Вперед < /A >

Если необходимо вернуться на несколько позиций списка меню, то используется метод go(), в скобках указывается число:

Отрицательноe, напр. (-2) - на сколько шагов вернутся Назад
Положительное, напр, (2) - на сколько шагов вернутся Вперед.

Например, для возврата на три позиции назад указывается go(-3):

< A HREF="javascript:history.go(-3)" > Назад < /A >

Если нет посещенных перед этим URL, то это работать не будет.


Перезагрузка страницы. Вверх

Данная программа перезагружает текущую страницу.

< FORM >
< input TYPE="button" VALUE="
Перезагрузить " ONCLICK="Button()" >
< script >
function Button()
{
location.href="
Buttons.htm";
}
< /script >
< /FORM >

Измените документ Buttons.htm на свой.


Кнопка-ссылка. Вверх

Нажав такую кнопку, пользователь перейдет по указаной ссылке. В данном случае кнопка работает как обычная гипперссылка.

< FORM >
< input TYPE="button" VALUE="
LENIN INC " ONCLICK="HomeButton()" > < script >
function HomeButton()
{
location.href="
http://lenininc.narod.ru/";
}
< /script >
< /FORM >

Измените URL http://lenininc.narod.ru/ на свой.


Сообщение в окне. Вверх

При нажатии на такую кнопку будет выведено окно с любым Вашим сообщением.

< FORM >
< input TYPE="button" VALUE="
Сообщение " ONCLICK="AlertButton()" >
< script >
function AlertButton()
{
window.alert("
Введите здесь текст своего сообщения");
}
< /script >
< /FORM >


Сообщение в статусной строке. Вверх

Когда пользователь нажмет такую кнопку в строке состояния обозревателя будет отображен определенный текст.

< FORM >
< input TYPE="button" VALUE="
Сообщение " ONCLICK="StatusButton()" >
< script >
function StatusButton()
{
window.status="
Введите здесь текст своего сообщения";
}
< /script >
< /FORM >


Изменение фонового цвета страницы. Вверх

С помощью такой кнопки пользователь сможет изменить фоновый цвет страницы.

< FORM >
< input TYPE="button" VALUE="
Изменить цвет " onClick="BgButton()" >
< script >
function BgButton(){
if (document.bgColor=='
#adff2f')
{document.bgColor='
#ffffff';}
else{document.bgColor='
#adff2f';}
}
< /script >
< /FORM >

Нажав кнопку, цвет фона измениться на салатовый - adff2f, повторное нажатие вернет белый фоновый цвет - #ffffff и т.д. Измените шестнадцатиричное значения цвета #adff2f на нужное Вам (в двух местах) и обязательно наберите его в нижмнем регистре.


Открытие нового окна. Вверх

Вы можете кнопкой открывать новые окна, которые могут содержать только определенные Вами элементы управления.

< FORM >
< input TYPE="button" VALUE="
Открыть окно " ONCLICK="NewWindow()" >
< script >
function NewWindow()
{
window.open("
URL","","Parameter");
}
< /script >
< /FORM >

URL - URL откpываемого pесypса. Может быть ссылкой на любой понимаемый Обозревателем докyмент (в том числе и на локальной машине).

Parameter - паpаметpы нового окна (в виде текстовой стpоки). Записываются без пробелов чеpез запятyю:

Toolbar=[yes|no|1|0] - Присутствие Панели инструментов
Location=[yes|no|1|0] - Присутствие адреса
Directories=[yes|no|1|0] - Присутствие ссылок
Status=[yes|no|1|0] - Присутствие статустной строки
Menubar=[yes|no|1|0] - Присутствие меню
Scrollbars=[yes|no|1|0] - Присутсвие прокрутки
Resizable=[yes|no|1|0] - Изменение размера окна мышью
Width=[pазмеp в пикселях] - Высота окна
Height=[pазмеp в пикселях] - Ширина окна

Можно использовать значения присутсвия элемента - yes или 1, отсутствие элемента - no или 0. В следующем примере выводится окно размерами 600Х400 пикселей с присутствием всех элементов управления:

< FORM >
< input TYPE="button" VALUE="
Открыть новое окно " ONCLICK="NewWindow()" >
< script >
function NewWindow()
{
window.open("
URL","","Toolbar=1,Location=1,Directories=1,Status=1, Menubar=1,Scrollbars=1,Resizable=1,Width=600,Height=400");
}
< /script >
< /FORM >


Просмотр в виде HTML. Вверх

При нажатии на такую кнопку открывается текущий документ в Блокноте пользователя.

< FORM >
< INPUT TYPE="button" NAME="view" VALUE="
Просмотр в виде HTML " OnClick="window.location="view-source:" +window.location.href" >
< /FORM >


Печать страницы. Вверх

С помощью такой кнопки пользователь может вызвать окно Печать с параметрами настройки печати и произвести распечатку текущей страницы на принтере.

< FORM >
< INPUT NAME="print" TYPE="button" VALUE="
Печать страницы " ONCLICK="varitext()" >
< SCRIPT LANGUAGE="JavaScript" >
< !-- Begin
function varitext(text){
text=document
print(text)
}
// End -- >
< /SCRIPT >
< /FORM >


Украшательства. Вверх

С помощью следующей конструкции Вы можете поместить в кнопку любое изображение. Для примера я взял кнопку Добавить в избранное и встроил в нее изображение Favorite.gif.

< FORM >
< BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" >
< IMG SRC="
Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0" > Добавить в Избранное < /BUTTON >
< /FORM >

Вместо Favorite.gif введите имя своего графического файла, укажите его размеры и окантовку (елементы WIDTH, HEIGHT, BORDER соответственно).

Кроме этого, Вы можете изменить размер шрифта в кнопке, воспользовавшись CSS стилями

< FORM >
< BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" >
< IMG SRC="
Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0" > < SPAN STYLE="font-size: 8pt" > Добавить в Избранное < /SPAN > < /BUTTON >
< /FORM >

Размер шрифта устанавливатся изменением значения атрибута font-size: Измените его, например, на 12pt (pt - проценты).

Добавив еще два элемента в код кнопки можно добиться ее подсвечивания при подведении курсора мыши:

< FORM >
< BUTTON TYPE="SUBMIT" onClick="window.external.addFavorite('http://lenininc.narod.ru/', 'LENIN INC'); return false;" onMouseOver="style.color='
blue'" onMouseOut="style.color='black'" >
< IMG SRC="
Favorite.gif" WIDTH=16 HEIGHT=16 ALIGN="ABSMIDDLE" BORDER=0" > < SPAN STYLE="font-size: 8pt" > Добавить в Избранное < /SPAN > < /BUTTON >
< /FORM >

Синтаксис:
onMouseOver="style.color='blue'" - цвет текста, когда курсор мыши подводится к кнопке.
onMouseOut="style.color='black'" - цвет текста, когда курсор мыши покидает кнопку.

________________________

 ©  программы и скрипты для создания сайта скачать бесплатно

Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !

Полная версия: http://gvmproject.info/article/read/uchebnik_vebmasteru.html