ABBR

Тег <ABBR> используется для аббревиатуры. Закрывающий тег обязателен

Атрибуты

titleВсплывающая подсказка

Пример

СНГ - Содружество независимых государств

Код для примера

<abbr>СНГ</abbr> - Содружество независимых государств

Категория

Теги логического форматирования текста

Acronym

Тег <ACRONYM> и обязательный парный ему </ACRONYM>

Тег <ACRONYM> идентифицирует акроним

Пример

СНГ - Содружество независимых государств

Код для примера

<ACRONYM>СНГ</ACRONYM> - Содружество независимых государств

Категория

Теги логического форматирования текста

Address

Тег <ADDRESS> и обязательный парный ему </ADDRESS>

Тег <ADDRESS> применяется для идентификации автора документа и указания адреса автора. Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа. Тег применяется обычно вначале или в конце документа. Текст, заключенный между тегами <address></address> обычно отображается курсивом

Пример

Мой адрес - Советский Союз

Код для примера

<address>Мой адрес - Советский Союз</address>

Категория

Другие теги

Area

Тег <AREA> и необязательный закрывающий </AREA>

Элемент AREA определяет фигуру и координаты чувствительных областей в MAP

Атрибуты

coordsКоординаты чувствительных областей. Задание координат зависит от параметра shape

форма области	COORDS
RECT - прямоугольник	COORDS="A,B,C,D", где A,B - координаты верхнего левого угла области. C,D - координаты правого нижнего угла области.
CIRC - окружность	COORDS="A,B,C", где A,B - координаты центра окружности. C - радиус окружности.
POLY - многоугольник	COORDS="A,B,C,D, ... ,A,B". Каждая пара задает координаты вершин многоугольника. Первая и последняя пары совпадают задавая замкнутую фигуру.

hrefСсылка nohrefСсылка для заданной области отсутствует shapeТип фигуры. Может принимать следующие значения: RECT (прямоугольник), CIRC (окружность), POLY (многоугольник)

Пример

А выглядит код так: <MAP NAME="test">  <AREA HREF="1.html" ALT="первая область" SHAPE="rect" COORDS="0,0,100,130">

</MAP> <AREA HREF="2.html" ALT="вторая область" SHAPE="circle" COORDS="150,65,65">

Категория

Другие теги

Справочник тегов

Тег

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

Пример

А ссылку вы видите!

А выглядит код так:

<a href="a.html">А ссылку вы видите!</a>

Категория

Другие теги

Тег <A>

Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href

Атрибуты

contentEditableВозможность редактирования nameЗадает имя элемента. Имя используется, например, для создания ссылок между фреймами hrefЗадает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.

Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email">. Причем многие почтовые программы позволяют заполнить многие поля (все поля опционны, вы можете заполнять только те что нужны):
Параметры соединяются символом &, для пробелов используйте %20, для перевода на новую строку в сообщении - %0d%0a

mailto:terminator2@mail.ru?subject=HTML%20в%20примерх&Body=Отличный%20справочник%20Так%20держать!&CC=billgates@microsoft.com&BCC="wwwind@aport.ru (subject - тема письма, Body - содержание письма, CC - копия на другой адрес) targetСтрока, определяющая или получающая одно из следующих значений

name	Имя ссылки или фрейма
_blank	Загружает ссылку в новое окно
_parent	Загружает ссылку в родительском окне
_search	Загружает ссылку в панель поиска браузера. Доступно в Internet Explorer 5 и выше
_self	По умолчанию. Загружает ссылку в это же окно, где был произведен клик по ссылке
_top	Загружает ссылку в topmost окно

titleВсплывающая подсказка

Пример

Это обычный текст

А это уже гиперссылка на сайт http://www.xakep.ru

Пишите письма - пример для вызова почтовой программы

Код для примера <a href="http://www.xakep.ru" title="подсказка">А это уже гиперссылка на сайт http://www.xakep.ru</a&gt

Категория

Гиперссылки

Тег <APPLET>

Тег APPLET это маленькие по объему файлы с расширением .class, предназначенные для вставки его в html-документы с целью получения самых разнообразных эффектов. Закрывающий тег обязателен

Атрибуты

alignВыравнивание элемента. Может принимать значения: BSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP, TOP codeИмя файла, содержащего скомпилированный java class

Пример

Взято с сайта http://www.dataway.ch/~bennet/

