HTML в примерах

-= LENIN INC =-

Copyright ©2002 by Vladimir Drigalkin, LENIN INC, Kiev

HTML в примерах v1.1 (build 26.03.03)
- Веб-дизайн -
  • С чего начинать? (С этой статьи начинается учеба).
  • Текст.
  • Цвет и фон.
  • Изображения.
  • Изображения-карты.
  • Ссылки.
  • Стили (CSS).
  • Мета-тэги. (HTML cоздатель мета-тэгов)
  • Таблицы. (HTML cоздатель таблиц)
  • Списки.
  • Формы.
  • E-mail формa. (Почтовая форма на странице и проверка ее полей).
  • Горизонтальные линии.
  • Базовый адрес (тэг ВАSE).
  • Фрэймы.
  • Звук и видео на страничке.
  • Flash на странице.
  • Что такое SSI?
  • Я создал сайт. Что дальше?
  • Раскрутка сайта.

    - Дополнительная помощь -

  • Список елементов HTML. (Основные тэги, используемые в Web-дизайне. Описание).
  • Название цветов и их шестнадцатеричный вид.
  • Спецсимволы в HTML.
  • Курсоры.
  • Фильтры, применяемые к тексту.
  • Фильтры, применяемые к изображению.
  • Дополнительные возможности тэга <BODY>

    - Разное -

  • Полоса прокрутки Обозревателя своим цветом.
  • Новые окна. (HTML cоздатель ссылок для открытия новых окон с определенными параметрами).
  • Свой значек сайта.
  • Что такое FTP?
  • Полезные советы Web-мастеру. (Правила, которые НУЖНО учитывать при создании сайта).
  • CGI хостинг без рекламы.
  • Обрабатываем сообщения об ошибках.
  • Расшифровка сообщений об ошибках.

    - Java -

  • JavaScript.
  • События.
  • Окна с сообщениями.
  • Всплывающие окна.
  • Кнопки.
  • Запрещающие JavaScripts.
  • Простые вредоносные JavaScripts.
  • JavaApplets.

    - Примеры -

  • Текстовое меню с подсветкой.
  • Кнопочное меню.
  • Плоские кнопки (меню).
  • Перетаскивающееся меню
  • Выбор фонового цвета.
  • Мощная всплывающая подсказка.
  • Мигающий бордюр таблицы.
  • Выделение текста в <TEXTAREA>
  • Регистрация "горячей клавиши".
  • Текстовые часы.
  • Стрелочные часы.
  • Скролинг текста со ссылками
  • Активное изображение.
  • Появляющийся текст.
  • Отключение правой или левой кнопки мыши.
  • Текст в строке состояния.
  • Рекламная полоса.
  • Календарь на страничке.
  • Работа с текстом (Примеры небольших скриптов)

    - Обратная связь -
    E-mail me (5 Mb): lenin@zeos.net
    Welcome to my home page: http://lenininc.narod.ru/

    • Copyright ©2002 by Vladimir Drigalkin, LENIN INC, Kiev
    -= END =-


От автора

    От автора.

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

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

    Книга содержит программы, написанные на JavaScript, которые помогут Вам в построении сайта, информацию о тэгах, применяемых в HTML, дает ответы на многие вопросы...

    Дригалкин Владимир Владимирович, LENIN INC
    г. Киев, Украина


Советую посетить

    Советую посетить.

    HTML.
Index DOT Html | Очень мощный интерактивный справочник на английском языке. Представлено описание тэгов, их параметров. Замечательная навигация.
HTML Goodies | Очень хороший ресурс на английском языке. Описуется работа с HTML в примерах.
Первые шаги | Сайт посвящен тем, кто впервые столкнулся с проблемой сайтостроения, кому трудновато в этом разобраться. На сайте есть удобный учебник по HTML. Русскоязычный ресурс.
Учебник HTML с примерами | Справочник по созданию Web-сайтов. Содержит информацию о тэгах, их использованию. Сайт на русском языке.
Scripts.
The JavaScript Source | Самый большой в сети архив JavaScript, есть предпросмотр скриптов. Сайт на английском языке.
JavaScript Kit | Здесь Вы найдете JavaScripts, JavaApplets, немного примеров использования DHTML, есть предпросмотр скриптов. Сайт на английском языке.
ScriptSearch.com | Каталог скриптов - JavaScript, PHP. Также содержит Flash, различные утилиты. Англоязычный ресурс.
Скрипты | Каталог с различными скриптами - JavaScript, Perl, PHP, примеры DHTML. Сайт на русском языке.


Инструменты веб-программиста

    Инструменты веб-программиста.

    В первую очередь Вам нужен редактор, в котором Вы будете создавать свои страницы. Так как речь идет не о визуальных редакторах, я предлагаю остановиться на легком Bred'е, у которого есть подсветка HTML синтаксиса. Лучше заменить им стандартный Блокнот Windows. Кроме этого, чтобы работа с HTML документами была еще удобнее, добавьте в контекстное меню Windows пункт "Открыть в Блокноте". Для этого нужно создать текстовый файл и скопировать в него команды:

    REGEDIT4
    [HKEY_CLASSES_ROOT\*\Shell\Открыть в &Блокноте\command]
    @="notepad.exe %1"

    Переименуйте этот файл в notepad.reg и запустите. В результате, данные будут внесены в Реестр и в контекстном меню появится пункт "Открыть в Блокноте". Новый параметр в Контекстном меню.

    Допустим, что Вы сделали все эти изменения и наслаждаетесь удобной работой с HTML документами. Но в чем же лучше всего рисовать картинки? Я не буду говорить, какие графические редакторы плохие, скажу только что самый лучший, на мой взгляд, это - Paint Shop Pro. Не один существующий на данный момент редактор графики, не может тягаться с ним по скорости, качеству сохранения изображений, их оптимизации. К сожалению, данный редактор поддерживает только английский язык, но на сайтах русификации можно поискать русификатор к этой программе.

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

    Последнее время большой популярностью пользуются Flash технологии. Их все чаще применяют веб-программисты для оформления своих сайтов. Flash - это своего рода анимация, только здесь, в отличие от анимированных GIF'ов, есть множество своих плюсов, например, небольшой размер, переливание при подведении курсора мыши и другие. Создает такую анимацию программа Flash.

    Все, описанные здесь программы, Вы сможете отыскать по адресам:

    Bred | http://www.astonshell.com/rus/
Paint Shop Pro | http://www.jasc.com/
CircuitMaker | http://www.microcode.com/
Flash | http://www.macromedia.com/software/flash/


Лицензионное соглашение

    Лицензионное соглашение.

    Использование Вами любой версии "HTML в примерах" указывает на то, что Вы принимаете все условия данного лицензионного соглашения:

    Вы не имеете прав на изменение, транслирование, перепроектирование, декомпилирование, дизассемблирование, или создание других программных продуктов, основанных на этом.

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

    Вы свободны в распространении "HTML в примерах" на любом общественном (открытом) Web/FTP/Gopher сервере без обязательного получения разрешения автора, пока это распространение проводится АБСОЛЮТНО БЕСПЛАТНО. Если Вы хотите издать данный продукт на или совместно с любым носителем (например, на компакт диске с журналом или книгой, на любой коллекции программного обеспечения, совместно с другим программным обеспечением или любым другим дистрибутивным пакетом), требуется разрешение автора.

    И не забывайте, что LENIN INC - единственый человек, который может дать разрешение на коммерческое использование и распространение справочной системы "HTML в примерах".


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

    Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм. Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала Вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:

      Front Page, Word

    В это случае читайте файлы справок этих программ. Ecли хотите научиться работать с HTML-кoдoм напрямую, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь -

      HTMLPad, Блокнот, Bred

    Лично я выбрал Bred, которым заменил стандартный Блокнот Windows. Bred в отличие от Блокнота обладает множеством разных настроек - панель инструментов и статуса, неограниченная отмена действий, есть подсветка HTML тегов, автозамена, автоматическая регистрация расширений (*.txt, *.ini, ...), а лимит текста - не менее 1Mb. И это далеко не все его возможности.

    С чего же начинать? Во-первых, попробуйте сделать следующее... Откройте Блокнот и наберите в нём текст, представленный в таблице ниже. При этом то, что выделено красным Вы исправляете, а мои комментарии, выделенные черным, - удаляете. Последнее делается по желанию, т.к. Обозреватель игнорирует комментарии. Комментарии иногда очень помогают программисту ориентироваться в собственном же 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.


Текст

    Текст.

    Большинство 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"

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

    Чуть ниже представлен Screen Shot документа, где в качестве фоновой картинки использован этот фрагмент -     		Фрагмент файла (Fon.jpg)

    Screen Shot того, что должно было у Вас получиться

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

    Тэг <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 код данного примера. В нем исключены ссылки на script, который использовался в примере для вывода сообщений.

    <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> атрибут 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") определяет, в каком окне будет открыт документ

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

    Хороший пример навигации с помощью изображений-карт Вы можете посмотреть здесь.


 Ссылки
    Ссылки.

  • Введение. Создание обычной гипперссылки.
  • Графический файл в роли ссылки.
  • Ссылка на e-mail.
  • Закладки.
  • Ссылки и цвет.

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

    Ссылки 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.

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

    Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем. Для этого вместо названия ссылки нужно прописать графический элемент (Параметр 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).

    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">

    Можете воспользоватся моим создателем МЕТА-тэгов:

    LENIN INC Meta tegs creator v1.3

    Название страницы:
    Кодировка:
    Имя автора:
    E-Mail:
    Описание документа:
    Ключевые слова:
    (через запятую)
    © 2001 by Vladimir Drigalkin (LENIN INC)


