Базисные елементы.

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

Цвет и фон.

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

Итак сначала про цвет. Для его вставки в строку с тегом <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 документа, где в качестве фоновой картинки я использовал этот фрагмент -

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

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

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

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

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

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

<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 на имя вашего сайта.

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

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

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

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

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

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

Фон и цвета.

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

Формы.

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

Фреймы.

Документ с фреймами	<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>	(для просмотрщиков не поддерживающих фреймы)

web

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

Web-Designed...

- Book HTML -

(С этой статьи начинается учебник по Web-дизайну).

(HTML cоздатель мета тегов)

(HTML cоздатель таблиц)

(Почтовая форма на странице и проверка ее полей).

- Hlp -

(Основные теги, используемые в Web-дизайне. Описание). (Название цветов на английском языке и в шестнадцатиричном виде). (Специальные символы, математические, знаки припинания и прочие).

- Other -

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

- Java Scripts -

My Links...
E-mail me (5 Mb): Welcome to my home page:
Использование материалов данного файла справки в коммерческих целях запрещено!

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

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

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

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

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

<P > По правому краю </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>

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

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

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

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

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

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

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

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

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

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

<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 на нужное Вам (в двух местах) и обязательно наберите его в нижмнем регистре.

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

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

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

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

Как видите, чтобы создать карту нужно вставить в тег <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.

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

JavaScript.

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

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

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

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

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

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

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

Пример

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

Данный пример демонстрирует вызов функции NameFunction при нажатии кнопки NameFunction, после чего функция выполняет метод alert - отображение окна с текстом (параметром) Добро пожаловать ! // Комментарий ограничен данной строкой /* Комментарий начинается здесьи заканчивается здесь*/ var NameofVariable1, NameofVariable2 = 567;Здесь переменная NameofVariable1 просто объявлена, а переменная NameofVariable2 еще и инициализирована при объявлении и ей присвоено значение 567.

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