document.writeln('

') document.writeln('') document.writeln('

') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('

Код

Категория

Другие теги

Тег <!DOCTYPE>

Тег !DOCTYPE сообщает валидатору, какую именно версию HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег !DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором. Закрывающий тег не требуется. Документация на данный тег достаточна туманна, поэтому предлагаются следующие варианты, которые "считаются правильными"

Пример

Стандарт HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Категория

Другие теги

Справочник тегов

BASE

Тег BASE позволяет авторам явно указать базовый URL документа. Если BASE указан, он должен присутствовать в разделе HEAD документа HTML, до элементов, ссылающихся на внешние ресурсы. Информация о пути, указанная в элементе BASE, влияет только на URL в документе, в котором присутствует этот элемент. Начальный тег обязателен, конечный тег запрещен

Атрибуты

href=задает абсолютный URL, служащий базовым URL для разрешения относительных URL

Пример

<BODY> Щелкни здесь, чтобы узнать больше </BODY> </HTML>

Категория

Теги форматирования документа

BGSOUND

Тег <BGSOUND> служит для внедрения звуковых файлов на страницы в качестве фоновой музыки. Закрывающий тег не требуется

Атрибуты

loopВозвращает или устанавливает число повторов. Может принимать следующие значения

-1	Постоянное воспроизведение звука
0	Только один раз
n	Устанавливает точное число повторов

srcURL звукового файла

Пример

Код с использованием тега <BGSOUND>

Категория

Звук

Big

Тег <BIG> и обязательный парный ему </BIG>

Тег <BIG> выводит более крупный текст

Атрибуты

titleПоказывает текст в виде всплывающей подсказки

Пример

Это обычный текст

А это уже более крупный текст с использованием тега <BIG>

Категория

Теги физического форматирования текста

Blockquote

Тег <BLOCKQUOTE> и обязательный парный закрывающий тег </BLOCKQUOTE>

Тег <BLOCKQUOTE> предназначен для включения в документ длинных цитат, cоздавая отступы с обеих сторон текста и отделяясь от остального текста пустыми строками

Пример

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку

А это уже длинный текст c отступами от сторон текста для лучшего восприятия

Категория

Теги форматирования текста

Br

Тег <BR> не требует парного закрывающего тега

Тег <BR>(BReak line) вставляет перевод строки

Пример

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку

А это уже длинный текст, разбитый
на две строки с помощью тега <BR>

Категория

Теги форматирования текста

Код для второй кнопки

Кнопочка

в таблице

Я недоступна! 60x60
Код для первой кнопки
<button> <table border=1> <tr> <td>Кнопочка <tr> <td>в таблице </table></button>
Код для второй кнопки <button disabled title="я кнопка">Я недоступна!</button>
Категория

Элементы управления

Тег <B>

Тег B создает жирный текст. Закрывающий тег обязателен

Атрибуты

contentEditableВозможность редактирования titleПоказывает текст в виде всплывающей подсказки

Пример

Это обычный текст

А это уже жирный текст с использованием тега <B>

Категория

Теги физического форматирования текста

Тег BODY

Пример красной ссылки

vlink=Нежелательный. Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет alink=Нежелательный. Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой bgproperties=fixedФоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer

Эти параметры можно объединять, например на этой страничке используется <BODY bgcolor="yellow" text="green" link="red" alink="blue">

Категория

Теги форматирования документа

Тег <BUTTON>

Тег <BUTTON> создает кнопку с рисунком или с другими встроенными элементами. Закрывающий тег </BUTTON> требуется

Атрибуты

disabledДелает кнопку недоступной styleЗадает стили для кнопки. Например, размеры кнопки title=Всплывающая подсказка type=Тип кнопки

Атрибут contentEditable

Атрибут contentEditable позволяет пользователю редактировать содержимое объекта. Доступно, начиная с версии Internet Explorer 5.5

Center

Тег <CENTER> и обязательный парный ему </CENTER>

Тег <CENTER> предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты

Пример

Это обычный текст

А это уже текст с использованием тега <center>

Категория

Другие теги

Cite

Тег <CITE> и обязательный парный ему </CITE>

Тег <CITE> используется для цитат, названий книг. Обычно наклонный текст

Атрибуты

titleВсплывающая подсказка

Пример

Это обычный текст

А это уже текст с использованием тега <CITE>

Категория

Теги логического форматирования текста

Code

Тег <CODE> и обязательный парный ему </CODE>

Тег <CODE> отмечает текст как небольшой фрагмент программного кода. Обычно отображается моноширинным шрифтом

Атрибуты

titleВсплывающая подсказка

Пример

Это обычный текст

А это уже текст с использованием тега <CODE>

Категория

Теги логического форматирования текста

sCanEdit может принимать следующие значения

<Element contentEditable = sCanEdit...>

sCanEdit может принимать следующие значения

inherit	По умолчанию. Содержимое объекта можно редактировать зависит от родительского объекта
false	Пользователь не может редактировать содержимое объекта
true	Пользователь может редактировать содержимое объекта

Пример
Текст с использованием тега <center>, который вы можете редактировать!
Второй пример позволяет с помощь скрипта отключать и включать возможность редактирования

Нажмите на кнопку для возможности или запрета редактирования содержимого тега SPAN.
Разрешить редактирование
Вы можете изменять этот зеленый текст
SPAN можно редактировать:

Тег <CAPTION>

Тег <CAPTION> определяет заголовок для таблицы TABLE. Элемент CAPTION может располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION. Закрывающий тег обязателен.

Атрибуты

align=Не рекомендуемый параметр. Выравнивание заголовка относительно таблицы. Возможные значения: left, right, top (по умолчанию), bottom titleВсплывающая подсказка

Пример

Пример простой таблицы

Мой заголовок таблицы

Заголовок столбца 1Заголовок столбца 2

Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2	Ячейка столбца 2, ряд 2

Код для таблицы

<TABLE BORDER=2 COLS=2 BGCOLOR=yellow align=center> <caption>Мой заголовок таблицы</caption> <TR> <TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH> </TR> <TR> <TD>Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд 1</TD> </TR> <TR> <TD>Ячейка столбца 1, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD> </TR> </TABLE>

Категория

Таблицы

CSS: ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

color	Определяет цвет элемента I {color: green;}
background-color	Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. H4 {background-color: yellow;} В скриптовых языках используйте object.style.backgroundColor [ = sColor ]
background-image	Устанавливает или получает фоновый рисунок для элемента Может принимать значения none - По умолчанию. Используется цвет родительского объекта sUrl - Задается абсолютный или относительный путь к рисунку H3 {background-image: yellow;} В скриптовых языках используйте object.style.backgroundImage [ = sLocation ]
background-attachment	Устанавливает или получает поведение фонового рисунка для элемента Может принимать значения scroll - По умолчанию. Фоновый рисунок прокручивается вместе с элементом fixed - Фоновый рисунок не прокручивается вместе с элементом body {background-attachment: fixed;} В скриптовых языках используйте object.style.backgroundAttachment [ = sAttachment ]

Примеры

Курсивный текст зеленым цветом

CSS: Границы

Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы:

border-width	Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая). table {border-width: 2px;}
border-color	Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно table {border-color: green;}
border-style	Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset table {border-style: dashed;} table {border-style: groove;}
border-collapse	Задает стиль рисования таблицы. Может принимать следующие значения: separate (по умолчанию) - Ячейки отделены друг от друга collapse - ячейки не имеют промежутков между собой <TABLE STYLE="border-collapse:collapse">

CSS: Курсоры

Internet Explorer позволяет задавать стили для курсоров. Некоторые стили доступны только для IE 6.

all-scroll	Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении I {cursor: all-scroll;}
auto	По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте I {cursor: auto;}
col-resize	Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали H4 {cursor: col-resize;}
crosshair	Курсор-крест H4 {cursor: crosshair;}
default	Стандартный курсор, используемый системой H4 {cursor: default;}
hand	Рука с вытянутым указательным пальцем. Используется при гиперссылке H4 {cursor: hand;}
help	Стрелка с вопросительным знаком. H3 {cursor: help;}
move	Курсор со 4 стрелками, показывающий возможность перемещения H2 {cursor: move;}
no-drop	Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора TD {cursor: no-drop;}
not-allowed	Перечеркнутый круг. Данная операция не поддерживается TD {cursor: not-allowed;}
pointer	Идентична стилю hand TD {cursor: pointer;}
progress	Песочные часы, показывающие на продолжение операции TD {cursor: progress;}
row-resize	Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали TD {cursor: row-resize;}
text	Текстовый курсор-каретка TD {cursor: text;}
url(uri)	Ваш собственный курсор. Поддерживаются файлы .cur и .ani TD {cursor:url(elogo.cur);}
vertical-text	Горизонтальная текстовая каретка для вертикального текста TD {cursor: vertical-text;}
wait	Курсор, показывающий, что система занята и требуется подождать TD {cursor: wait;}
*-resize	Курсоры, показывающие возможность потянуть за край окна. Вместо символа * используйте N, NE, NW, S, SE, SW, E, или W, определяющие направление стрелок TD {cursor: n-resize;}