Таблицы

    Таблицы.

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

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

    Ячейка 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 (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тэгов будет выделен полужирным шрифтом и отцентрирован.

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

    И еще - имейте ввиду, что тэги, устанавливающие шрифт (<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>
    8. Восемь
    9. Девять
    10. Десять
    11. Одиннадцать
    12. Двенадцать

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

    Непронумерованный список начинается открывающимся тэгом <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 для установки более компактного размещения пунктов списка.

    <DL 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

    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" onChange="msg(this.form)"></td></tr>
    <tr><td><FONT size="2" color="#FFFFFF">Тема:</font></td>
    <td><INPUT TYPE="text" NAME="Subject" size="24" onChange="msg(this.form)"></td></tr>
    <tr><td><FONT size="2" color="#FFFFFF">Сообщение:</font></td>
    <td><TEXTAREA NAME="Message" COLS=40 ROWS=6 onChange="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Область \"Имя\" в форме. \n\nПожалуйста, введите свое имя.");     // выводит сообщение, если поле Name не заполнено
    document.forms.mailer.Name.focus(); // возврашает курсор на поле Name
    return false;
    }
    //-----------
    if (document.forms.mailer.Subject.value != "") {     // функция проверки поля Subject
    } else {
    alert("\nОбласть \"Тема\" в форме. \n\nПожалуйста, введите тему.");     // выводит сообщение, если поле Subject не заполнено
    document.forms.mailer.Subject.focus(); // возврашает курсор на поле Subject
    return false;
    }
    //-----------
    if (document.forms.mailer.Message.value != "") {     // функция проверки поля Message
    return true; // ВСЕ ОТЛИЧНО
    } else {
    alert("\nОбласть \"Сообщение\" в форме. \n\nПожалуйста, напишите сообщение.");     // выводит сообщение, если поле 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"> (Линия размером 50 процентов с выравниванием по левому краю и с нулевой толщиной)

    <HR WIDTH="80%" SIZE="3"> (Линия размером 80 процентов с толщиной 3 пикселя)

    <HR NOSHADE WIDTH="80%" SIZE="20"> (Линия размером 80 процентов с толщиной 20 пикселей)

    <HR NOSHADE WIDTH="80%" COLOR="Blue" SIZE="8"> (Линия размером 80 процентов с толщиной 8 пикселей. Кроме этого линия закрашена синим цветом)

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

    <HR NOSHADE ALIGN="left" WIDTH="18" COLOR="Red" SIZE="18"> (Длина и толщина линии одинакова, за счет этого и рисуется квадрат. Он выполнен с выравниванием по левому краю и имеет красный цвет)

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


Базовый адрес (тэг ВАSE)

    Базовый адрес (тэг ВАSE).

    Тэг <ВАSЕ> (закрывающий тэг не нужен) связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Тэг <ВАSЕ> позволяет определить эту базу. Так, например, если в заголовке будет задано:

    <BASE HREF="http://lenininc.narod.ru/">

    гипертекстовая ссылка (в теле документа) вида:

    <A HREF="/docs/index.htm">

    будет расширена до

    <A HREF="http://lenininc.narod.ru/docs/index.htm">

    Это же касается и других импортируемых в документ тэгов. Графический образ, монтируемый в документ по команде:

    <IMG SRC="/images/foto.gif">

    будет найден по адресу:

    <IMG SRC="http://lenininc.narod.ru/images/foto.gif">


Фрэймы

    Фрэймы.

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

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

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

    Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL-страницы с фреймами и для чего нужны основные тэги и атрибуты:

    <!--Файл Index.htm-->
    <HTML>
    <HEAD>
    <TITLE>Фреймы</TITLE>
    </HEAD>

    <FRAMESET COLS="20%, 75%">
    <FRAME SRC="menu.htm" NAME="main">
    <FRAME SRC="base.htm" NAME="bases">
    </FRAMESET>

    <NOFRAMES>
    Установите себе Обозреватель, который поддерживает фреймы!
    </NOFRAMES>

    </HTML>

    В результате мы получим экран, разделенный на два окна. Левое окно занимает 20 процентов экрана и содержит страницу с названием menu.htm. Окно справа займет 75 процентов и отобразит файл base.htm. Пока у нас их нет, то при запуске index.htm Вы увидите только страницу с двумя пустыми фреймами. Заметьте, что правую страницу мы назвали bases (это важно). К тому же, как Вы успели заметить, наш файл index.htm не имеет тела <BODY>. Фреймовая структура находится между открывающим тэгом <FRAMESET> и закрывающим </FRAMESET>. Между тэгами <NOFRAMES></NOFRAMES> находится текст, который будет отображен пользователю, если его Обозреватель не поддерживает фреймы. Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тэгами <NOFRAMES> и </NOFRAMES>. И наоборот, не поддерживающий фреймы Обозреватель проигнорирует все, что находится между тэгами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

    Теперь приступим к созданию меню - menu.htm:

    <!--Файл menu.htm-->
    <HTML>
    <HEAD>
    <!-Здесь мы определяем базовый элемент: присваиваем методу target значение bases. А это означает, что ссылки, находящиеся в этом документе должны открываться в окне, которое имеет имя bases. Данное окно расположено у нас в правой части фрейма.-->
    <base target="bases">
    <TITLE>Меню</TITLE>
    </HEAD>
    <BODY>

    <H5 ALIGN="left">Наше меню:</H5>
    <a href="base.htm">Главная</a><p>
    <a href="http://lenininc.narod.ru/">LENIN INC</a><br>
    <a href="http://www.listsoft.ru/">ListSoft</a><br>
    <a href="http://www.msdn.microsoft.com/">Microsoft MSDN</a>

    </BODY>
    </HTML>

    Нам осталось создать файл base.htm, который может содержать любой текст, например:

    <!--Файл base.htm-->
    <HTML>
    <HEAD>
    <TITLE>Главная страница</TITLE>
    </HEAD>
    <BODY>

    <H1 ALIGN="CENTER">Новости сайта:</H1>
    Ничего нового...

    </BODY>
    </HTML>

    А вот и результат нашей работы:

    Теперь давайте подробно рассмотрим тэги <FRAMESET> и <FRAME>.

    В тэге <FRAMESET> задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:

    по пикселям - просто напишите высоту или ширину в пикселах.

    процентами - пишите сколько процентов от окна Обозревателя вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши проценты в суме составляли 100%.

    звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.

    В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где X и Y толщина в пикселях.

    Синтаксис:

    <FRAMESET COLS="величины" ROWS="величины">

    В тэге <FRAME> задаются атрибуты для каждого фрейма персонально. Команда SRC задает имя файла который загрузится в этом фрейме. Команда NAME задает имя данного фрейма. Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. Также в этом тэге можно задать величину граници фрейма за которую ничего кроме фона не может заходить. Это делается командами MARGINWIDTH="X" и MARGINHEIGHT="Y", где X и Y величина в пикселях. Существует иногда очень нужный атрибут SCROLLING, который позволяет задавать наличие полос прокрутки у фрэйма. Может иметь значения: YES, NO или AUTO. И конечно же следует упомянуть о атрибуте NORESIZE. Он позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность.

    Синтаксис:

    <FRAME SRC="URL" NAME="имя фрейма" MARGINWIDTH="величина" MARGINHEIGHT="величина" SCROLLING="yes|no|auto" NORESIZE>

    Вот несколько примеров создания фреймов:

    * 140
            <FRAMESET cols="*,140">
    <FRAME SRC="homepage.htm" NAME="frame1">
    <FRAME SRC="menu.htm" NAME="frame2">
    </FRAMESET>
    100 *
            <FRAMESET cols="100,*">
    <FRAME SRC="homepage.htm" NAME="Frame1">
    <FRAME SRC="menu.htm" NAME="Frame2">
    </FRAMESET>
    100

    *
             <FRAMESET rows="100,*">
    <FRAME SRC="homepage.htm" NAME="Frame1">
    <FRAME SRC="menu.htm" NAME="Frame2">
    </FRAMESET>

    *
    60
            <FRAMESET rows="*,60">
    <FRAME SRC="homepage.htm" NAME="Frame1">
    <FRAME SRC="menu.htm" NAME="Frame2">
    </FRAMESET>

    *
    45% 55%
            <FRAMESET rows="*,60">
    <FRAME SRC="homepage.htm" NAME="Frame1">
    <FRAMESET cols="45%,55%">
    <FRAME SRC="menu.htm" NAME="Frame2">
    <FRAME SRC="menu2.htm" NAME="Frame3">
    </FRAMESET>
    </FRAMESET>
    * 15%
    15%

    70%
             <FRAMESET cols="*,55%">
    <FRAME SRC="homepage.htm" NAME="Frame1">
    <FRAMESET rows="15%,15%,70%">
    <FRAME SRC="menu.htm" NAME="Frame2">
    <FRAME SRC="menu2.htm" NAME="Frame3">
    <FRAME SRC="menu3.htm" NAME="Frame4">
    </FRAMESET>
    </FRAMESET>
    50% | 50%
50% | 50%
             <FRAMESET cols="50%,50%">
    <FRAMESET rows="50%,50%">
    <FRAME SRC="homepage.htm" NAME="Frame1">
    <FRAME SRC="homepage2.htm" NAME="Frame2">
    </FRAMESET>
    <FRAMESET rows="50%,50%">
    <FRAME SRC="menu.htm" NAME="Frame3">
    <FRAME SRC="menu2.htm" NAME="Frame4">
    </FRAMESET>
    </FRAMESET>


Звук и видео на страничке

    Звук и видео на страничке.

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

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

    Пример:

    <EMBED SRC="http://mymusick.ru/osen.mid" AUTOSTART="TRUE">

    Как всегда, тут не все так безоблачно, как хотелось бы. По своей давней традиции создатели Netscape и Explorer не договорились между собой, и потому в разных Обозревателях эта панель выглядит и, самое обидное, ведет себя по разному.

    Элемент <EMBED> может иметь следующие аттрибуты:

    WIDTH - ширина панели в пикселях (можно и в процентах);
HEIGHT - высота панели в пикселях (или процентах);
ALIGN - расположение панели относительно текста, возможные значения LEFT, RIGHT, CENTER;
HIDDEN - позволяет скрыть панель, значения аттрибута: TRUE - панель скрыта, FALSE - панель видима (значение по умолчанию);
AUTOSTART - значение TRUE - проигрыватель стартует автоматически, FALSE - ждет нажатия на кнопку "воспроизведение";
LOOP - цикл, т.е. при значении TRUE мелодия будет проигрываться по кругу, а при значении FALSE - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению TRUE.

    Пример:

    <EMBED SRC="http://mymusick.ru/osen.mid" WIDTH="70" HEIGHT="45" ALIGN="left" HIDDEN="False" AUTOSTART="False" LOOP="True">

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

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

    CONSOLE - панель обычного размера;
    SMALLCONSOLE - панель меньшего размера;
    PLAYBUTTON - вместо всей панели только кнопка "Воспроизведение";
    PAUSEBUTTON - вместо всей панели только кнопка "Пауза";
    STOPBUTTON - вместо всей панели только кнопка "Стоп";
    VOLUMELEVER - вместо всей панели только регулятор громкости.

    Элемент <EMBED> поддерживает звуковые файлы с расширениями MID, WAV, AIFF, AU, видеофайлы AVI, MOV.

    Элемент <BGSOUND> задает фоновый звук для страницы, т.е. звуковой фрагмент, который будет звучать сразу после загрузки страницы. Обозревателем Netscape не поддерживается. Может иметь аттрибут LOOP, определяющий количество повторов фрагмента. Пример использования:

    <BGSOUND SRC="http://mymusick.ru/osen.mid" LOOP="3">

    Ниже приводится программа, выводящая фоновый звук как в Internet Explorer'е, так и в Oper'e и Netscape Navigator'e (при наличии соответствующего плагина).

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var MSIE=navigator.userAgent.indexOf("MSIE");
    var NETS=navigator.userAgent.indexOf("Netscape");
    var OPER=navigator.userAgent.indexOf("Opera");
    if((MSIE>-1) || (OPER>-1)) {
    document.write("<BGSOUND SRC='    test.mid' LOOP='INFINITE'>");
    } else {
    document.write("<EMBED SRC='    test.mid' AUTOSTART='TRUE' ");
    document.write("HIDDEN='true' VOLUME='100' LOOP='TRUE'>");
    }
    // End -->
    </SCRIPT>

    По поводу вставки видео в HTML, то для этого можно воспользоваться тегом <IMG>.

    <IMG DYNSRC="http://myvideo.ru/fish.avi" SRC="http://myvideo.ru/error.gif" START="MOUSEOVER">

    Атрибут DYNSRC содержит имя видео файла, SRC - имя графического файла, который будет загружен, если видео файл не будет найден на сервере. Атрибут START указывает, при каком условии начинать воспроизведение: MOUSEOVER - если пользователь подвел курсор к изображению.


Flash на странице

    Flash на странице.

    Так называемый Flash-ролик содержится в .SFW файле, который создается в программе Flash. Flash-файл может содержать в себе мультимедийный документ, анимацию, векторную и растровую графику, звук, элементы управления, поддерживающие интерактивность. Для вставки Flash-ролика в HTML документ нужно воспользоваться следующей конструкцией:

    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="Ширина окна" HEIGHT="Высота окна" CODEBASE="http://active.macromedia.com/flash6/cabs/ 4>swflash.cab#version=6,0,0,0">
    <PARAM NAME="movie" VALUE="    Имя Flash файла (.swf)">
    <PARAM NAME="wmode" VALUE="    transparent">
    <PARAM NAME="quality" VALUE="    high">

    <EMBED src="Имя Flash файла (.swf)" quality="high" wmode="transparent" WIDTH="Ширина окна" HEIGHT="Высота окна" TYPE="application/x-shockwave-flash">
    </EMBED>

    </OBJECT>

    Тэг <OBJECT> содержит главный параметр - classid, который указывает на Flash-проигрыватель (элемент управления ActiveX). Параметр CODEBASE указывает, где в сети взять Flash-проигрыватель, если он у вас не установлен.

    Параметры объекта записываются в тэге <PARAM>. Параметр movie содержит имя .swf файла, wmode - определяет, каким будет фон Вашего ролика. В частности, значение transparent задает прозрачность фона. Параметр quality - указывает на качество воспроизведения. Все возможные значения параметров лучше всего посмотреть в справке к программе Flash. Но, по большому счету, здесь указаны самые применяемые.

    Как видите, здесь тег <EMBED> вложен внутрь тега <OBJECT>. Это сделано для поддержки Flash в разных Обозревателях - старых и новых. Если пользователь использует современный Обозреватель, то читается тэг <OBJECT>, затем тэги <param>, загружается компонент ActiveX, файл фильма и начинается его проигрывание. Тег <EMBED>, вложенный внутрь тега <OBJECT>, в этом случае игнорируется. Если же пользователь использует более старую версию Обозревателя, все происходит по-другому... Так как теги <OBJECT> и <param> не известны старым программам, они их игнорируют — это стандартное поведение Обозревателя, встретившего незнакомый тэг. В этом случае обрабатывается тег <EMBED>, пользователи, так или иначе, увидят на веб-странице фильм Flash.

    Почти в 99% случаев присутствие Flash затрудняет работу с Web-узлом. Хотя и встречаются редкие примеры хорошего Flash-дизайна (который даже улучшает узел), обычно Flash наоборот делает сайт неудобным для работы. В большинстве случаев, сайт бы только выигрывал, если бы на нем отсутствовали мультимедийные объекты. Flash ухудшает Web-узлы тремя путями: способствует появлению плохого дизайна, вступает в противоречия с фундаментальными принципами взаимодействия пользователя с Web, и поглощает ресурсы, которые могли бы быть использованы на улучшение содержания самого сайта. Это не мнение автора данной книги, а мнение специалистов.


    Что такое SSI?

    SSI (Server Side Includes) - включения на стороне сервера, а точнее это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые, кстати, называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия: например, вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа Обозревателя) и другие.

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

    Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: .shtml или .shtm, наличие которого и заставляет web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно .shtml.

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

    <!--#command param="value" -->

    # - признак начала SSI-вставки;
    command - SSI-команда;
    param - параметры SSI-команды.

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

    <!--#include virtual="/path/file.ssi" -->

    include - команда вставки;
    virtual - параметр, определяющий, как трактовать путь - как абсолютный (file) или как относительный (virtual);
    "/path/file.ssi" - путь к включаемому файлу.

    Результатом ее выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для Обозревателей, они получают исключительно корректный HTML-код.

    Следующая команда - это команда установки значения переменной:

    <!--#set var="pic" value="picture.gif"-->

    var - команда установки значения переменной;
    pic - имя переменной;
    picture.gif - значение переменной.

    В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определенной в ней переменной, мы получим различные результаты. Перед тем, как показать реальный пример использования переменных в SSI-включениях, рассмотрим некоторые команды, применяемые при работе с переменными. Во-первых, это команда печати значения переменной:

    <!--#echo var="pic" -->

    Ее выполнение приведет к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".

    Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст:

    <!--#set var="A" value="123" -->
    <!--#set var="B" value="$A456" -->

    После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".

    Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:

    <!--#if expr="condition" -->
    <!--#elif expr="condition" -->
    <!--#else -->
    <!--#endif -->

    condition - условие для сравнения.

    В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип Обозревателя пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих Обозревателях. Вот пример использования условного оператора:

    <!--#set var="Monday" -->
    <!--#if expr="$Monday " -->
    <p>Сегодня понедельник.</p>
    <!--#else -->
    <p>Что угодно, но не понедельник.</p>
    <!--#endif -->

    В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.

    Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа, полагая, что SSI-вставки находятся в каталоге /ssi:

    <!--Файл index.shtml-->
    <!--#set var="title" value="Что такое SSI?" -->
    <!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
    <!--#set var="description" value="Пример использования SSI." -->
    <!--#include virtual="ssi/header.shtml" -->
    <!--Здесь находится текст нашей странички-->
    <!--#include virtual="ssi/footer.shtml" -->

    <!--Файл header.shtml-->
    <html>
    <head>
    <title><!--#echo var="title" --></title>
    <meta name="keywords" content="<!--#echo var="keywords" -->">
    <meta name="description" content="<!--#echo var="description" -->">
    </head>
    <body>

    <!--Файл footer.shtml-->
    </body>
    </html>

    Как видите, основной документ предельно упрощен и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички. Реальный код SSI-вставок обычно гораздо сложнее и может включать в себя большее количество определяемых переменных и сложных условий, формирующих окончательный вид странички.

    Первое преимущество SSI с точки зрения дизайнера заключается в том, что при таком подходе web-мастеру, занимающемуся поддержкой сайта, можно не бояться случайно испортить дизайн. Элементы сложной верстки скрыты за счет использования SSI, и поддержка содержимого страничек становится гораздо более легким и приятным делом.

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


    Я создал сайт. Что дальше?

    Это, наверное, самый популярный вопрос, который возникает у начинающих WEB-прогриммистах. Ответ очень прост: Вам нужно найти хостинг! Хостинг - это место под сайт, которое предоставляют Интернет провайдеры. Хостинг бывает платным или бесплатным. Как правило бесплатный всегда со множеством ограничений, но для начала подойдет и такой:

    http://narod.ru/ - Здесь предоставляют неограниченное дисковое пространство, готовые варианты дизайна, счетчики, статистику посещений, гостевую книгу, персональный форум, чат и почтовый ящик - ИмяСайта@narod.ru. В определенной среде Народ.ру пользуется активной нелюбовью (отчасти, от того, что здесь нельзя дать прямой ссылки на файл, расположенный на данном хостинге). Без поддержки наворотов - скриптов и т.п.

    http://www.hut.ru/ - Здесь предоставляют неограниченное дисковое пространство, простой и легко запоминающийся адрес Вашего сайта: name.hut.ru. Вы можете использовать собственные PHP-скрипты, собственные cgi-скрипты, доступ к БД MySql, доступ к файлам .htaccess, .htpasswd, FTP-доступ и shell-аккаунт. Есть возможность использования директив SSI, доступ к лог-файлам, поддержка доменных имен второго уровня, удобный отдельный почтовый ящик, мощный сервер и быстрый канал.

    http://boom.ru/ - Здесь предоставляют 50 Мб, быстрое создание страниц по готовым шаблонам, возможность редактирования страниц в режиме онлайн, доступ к файлам и папкам как через веб-интерфейс, так и по FTP, возможность использования на своем сайте гостевой книги, голосования, счетчиков посещений, а также других сервисов Mail.ru. Если Ваш сайт нуждается в большем дисковом пространстве Вы сможете подать заявку администрации сайта на предоставление Вам нужного количества мегабайт.

    Естественно, компаний, предоставляющих хостинг, в сети достаточно много, поэтому не поленитесь поискать, может, найдете что-то получше.

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