Областью видимости переменной является текущая функция или, в случае объявления вне функции, весь текущий документ (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("\"Сделайте это\", - сказал он.");

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

Язык 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=?>	(в точках)

Кнопка-ссылка.

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

<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/ на свой.

Кнопки.

(изображение в кнопке, изменение шрифта текста кнопки, подсвечивание).

Курсоры.

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

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>

LENIN INC Meta tegs creater

LENIN INC Meta tegs creater v1.3

Мета-теги.

Мета-теги - информация для Обозревателя и поисковых машин. В 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">

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

Название страницы:
Кодировка:	Кириллица (Windows) Кириллица (KOI8-R) Кириллица (DOS) Многоязыковая UTF-8 Западноевропейский (Windows)
Имя автора:
E-Mail:
Описание документа:
Ключевые слова: (через запятую)

Здесь будет выведен результат
© 2001 by Vladimir Drigalkin (LENIN INC)

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

Используя методы 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>

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

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

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

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

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

</head>
<body>

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

</body>
</html>

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

Заглавие		<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>

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

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

<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оздатель ссылок для открытия новых окон с определенными параметрами.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Устанавливают значения отступов вокруг

Свойства границ:
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.

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

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

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

Script открывает одновременно огромное колличество окон на машине пользователя, что приводит к зависанию Обозревателя. Имя HTML документа, в котором Вы разместите данный скрипт, и имя, выделеное красным (DieScript.htm), должны совпадать.

Scripts вешает текущее окно Обозревателя и выводит сообщение ERROR !. После этого пользователь может продолжать работать, но это окно ему будет недоступно.

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

Scripts трясет окно Обозревателя. Чтобы избавится от враждебности этого скрипта нужно переключится на другое окно Обозревателя, а затем вернутся назад.

<body onloaD="MM_callJS('shake();')">

Разделители.

Параграф	<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 >	(без трехмерных эффектов)
Нет разбивки	<NOBR></NOBR>	(запрещает перевод строки)
Перенос	<WBR>	(разбить строку)

Разное.

Комментарий	<!-- *** -->	(игнорируется просмотрщиком)
Пролог 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>

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

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

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

Примечание:

Примечание:

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

<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="Его размер по вертикали"#FF0000" size="2">Здесь Вы указываете выпадающую подсказку">
</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> можно распологать свою информацию, рисунки, видеофайлы, аудиофайлы...

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

Подробную информацию о тегах смотрите в разделе

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

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

<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/ на свой адрес.

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

События.

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

<A HREF="#null" OnKeyUp="alert('Пример события OnKeyUp')" LANGUAGE="Javascript"> Пример </A> <A HREF="#null" OnMouseDown="alert('Пример события OnMouseDown')" LANGUAGE="Javascript"> Пример </A> <p onmousemove="top.status='Здесь ПЕРВЫЙ комментарий...'" STYLE="cursor:default" ALIGN="center"> Здесь первый комментарий, <em onmousemove="top.status='Здесь ВТОРОЙ комментарий...';self.event.cancelBubble=true;return true"> здесь второй</em>, и снова первый.</p> Здесь первый комментарий, здесь второй, и снова первый. <A HREF="#null" OnMouseOut="alert('Пример события OnMouseDown')" LANGUAGE="Javascript"> Пример </A> <A HREF="#null" OnMouseOver="alert('Пример события OnMouseOver')" LANGUAGE="Javascript"> Пример </A> <A HREF="#null" OnMouseUp="alert('Пример события OnMouseUp')" LANGUAGE="Javascript"> Пример </A>

OnKeyUp	Реагирует при отпускании клавиши.
KeyCode	Содержит символ клавиши (UNICODE) , которая была нажата, чтобы заставить события onkeypress, onkeydown или onkeyup работать.
OnMouseDown	Реагирует на нажатие кнопки мыши.
OnMouseMove	Реагирует всякий раз, когда мышь пользователя перемещается поверх определенного текста в документe. В следующем примере, когда пользователь проводит по тексту курсором мыши, в статустной строке отображается разный текст:
OnMouseOut	Реагирует когда курсор мыши оставляет ссылку.
OnMouseOver	Реагирует когда курсор мыши пользователя входит в область ссылки.
OnMouseUp	Может использоваться, чтобы выполнить функции сценария после того, как мышь пользователя была нажата и отпущена - противоположность события OnMouseDown.
OnSelectStart	Исполняется всякий раз, когда пользователь начинает выбирать некоторый текст, который является содержанием элемента.

<table BORDER="8" BgColor="red" WIDTH="65%">
<tr><td>
<p ID="paraSelectStart"> Выбор любого элемента из этого текста заставит изменять его цвета ... иногда дико
<script LANGUAGE="VBScript">

</script>
</td></tr>
</table>

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

Пример совместной работы событий OnMouseOver, OnMouseOut и свойства status :
<A HREF="#null" onMouseOver="status='Добро пожаловать !' ;return true" onMouseOut="status='Домашняя страничка Владимира Дригалкина' ;return true"> Пример </A>
При загрузке документа в статусной строке одна информация, при попадании указателя мыши в область ссылки - другая, а после выхода указателя мыши из этой области - третья.

Сообщение в окне.

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

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

Специальные символы.

Специальные символы.

(обязаны быть в нижнем регистре)

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

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

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

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

Списки.

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

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

Один Два Три Четыре Пять

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

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

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

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

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

Восемь Девять Десять Одиннадцать Двенадцать

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

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

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

Один Два Три Четыре Пять

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

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

&ltDL COMPACT>

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

Списки.

Неупорядоченный	<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>

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

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

Ссылки и графика. Ссылка

Ссылки и графика.

Ссылка	<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=?>

Стили (CSS).

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

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

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

Описываем стили под именем Example :
<STYLE></STYLE>

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

Если Вы распологаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на 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>

Таблицы.

Определить таблицу	<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>	(сверху/снизу таблицы)

Текст.

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

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

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

Внешний вид.

Жирный	<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>