<
Примеры

Проведите курсоры над ячейками таблицы для демонстрации стилей

all-scroll	auto	col-resize	crosshair	default	hand
help	move	no-drop	not-allowed	pointer	progress
row-resize	text	vertical-text	wait

n-resize	s-resize	ne-resize	sw-resize
nw-resize	se-resize	e-resize	w-resize

url(new.cur)

url(kiss.ani)

CSS: Отступы

margin	Задает или получает ширину отступа от четырех сторон объекта H4 {margin:1cm;} body {margin:5mm;}
margin-top	Задает или получает высоту верхнего отступа объекта H5 {margin-top:3cm;}
margin-left	Задает или получает ширину левого отступа объекта img {margin-left:2cm;}
margin-right	Задает или получает ширину правого отступа объекта img {margin-right:2cm;}
margin-bottom	Задает или получает высоту нижнего отступа объекта img {margin-bottom:2cm;}
padding	Задает или получает величину пространтства, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей td {padding:2cm;}
padding-bottom	Задает или получает величину пространтства, вставляемого между объектом его нижней границей td {padding-bottom:2cm;}
padding-left	Задает или получает величину пространтства, вставляемого между объектом его левой границей td {padding-left:2cm;}
padding-right	Задает или получает величину пространтства, вставляемого между объектом его правой границей td {padding-right:2cm;}
padding-top	Задает или получает величину пространтства, вставляемого между объектом его верхней границей td {padding-top:2cm;}

CSS: ПОЛОСА ПРОКРУТКИ

Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д.

scrollbar-3dlight-color	Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки body {scrollbar-3dlight-color: green;}
scrollbar-arrow-color	Устанавливает или определяет цвет стрелок на кнопке со стрелками body {scrollbar-arrow-color: red;}
scrollbar-base-color	Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color body {scrollbar-base-color: green;}
scrollbar-darkshadow-color	Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками body {scrollbar-darkshadow-color: red;}
scrollbar-face-color	Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки body {scrollbar-face-color: green;}
scrollbar-highlight-color	Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол body {scrollbar-highlight-color: green;}
scrollbar-shadow-color	Схоже с scrollbar-darkshadow-color body {scrollbar-shadow-color: green;}
scrollbar-track-color	Устанавливает или получает цвет дорожки для ползунка body {scrollbar-track-color: aqua;}

Примеры

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

CSS: Позиционирование

position

Устанавливает или определяет позицию элемента. Может принимать значения:

static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам

absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top и left

relative - Позиция объекта определяется смещением от заданных свойств top и left

left/top

Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения:

auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам

length - число с заданной единицей измерения (10mm;5px;3em)

percentage - число процентов от ширины/высоты родительского объекта (10%)

Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются

z-index

Устанавливает или получает порядок слоев для объектов. В скриптовых языках используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два значения:

строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам

Order - число, задающее позицию объекта в слоях.
С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим атрибут absolute или relative свойства position

Нельзя применять к объектам, имеющим окно (например, select)

Пример применения в скрипте

Примеры

Свойство absolut

Зададим элементу SPAN, содержащему слово ХАКЕР абсолютную позицию (0,0), что позволит вывести слово в левом верхнем углу браузера XAKEP

<SPAN STYLE="position: absolute; top:0px; left:0px; color:red">XAKEP</SPAN>

Свойство relative

А теперь поднимем слово относительно базовой линии строки на 5 пикселей

<SPAN id=oSpan STYLE="position: relative; top:-5px">поднимем</SPAN>

Причем, можно изменять позицию динамически, с помощью скриптов

CSS: Псевдо-элементы

Псевдо-элементы являются особой группой, позволяющих объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдо-элемент first-letter, в котором устанавливаете различные стили:

p:first-letter { float:right;font-size:2em;color:red;}

:first-letter	Устанавливает стили для первой буквы объекта
:first-line	Устанавливает стили для первой строки объекта
:hover	Устанавливает стили для элемента, когда пользователь подводит курсор мыши к ссылке. Данный псевдокласс часто используется вместе с псевдоклассами :active, :link и :visited
:active	Устанавливает стили для элемента, когда ссылка становится активной, но переход по ссылке еще не совершен. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :link и :visited
:link	Устанавливает стили для элемента, когда ссылка не является часто посещаемой. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :visited
:visited	Устанавливает стили для элемента, когда ссылка недавно посещалась. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :link. (Используйте данный псевдокласс перед ними, чтобы не подавлять их поведение)

CSS: РАЗМЕР ЭЛЕМЕНТА

min-height

Устанавливает или получает минимальную высоту элемента
TR {min-height: 10px;}

Данный атрибут применим к TR, TD, TH в таблице, у которой свойство table-layout имеет значение fixed

Примеры

Высота данной ячейки равна 50 пикселям. Так что содержимое в ячейку не влезает и обрезается

Минимальная Высота данной ячейки равна 150 пикселям. Так что текст в нее влезает и не обрезается

CSS: СВОЙСТВА ШРИФТА

font-family	Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P {font-family: Times New Roman, sans-serif;}
font-style	Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный. P {font-style: italic;}
font-variant	Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small-caps - Все буквы заглавные). P {font-variant: small-caps;}
font-weight	Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 B {font-weight: bolder;}
font-size	Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;}

CSS: СВОЙСТВА ТАБЛИЦЫ

table-layout

Устанавливает или получает алгоритм обработки таблицы
TABLE {table-layout: fixed;}

Имеет два значения

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

используя значение атрибута WIDTH элементов COL используя значение атрибута WIDTH элементов TD первого ряда таблицы если данные значения не установлены, то ширина столбцов вычисляется соответственно контенту ячеек

Примеры

Смотри также Размеры элемента