Раскрутка сайта

    Раскрутка сайта.

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

    Список поисковых серверов:

    http://www.rambler.ru/
    http://www.yandex.ru/
    http://www.yahoo.com/
    http://www.aport.ru/
    http://www.altavista.com/
    http://www.hotbot.com/
    http://www.lycos.com/
    http://www.metacrawler.com/
    http://www.webcrawler.com/
    http://www.google.com/
    http://www.meta-ukraine.com/
    http://www.netfind.aol.com/
    http://www.pointer.ru/
    http://www.ulitka.ru/
    http://www.addme.com/


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

  • Базисные элементы (все документы HTML должны содержать их)
  • Определение структуры (вид задается параметрами программы-просмотрщика)
  • Внешний вид (определение внешнего вида текста)
  • Ссылки и графика
  • Разделители
  • Списки
  • Фон и цвета
  • Специальные символы
  • Формы
  • Таблицы
  • Фреймы (frames)
  • Язык Java
  • Разное

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

    Тип документа | <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)
    < &lt;
    > &gt;
    & &amp;
    " &quot;
    Торговая марка ТМ | &reg;
    Copyright | &copy;
    Неразделяющий пробел | &nbsp;

    Формы. Вверх

    Определить форму | <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>


Название цветов и их шестнадцатеричный вид

    Название цветов и их шестнадцатеричный вид.

    В верстке страниц Вы можете использовать как шестнадцатеричный код, так и названия цветов, Обозреватель нормально распознает и то и другое. Например, название красного цвета - red, в шестнадцатеричном виде этот же цвет будет #FF0000. В таблицах представлены названия цветов и их шестнадцатеричные значения:

    Color's name | Hex | Color
alicemblue | #F0F8FF |
antiquewhite | #FAEBD7 |
aqua | #00FFFF |
aquamarine | #7FFFD4 |
azure | #F0FFFF |
beige | #F5F5DC |
bisque | #FFE4C4 |
black | #000000 |
blanchedalmond | #FFEBCD |
blue | #0000FF |
blueviolet | #8A2BE2 |
brown | #A52A2A |
burlywood | #DEB887 |
cadetblue | #5F9EA0 |
chartreuse | #7FFF00 |
chocolate | #D2691E |
coral | #FF7F50 |
cornflowerblue | #6495ED |
cornsilk | #FFF8DC |
crimson | #DC143C |
cyan | #00FFFF |
darkblue | #00008B |
darkcyan | #008B8B |
darkgoldenrod | #B8860B |
darkgray | #A9A9A9 |
darkgreen | #006400 |
darkkhaki | #BDB76B |
darkmagenta | #8B008b |
darkolivegreen | #556B2F |
darkorange | #FF8C00 |
darkochid | #9932CC |
darkred | #8B0000 |
darksalmon | #E9967A |
darkseagreen | #8FBC8F |
darkslateblue | #483D8B |
darkslategray | #2F4F4F |
darkturquoise | #00CED1 |
darkviolet | #9400D3 |
deeppink | #FF1493 |
deepskyblue | #00BFFF |
dimgray | #696969 |
dodgerblue | #1E90FF |
firebrick | #B22222 |
floralwhite | #FFFAF0 |
forestgreen | #228B22 |
fushsia | #FF00FF |
gainsboro | #DCDCDC |
ghostwhite | #F8F8FF |
gold | #FFD700 |
goldenrod | #DAA520 |
gray | #808080 |
green | #008000 |
greenyellow | #ADFF2F |
honeydew | #F0FFF0 |
hotpink | #FF69B4 |
indiandred | #CD5C5C |
indigo | #4B0082 |
ivory | #FFFFF0 |
khaki | #F0E68C |
lavender | #E6E6FA |
lavenderblush | #FFF0F5 |
lawngreen | #7CFC00 |
lemonchiffon | #FFFACD |
ligtblue | #ADD8E6 |
lightcoral | #F08080 |
lightcyan | #E0FFFF |
lightgoldenrodyellow | #FAFAD2 |
lightgreen | #90EE90 |
lightgrey | #D3D3D3 |
lightpink | #FFB6C1 |
    Color's name | Hex | Color
lightsalmon | #FFA07A |
lightseagreen | #20B2AA |
lightscyblue | #87CEFA |
lightslategray | #778899 |
lightsteelblue | #B0C4DE |
lightyellow | #FFFFE0 |
lime | #00FF00 |
limegreen | #32CD32 |
linen | #FAF0E6 |
magenta | #FF00FF |
maroon | #800000 |
mediumaquamarine | #66CDAA |
mediumblue | #0000CD |
mediumorchid | #BA55D3 |
mediumpurple | #9370DB |
mediumseagreen | #3CB371 |
mediumslateblue | #7B68EE |
mediumspringgreen | #00FA9A |
mediumturquoise | #48D1CC |
medium violetred | #C71585 |
midnightblue | #191970 |
mintcream | #F5FFFA |
mistyrose | #FFE4E1 |
moccasin | #FFE4B5 |
navajowhite | #FFDEAD |
navy | #000080 |
oldlace | #FDF5E6 |
olive | #808000 |
olivedrab | #6B8E23 |
orange | #FFA500 |
orengered | #FF4500 |
orchid | #DA70D6 |
palegoldenrod | #EEE8AA |
palegreen | #98FB98 |
paleturquose | #AFEEEE |
palevioletred | #DB7093 |
papayawhop | #FFEFD5 |
peachpuff | #FFDAB9 |
peru | #CD853F |
pink | #FFC0CB |
plum | #DDA0DD |
powderblue | #B0E0E6 |
purple | #800080 |
red | #FF0000 |
rosybrown | #BC8F8F |
royalblue | #4169E1 |
saddlebrown | #8B4513 |
salmon | #FA8072 |
sandybrown | #F4A460 |
seagreen | #2E8B57 |
seashell | #FFF5EE |
sienna | #A0522D |
silver | #C0C0C0 |
skyblue | #87CEEB |
slateblue | #6A5ACD |
slategray | #708080 |
snow | #FFFAFA |
springgreen | #00FF7F |
steelblue | #4682B4 |
tan | #D2B48C |
teal | #008080 |
thistle | #D8BFD8 |
tomato | #FF6347 |
turquose | #40E0D0 |
violet | #EE82EE |
wheat | #F5DEB3 |
white | #FFFFFF |
whitesmoke | #F5F5F5 |
yellow | #FFFF00 |
yellowgreen | #9ACD32 |


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

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

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

    Вид | Код | Описание
Различные знаки
¡ | &#161; | перевернутый восклицательный знак
¢ | &#162; | цент
£ | &#163; | фунт стерлингов
¤ | &#164; | денежная единица
¥ | &#165; | иена или юань
¦ | &#166; | разорванная вертикальная черта
§ | &#167; | параграф
¨ | &#168; | diaeresis = spacing diaeresis
© | &#169; | знак copyright
ª | &#170; | feminine ordinal indicator
« | &#171; | левая двойная угловая скобка
¬ | &#172; | знак отрицания
 | &#173; | место возможного переноса
™ | &#153; | торговая марка
® | &#174; | знак зарегистрированной торговой марки
¯ | &#175; | macron = spacing macron = overline = APL overbar
° | &#176; | градус
± | &#177; | плюс-минус
² | &#178; | верхний индекс "два" - "квадрат"
³ | &#179; | верхний индекс "три" - "куб"
´ | &#180; | acute accent = spacing acute
µ | &#181; | микро
¶ | &#182; | pilcrow sign = paragraph sign
· | &#183; | middle dot = Georgian comma = Greek middle dot
¸ | &#184; | cedilla = spacing cedilla
¹ | &#185; | верхний индекс "один"
º | &#186; | masculine ordinal indicator
» | &#187; | правая двойная угловая скобка
¼ | &#188; | дробь - одна четверть
½ | &#189; | дробь - одна вторая
¾ | &#190; | дробь - три четверти
¿ | &#191; | перевернутый вопросительный знак
Латинский и греческий алфавит
À | &#192; | latin capital letter A with grave = latin capital letter A grave
Á | &#193; | latin capital letter A with acute
Â | &#194; | latin capital letter A with circumflex
Ã | &#195; | latin capital letter A with tilde
Ä | &#196; | latin capital letter A with diaeresis
Å | &#197; | latin capital letter A with ring above = latin capital letter A ring
Æ | &#198; | latin capital letter AE = latin capital ligature AE
Ç | &#199; | latin capital letter C with cedilla
È | &#200; | latin capital letter E with grave
É | &#201; | latin capital letter E with acute
Ê | &#202; | latin capital letter E with circumflex
Ë | &#203; | latin capital letter E with diaeresis
Ì | &#204; | latin capital letter I with grave
Í | &#205; | latin capital letter I with acute
Î | &#206; | latin capital letter I with circumflex
Ï | &#207; | latin capital letter I with diaeresis
Ð | &#208; | latin capital letter ETH
Ñ | &#209; | latin capital letter N with tilde
Ò | &#210; | latin capital letter O with grave
Ó | &#211; | latin capital letter O with acute
Ô | &#212; | latin capital letter O with circumflex
Õ | &#213; | latin capital letter O with tilde
Ö | &#214; | latin capital letter O with diaeresis
× | &#215; | знак умножения
Ø | &#216; | latin capital letter O with stroke = latin capital letter O slash
Ù | &#217; | latin capital letter U with grave
Ú | &#218; | latin capital letter U with acute
Û | &#219; | latin capital letter U with circumflex
Ü | &#220; | latin capital letter U with diaeresis
Ý | &#221; | latin capital letter Y with acute
Þ | &#222; | latin capital letter THORN
ß | &#223; | latin small letter sharp s = ess-zed
à | &#224; | latin small letter a with grave = latin small letter a grave
á | &#225; | latin small letter a with acute
â | &#226; | latin small letter a with circumflex
ã | &#227; | latin small letter a with tilde
ä | &#228; | latin small letter a with diaeresis
å | &#229; | latin small letter a with ring above = latin small letter a ring
æ | &#230; | latin small letter ae = latin small ligature ae
ç | &#231; | latin small letter c with cedilla
è | &#232; | latin small letter e with grave
é | &#233; | latin small letter e with acute
ê | &#234; | latin small letter e with circumflex
ë | &#235; | latin small letter e with diaeresis
ì | &#236; | latin small letter i with grave
í | &#237; | latin small letter i with acute
î | &#238; | latin small letter i with circumflex
ï | &#239; | latin small letter i with diaeresis
ð | &#240; | latin small letter eth
ñ | &#241; | latin small letter n with tilde
ò | &#242; | latin small letter o with grave
ó | &#243; | latin small letter o with acute
ô | &#244; | latin small letter o with circumflex
õ | &#245; | latin small letter o with tilde
ö | &#246; | latin small letter o with diaeresis
÷ | &#247; | знак деления
ø | &#248; | latin small letter o with stroke, = latin small letter o slash
ù | &#249; | latin small letter u with grave
ú | &#250; | latin small letter u with acute
û | &#251; | latin small letter u with circumflex
ü | &#252; | latin small letter u with diaeresis
ý | &#253; | latin small letter y with acute
þ | &#254; | latin small letter thorn
ÿ | &#255; | latin small letter y with diaeresis
Α | &#913; | греческая заглавная буква альфа
Β | &#914; | греческая заглавная буква бета
Γ | &#915; | греческая заглавная буква гамма
Δ | &#916; | греческая заглавная буква дельта
Ε | &#917; | греческая заглавная буква эпсилон
Ζ | &#918; | греческая заглавная буква дзета
Η | &#919; | греческая заглавная буква эта
Θ | &#920; | греческая заглавная буква тета
Ι | &#921; | греческая заглавная буква иота
Κ | &#922; | греческая заглавная буква каппа
Λ | &#923; | греческая заглавная буква лямбда
Μ | &#924; | греческая заглавная буква мю
Ν | &#925; | греческая заглавная буква ню
Ξ | &#926; | греческая заглавная буква кси
Ο | &#927; | греческая заглавная буква омикрон
Π | &#928; | греческая заглавная буква пи
Ρ | &#929; | греческая заглавная буква ро
Σ | &#931; | греческая заглавная буква сигма
Τ | &#932; | греческая заглавная буква тау
Υ | &#933; | греческая заглавная буква ипсилон
Φ | &#934; | греческая заглавная буква фи
Χ | &#935; | греческая заглавная буква хи
Ψ | &#936; | греческая заглавная буква пси
Ω | &#937; | греческая заглавная буква омега
α | &#945; | греческая строчная буква альфа
β | &#946; | греческая строчная буква бета
γ | &#947; | греческая строчная буква гамма
δ | &#948; | греческая строчная буква дельта
ε | &#949; | греческая строчная буква эпсилон
ζ | &#950; | греческая строчная буква дзета
η | &#951; | греческая строчная буква эта
θ | &#952; | греческая строчная буква тета
ι | &#953; | греческая строчная буква иота
κ | &#954; | греческая строчная буква каппа
λ | &#955; | греческая строчная буква лямбда
μ | &#956; | греческая строчная буква мю
ν | &#957; | греческая строчная буква ню
ξ | &#958; | греческая строчная буква кси
ο | &#959; | греческая строчная буква омикрон
π | &#960; | греческая строчная буква пи
ρ | &#961; | греческая строчная буква ро
ς | &#962; | греческая строчная буква сигма (final)
σ | &#963; | греческая строчная буква сигма
τ | &#964; | греческая строчная буква тау
υ | &#965; | греческая строчная буква ипсилон
φ | &#966; | греческая строчная буква фи
χ | &#967; | греческая строчная буква хи
ψ | &#968; | греческая строчная буква пси
ω | &#969; | греческая строчная буква омега
Знаки пунктуации
• | &#8226; | bullet - маленький черный кружок
… | &#8230; | многоточие ...
′ | &#8242; | одиночный штрих - минуты и футы
″ | &#8243; | двойной штрих - секунды и дюймы
‾ | &#8254; | надчеркивание
⁄ | &#8260; | косая дробная черта
Стрелки
← | &#8592; | стрелка влево
↑ | &#8593; | стрелка вверх
→ | &#8594; | стрелка вправо
↓ | &#8595; | стрелка вниз
↔ | &#8596; | стрелка влево-вправо
Математические операторы
ƒ | &#402; | latin small f with hook = знак функции = florin
∂ | &#8706; | частный дифференциал
∏ | &#8719; | произведение последовательности - знак произведения
∑ | &#8721; | сумма последовательности
− | &#8722; | минус
√ | &#8730; | квадратный корень
∞ | &#8734; | бесконечность
∩ | &#8745; | пересечение - cap
∫ | &#8747; | интеграл
≈ | &#8776; | почти равно - асимптотически стремится
≠ | &#8800; | не равно
≡ | &#8801; | тождественно
≤ | &#8804; | меньше либо равно
≥ | &#8805; | больше либо равно
Прочие символы
◊ | &#9674; | lozenge
♠ | &#9824; | черный знак масти "пики"
♣ | &#9827; | черный знак масти "трефы" - shamrock
♥ | &#9829; | черный знак масти "червы" - valentine
" | &#34; | двойная кавычка - APL quote
& | &#38; | ampersand
< | &#60; | знак "меньше"
> | &#62; | знак "больше"
Œ | &#338; | латинская заглавная лигатура OE
œ | &#339; | латинская строчная лигатура oe
Š | &#352; | latin capital letter S with caron
š | &#353; | latin small letter s with caron
Ÿ | &#376; | latin capital letter Y with diaeresis
ˆ | &#710; | modifier letter circumflex accent
˜ | &#732; | small tilde
‌ | &#8204; | zero width non-joiner
‍ | &#8205; | zero width joiner
– | &#8211; | en dash
— | &#8212; | em dash
‘ | &#8216; | левая одиночная кавычка
’ | &#8217; | правая одиночная кавычка
‚ | &#8218; | нижняя одиночная кавычка
“ | &#8220; | левая двойная кавычка
” | &#8221; | правая двойная кавычка
„ | &#8222; | нижняя двойная кавычка
† | &#8224; | кинжал (крест)
‡ | &#8225; | двойной кинжал (крест)
‰ | &#8240; | промилле
‹ | &#8249; | левая угловая одиночная кавычка
› | &#8250; | правая угловая одиночная кавычка
€ | &#8364; | валюта евро


 Курсоры
    Курсоры.

    Здесь представлены курсоры, которые Вы можете использовать на своих страницах.

    cursor:crosshair | <span style=CURSOR:crosshair;>Графическое выделение</span>
cursor:move | <span style=CURSOR:move;>Перемещение</span>
cursor:e-resize | <span style=CURSOR:e-resize;>Стрелка вправо</span>
cursor:ne-resize | <span style=CURSOR:ne-resize;>Обычный режим (зеркальный)</span>
cursor:nw-resize | <span style=CURSOR:nw-resize;>Обычный режим</span>
cursor:n-resize | <span style=CURSOR:n-resize;>Стрелка вверх</span>
cursor:sw-resize | <span style=CURSOR:sw-resize;>Обычный режим (перевернутый)</span>
cursor:se-resize | <span style=CURSOR:se-resize;>Обычный режим (перевернутый, зеркальный)</span>
cursor:s-resize | <span style=CURSOR:s-resize;>Стрелка вниз</span>
cursor:w-resize | <span style=CURSOR:w-resize;>Стрелка влево</span>
cursor:text | <span style=CURSOR:text;>Выделение текста</span>
cursor:wait | <span style=CURSOR:wait;>Система недоступна</span>
cursor:help | <span style=CURSOR:help;>Выбор справки</span>


 Фильтры, применяемые к тексту
    Фильтры, применяемые к тексту.

  • Фильтр Mask (Выделяет текст)
  • Фильтр Shadow (Cоздает тень)
  • Фильтр DropShadow (Еще один вид тени)
  • Фильтр FlipH (Переворачивает текст горизонтально)
  • Фильтр FlipV (Переворачивает текст вертикально)
  • Фильтр Glow (Сияющий текст)
  • Фильтр Wave (Волнистый текст)
  • Фильтр Blur (Размытие текста)

    Фильтр 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>

    Пример

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

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

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

    Пример:
    <P STYLE="filter:DropShadow(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 (Осветвление изображение)
  • Фильтр Blur (Размазытие изображения)
  • Фильтр Invert (Инверсия изображения)
  • Фильтр Gray (Черно-белое изображение)
  • Фильтр Chroma (Определенный цвет делается прозрачным)
  • Фильтр XRay (Негативное изображение)
  • Фильтр RevealTrans (Появление изображения)

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

    Фильтр 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 и т.д.


Полоса прокрутки Обозревателя своим цветом

    Полоса прокрутки Обозревателя своим цветом.

    Иногда, попадая на какой-то сайт, цвет прокрутки Обозревателя меняется (если Ваш обозреватель Internet Explorer версии не ниже 5.5). Создают такой эффект - стили (CSS). На сегодняшний день существуют восемь атрибутов, которыми можно задавать различные параметры прокрутки:

    scrollbar-3d-light-color - цвет контуров (окантовки) прокрутки
    scrollbar-arrow-color - цвет стрелочек на полосе вертикальной прокрутки
    scrollbar-base-color - базовый цвет прокрутки (фон)
    scrollbar-dark-shadow-color - тень прокрутки (более затемненная)
    scrollbar-face-color - цвет прокрутки
    scrollbar-highlight-color - цвет полос, по которым движется прокрутка (фон)
    scrollbar-shadow-color - тень прокрутки (обычная)
    scrollbar-track-color - цвет полос, по которым движется прокрутка

    Чтобы изменить цвет прокрутки, поместите (не обязательно все атрибуты) их в тэге <BODY>, а в качестве значений присвойте шестнадцатеричный вид цвета или его название на английском языке:

    <body style="scrollbar-3d-light-color: #000000; scrollbar-arrow-color: #F2F5FF; scrollbar-base-color: #F2F5FF; scrollbar-dark-shadow-color: #000000; scrollbar-face-color: #475059; scrollbar-highlight-color: #B8C2CC; scrollbar-shadow-color: #B8C2CC; scrollbar-track-color: #262D34;">

    В создание цветовой гаммы прокруток Вам сможет помочь данная программа:

    LENIN INC Scrollbar Color Wizard v1.0
    CSS HEX
    Здесь Вы увидите результат своих стараний...

    scrollbar-3d-light-color:
    scrollbar-arrow-color:
    scrollbar-base-color:
    scrollbar-dark-shadow-color:
    scrollbar-face-color:
    scrollbar-highlight-color:
    scrollbar-shadow-color:
    scrollbar-track-color:

    © 2001 by Vladimir Drigalkin (LENIN INC)


Новые окна

    Новые окна.

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

    Примечание: Вычеркните элемент по умолчанию http:// и можете смело нажимать кнопку Предпросмотр - будут отображаться пустые окна.

    LENIN INC Windows creater v1.0

    URL:
    Ширина окна:
    Высота окна:
    Имя ссылки:
    Панель инструментов:
    Адрес:
    Ссылки:
    Строка состояния:
    Меню:
    Прокрутки:
    Растягивание мышью:

    © 2002 by Vladimir Drigalkin (LENIN INC)


Свой значек сайта

    Свой значек сайта.

    Многим интерестно, каким образом некоторые сайты имеют собственный значек в Избранном? Я тоже хочу, если это не очень сложно! На самом деле это элементарно, ведь все это делает Microsoft Internet Explorer (не ниже версии 5.0). Каждый раз, когда кто-нибудь добавляет ваш сайт в Избранное, он (Internet Explorer) автоматически ищет на сервере файл favicon.ico. Если его нет - использует по умолчанию свой значек.

    Свой значок сайта

    Все что Вам нужно сделать для этого, так это загрузить в корневой каталог, где у Вас помещена главная страница, файл favicon.ico. Рекомендуемые параметры файла favicon.ico: 16х16 пикселей; 16 цветов. Однако, можно создать значек с размерами 32х32 и 48х48 пикселей. В этих случаях Internet Explorer сам изменит размеры значка.

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

    <LINK REL="SHORTCUT ICON" href="URL">

    Здесь URL - путь к Вашему значку на сервере, например, http://lenininc.narod.ru/icons/favicon.ico Кроме того, если вы считаете, что пользователь может занести в "Избранное" не только корневой URL вашего сайта, то скопируйте файл favicon.ico во все директории сайта.


    Что такое FTP?

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

    FTP (File Transfer Protocol) - протокол передачи файлов. FTP используется для передачи файлов с одной машины на другую. Если вы имеете подключение к интернету, вы можете получить доступ к большому колическву информации, расположенной в различных уголках сети. Для использования FTP необходим т.н. FTP-клиент, подключающийся к FTP-серверу (откуда вы хотите скачать файлы, или наоборот, хотите закачать туда файлы). Анонимный FTP позволяет подключаться к серверу, не имея на нем личных логина и пароля. Как правило, в качестве логина указывается "anonymous", а в качестве пароля - ваш e-mail. Это делается на больших серверах, для того, чтобы каждый мог скачать, какие-нибудь полезные программы.

    Для того, чтобы начать пользоваться ftp скачайте какой-нибудь ftp-клиент, например Cute FTP, WsFTP. В дальнейшем все пояснения даны для программы WsFTP. После запуска вы видите два окошка - одно (слева) содержит содержимое вашего диска, другое пустует. Для соединения с сервером нажмите кноку connect (слева снизу). Вам предложат ввести:

    1. Profile Name - не имеет значения что вы введете. Эта функция используется для того, чтобы в будущем вам не потребовалось заново вводить параметры этого сервера 2. Host Name/Address - введите адрес удаленного компьютера, например, ftp.netscape.com 3. Host Type - если вы читаете эту статью, то вам лучше использовать Automatic Detect 4. User ID - ваш логин на этом сервере. Например, anonymous. 5. Password - пароль, соответствующий логину. Для логина anonymous это нечто, содержащее "собачку". 6. Account и Comment - попробуйте оставить пустыми

    После этого нажмите кнопку ОК. Если все нормально - пропустите этот параграф. Если соединение не установилось (в правом окошке пусто), попробуйте повторить процедуру, перед нажатием кнопки ОК заглянув на другие вкладки: Startup, Advanced, Firewall. Startup определяет, в какой папке вы будете находиться после соединения - пропустите эту вкладку. Во вкладке Advanced:

    1. Connection Retry - сколько раз WsFTP будет пытаться соединиться с сервером. 2. Network Tiomeout - сколько времени ждать ответа от сервера 3. Remote Port - порт, к которому подключаться на сервере, по умолчанию 21, если требуется подключиться к другому порту, обычно это объясняется там, где вы узнали про сервер. Если вы хотите использовать ссылку типа ftp://ftp.netscape.com:25 FTP-клиентом, установите в этом поле значение 25. 4. Passive Transfers - Попробуйте в двух положениях. Некоторые настройки сети требуют установки галочки.

    Далее идет вкладка Firewall. Если вы не используете прокси - уберите галочку рядом с надписью "Use Firewall". Если используете - установите эту галочку. Если вы не знаете настроек своего прокси - посмотрите их в настройках Обозревателя - у Netscape это меню Edit|Preferences, там Advanced|Proxies, у IE - "Свойства обозревателя" (в меню Сервис), Подключение - Настройка сети - Дополнительно, там вас интересует пункт в). Перепишите данные оттуда в настройки FTP клиента. FireWall Type можно узнать либо перебором, либо спросив у предоставившего вам доступ. После этого жмите ОК. Если соединение не установилось - проверьте, подсоединен ли ваш компьютер к интернету или позовите специалиста.

    Итак, допустим, что соединение установлено, в правом окошке появилось содержимое удаленного компьютера. Изменение папки, в которой вы находитесь, достигается нажатием на кнопку "ChgDir" рядом с соответствующим окошком (то есть для измениения локальной папки с C:\Windows на C:\Dos нажмите кнопку справа от левого окошка и введите C:\Dos; для изменения папки на удаленном компьютере используется аналогичная кнопка справа от правого окошка. Вообще левый ряд кнопок соответствует локальному компьютеру, а правый - удаленному). Чтобы передать файл, отметьте его мышкой (использование клавиш Shift и Ctrl для выбора нескольких файлов допускается) и нажмите стрелочку (между окошками) соответствующего направления - слева направо - на сервер, справа налево - с сервера. Кнопки View и Exec используются для просмотра файла в текстовом редакторе и запуска (если это .exe или .com файл). Delete удаляет выделенные файлы, refresh обновляет список файлов. Для отсоединения от сервера нажмите ту же кнопку, что нажимали для соединения - теперь на ней написано Disconnect.

    Следует также заметить, что для скачивания файлов достаточно Обозревателя. Чтобы использовать Обозреватель для соединения, наберите вместо URL что-то типа

    ftp://user:password@host.at.domain:port

    Где user и password - логин и пароль, host.at.domain - имя сервера, а port - порт для доступа (можно не набирать, тогда по умолчанию ставится 21). Если вы используете anonymous FTP, достаточно набрать только

    ftp://host.at.domain:port

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