Высота данной ячейки равна 50 пикселям. Так что содержимое в ячейку не влезает и обрезается

Минимальная Высота данной ячейки равна 150 пикселям. Так что текст в нее влезает и не обрезается

CSS: СВОЙСТВА ТЕКСТА

text-decoration	Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} - подчеркивание A {text-decoration: none;} - стандартный текст I {text-decoration: line-through;} - зачеркивание B {text-decoration:overline;} - надчеркивание
text-transform	Задает преобразование регистра текста при отображении H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в заглавную A {text-transform: uppercase;} - Все буквы преобразуются в заглавные I {text-transform: lowercase;} - Все буквы преобразуются в строчные B {text-decoration:none;} - Отменяет установленные преобразования
text-align	Определяет выравнивание элемента. Возможные значения: left, right, center, justify P {text-align:justify} H5 {text-align: center}
text-indent	Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. P {text-indent: 50pt;}
line-height	Управляет интервалами между строками текста. P {line-height: 50 %}
word-spacing	Устанавливает интервалам между словами. Можно использовать отрицательные значения P {word-spacing: 50 %}
letter-spacing	Устанавливает интервалам между буквами P {letter-spacing: 50 pt}
vertical-align	Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom P {vertical-align: 50 pt}

Примеры

Демонстация Z-index в скрипте

САША +

ТАНЯ =

Любовь!

setTimeout "MoveLeft",5,"VBScript" Sub MoveLeft MovingMessage.style.posLeft = MovingMessage.style.posLeft + 1 If MovingMessage.style.posLeft <> 550 Then setTimeout"MoveLeft",10,"VBScript" End Sub

ЕДИНИЦЫ ИЗМЕРЕНИЯ

В языке HTML существует два способа задать линейные размеры элемента: пиксели и проценты. В CSS единиц длины гораздо больше.

ЕДИНИЦЫ ИЗМЕРЕНИЯ
in - Дюймы	pt - Пункты (типограф.)	px - Пикселы
cm - Сантиметры	pc - Пика	em - Вычисляется относительно размера шрифта элемента
mm - Миллиметры	ex - Высота строчной буквы "x" в шрифте	% - Проценты

Условно единицы измерения можно разделить на три группы.

Первая группа - это величины, которые используются для измерения длин реальных предметов. К ним относятся:

in - дюймы; cm - сантиметры; mm - миллиметры.

Ко второй группе можно отнести величины, которые пришли в CSS из типографии. То есть они используются для установки размеров шрифта, межстрочных интервалов и прочих типографских величин. Данная группа величин привычна полиграфистам. К ним относятся:

pt - типографский пункт; pc - пика; ex - высота строчной буквы "x" в шрифте.

Третью группу составляют величины, которые являются относительными, то есть реальный размер элемента вычисляется относительно какой-либо иной величины. К ним относятся:

em - вычисляется относительно размера шрифта элемента; px - пиксель. Вычисляется относительно устройства отображения; % - процент. Естественно, процентные соотношения не являются единицами измерения в привычном смысле слова. Они вычисляются относительно размеров элемента-предка.

Подчеркнутый заголовок (underline)

Это ссылка без подчеркивания (none)

Перечеркнутый курсивный текст (line-through)

Текст с подчеркиванием сверху (overline)

каждая первая буковка слова большая

Спецификация CSS2 позволяет задать стили

Спецификация CSS2 позволяет задать стили для каждой из сторон границы. Например: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом { border-bottom-width: 1px } будет означать, что ширина нижней границы равна 1 пикселу.

Можно указать до трех семейств

font-family - Можно указать до трех семейств шрифта. Это необходимо, так как, если на компьютере клиента отсутствует, скажем, семейство Verdana, а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указано несколько семейств, браузер будет последовательно перебирать все перечисленные, пока не найдет того, которое присутствует на машине клиента. Браузер при запуске сам распределяет имеющиеся семейства для подстановки вместо стандартных.
font-weight - Значения bolder и lighter являются относительными. Т.е. если элемент является дочерним к элементу со значением font-weight: bold и правило font-weight для него задано lighter, то он будет отображен нормальным шрифом.
font-size - В абсолютных размерах можно использовать некоторые предопределенные значения: xx-small | x-small | small | medium | large | x-large | xx-large. При использовании относительных размеров задаются размеры шрифта относительно родительского элемента. Возможные значения: larger, smaller. И наконец, можно использовать точные значения - Задаются размеры шрифта в единицах длины, допускаемых в рекомендациях W3C. Это: px - логические пиксели, pt - логические пункты, em - единицы размера шрифта. em подразумевает, что размер шрифта устанавливается относительно размера шрифта в родительском элементе. 1em равно размеру шрифта родительского элемента. Либо используются проценты - Задаются размеры шрифта в процентах по отношению к родительскому элементу

Жирный шрифт на 200

Курсивный шрифт

все буквы заглавные

Жирный шрифт bolder

Жирный шрифт bold

Жирный шрифт на 200 %

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

Реальные единицы измерения

Реальные единицы измерения великолепно работают в физическом мире, однако для использования на экране монитора они оказываются мало пригодны. Причина на редкость проста: мониторы имеют совершенно разные физические параметры. К ним относятся:

размер монитора по диагонали (варьируется от 14 дюймов до 21 дюйма) разрешение монитора (варьируется от 640х480 до 1600х1200)

Кроме того, на различных платформах могут быть различные экранные разрешения. Так, например, на платформе Macintosh разрешение 72 пикселя на дюйм, тогда как на платформе Windows - 96 пикселей на дюйм.

К чему это приводит? Если на мониторе с диагональю 21 дюйм шрифт размером 0.5 дюйма будет смотреться нормально, то на мониторе с диагональю 14 дюймов он будет слишком велик.

Точно так же, если при разрешении 640х480 текст размером 3mm читается нормально, то при разрешении 1600х1200 невозможно будет ничего разобрать.

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

Возьмем конкретный пример. Монитор размером 13 дюймов по горизонтали и 9 дюймов по вертикали с разрешением 1024х768 в операционной системе Windows, то есть с экранным разрешением 96 пикселей на дюйм. Тогда величина два дюйма будет соответствовать 96*2=192 пикселям. Однако реальная высота этих двух дюймов будет (768/9)*2=171 пиксель. То есть получается несоответствие: браузер считает, что два дюйма - это 192 пикселя, а реальный размер двух дюймов на мониторе - 171 пиксель. Таким образом, если вы устанавливаете размер элемента в два дюйма, то на этом конкретном мониторе реальный размер элемента будет равен 2,22 дюйма. В то же время на другом мониторе с другими параметрами реальный размер может быть совершенно иным.

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

Типографские единицы

Типографские единицы измерения для дизайнера даже привычнее, чем реальные единицы, потому что они сталкиваются с ними повсеместно, в любом графическом пакете размер шрифта задается с помощью пунктов (pt). Так что использовать типографские единицы в CSS хочется по привычке. Однако придется изменить свои привычки по той простой причине, что пункты (pt) и пики (pc) принципиально ничем не отличаются от реальных единиц измерения. Это становится понятно, если вспомнить, что такое пункт. Так вот один пункт равен 1/72 дюйма, а пика равна 12 пунктам, то есть 1/6 дюйма. Таким образом, на использование данных типографских величин накладывается абсолютно такое же ограничение, как и на использование реальных величин. Получается, что использовать пункты и пики надо только в той таблице стилей, которая предназначается для вывода страницы на печать.

Надо сказать, что для принтера действительно лучше использовать типографские единицы, потому что они для него являются родными. Дело в том, что некоторые достаточно старые браузеры некорректно переводят пиксели в пункты. Например, если вы укажете размер шрифта 16 пикселей, то некоторые браузеры и распечатают его как шестнадцать точек. Но экранное разрешение значительно отличается от разрешения принтера. Например, принтер с разрешением 600dpi выведет 16 пикселей как 0,03 дюйма, что читаться не будет совершенно.

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

Кроме пунктов и пик есть еще одна достаточно интересная типографская единица - ex, которая соответствует высоте строчной букве "x". В отличие от всех предыдущих единиц, эта единица является относительной. Относительные единицы просто незаменимы в резиновой верстке, когда главным является сохранение пропорций. Что касается высоты буквы "x", то она может значительно варьироваться от шрифта к шрифту. У большинства шрифтов высоты буквы "x" равна половине высоты шрифта, однако у некоторых декоративных шрифтов может составлять всего одну треть от высоты шрифта.

Для чего же можно использовать единицу измерения, которая базируется на высоте буквы "x"? На самом деле, область применения данной единицы достаточно узка. Ее предпочтительно использовать для выравнивания по вертикали, чтобы точно выровнять какой-либо блок по линии текста. Кроме того, можно делать рамки, отступы и поля шириной по высоте текста. Вот, в общем-то, и все.

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

В браузере Internet Explorer 5.0 1ex равен 0.5em, что абсолютно неверно, потому что у разных шрифтов соотношение высоты буквы "х" и высоты шрифта может быть и 0.3em, и 0.6em. Так что использованию данной единицы измерения мешает еще и плохая реализация ее поддержки браузерами.

Верхняя часть заголовка зеленого цвета (dotted)

Верхняя граница окрашена в синий цвет

Пример стиля dashed

Пример стиля double

Граница из двух линий. Сумма ширины каждой линии и промежуток между ними равняется значению border-width.

Пример использования тега DIV

Пример атрибутов
границы элемента DIV

Здесь приводится код примера <DIV STYLE="background: silver; border-style: dashed; border-width: thick; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow;">Пример атрибутов<br> границы элемента DIV</DIV>

Это обычный вид таблицы	Ячейки отделены друг от друга
Теперь попробуйте щелкнуть мышкой внутри таблицы	Ячейки должны соединиться

Заголовок H5 имеет верхний отступ в 3 см

Кликните на картинке, чтобы увеличить отступ от левого края на 5 см

Кликните на центральной картинке, чтобы увеличить пространство между границей таблицы и картинкой

Заголовок имеет отступ от всех сторон документа в 1 см

Обратите также внимание, что все объекты (абзац, таблица и т.п.) имеют отступ в 5 мм от краев документа (используется body {margin:5mm;})

Заголовок по центру

Абзац с отступом для лучшего восприятия текстов при оформлении ваших страничек

Текст с уменьшеным интервалом на 50% между строками. Данным метод можно применять в декоративных целях

Увеличим промежутки между словами

Уменьшим промежутки между буквами

Vertical-align

Формула спирта

C 2 H 5 OH

Dd

Тег <DD> и необязательный парный ему </DD>

Тег <DD>(Definition Description) является описанием списка определений

Пример

Это определение Описание определения

А выглядит код так: <DL title="это список"> <DT>Это определение <DD>Описание определения

</DL>

Категория

Списки

Dfn

Тег <DFN> и обязательный парный ему </DFN>

Тег <DFN> отмечает текст как определение (DeFeNition). Этим тегом можно отметить термин, впервые встречающийся в документе

Атрибуты

titleВсплывающая подсказка

Пример

Это обычный текст

Интернет - это...

Вторая строка с использованием тега <DFN>

Категория

Теги логического форматирования текста

Dl

Тег <DL> и необязательный парный ему </DL>

Тег <DL>(Definition List) служит для создания списка определений. Списки состоят из двух частей: определения (DT) и описания (DD)

Атрибуты

title Показывает текст в виде всплывающей подсказки

Пример

HTML Это язык разметки гипертекста

Браузер Это программа для просмотра гипертекста в интернете

А выглядит код так: <DL title="это список"> <DT>HTML <DD>Это язык разметки гипертекста

<DT>Браузер <DD> Это программа для просмотра гипертекста в интернете </DL>

Категория

Списки

Dt

Тег <DT> и необязательный парный ему </DT>

Тег <DT>(Definition Term) является определением списка определений

Пример

Это определение Описание определения

А выглядит код так: <DL title="это список"> <DT>Это определение <DD>Описание определения

</DL>

Категория

Списки

Справочник тегов

Выделите часть текста

Выделите часть текста и перетащите его в другое текстовое поле

Отслеживаем событие

Выделите часть текста и перетащите его в другое текстовое поле

Отслеживаем событие

Выделите часть текста и перетащите его в другое текстовое поле

Отслеживаем событие

Выделите часть текста и перетащите его в другое текстовое поле

Отслеживаем событие

Выделите часть текста и перетащите его в другое текстовое поле

Отслеживаем событие

Щелкни сюда. Пример для заголовка без скрипта

Пример для кнопки с применением скрипта

И сюда

Sub clickme() MsgBox "Теперь вы крутой веб-мастер!", 48, "HTML в примерах" End Sub