Полезные советы Web-мастеру

    Полезные советы Web-мастеру.

    1. Размер каждой загружаемой страницы не должен превышать 30К. Если ваша страница требует длительной загрузки, предупредите об этом посетителей.

    2. Избегайте крупных изображений и апплетов, они долго грузяться.

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

    4. Для ускорения загрузки страниц применяйте в изображениях теги HEIGHT, WIDTH и ALT.

    5. По общепринятым нормам баннер размером 468х60 рiх (пикселей) не должен превышать 15-20 Кб.

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

    7. Регулярно проверяйте свои ссылки на работоспособность.

    8. Если на изображении сотни цветов или оно имеет фотографическое качество пользуйтесь форматом JPEG. Он обеспечивает меньший размер файла для таких изображений. Если же это изображения с крупными монотонными областями или текстом, пользуйтесь форматом GIF, так как JPEG пачкает цвета и смазывает текст.

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

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

    11. Если Обозреватель игнорирует регистр букв в тэгах, то это не значит, что тоже происходит и с файлами на сервере. Например, загрузив на сервер файл с именем Example.zip, а в HTML документе указав ссылку на него - example.zip, может появится ошибка, что файл не найден. Поэтому старайтесь все ссылки на файлы указывать в нижнем или верхнем регистре. Естественно, такой эффект наблюдается не на всех серверах.


CGI хостинг без рекламы

    CGI хостинг без рекламы.

    Предположим, что какой-нибудь несознательный хостер вставляет назойливую рекламу в Ваши страницы (дописывает после тэга </html>) . Можно помешать этому, дописав в конец тэг <noscript>, но на хостингах с cgi-доступом это не пройдет, скрипт хостера обнаружит <noscript> и закроет тэг методом </noscript>. Выход есть - "спрячьте" от их скрипта свои тэги. Испытано на всех известных сайтах. Один из вариантов обхода:

    <killbanner>
    <HTML>
    <BODY ...>
    </BODY>
    </HTML>
    <script language="JavaScript">
    // <!--
    document.write("<script language='vbs script'>")
    //-->
    </script>