Событие ONCLICK

Событие ONCLICK возникает при щелчке левой кнопкой мыши

Синтаксис

Пример

Событие ONCOPY

Событие ONCOPY возникает при копировании в буфер обмена. Кстати, если присвоить данному событие значение ="return false", то выделенный текст не попадет в буфер обмена. Если вы добавите эту строчку в тег BODY, то обеспечите себе небольшую защиту своего текста

Синтаксис

Пример

Событие ONDRAG

Событие ONDRAG возникает сразу же после события ONDRAGSTART и постоянно присутствует при процессе операции перетаскивания

Синтаксис

Пример

Событие ONDRAGEND

Событие ONDRAGEND возникает, если пользователь закончил перетаскивать объект, независимо от того, где закончилась операция перетаскивания

Синтаксис

Событие ONDRAGENTER

Событие ONDRAGENTER возникает, когда пользователь перетаскивает объект к доступному объекту-приемнику

Синтаксис

Событие ONDRAGLEAVE

Событие ONDRAGLEAVE возникает, если пользователь не сбросил объект на доступный объект-приемник, а увел курсор мыши в другое место

Синтаксис

Событие ONDRAGOVER

Событие ONDRAGOVER возникает сразу же после события ONDRAGENTER и присутствует постоянно, пока объект находится над доступным объектом-приемником

Синтаксис

Событие ONDRAGSTART

Событие ONDRAGSTART возникает на объекте-источнике, когда пользователь начинает перетаскивать выделенный текст или выделенный объект

Синтаксис

Пример

Событие ONDROP

Событие ONDROP возникает перед событием ONDRAGEND при отпускании кнопки мыши во время операции перетаскивания

Синтаксис

Событие ONMOUSEOUT

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

Синтаксис

Пример

Поместите указатель мыши над этим текстом а затем уведите мышь в другое место и вы увидите изменение цвета текста при наступлении события ONMOUSEOUT

Аналогично, при попадании указателя мыши на картинку происходит замена картинки на другое изображение. Для этого присвойте имя исходной картинке (напр. name="cat1") и прописываете необходимые данные

Событие ONMOUSEOVER

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

Синтаксис

Пример

Поместите указатель мыши над этим текстом и вы увидите изменение цвета текста при наступлении события ONMOUSEOVER

Событие ONSELECTSTART

Событие ONSELECTSTART возникает при выделении объекта или текста. Кстати, если присвоить данному событие значение ="return false", то выделения не произойдет. Если вы добавите эту строчку в тег BODY, то обеспечите себе небольшую защиту своего текста

Синтаксис

Пример

Чтобы посмотреть код для примеров,

Чтобы посмотреть код для примеров, щелкните правой кнопкой мыши и выберите "В виде HTML"

Выдели часть красного текста, щелкни правой кнопкой и выбери Копировать

Выдели любой участок зеленого текста и скопируй его. Затем попробуй вставить скопированный текст куда-нибудь, и увидишь, что на самом деле ты ничего не скопировал!

Выдели часть текста и попробуй его перетащить.

Выдели часть текста и попробуй его перетащить Выдели часть текста и попробуй его перетащить

Выдели часть зеленого текста и попробуй его перетащить.

Пример для кнопки с применением скрипта

И сюда

Sub clickme() MsgBox "Теперь вы крутой веб-мастер!", 48, "HTML в примерах" End Sub

Выдели меня и сработает событие ONSELECTSTART

Попробуй выделить меня! Что не получилось? Бедненький, мне тебя жалко!

Em

Тег <EM> и обязательный парный ему </EM>

Тег <em> используется для выделения, подчеркивания важных фрагментов текста курсивом (наклонный текст). Происходит от слова emphasis - акцент. Аналогичен тегу I

Пример

Это обычный текст

А это уже текст с использованием тега <em>

Категория

Теги логического форматирования текста

Тег <FIELDSET>

Тег <FIELDSET> рисует рамку вокруг текста и других объектов, содержащихся в контейнере. Закрывающий тег требуется

Атрибуты

Примеры

Группа кнопочек

Два текстовых поля

Категория

Элементы управления

Тег <font>

Тег <font> определяет выводимый шрифт, его цвет и размер. Закрывающий тег требуется

Атрибуты

colorУстанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета,например для зеленого цвета

faceОпределяет гарнитуру шрифта sizeРазмер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3 Примечание: Атрибуты можно объединять

Пример

Это обычный текст

А это уже текст с использованием тега <font size=1>

Текст с использованием шрифта семейства courier

Используем тег <font size=5 color="blue">

Категория

Теги форматирования текста

Тег <FORM>

Тег FORM является контейнером для элементов управления и предоставляет возможность вводить информацию и отправлять ее на сервер. Создание вложенных форм не допускается. Закрывающий тег требуется

Атрибуты

actionУказывает адрес, по которому выполняется обработка формы methodСпособ пересылки формы на серве. Возможны два значения - GET и POST

nameИмя формы для доступа к ее элементам из скриптовых языков

Пример

Категория

Другие теги

Тег <frame>

Тег <frame> служит для описания фрейма. Закрывающий тег не требуется

Атрибуты

srcАдрес объекта (страницы)

Пример

Простейший пример фреймов <HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <FRAMESET COLS="30 %, *"> <FRAME SRC="leftframe.html"> <FRAME SRC="rightframe.html"> </FRAMESET> </HTML>

Категория

Теги форматирования текста

Тег <frame> служит для описания одного фрейма (его вид и содержание). Закрывающий тег не требуется

Атрибуты

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

Пример

Категория

Теги форматирования текста

Справочник тегов

Alpha

Фильтр Alpha устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента

Синтаксис:

STYLE="filter:alpha(Opacity, FinishOpacity, Style, StartX, StartY, FinishX, FinishY)"

Параметры

OpacityЗначение прозрачности. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно FinishOpacityНеобязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style Style0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент StartXНачальные координаты градиента по горизонтали StartYНачальные координаты градиента по вертикали FinishXКонечные координаты градиента по горизонтали FinishYКонечные координаты градиента по вертикали

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:alpha(Opacity=50)>

Blur

Фильтр Blur размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра

Синтаксис:

STYLE="filter:blur(Add, Direction, Strength)"

Параметры

AddОбъект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец DirectionНаправление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов) StrengthСтепень размытия

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:blur(Add=1, Direction=1, Strength=15)>