Обрабатываем сообщения об ошибках

    Обрабатываем сообщения об ошибках.

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

    Наполняя свою страничку полезной информацией Вы не застрахованы от того, что какой-нибудь посетитель оставит где-то ссылку на конкретный файл Вашего сайта. Сколько эта ссылка будет там храниться никому не известно, но рано или поздно кто-то по ней обязательно придет, а Вы можете переместить этот файл куда угодно. Человек, который жаждил увидеть Вашу страничку получит лишь предупреждение об ошибке. Рядовой пользователь просто закроет Обозреватель или пойдет в другое место. Этого посетителя Вы вероятно не сможете никак вернуть.

    Но веб-сервер Apache (не столь критично под какой системой работает сервер, т.е. NT или разновидности Unix'a, если стоит Apache, то скорее всего у вас будет этот же файл в той же директории) позволяет поменять стандартное сообщение об ошибке на свое собственное. В нем Вы естественно нормальным языком (на родном желательно) объясните посетителю, что файл перемещен, начните поиск с главной страницы. Увидев такое сообщение посетитель сможет перейти на главную страницу сайта или написать письмо автору или веб-мастеру. Теперь он просто так не уйдет от Вас.

    Делается это следующим образом. В корневом каталоге сайта существует файла .htaccess. Если его нет, то создайте. В него Вы можете написать команды следующего типа:

    ErrorDocument <номер ошибки протокола http> <URL страницы с сообщением>

    Таким образом Вы можете прописать все стандартные ошибки протокола. Например, для ошибки отсутствия ресурса можно написать так:

    ErrorDocument 404 http://www.yoursite.ru/error404.html

    В файл error404.html Вам придется написать сообщение об ошибке 404, указать адрес главной своей страницы и т.п.


Расшифровка сообщений об ошибках

    Расшифровка сообщений об ошибках.

    403 Forbidden Pages. Доступ к этим страницам закрыт. Области, отвечающие таким сообщением, обычно доступны - но не для вас. Возможно, вы не знаете пароля или ошиблись при его наборе.

    404 Not Found. Не найдено. Удалите из адреса все, что стоит за последней косой чертой. Если автор не включил страницу index.html, вы увидите список страниц.

    503 Service Unavailable. Служба недоступна. Это сообщение означает, что нужная вам страница, вероятно, существует, но в данный момент недоступна. Попытайтесь еще раз, секунд через тридцать.

    Host Unknown. Неизвестный хост. Некоторые сайты перемещаются, не оставляя новых адресов. Проверьте, есть ли данное имя домена на www.4domains.com, и попробуйте один или оба указанных рядом с ним цифровых адресов.

    File Contains No Data. Файл не содержит данных. Это сообщение означает, что страница существует, но в настоящее время пуста. Обратитесь к ней позднее: там могут появиться новые данные.

    Too Many Connections - Try Again Later. Слишком много соединений - попробуйте еще раз. Чтобы исправить эту ошибку, просто щелкайте по кнопке Обновить (Refresh) Обозревателя до тех пор, пока не найдется свободный канал и страница не загрузится.


 JavaScript
    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 и не может быть открыто самостоятельно!\n\n Загрузить стартовую страницу?')) 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>


Всплывающие окна

    Всплывающие окна.

    Сколько не блуждал я просторами Интернета, но ни у кого на сайте не видел всплывающих окон, созданных с помощью метода TextPopup HTML Help ActiveX control. А ведь это самый простой, корректный и эффективный способ для вывода небольших комментариев, разъяснительной информации:

    Пример всплывающего окна в HTML документе

    Синтаксис метода TextPopup:

    TextPopup(pszText, pszFont, horzMargins, vertMargins, clrForeground, clrBackground)

    pszText | Текст, который будет отображен во всплывающем окне.
    pszFont Атрибуты шрифта, которые указываются в таком порядке:
    • Название шрифта
    • Размер шрифта
    • Кодировка символов шрифта(если не указывать, будет использована кодировка текущей страницы)
    • Начертание шрифта (может иметь элементы: PLAIN - обычный текст, BOLD - жирный, ITALIC - курсив и UNDERLINE - подчеркнутый)
    Пример:

    "Verdana,8,,BOLD"

    horzMargins | Размер окна по горизонтали.
    vertMargins | Размер окна по вертикали.
    clrForeground | Цвет текста в RRGGBB формате. По умолчанию черный (-1).
    clrBackground | Цвет фона всплывающего окна. По умолчанию ярко-желтый (-1).

    Итак, атрибуты мы рассмотрели, теперь можно приступить к созданию всплывающего окна:

    <!--Специальный идентификатор-->
    <OBJECT id=test type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"></OBJECT>

    <!--JavaScript, который назначает текстовую и шрифтовую переменные-->
    <script>
    FontFace="    Verdana,8,,bold"
    TopicText="    Пример всплывающего окна. Это окно может отобразить только текст."
    TopicText2="    Здесь текст другого всплывающего окна."
    </script>

    <!--Отображение всплывающего окна с текстом TopicText и со стандартным фоном-->
    <a href="JavaScript:test.TextPopup(TopicText, FontFace, 10,10,-1,-1)" title="Нажмите меня..."> Пример всплывающей подсказки 1 </a>

    <!--Отображение всплывающего окна с текстом TopicText2 и с белым фоном-->
    <a href="JavaScript:test.TextPopup(TopicText2, FontFace, 10,10,10,10)" title="Нажмите меня..."> Пример всплывающей подсказки 2 </a>

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


 Кнопки
    Кнопки.

  • Добавить в Избранное.
  • Сделать страницу стартовой.
  • История посещений (Назад/Вперед).
  • Перезагрузка страницы.
  • Кнопка-ссылка.
  • Сообщение в окне.
  • Сообщение в статусной строке.
  • Изменение фонового цвета страницы.
  • Открытие нового окна.
  • Просмотр в виде 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="ReloadButton()">
    <script>
    function ReloadButton()
    {
    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 cоздатель ссылок для открытия новых окон с определенными параметрами.

    Просмотр в виде 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 соответственно).

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

    <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'" - цвет текста, когда курсор мыши покидает кнопку.


 Запрещающие JavaScripts
    Запрещающие JavaScripts.

    На этой странице представлены скрипты, которые запрещают пользователю выполнять какие-то действия с электронным документом.

    Данный код запрешает пользователю распечатать страницу на принтере. Разместите его в странице между тегами <HEAD></HEAD>. Если Вы используете стили, НЕ помещайте этот код к их описаниям.
    <STYLE media=print>
    BODY {display: none}
    </STYLE>

    Данный Script запрещает пользователю производить копирование с сайта.
    //Впишите эту строку в открывающийся тег BODY
    <BODY oncopy="return notcopy()">

    <SCRIPT language=JavaScript>
    <!-- // JavaScript Archive
    function notcopy(){
    //Здесь Вы вводите свой текст
    alert("Извините,\nно с этой страницы нельзя \nничего cкопировать!")
    return false }
    // --></SCRIPT>


 Простые вредоносные JavaScripts
    Простые вредоносные JavaScripts.

    На этой странице собраны скрипты, которые создают небольшие проблемы пользователю, в основном подвешивают Обозреватель Интернета. Нанести какой-либо серьезный ущерб программному обеспечению они не могут.

    Script открывает одновременно огромное колличество окон на машине пользователя, что приводит к зависанию Обозревателя. Имя HTML документа, в котором Вы разместите данный скрипт, и имя, выделеное красным (DieScript.htm), должны совпадать.
    <script>
    now();
    function now() {for (i=1;i>0;i++){open('DieScript.htm','new'+i);}}
    </script>

    Scripts вешает текущее окно Обозревателя и выводит сообщение ERROR !. После этого пользователь может продолжать работать, но это окно ему будет недоступно.
    <script>
    { while ( true ) window.alert('ERROR !'); }
    </script>

    Scripts вызывает неустранимую ошибку. Это баг операционной системы Windows. После этого пользователю прийдеться перезагрузить машину для возобновления нормальной работы системы.
    <body background=con\con>

    Scripts трясет окно Обозревателя. Чтобы избавится от враждебности этого скрипта нужно переключится на другое окно Обозревателя, а затем вернутся назад.
    <!-- Добавьте первую строку в тег body -->
    <body onloaD="MM_callJS('shake();')">

    <script language="JavaScript1.2">
    <!--
    <!-- Begin
    function shake() {
    n=100;
    for (i = 10; i > 0; i--) {
    for (j = n; j > 0; j--) {
    self.moveBy(0,i);
    self.moveBy(i,0);
    self.moveBy(0,-i);
    self.moveBy(-i,0);
    }
    }
    }
    // End -->
    function MM_callJS(jsStr) { file://v2.0
    return eval(jsStr)
    }
    // I own jo0 -->
    </script>


JavaApplets

    JavaApplets.

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

    Для запуска апплета существует определенная конструкция:

    <applet code="Имя файла (.class)" width="Ширина окна" height="Высота окна">
    </applet>

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

    CODE - обязательный атрибут, задающий имя файла апплета. Имя файла задается относительно атрибута codebase, то есть либо от текущего каталога, либо от каталога, указанного в атрибуте CODEBASE.

    OBJECT - Указывает имя файла, содержащего сериализованный апплет, из которого последний будет восстановлен. Для апплета необходимо задать либо атрибут CODE, либо атрибут OBJECT, но задавать эти атрибуты одновременно нельзя.

    WIDTH и HEIGHT - Ширина и высота соответственно, обязательные атрибуты, задающие начальный размер видимой области апплета.

    ARCHIVE - Задает список jar-файлов (разделяется запятыми), которые предварительно загружаются в Обозреватель. В этих архивных файлах могут содержаться файлы классов, изображения, звуки и любые другие ресурсы, необходимые апплету. Для создания архивов используется утилита JAR, синтаксис вызова которой следующий:

    jar cf soundmap.jar *.class image.gif sound.wav

    Очевидно, что передача сжатых jar-файлов повышает эффективность работы. Поэтому многие средства разработки (Lotus JavaBeans, Borland JBuilder) уже имеют средства для публикации апплетов в виде jar-файлов.

    CODEBASE - необязательный атрибут, задающий базовый URL кода апплета, являющийся каталогом, в котором будет выполняться поиск исполняемого файла апплета (задаваемого в признаке CODE). Если этот атрибут не задан, по умолчанию используется текущий каталог. CODEBASE не обязательно должен указывать на тот же узел, с которого был загружен HTML-документ.

    ALT - необязательный атрибут, задающий короткое текстовое сообщение, которое должно быть выведено в том случае, если используемый Обозреватель распознает синтаксис тэга <applet>, но выполнять апплеты не умеет. Это не то же самое, что HTML-текст, который можно вставлять между <applet> и </applet> для Обозревателей, вообще не поддерживающих апплетов.

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

    ALIGN - необязательный атрибут, задающий стиль выравнивания апплета. Этот атрибут трактуется так же, как в тэге <IMG>, возможные его значения - LEFT, RIGHT, TOP, TEXTTOP, MIDDLE, ABSMIDDLE, BASELINE, BOTTOM, ABSBOTTOM.

    VSPACE и HSPACE - необязательные атрибуты, задают ширину свободного пространства в пикселях сверху и снизу апплета (VSPACE), и слева и справа от него (HSPACE). Они трактуются точно так же, как одноименные атрибуты тэга <IMG>.

    Между тегами <applet> и </applet> может присутствовать тег <PARAM>. Он дает возможность передавать из HTML-страницы апплету необходимые ему аргументы: имя шрифта, его размер, звуковые файлы и т.п. Нет необходимости перечислять параметры данного тэга, особенно, если Вы не намерены создавать JavaApplets, а просто будете загружать их с какого-то сайта. В этом случае ищите код, описание параметров в архиве с апплетом. Разработчики всегда помещают пример использования апплета, иногда описание его параметров, в которых и так не трудно будет разобраться, зная английский язык. Если же Вы намерены создавать свои апплеты, то читайте справочный файл программы, в которой Вы это будете делать. Там будет все подробно рассказано...


Текстовое меню с подсветкой

    Текстовое меню с подсветкой.

    Все мы видели сотни сайтов, которые используют меню с подсветкой, построенные из изображений. Это красиво, но грузятся такие сайты долго, особенно на наших медленных линиях. Есть замечательное решение - использовать каскадные таблицы стилей (CSS).

    LENIN INC
    Microsoft MSDN
    List SOFT

    Для создания такого меню нужно подготовить описание классов для нормального и выделенного его пунктов:

    <STYLE TYPE="text/css">
    TD.normal{color: black; font-weight: bold; background: #DDDDDD; cursor: hand;}
    TD.selected{color: white; font-weight: bold; background: navy; cursor: hand; }
    </STYLE>

    Далее напишем небольшую программу (Script), которая будет открывать ссылки:

    <SCRIPT LANGUAGE="JavaScript">
    function doClick(url)
    {
    location.href=url.id;
    }
    </SCRIPT>

    А теперь приступим к созданию самого меню:

    <table width="150" cellspacing=1 cellpadding=3 align=left bgcolor=navy border=5> <tr><td class=normal id="http://lenininc.narod.ru/" onMouseOver="this.className='selected'" onClick=doClick(this) onMouseOut="this.className='normal'"><font size=2>LENIN INC</font></td></tr><tr>

    <td class=normal id="http://www.msdn.microsoft.com/default.asp" onMouseOver="this.className='selected'" onClick=doClick(this) onMouseOut="this.className='normal'"><font size=2>Microsoft MSDN</font></td></tr>

    <tr><td class=normal id="http://www.listsoft.ru/" onMouseOver="this.className='selected'" onClick=doClick(this) onMouseOut="this.className='normal'"><font size=2>List SOFT</font></td></tr>
    </table>

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

    ONMOUSEOVER - вызывается, когда указатель мыши находиться над ячейкой. Устанавливает класс "selected" для этой ячейки;

    ONMOUSEOUT - вызывается, когда указатель мыши покидает пределы ячейки. Устанавливает класс "normal".

    Эти два обработчика и создают эффект подсветки. Кроме того мы установили обработчик нажатия на кнопку мыши: ONCLICK. Он вызывает функцию doClik(), которая в данном случае переходит по адресу, указанному в идентификаторе ID.


Кнопочное меню

    Кнопочное меню.

    Вы можете создать довольное неплохое активное кнопочное меню:

    LENIN INC
    List SOFT
    Microsoft MSDN

    Для создания такого меню нужно описать стили:

    <style>
    .nav {font-family:verdana,arial; font-size:8pt; font-weight:bold; border-right: green solid 2px; border-left: green solid 1px; border-bottom: green solid 2px; border-top: green solid 1px; background: chartreuse; height:20px; cursor:hand}
    .nav_over {font-family:verdana,arial; font-size:8pt; font-weight:bold; border-right: green solid 1px; border-left: green solid 2px; border-bottom: green solid 1px; border-top: green solid 2px; background: #FFFF00; height:20px; cursor:hand}
    </style>

    После этого можно приступить к созданию самого меню:

    <table cellspacing="3" cellpadding="2" border="0">
    <tr>
    <td class="nav" onMouseover="this.className='nav_over'" onMouseout="this.className='nav'" onClick="location.href='    http://lenininc.narod.ru/'">
    LENIN INC
    </td>
    </tr>

    <tr>
    <td class="nav" onMouseover="this.className='nav_over'" onMouseout="this.className='nav'" onClick="location.href='    http://www.listsoft.ru/'">
    List SOFT
    </td>
    </tr>

    <tr>
    <td class="nav" onMouseover="this.className='nav_over'" onMouseout="this.className='nav'" onClick="location.href='    http://www.msdn.microsoft.com/default.asp'">
    Microsoft MSDN
    </td>
    </tr>
    </tr>
    </table>


Плоские кнопки (меню)

    Плоские кнопки (меню).

    <style type="text/css">
    <!--
    a:link, a:visited, a:active, a:hover{text-decoration:none}
    //-->
    </style>

    <script language="JavaScript">
    <!--
    if (!document.layers){
    //Размеры и цвета
    Width=100;
    Font='Verdana';
    FontSize=12;
    AFontColor='#ffffff';
    BFontColor='#ffffff';
    CFontColor='#ffffff';
    FontWeight='normal';     //normal или bold
    BackGround='#0080ff'; //Цвет кнопок
    BorderDepth=1;
    BorderLight='#00ccff';
    BorderShad='#000000';
    function On(id){
    with(id.style){
    color=BFontColor;
    borderTopColor=BorderLight; borderLeftColor=BorderLight;
    borderRightColor=BorderShad; borderBottomColor=BorderShad;}
    }
    function Off(id){
    with(id.style){
    color=AFontColor;
    borderTopColor=BackGround; borderLeftColor=BackGround;
    borderRightColor=BackGround; borderBottomColor=BackGround;}
    }
    function Down(id){
    with(id.style){
    color=CFontColor;
    borderTopColor=BorderShad; borderLeftColor=BorderShad;
    borderRightColor=BorderLight; borderBottomColor=BorderLight;}
    }
    function Link(Url,Txt){
    document.write("<a href='"+Url+"'>"
    +"<div style='position:relative;"
    +"width:"+Width+"px;height:"+FontSize+"px;"
    +"border-width:"+BorderDepth+"px;"
    +"border-color:"+BackGround+";"
    +"border-style:solid;"
    +"padding:"+FontSize/3+"px;"
    +"background:"+BackGround+";"
    +"font-family:"+Font+";"
    +"font-size:"+FontSize+"px;"
    +"line-height:"+FontSize*1.2+"px;"
    +"font-weight:"+FontWeight+";"
    +"text-align:left;"+"color:"+AFontColor+";"
    +"margin-top:2px;"+"cursor:hand'"
    +"onMouseOver='javascript:On(this)'"
    +"onMouseOut='javascript:Off(this)'"
    +"onMouseDown='javascript:Down(this)'>"
    +Txt+"</div></a>");}
    }
    //-->
    </script>

    <!--Код меню -->
    <table width="300" border="0" bgcolor="#0080ff" cellpadding="6" cellspacing="0"><tr><td>
    <script language="JavaScript">
    <!--
    if (!document.layers){
    //Добавляем кнопки
    Link('URL','Yahoo');
    Link('URL','Google');
    Link('URL','Alta Vista');
    Link('URL','Lycos');
    Link('URL','Hotbot');
    }
    //-->
    </script>
    </td></tr></table>


Перетаскивающееся меню

    Перетаскивающееся меню.

    Потаскайте меня:

    LENIN INC
    List SOFT
    Microsoft MSDN

    Чтобы скопировать данный код, выберите в контекстном меню пункт "Выделить все", а потом "Копировать".

    <style type="text/css">
    #floater {LEFT: 15px; POSITION: absolute; TOP: 10px; VISIBILITY: visible; WIDTH: 150px; Z-INDEX: 10}
    </style>

    <table border="4" bgcolor="#F7F8C0" CELLPADDING="5" CELLSPACING="2" id="floater">
    <tr><td>
    <font size="2" face="Comic Sans MS, Verdana">
    Потаскайте меня:
    <p>
    <a href="    http://lenininc.narod.ru/">LENIN INC</a>
    <br>
    <a href="    http://www.listsoft.ru/">List SOFT</a>
    <br>
    <a href="    http://www.msdn.microsoft.com/default.asp">Microsoft MSDN</a>
    </font>
    </td>
    </tr>
    </table>

    <script language="JavaScript">
    <!--
    self.onError=null;
    currentX = currentY = 0;
    whichIt = null;
    lastScrollX = 0; lastScrollY = 0;
    NS = (document.layers) ? 1 : 0;
    IE = (document.all) ? 1: 0;
    function heartBeat() {
    if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
    if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
    if(diffY != lastScrollY) {
    percent = .1 * (diffY - lastScrollY);
    if(percent > 0) percent = Math.ceil(percent);
    else percent = Math.floor(percent);
    if(IE) document.all.floater.style.pixelTop += percent;
    if(NS) document.floater.top += percent;
    lastScrollY = lastScrollY + percent;
    }
    if(diffX != lastScrollX) {
    percent = .1 * (diffX - lastScrollX);
    if(percent > 0) percent = Math.ceil(percent);
    else percent = Math.floor(percent);
    if(IE) document.all.floater.style.pixelLeft += percent;
    if(NS) document.floater.left += percent;
    lastScrollX = lastScrollX + percent;
    }
    }
    function checkFocus(x,y) {
    stalkerx = document.floater.pageX;
    stalkery = document.floater.pageY;
    stalkerwidth = document.floater.clip.width;
    stalkerheight = document.floater.clip.height;
    if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
    else return false;
    }
    function grabIt(e) {
    if(IE) {
    whichIt = event.srcElement;
    while (whichIt.id.indexOf("floater") == -1) {
    whichIt = whichIt.parentElement;
    if (whichIt == null) { return true; }
    }
    whichIt.style.pixelLeft = whichIt.offsetLeft;
    whichIt.style.pixelTop = whichIt.offsetTop;
    currentX = (event.clientX + document.body.scrollLeft);
    currentY = (event.clientY + document.body.scrollTop);
    } else {
    window.captureEvents(Event.MOUSEMOVE);
    if(checkFocus (e.pageX,e.pageY)) {
    whichIt = document.floater;
    StalkerTouchedX = e.pageX-document.floater.pageX;
    StalkerTouchedY = e.pageY-document.floater.pageY;
    }
    }
    return true;
    }
    function moveIt(e) {
    if (whichIt == null) { return false; }
    if(IE) {
    newX = (event.clientX + document.body.scrollLeft);
    newY = (event.clientY + document.body.scrollTop);
    distanceX = (newX - currentX); distanceY = (newY - currentY);
    currentX = newX; currentY = newY;
    whichIt.style.pixelLeft += distanceX;
    whichIt.style.pixelTop += distanceY;
    if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
    if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
    if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
    if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
    event.returnValue = false;
    } else {
    whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
    if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
    if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
    if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
    if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
    return false;
    }
    return false;
    }
    function dropIt() {
    whichIt = null;
    if(NS) window.releaseEvents (Event.MOUSEMOVE);
    return true;
    }
    if(NS) {
    window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    window.onmousedown = grabIt;
    window.onmousemove = moveIt;
    window.onmouseup = dropIt;
    }
    if(IE) {
    document.onmousedown = grabIt;
    document.onmousemove = moveIt;
    document.onmouseup = dropIt;
    }
    if(NS || IE) action = window.setInterval("heartBeat()",1);
    // -->
    </script>


Выбор фонового цвета

    Выбор фонового цвета.

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

    <Script Language="JavaScript">
    document.write("<Form Name=\"Kolory\">");
    document.write("<small>    Цвет фона страницы:</small><br>");
    document.write("<Select Name=\"schemesel\" OnChange=\"document.bgColor = this.options[selectedIndex].value\">");
    document.write("<Option Value=\"    FFFFFF\" selected>Белый");
    document.write("<Option Value=\"    0000FF\">Синий");
    document.write("<Option Value=\"    C0C0C0\">Серый");
    document.write("<Option Value=\"    808080\">Темно-серый");
    document.write("<Option Value=\"    FFFF00\">Желтый");
    document.write("<Option Value=\"    FFFFC0\">Ярко-желтый");
    document.write("<Option Value=\"    FF0000\">Красный");
    document.write("<Option Value=\"    00C000\">Зеленый");
    document.write("<Option Value=\"    C0FFC0\">Салатовый");
    document.write("<Option Value=\"    FF00FF\">Розовый");
    document.write("</Select>");
    document.write("</Form>");
    </Script>

    По желанию Вы можете добавить или удалить из представленного скрипта некоторые цвета.


Мощная всплывающая подсказка

    Мощная всплывающая подсказка.

    Данная вслывающая подсказка удобна тем, что:
    1. Она не исчезает в самый неподходящий момент (она исчезнет только после того, как вы уберёте курсор с ссылки).
    2. Здесь можно менять шрифты, цвета шрифтов, их начертания.
    3. Сюда можно вставлять графические изображения:

    Посмотреть подсказку

    <script language="JavaScript">
    if (parseInt(navigator.appVersion)>= 4)
    {
    if (navigator.appName == "Netscape")
    {
    layerStyleRef="layer.";
    layerRef="document.layers";
    styleSwitch="";
    }
    else
    {
    layerStyleRef="layer.style.";
    layerRef="document.all";
    styleSwitch=".style";
    }
    }
    function show(layerName)
    {
    if (parseInt(navigator.appVersion)>= 4)
    {
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
    }
    }
    function cls(layerName){
    if (parseInt(navigator.appVersion)>= 4)
    {
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
    }
    }
    </script>

    <style type="text/css">
    #text1 {HEIGHT: 80px; LEFT: 0px; POSITION: absolute; TOP: 50px; VISIBILITY: hidden; WIDTH: 250px; Z-INDEX: 10}
    </style>

    <!--Элемент style таблицы содержит координаты появления подсказки, а также ее размеры-->
    <table align="left" id="text1" border="1" width="100%" cellspacing="0" cellpadding="5" style="HEIGHT: 80px; LEFT: 50px; TOP: 90px; WIDTH: 300px">
    <tr>
    <td bgcolor="#FFFFE1">
     Здесь Вы можете поместить текст, изображения, используя при этом тэги.
    </td>
    </tr>
    </table>

    <a href="http://lenininc.narod.ru/" onmouseout="cls('text1');" onmouseover="show('text1');">Посетить сайт...</a>


Мигающий бордюр таблицы

    Мигающий бордюр таблицы.

    Здесь Вы можете поместить текст рекламного характера.

    <script language="JavaScript1.2">
    <!--
    function flashit(){
    if (!document.all)
    return
    if (myexample.style.borderColor=="blue")
    myexample.style.borderColor="red"
    else
    myexample.style.borderColor="blue"
    }
     //Здесь вы можете поменять интервал мигания
    setInterval("flashit()", 500)
    //-->
    </script>

    <table align="center" border="0" width="280" id="myexample" style="border:5px solid blue">
    <tr>
    <td>    Здесь Вы можете поместить текст рекламного характера.
    </td>
    </tr>
    </table>


Выделение текста в <TEXTAREA>

    Выделение текста в <TEXTAREA>.

    Выделить все
    Выделить все
    <SCRIPT language=JavaScript>
    function highlight(x){
    document.forms[x].elements[0].focus()
    document.forms[x].elements[0].select()}
    </SCRIPT>

    <form>
    <A href="javascript:highlight(0)">    Выделить все</A><br>
    <textarea name="n0" cols="20" rows="2">
    Здесь текст
    </textarea>
    </form>

    <form>
    <A href="javascript:highlight(1)">    Выделить все</A><br>
    <textarea name="n1" cols="20" rows="2">
    Здесь текст
    </textarea>
    </form>


Регистрация "горячей клавиши"

    Регистрация "горячей клавиши".

    Данный скрипт регистрирует "горячею клавишу" (hotkey), при нажатии на которую пользователем, будет загружен определенный адрес. В приведенном ниже примере в качестве "hotkey" выступает буква "t", и загружается адрес - http://lenininc.narod.ru/

    <script language="JavaScript1.2">
    self.focus();
    var travel=true
    //Назначаем "горячею клавишу". 116 - клавиша "t"
    var hotkey=116
    //Назначаем, какой открывать адрес
    var destination="http://lenininc.narod.ru/"
    if (document.layers)
    document.captureEvents(Event.KEYPRESS)
    function backhome(e){
    if (document.layers){
    if (e.which==hotkey&&travel)
    window.location=destination
    }
    else if (document.all){
    if (event.keyCode==hotkey)
    window.location=destination
    }
    }
    document.onkeypress=backhome
    </script>


Текстовые часы

    Текстовые часы.

    <!--Запускаем часы-->
    <BODY onload=runclock()>

    <!--Устанавливаем позицию часов-->
    <SPAN id=liveclock style="LEFT: 5px; POSITION: absolute; TOP: 5px"></SPAN>

    <!--Программа часов-->
    <SCRIPT language=JavaScript>
    <!--
    function runclock(){
    if (!document.layers&&!document.all)
    return
    var Digital=new Date()
    var hours=Digital.getHours()
    var minutes=Digital.getMinutes()
    var seconds=Digital.getSeconds()
    var dn="AM"
    if (hours>24){
    dn="PM"
    hours=hours-24
    }
    if (hours==0)
    hours=24
    if (minutes<=9)
    minutes="0"+minutes
    if (seconds<=9)
    seconds="0"+seconds
    myclock="<font size='2' color='darkgreen' face='Verdana, Tahoma'><b>    Текущее время: "+hours+":"+minutes+":"+seconds+" "+dn+"</b></font>"
    if (document.layers){
    document.layers.liveclock.document.write(myclock)
    document.layers.liveclock.document.close()
    }
    else if (document.all)
    liveclock.innerHTML=myclock
    setTimeout("runclock()",1000)
    }
    //-->
    </SCRIPT>


Стрелочные часы

    Стрелочные часы.

    <script language="JavaScript">
    fCol='000000';     //Цве циферблата
    sCol='ff0000'; //Цвет секундной стрелки
    mCol='000000'; //Цвет минутной стрелки
    hCol='000000'; //Цвет часовой стрелки
    H='....';
    H=H.split('');
    M='.....';
    M=M.split('');
    S='......';
    S=S.split('');
    Ypos=0;
    Xpos=0;
    Ybase=8;
    Xbase=8;
    dots=12;
    ns=(document.layers)?1:0;
    if (ns){
    dgts='1 2 3 4 5 6 7 8 9 10 11 12';
    dgts=dgts.split(' ')
    for (i=0; i < dots; i++){
    document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
    }
    for (i=0; i < M.length; i++){
    document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
    } for (i=0; i < H.length; i++){
    document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
    } for (i=0; i < S.length; i++){
    document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');}
    }
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=1; i < dots+1; i++){
    document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
    }
    document.write('</div></div>')
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < M.length; i++){
    document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
    }
    document.write('</div></div>')
    document.write('</div></div>')
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < H.length; i++){
    document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
    }
    document.write('</div></div>')
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < S.length; i++){
    document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
    }
    document.write('</div></div>')
    }
    function clock(){
    time = new Date ();
    secs = time.getSeconds();
    sec = -1.57 + Math.PI * secs/30;
    mins = time.getMinutes();
    min = -1.57 + Math.PI * mins/30;
    hr = time.getHours();
    hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
    if (ns){
    Ypos=window.pageYOffset+window.innerHeight-60;
    Xpos=window.pageXOffset+window.innerWidth-80;
    }
    else{
    Ypos=document.body.scrollTop+window.document.body.clientHeight-60;
    Xpos=document.body.scrollLeft+window.document.body.clientWidth-60;
    }
    if (ns){
    for (i=0; i < dots; ++i){
    document.layers["nsDigits"+i].top=Ypos-5+40*Math.sin(-0.49+dots+i/1.9);
    document.layers["nsDigits"+i].left=Xpos-15+40*Math.cos(-0.49+dots+i/1.9);
    }
    for (i=0; i < S.length; i++){
    document.layers["nx"+i].top=Ypos+i*Ybase*Math.sin(sec);
    document.layers["nx"+i].left=Xpos+i*Xbase*Math.cos(sec);
    }
    for (i=0; i < M.length; i++){
    document.layers["ny"+i].top=Ypos+i*Ybase*Math.sin(min);
    document.layers["ny"+i].left=Xpos+i*Xbase*Math.cos(min);
    }
    for (i=0; i < H.length; i++){
    document.layers["nz"+i].top=Ypos+i*Ybase*Math.sin(hrs);
    document.layers["nz"+i].left=Xpos+i*Xbase*Math.cos(hrs); }
    }
    else{
    for (i=0; i < dots; ++i){
    ieDigits[i].style.pixelTop=Ypos-15+40*Math.sin(-0.49+dots+i/1.9);
    ieDigits[i].style.pixelLeft=Xpos-14+40*Math.cos(-0.49+dots+i/1.9);
    }
    for (i=0; i < S.length; i++){
    x[i].style.pixelTop =Ypos+i*Ybase*Math.sin(sec);
    x[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(sec);
    }
    for (i=0; i < M.length; i++){
    y[i].style.pixelTop =Ypos+i*Ybase*Math.sin(min);
    y[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(min);
    }
    for (i=0; i < H.length; i++){
    z[i].style.pixelTop =Ypos+i*Ybase*Math.sin(hrs);
    z[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(hrs);
    }
    }
    setTimeout('clock()',50);
    }
    if (document.layers || document.all) window.onload=clock;
    //-->
    </script>


Скролинг текста со ссылками

    Скролинг текста со ссылками.

    <script language="JavaScript1.2">
    //Ширина окна (в пикселях)
    var marqueewidth=150
    //Высота окна
    var marqueeheight=150
    //Скорость скролинга
    var speed=2
    //Текст, который будет отображатся
    var marqueecontents='    <font face="Verdana, Tahoma" size="2">Посетите сайт <a href="http://lenininc.narod.ru/">LENIN INC</a>.</font>'
    if (document.all)
    document.write('<marquee direction="up" scrollAmount=' + speed + ' style="width:' + marqueewidth + ';height:' + marqueeheight + '">' + marqueecontents + '</marquee>') function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (document.layers){
    setTimeout("window.onresize=regenerate",450)
    intializemarquee()
    }
    }
    function intializemarquee(){
    document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
    document.cmarquee01.document.cmarquee02.document.close()
    thelength=document.cmarquee01.document.cmarquee02.document.height
    scrollit()
    }
    function scrollit(){
    if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
    document.cmarquee01.document.cmarquee02.top-=speed
    setTimeout("scrollit()",100)
    }
    else{
    document.cmarquee01.document.cmarquee02.top=marqueeheight
    scrollit()
    }
    }
    window.onload=regenerate2
    </script>

    Данный скрипт должен быть помещен там, где Вы хотите разместить окно со скролингом текста.


Активное изображение

    Активное изображение.

    Загрузить...     		Подведите курсор к ссылке. Для получения такого эффекта Вам понадобятся два графических файла.

    <SCRIPT language="Javascript">
    <!-- //
    browser_name = navigator.appName;
    browser_version = parseFloat(navigator.appVersion);
    if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
    else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
    else { roll = 'false'; }
    function load(location){
    return image;
    }
    if (roll == 'true'){
    tr=new Image();
    //здесь указывается изображение, которое появляется при подведении курсора
    tr.src="    Графический файл 1";
    }
    function show(where){
    if (roll == 'true'){
    stored=where;
    storedLocation=document.images[where].src;
    //аналогично предыдущему; для работы в разных Обозревателях
    document.images[where].src="    Графический файл 1";
    }
    }
    function hide(){
    if (roll == 'true') document.images[stored].src=storedLocation;
    }
    // -->
    </SCRIPT>

    <!--Здесь указывается изображение, которое будет первоночально показано-->
    <IMG SRC="    Графический файл 2" NAME="im1" BORDER="Oкантовка" HEIGHT="Высота" WIDTH="Ширина"><br>
    <A HREF="    URL" onMouseOver="show('im1')" onMouseOut="hide()" TITLE="Подсказка">Загрузить...</A>


Появляющийся текст

    Появляющийся текст.

    <style type="text/css">
#divZoom{position:absolute; left:0; top:170;
 width:100%; text-align:center; visibility:hidden}
</style>

<script type="text/javascript" language="JavaScript">
//Проверка Обозревателя
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
zText=new Array('lenininc','narod','ru','lenininc.narod.ru') /*Текст, который
будет последовательно появлятся*/
zColor=new Array('#202020','#424242','#8E8E8E','#C2C2C2','#E8E8E8')
var zEndSize=70   //Конечный размер шрифта
var zSpeed=50     //Скорость увеличения
var zAddSize=5    //Размер шрифта (в пикселях)
var zFadeSpeed=70 //Скорость изменения цвета
var zFont='Arial Black,Arial,Helvetica' //Шрифт
var zHide=true    //Скрыть после отображения (true или false)
var zHideWait=200 //Время для ожидания (перед скрытием)
var zStartSize=10 //Начальный размер шрифта
var zEndCode=""   /*Код, который будет выполнен после скрипта,
например: "location.href='newpage.htm' открывает страницу newpage.htm.*/
onload=zoomInit;
function makeZoomObj(obj,font,size,endsize,color,text,zspeed,fadespeed,
addsize,hide,hidewait,endcode)
{this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.
all[obj].style:bw.ns4?document.layers[obj]:0;
this.writeref=bw.dom?
document.getElementById(obj):bw.ie4?document.all[obj]:bw.
ns4?document.layers[obj].document:0;
this.zoomWrite=b_zoomWrite;
this.zoomIt=b_zoomIt;
this.fadeIt=b_fadeIt;
this.zoomFade=b_zoomFade;
this.font=font;
this.color=new Array();
this.color=eval(color);
this.text=new Array();
this.text=eval(text);
this.zspeed=zspeed;
this.fadespeed=fadespeed;
this.addsize=addsize;
this.endcode=endcode;
this.hide=hide;
this.hidewait=hidewait;
this.size=size;
this.startsize=size;
this.endsize=endsize;
 if(size<endsize){this.way="<"; this.addsize=this.addsize
    }else{this.way=">";
this.addsize=-this.addsize
}
 if(bw.dom || bw.ie4){
this.css.fontFamily=this.font;
this.css.fontSize=this.size;
this.css.color=this.color[0]
}
this.obj = obj + "Object";
 eval(this.obj + "=this");
  return this
}
function b_zoomFade(num){
 if(num<this.text.length){
this.size=this.startsize;
this.zoomIt(num,'this.zoomFade('+(num+1)+')')
}
else if(num==this.text.length) this.fadeIt(0,'this.zoomFade('+(num+1)+')')
else if(this.hide) setTimeout(this.obj+
".css.visibility='hidden'; eval("+this.obj+".endcode)",this.hidewait)
}
function b_zoomWrite(num,cnum){
 if(bw.ns4){
this.writeref.write('<span style="text-align:center; font-size:' +
this.size+'px; font-family:'+this.font+'; color:'+this.color[cnum]+
'">'+this.text[num]+'</span>')
this.writeref.close()
 }else if(bw.dom){
  spantag=document.createElement("SPAN")
  spantag.id=this.obj+"span";
  this.writeref.replaceChild(spantag,this.writeref.childNodes[0])
  this.writeref.childNodes[0].appendChild(document.createTextNode(""))
  this.writeref.childNodes[0].replaceChild(document.
createTextNode(this.text[num]),this.writeref.childNodes[0].childNodes[0])
 }else if(bw.ie4) this.writeref.innerHTML=this.text[num]
}
function b_zoomIt(num,fn){
 if(eval(this.size+this.way+this.endsize)){
 if(this.size==this.startsize || bw.ns4) this.zoomWrite(num,0)
 if(bw.dom || bw.ie4) this.css.fontSize=this.size
  this.size=this.size+this.addsize
  setTimeout(this.obj+".zoomIt("+num+",'"+fn+"')",this.zspeed)
}else eval(fn)
}
function b_fadeIt(num,fn){
 if(num<this.color.length){
 if(bw.ns4) this.zoomWrite(this.text.length-1,num)
  else{
   obj=bw.ie4?this.css:document.getElementById(this.obj+"span").style;
   obj.color=this.color[num]
}
 num++
setTimeout(this.obj+".fadeIt("+num+",'"+fn+"')",this.fadespeed)
 }else eval(fn)
}
function zoomInit(){
 if(bw.bw){
  oZoom=new  makeZoomObj('divZoom',zFont,zStartSize,zEndSize,
'zColor','zText',zSpeed,zFadeSpeed,zAddSize,zHide,zHideWait,zEndCode)
  oZoom.zoomFade(0)
  oZoom.css.visibility='visible'
 }
}
</script>