Chroma

Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным

Синтаксис:

STYLE="filter:chroma(Color)"

Параметры

ColorЦвет, который будет прозрачным

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:chroma(color=#6c75d2)>

DropShadow

Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень

Синтаксис:

STYLE="filter:dropshadow(Color=значение, OffX=значение,OffY=значение,positive=эначение)"

Параметры

ColorЦвет тени OffXСмещеение тени относительно текста по оси X OffYСмещеение тени относительно текста по оси Y positiveХарактер освещения (0 или 1)

Пример

Пример фильтра dropshadow

Код для примера <TABLE BORDER=1> <TR> <TD STYLE=filter:dropshadow(color=silver,offx=3,offy=3,positive=0)>Пример фильтра shadow </TABLE>

FlipH

Фильтр FlipH переворачивает объект горизонтально

Синтаксис:

STYLE="filter:FlipH"

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:fliph()>

FlipV

Фильтр FlipV переворачивает объект вертикально

Синтаксис:

STYLE="filter:FlipV"

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:flipv()>

Справочник тегов

Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта

Синтаксис:

STYLE="filter:Glow(Strength=значение,Color=значение)"

Параметры

StregthСила свечения в диапазоне 0-100 ColorЦвет свечения

Пример

Пример фильтра glow

Код для примера <TABLE BORDER=1> <TR> <TD STYLE=filter:glow(strength=5,color=red)>Пример фильтра glow </TABLE>

Справочник тегов

Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах

Синтаксис:

STYLE="filter:gray"

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:gray()>

Invert

Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные

Синтаксис:

STYLE="filter:invert"

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:invert()>

Mask

Фильтр Mask отображает текст так, как будто он выделен мышью

Синтаксис:

STYLE="filter:mask(Color=значение)"

Параметры

ColorЦвет, окружающий текст

Пример

Пример фильтра Mask

Код для примера <TABLE BORDER=1> <TR> <TD STYLE=filter:mask(color=darkblue)>Пример фильтра shadow </TABLE>

Shadow

Фильтр Shadow создает эффект тени

Синтаксис:

STYLE="filter:shadow(Color=значение, Direction=значение)"

Параметры

ColorЦвет тени DirectionНаправление тени в градусах

Пример

Пример фильтра shadow

Код для примера <TABLE BORDER=1> <TR> <TD STYLE=filter:shadow(color=green,direction=45)>Пример фильтра shadow </TABLE>

Wave

Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси

Синтаксис:

STYLE="filter:Wave(add=оригинал, freq=частота, lightStrength=величина, phase=начальная фаза, strength=величина)"

Параметры

addБулево значение, определяющее использование оригинала (0 или 1). По умолчанию 0 freqКоличество волн lightStrengthвеличина подсветки phaseначальная фаза. По умолчанию - 0, изменяется от 0 до 100 strengthвеличина смещения

Пример

Пример фильтра Wave

Код для примера <TABLE BORDER=1 STYLE=filter:wave(add=0,freq=2,lightstrength=10,phase=1,strength=3)> <TR> <TD>Пример фильтра shadow </TABLE>

Xray

Фильтр XRay отображает объект в черно-белом варианте, как на рентгеновском снимке

Синтаксис:

STYLE="filter:xray()"

Пример

Образец	Фильтр

Код для примера <IMG SRC="cat.jpg" STYLE=filter:xray()>

Head

Тег <HEAD> и парный ему </HEAD>

Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин

Категория

Теги форматирования документа

Hr

Тег <HR>. Закрывающий тег не требуется

Тег <HR> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка

Атрибуты

sizeУстанавливает высоту(толщину) линии widthУстанавливает ширину линии в пикселах или процентах Создает линию без тени colorЗадает линии определенный цвет

Пример

Это обычная линия <hr>

Это линия потолще и красная <hr size=3 color=red>

Категория

Теги форматирования текста

Html

Тег <HTML> и парный ему </HTML>

Тег <HTML> указывает программе просмотра страниц что это HTML документ

Категория

Теги форматирования документа

i

Тег <i> и обязательный парный ему </i>

Тег <i> создает наклонный текст

Пример

Это обычный текст

А это уже наклонный текст с использованием тега <i>

Категория

Теги физического форматирования текста

Тег <IFRAME>

Тег <IFRAME> создает плавающее окно. Обязателен закрывающий тег

Атрибуты

alignВыравнивание. Аналогичен этому же параметру в IMG

frameborderВыводит или не выводит рамку вокруг фрейма. Может принимать значения: 1 (по умолчанию, рамка выводится), 0 (рамка не выводится), yes (аналогично 1), no (аналогично 0) heightВысота фрейма marginheightОтступы содержимого iframe от верхнего и нижнего края marginwidthОтступы содержимого iframe от левого и правого края nameИмя фрейма. Позволяет загружать любую желаемую страничку в получаемое при помощи IFRAME окно scrollingЗадает свойства скроллинга. Возможны три значения:
auto (по умолчанию, браузер самостоятельно определяет возможность скроллинга)

yes (скроллинг возможен)

no (скроллинг невозможен) srcАдрес загружаемого документа widthШирина фрейма

Пример

Загрузим в плавающее окно какую-нибудь страничку справочника

Категория

Фреймы

Тег <IMG>

Тег IMG служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF). Чтобы картинка была одновременно и ссылкой, то поместите тег IMG между <a href=...><img src="xakep.gif"></a>

Атрибуты

srcОбязательный атрибут, указывающий URL рисунка alignВыравнивает изображение к одной из сторон документа

left	Выравнивание по левому краю
right	Выравнивание по правому краю
center	Выравнивание по центру
bottom	Выравнивание по нижнему краю
top	Выравнивание по верхнему краю
middle	Выравнивание по середине

altВыводит текст к картинке. Полезно, если браузер не отображает графику на странице borderУстанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения GALLERYIMG = Поддержка Панели управления изображениями. Данная панель появляется при нахождении указателя мыши на изображении и позволяет быстро сохранить картинку, распечатать, послать на e-mail, открыть папку Мои рисунки. По умолчанию данная панель появляется только при размерах более 130 пикселах. Но можно включить эту панель с помощью этого атрибута. Может принимать значениея yes (или true) и no (или false). Смотри также META

ismapСообщает, что изображение является картой-изображением на сервере heightВысота картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером hspaceОпределяет размер свободного места в пикселах слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста usemapСообщает, что изображение является картой-изображением на стороне клиента vspaceОпределяет размер свободного места в пикселах сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста widthШирина картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

Пример

Код с использованием тега <img>

Картинка-ссылка

Категория

Графика

Тег <INPUT>

Тег <INPUT> предназначен для создания элементов управления и всегда используется совместно с атрибутом TYPE. Закрывающий тег не требуется

Атрибуты

titleВсплывающая подсказка valueЗадает отображаемый текст для text, password, button, reset, submit sizeУстанавливает число видимых символов в text maxlengthУстанавливает максимально допустимое число вводимых символов в text checkedFalse или True - Принимает начальное состояние для checkbox и radio (по умолчанию False) typeОписывает тип интерфейсного элемента. Может принимать следующие значения

text	создает строку для ввода текста
password	создает строку для ввода текста, при этом отображает вводимые символы как звездочки (*)
checkbox	создает «включатель»
radio	создает «исключающий переключатель». Как правило, используют блоки из нескольких таких элементов
file	создает элемент для выбора локальных файлов. Например, строку для имени файла и кнопку "Обзор", при нажатии на которую открывается диалог «Выбор файла»
hidden	создает невидимый для пользователя элемент. Может использоваться для отправки дополнительной, служебной информации
image	создает элемент формы в виде кнопки-изображения
button	создает стандартную кнопку
submit	создает кнопку «Подача запроса»
reset	создает кнопку «Сброс»

styleЗадает различные стили. Например, высоту или ширину элемента

Sub cmdclick() MsgBox "А вы способный ученик!", 0, "HTML в примерах" End Sub

Примеры

Радиопереключатели

Можно выбрать только один элемент

Попробуйте

Категория

Элементы управления

Справочник тегов

AddFavorite

Метод AddFavorite выводит диалоговое окно с приглашением занести заданный адрес в Избранное (аналогичное при выборе меню Избранное-Добавить в Избранное)

Синтаксис

external.AddFavorite(sURL [, sTitle])

Параметры

sURLТребуется. Строка, задающая адрес страницы для занесения его в Избранное sTitleНеобязательный параметр. Строка, определяющая заголовок, который будет использоваться в Избранном. Пользователь может изменить этот заголовок в диалоговом окне

Пример

<a href="#xak" onClick="window.external.addFavorite('http://www.xakep.ru/', 'Журнал компьютерных хулиганов');">Журнал XAKEP - добавить в Избранное</a>

Alert

Метод Alert выводит на экран сообщение с заданным текстом

Пример

Метод Alert

sub AlertShow() alert "Ну, заяц, погоди!" end sub

Код для примера <script language="vbscript"> sub AlertShow() alert "Ну, заяц, погоди!" end sub </script>

ALinkColor

Свойство ALinkColor позволяет узнать или установить цвет активной ссылки. Ссылка активна, когда курсор мыши находится на ней и нажата кнопка мыши, но не отпущена. Задавать цвет можно как в формате RGB (напр."#008000"), так в символьном виде (напр. "green")

AppCodeName

Свойство appCodeName позволяет узнать кодовое имя приложения

AppName

Свойство appName позволяет узнать имя приложения. На данный момент браузеры IE 3.0 и выше возвращают строку "Microsoft Internet Explorer"

AppVersion

Свойство appVersion позволяет узнать версию приложения

AvailHeight

Свойство availHeight позволяет узнать рабочую высоту экрана в пикселах без учета панели задач и других панелей, постоянно занимающих место на экране, например, панели MS Office или ICQ

AvailWidth

Свойство availWidth аналогично позволяет узнать рабочую ширину экрана в пикселах

Back

Метод Back возвращает назад в списке History на n шагов. Аналогично нажатию кнопки Назад n раз в браузере

Пример

Метод Back

sub Back() history.back 1 end sub

BgColor

Свойство bgColor позволяет узнать или установить цвет фона документа. Задавать цвет можно как в формате RGB (напр."#008000"), так в символьном виде (напр. "green")

Charset

Свойство charset позволяет узнать или получить кодировку для текущего документа

Close

Метод Close закрывает текущую страницу

Пример

Метод Close

sub CloseShow() window.close end sub

Код для примера <script language="vbscript"> sub CloseShow() window.close end sub </script>

ColorDepth

Свойство colorDepth позволяет узнать разрешение экрана (число бит на пиксел). Может принимать следующие значения: 1, 4, 8, 15, 16, 24, 32

Confirm

Метод Confirm выводит на экран диалоговое окно с заданным текстом запроса и кнопками OK и Отмена. Если будет нажата кнопка OK, то возвращается True (-1), если Отмена, то возвращается False (0)

Пример

Метод Confirm

sub ConfirmShow() Dim retval retval = confirm ("Удалить этот справочник?")

If retval Then alert "Подумай еще раз! Пожалеешь!" Else alert "Спасибо! Я тебе еще пригожусь!" End If

end sub

Код для примера <script language="vbscript"> sub ConfirmShow() Dim retval retval = confirm ("Удалить этот справочник?")

If retval Then alert "Подумай еще раз! Пожалеешь!" Else alert "Спасибо! Я тебе еще пригожусь!" End If

end sub </script>

Cookie

Свойство Cookie позволяет узнать или установить текстовое выражение (cookie), связанное с данным выражением

CookieEnabled

Свойство cookieEnabled позволяет узнать, поддерживает ли браузер cookie. Свойство только для чтения. Может принимать два значения - Истина (True) или Ложь (False)

DefaultCharset

Свойство defaultCharset позволяет узнать кодировку по умолчанию, используемую текущими языковыми региональными настройками системы

Document

Объект Document представляет собой HTML-документ, открытый в данный момент в окне Internet Explorer. Этот объект можно использовать для получениядоступа к другим объектам в объектной модели Internet Explorer, например, к коллекциям Form или Link, а также для установки различных параметров данного документа

External

Объект external позволяет получить доступ к дополнительным объектам компонентов Internet Explorer

FgColor

Свойство fgColor позволяет узнать или установить цвет текста в документе. Задавать цвет можно как в формате RGB (напр."#008000"), так в символьном виде (напр. "green")

FileCreatedDate

Свойство fileCreatedDate позволяет узнать дату создания файла. Только для чтения

FileSize

Свойство fileSize позволяет узнать размер файла. Только для чтения

Height

Свойство height позволяет узнать высоту экрана в пикселах