<div id="divZoom" align="center">&nbsp;</div>


Отключение правой или левой кнопки мыши

    Отключение правой или левой кнопки мыши.

    Данный JavaScript запрешает пользователю щелкать по странице правой кнопкой мыши. Изменение значения параметра (event.button == 2) с 2 на 1 отключает левую кнопку мыши. Попробуйте щекнуть правой кнопкой мыши на этой странице.

    <script language=JavaScript>
    <!--
    /*Здесь Вы вводите свой текст, который будет отображен в окне*/
    var message="Эта кнопка отключена!";
    function click(e) {
    if (document.all) {
    if (event.button == 2) {
    alert(message);
    return false;
    }
    }
    if (document.layers) {
    if (e.which == 3) {
    alert(message);
    return false;
    }
    }
    }
    if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    }
    document.onmousedown=click;
    // -->
    </script>

    Вы можете использовать элемент \n в тексте переменной message для переноса текста на другую строку и элемент \" - для отображения кавычек (\"Пример\").

Вернуться в раздел Все для сайта


Текст в строке состояния

    Текст в строке состояния.

    Так как файл справки (.CHM) не имеет строки состояния для демонстрации работы данного скрипта, то примера не будет, только скриншот:

    Пример текста в строке состояния

    <script LANGUAGE="JavaScript">
    <!-- Begin
    var osd = " "
    osd +="";
    osd +="    Добро пожаловать на сайт LENIN INC - http://lenininc.narod.ru/";
    osd +=" ";
    osd +=" ";
    var timer;
    var msg = "";
    function scrollMaster () {
    msg = customDateSpring(new Date())
    clearTimeout(timer)
    msg += " " + showtime() + " " + osd
    for (var i= 0; i < 100; i++){
    msg = " " + msg;
    }
    scrollMe()
    }
    function scrollMe(){
    window.status = msg;
    msg = msg.substring(1, msg.length) + msg.substring(0,1);
    timer = setTimeout("scrollMe()", 200);
    }
    function showtime (){
    var now = new Date();
    var hours= now.getHours();
    var minutes= now.getMinutes();
    var seconds= now.getSeconds();
    var months= now.getMonth();
    var dates= now.getDate();
    var years= now.getYear();
    var timeValue = ""
    timeValue += ((months >9) ? "" : " ")
    timeValue += ((dates >9) ? "" : " ")
    timeValue = ( months +1)
    timeValue +="/"+ dates
    timeValue +="/"+ years
    var ap="A.M."
    if (hours == 24) {
    ap = "P.M."
    }
    if (hours == 0) {
    hours = 24
    }
    if(hours >= 23){
    hours -= 24;
    ap="P.M."
    }
    var timeValue2 = " " + hours
    timeValue2 += ((minutes < 10) ? ":0":":") + minutes + " " + ap
    return timeValue2;
    }
    function MakeArray(n) {
    this.length = n
    return this
    }
    monthNames = new MakeArray(12)
    monthNames[1] = "    января"
    monthNames[2] = "    февраля"
    monthNames[3] = "    марта"
    monthNames[4] = "    апреля"
    monthNames[5] = "    мая"
    monthNames[6] = "    июня"
    monthNames[7] = "    июля"
    monthNames[8] = "    августа"
    monthNames[9] = "    сентября"
    monthNames[10] = "    октября"
    monthNames[11] = "    ноября"
    monthNames[12] = "    декабря"
    daysNames = new MakeArray(7)
    daysNames[1] = "    воскресенье"
    daysNames[2] = "    понедельник"
    daysNames[3] = "    вторник"
    daysNames[4] = "    среда"
    daysNames[5] = "    четверг"
    daysNames[6] = "    пятница"
    daysNames[7] = "    суббота"
    function customDateSpring(oneDate) {
    var theDay = daysNames[oneDate.getDay() +1]
    var theDate =oneDate.getDate()
    var theMonth = monthNames[oneDate.getMonth() +1]
    return theDay + ", " + theDate + " " + theMonth + ","
    }
    scrollMaster();
    // End -->
    </script>


Рекламная полоса

    Рекламная полоса.

    Initializing...

    <style>
    <!--
    #tickertape{position:relative; layer-background-color:black; width:400;height:12;} #subtickertape{background-color:black; position:absolute; border: 1px solid black; width:400; height:12;}
    .subtickertapefont{font:bold 12px Verdana; text-decoration:none; color:white;text-align: center;}
    .subtickertapefont a{color:white; text-decoration:none;}
    -->
    </style>

    <body onload="if (document.all||document.layers) {regenerate2();update()}">

    <div id="tickertape" align="center">
    <div id="subtickertape" class="subtickertapefont">Initializing...</div>
    </div>

    <script language="JavaScript1.2">
    //default speed is 4.5 seconds, Change that as desired
    var speed=4500
    var news=new Array()
    //Здесь можно добавить новые ссылки (news[n])
    news[0]="<a href='http://lenininc.narod.ru/'>LENIN INC - The best Soft, Rusifications and other.</a>"
    news[1]="<a href='    http://listsoft.ru/'>ListSoft - Посетите лучший каталог программ.</a>"
    news[2]="<a href='    http://www.msdn.microsoft.com/default.asp'>Microsoft MSDN - Open Sources.</a>"
    //expand or shorten this list of messages as desired
    i=0
    if (document.all)
    tickerobject=document.all.subtickertape.style
    else
    tickerobject=document.tickertape.document
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (document.layers)
    setTimeout("window.onresize=regenerate",450)
    }
    function update(){
    BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
    if (document.layers){
    document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>')
    document.tickertape.document.subtickertape.document.close()
    }
    else
    document.all.subtickertape.innerHTML=news[i]
    if (i<news.length-1)
    i++
    else
    i=0
    setTimeout("update()",speed)
    }
    function BgFade(red1, grn1, blu1, red2, grn2, blu2, steps) {
    sred = red1; sgrn = grn1; sblu = blu1;
    ered = red2; egrn = grn2; eblu = blu2;
    inc = steps;
    step = 0;
    RunFader();
    }
    function RunFader() {
    var epct = step/inc;
    var spct = 1 - epct;
    if (document.layers)
    tickerobject.bgColor =
    Math.floor(sred * spct + ered *
    epct)*256*256 +
    Math.floor(sgrn * spct + egrn * epct)*256 +
    Math.floor(sblu * spct + eblu * epct);
    else
    tickerobject.backgroundColor=
    Math.floor(sred * spct + ered *
    epct)*256*256 +
    Math.floor(sgrn * spct + egrn * epct)*256 +
    Math.floor(sblu * spct + eblu * epct);
    if ( step < inc ) {
    setTimeout('RunFader()',50);
    }
    step++;
    }
    </script>


Календарь на страничке

    Календарь на страничке.

    <script language="JavaScript">
    <!--
    <!-- Begin
    monthnames = new Array(
    "    Январь",
    "    Февраль",
    "    Март",
    "    Апрель",
    "    Май",
    "    Июнь",
    "    Июль",
    "    Август",
    "    Сентябрь",
    "    Октябрь",
    "    Ноябрь",
    "    Декабрь");
    var linkcount=0;
    function addlink(month, day, href) {
    var entry = new Array(3);
    entry[0] = month;
    entry[1] = day;
    entry[2] = href;
    this[linkcount++] = entry;
    }
    Array.prototype.addlink = addlink;
    linkdays = new Array();
    monthdays = new Array(12);
    monthdays[0]=31;
    monthdays[1]=28;
    monthdays[2]=31;
    monthdays[3]=30;
    monthdays[4]=31;
    monthdays[5]=30;
    monthdays[6]=31;
    monthdays[7]=31;
    monthdays[8]=30;
    monthdays[9]=31;
    monthdays[10]=30;
    monthdays[11]=31;
    todayDate=new Date();
    thisday=todayDate.getDay();
    thismonth=todayDate.getMonth();
    thisdate=todayDate.getDate();
    thisyear=todayDate.getYear();
    thisyear = thisyear % 100;
    thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
    if (((thisyear % 4 == 0)
    && !(thisyear % 100 == 0))
    ||(thisyear % 400 == 0)) monthdays[1]++;
    startspaces=thisdate;
    while (startspaces > 7) startspaces-=7;
    startspaces = thisday - startspaces + 1;
    if (startspaces < 0) startspaces+=7;
    document.write("    <table border=4 bgcolor=#F7F8C0 bordercolor=green>");
    document.write("    <tr><td colspan=7 align=center><b><font size=2>" + monthnames[thismonth] + " " + thisyear + "</font></b></td></tr>");
    document.write("    <tr>");
    document.write("<td align=center><font size=2>Вс</font></td>");
    document.write("    <td align=center><font size=2>Пн</font></td>");
    document.write("    <td align=center><font size=2>Вт</font></td>");
    document.write("    <td align=center><font size=2>Ср</font></td>");
    document.write("    <td align=center><font size=2>Чт</font></td>");
    document.write("    <td align=center><font size=2>Пт</font></td>");
    document.write("    <td align=center><font size=2>Сб</font></td>");
    document.write("    </tr>");
    document.write("    <tr>");
    for (s=0;s<startspaces;s++) {
    document.write("    <td></td>");
    }
    count=1;
    while (count <= monthdays[thismonth]) {
    for (b = startspaces;b<7;b++) {
    linktrue=false;
    document.write("    <td><font size=2>");
    for (c=0;c<linkdays.length;c++) {
    if (linkdays[c] != null) {
    if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
    document.write("    <a href=\"" + linkdays[c][2] + "\">");
    linktrue=true;}
    }
    }
    if (count==thisdate) {
    document.write("    <font color='FF0000'><b>");
    }
    if (count <= monthdays[thismonth]) {
    document.write(count);
    }
    else {
    document.write(" ");
    }
    if (count==thisdate) {
    document.write("    </b></font>");
    }
    if (linktrue)
    document.write("    </a>");
    document.write("    </font></td>");
    count++;
    }
    document.write("    </tr>");
    startspaces=0;
    }
    document.write("    </table>");
    // End
    // -->
    </script>


Работа с текстом

    Работа с текстом.

    Arial

    <a href=" javascript:void(document.body.style.fontFamily='arial')">Arial</a>

    Comic Sans MS

    <a href=" javascript:void(document.body.style.fontFamily='Comic Sans MS')">Comic Sans MS</a>

    Verdana

    <a href=" javascript:void(document.body.style.fontFamily='verdana')">Verdana</a>

    Изменить цвет страницы...

    <a href=" javascript:if(frames.length<1){document.body.background='';void(document.bgColor=prompt('Введите название цвета или его шестнадцатеричный вид...',''))}else{alert('Страница имеет фрэймы. Эта версия скрипта не работает с фрэймами.')}">Изменить цвет страницы...</a>

    Изменить цвет текста...

    <a href=" javascript:if(frames.length<1){void(document.fgColor=prompt('Введите название цвета или его шестнадцатеричный вид...',''))}else{alert('Страница имеет фрэймы. Эта версия скрипта не работает с фрэймами.')}">Изменить цвет текста...</a>

    Подсветить ссылки (вкл/выкл)

    <a href=" javascript:for(nIx5Bs=0;nIx5Bs<document.all.length;nIx5Bs++){ if(document.all[nIx5Bs].tagName=='A'){ with(document.all[nIx5Bs].style){ if(backgroundColor=='yellow'){ void(backgroundColor=document.bgColor)}else{ void(backgroundColor='yellow')}}}}">Подсветить ссылки (вкл/выкл)</a>

    Скрыть все изображения

    <a href="javascript:for(jK6bvW=0;jK6bvW<document.images.length;jK6bvW++) { void(document.images[jK6bvW].style.visibility='hidden')}">Скрыть все изображения</a>

    Подчеркивание ссылок (вкл/выкл)

    <a href="javascript:for(KLcc8R=0;KLcc8R<document.all.length;KLcc8R++){ if(document.all[KLcc8R].tagName=='A'){ with(document.all[KLcc8R].style){ if(textDecoration=='none'){ void(textDecoration='underline')} else{void(textDecoration='none')}}}}">Подчеркивание ссылок (вкл/выкл)</a>

    Список всех ссылок

    <a href="javascript:WN7z=open('','Z6','width=400,height=200, scrollbars,resizable,menubar'); DL5e=document.links;with(WN7z.document){ write('<base target=_blank>'); for(lKi=0;lKi<DL5e.length;lKi++){ write(DL5e[lKi].toString().link(DL5e[lKi])+'<br><br>')}; void(close())}">Список всех ссылок</a>

    Дублирование страницы

    <a href="javascript:dT30FfN3b=new Date(); void(window.open(location.href,'w'+dT30FfN3b.getTime()))">Дублирование страницы</a>

    Найти текст на странице...

    <a href="javascript:FD983r={x:function(){ var r,i,s=document.selection.createRange().text;if(!s)s=prompt('Найти текст:',''); if(s){r=document.body.createTextRange(); for(i=0;r.findText(s);i++){ r.execCommand('BackColor','','yellow'); r.collapse(false)};alert(i)}}}; FD983r.x()" return true}">Найти текст на странице...</a>