Abbr

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

Тег <ABBR> используется для аббревиатуры

Пример

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

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

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

Категория

Другие теги

HTML в примерах

Тег

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

Пример

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

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

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

Категория

Другие теги

Тег <A>

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

Атрибуты

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

Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email"> targetСтрока, определяющая или получающая одно из следующих значений

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

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

Пример

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

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

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

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

Категория

Гиперссылки

b

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

Тег <B> создает жирный текст

Атрибуты

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

Пример

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

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

Категория

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

Big

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

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

Атрибуты

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

Пример

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

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

Категория

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

Blockquote

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

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

Пример

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

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

Категория

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

Body

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

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

Категория

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

Br

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

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

Пример

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

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

Категория

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

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

Кнопочка

в таблице

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

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

Тег <BUTTON>

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

Атрибуты

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

Center

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

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

Пример

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

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

Категория

Другие теги

Cite

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

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

Атрибуты

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

Пример

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

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

Категория

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

Code

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

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

Атрибуты

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

Пример

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

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

Категория

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

HTML в примерах

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

color

Определяет цвет элемента
I {color: green;}

background-color

Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом.

H4 {background-color: yellow;}

В скриптовых языках используйте object.style.backgroundColor [ = sColor ]

Примеры

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

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

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: ПОЛОСА ПРОКРУТКИ

Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент 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: РАЗМЕР ЭЛЕМЕНТА

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}

Примеры

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

В языке 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 %

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

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

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

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

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

Текст с уменьшеным интервалом на 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>

Категория

Списки

HTML в примерах

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

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

И сюда

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

Событие ONCLICK

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

Синтаксис

Пример

Событие ONCOPY

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

Синтаксис

Пример

Событие ONMOUSEOVER

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

Синтаксис

Пример

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

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

Событие ONSELECTSTART

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

Синтаксис

Пример

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

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

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

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

Выдели меня и сработает событие 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">

Категория

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

Тег <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Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя

Пример

Категория

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

HTML в примерах

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

HTML в примерах

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

HTML в примерах

Фильтр 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> создает плавающее окно. Обязателен закрывающий тег

Атрибуты

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

Пример

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

Категория

Фреймы

Тег <IMG>

Тег <img> служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG

Атрибуты

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

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

altВыводит текст к картинке. Полезно, если браузер не отображает графику на странице borderУстанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения 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

Примеры

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

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

Попробуйте

Категория

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

Aтрибуты

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

имени атрибута, например WIDTH

знак равенства (=)

значения атрибута, которое задается строкой символов, например, "80".

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бывает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.

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

символов английского алфавита (A - Z, a - z)

цифр (0 - 9)

промежутков времени

дефисов (-)

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER". Ссылка на URL, например, HREF=foo.htm, допустима, однако, когда URL используется с атрибутами, он должен быть заковычен, например HREF="http://www.hut.fi/". Существуют некоторые броузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

В пределах значения атрибута теги HTML не воспринимаются. А escape последовательности распознаются и интерпретируются, как символы.

Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <UL COMPACT="COMPACT"> можно сократить до <UL COMPACT>. Некоторые агенты пользователей (программы просмотра пользователя, броузеры) даже требуют минимизации для некоторых атрибутов (COMPACT, ISMAP, CHECKED, NOWRAP, , NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

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

Что такое CSS

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

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

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

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

Чувствительность к регистру

Что касается имен тегов, атрибутов и большинства значений атрибутов, HTML нечувствителен к регистру. Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится.Но существуют и чувствительные к регистру конструкции языка, а именно:

escape последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, <)

URL, так как он может содержать наименования файлов, которые являются case чувствительными во многих операционных системах (например, в Unix).

Фильтры в DHTML

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

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

Таблица 1. Элементы к которым применяются фильтры

BODY	Всегда
BUTTON	Всегда
DIV	Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позицирован
IMG	Всегда
INPUT	Всегда
MARQUEE	Всегда
SPAN	Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позицирован
TABLE	Всегда
TD	Всегда
TEXTAREA	Всегда
TH	Всегда

Фильтры не применяются к следующим элементам HTML-страницы: апплеты, Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т.д.

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

filter: имя_фильтра([параметры]);

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

имя_параметра=значение_параметра

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

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

В данном примере к графическому изображению применяются два фильтра: первый (blur) размазывает изображение на глубину в 50 пикселов, а второй (fliph) просто зеркально его отображает в горизонтальном направлении.

В Internet Explorer'e реализовано большое число разнообразных фильтров. В таблице 2 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.

Таблица Фильтры и их краткие описания

alpha	Устанавливает уровень непрозрачности объекта
blur	Создаёт эффект размытия изображения
chroma

Делает прозрачными пикселы заданного цвета

dropshadow	Рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень
flipH	Переворачивает объект горизонтально
flipV	Переворачивает объект вертикально
glow	Добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта
gray	Удаляет цветовую гамму объекта и отображает его в серых тонах
invert	Меняет оттенок, насыщение и яркость объекта на противоположные
light	Подсвечивает объект
mask	Отображает текст так, как будто он выделен мышью
shadow	Рисует силует объекта вдоль одной из его границ в заданном направлении, создавая эффект тени
wave	Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности
xray	Изменяет глубину цвета объекта и после этого отображает его в чёрно-белых тонах, имитируя рентгеновский снимок объекта

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

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

Определить, какие фильтры применены к элементу, можно с помощью набора filters соответсвующего объекта. В нём хранятся ссылки на все применяемые к элементу фильтры: <IMG ID=picture SRC="picture.gif" STYLE="filter:wave(strength=100) gray() fliph()>

...........

<SCRIPT>

strengthWave=picture.filters.wave.strength;

if( picture.filters['gray'].enabled&&strengthWave>= 100){

picture.filters.wave.strength += 50

}

</SCRIPT>

В приведённом примере объект picture сценария соответствует элементу <IMG> HTML-страницы. Переменная strengthWave хранит значение параметра strength фильтра wave. Оператор условия проверяет, не отключался ли фильтр gray объекта picture ранее в каком-либо сценарии (значение свойства enabled фильтров равно true, если разрешено его примененние к элементу). Если этот фильтр продолжает применяться, и параметр strength фильтра wave больше или равен 100, то этот параметр увеличивается на 50.

Можно ссылаться на фильтры объекта и с помощью числового индекса набора filters. Каждому фильтру, заданному в параметре или теге STYLE, соответствует определённый числовой индекс этого набора. Все фильтры индексируются в порядке их перечисления в свойстве filter каскадных таблиц стилей, начиная с нуля. Так, в привидённом примере фильтру wave соответствует индекс 0, фильтру gray - 1 и фильтру fliph - 2. Поэтому получить значение параметра strenth фильтра wave можно было бы и так:

strengthWave=picture.filters[0].strength;

Греческие буквы

Α	Α	Α	заглавная альфа
Β	Β	Β	заглавная бета
Γ	Γ	Γ	заглавная гамма
Δ	Δ	Δ	заглавная дельта
Ε	Ε	Ε	заглавная эпсилон
Ζ	Ζ	Ζ	заглавная дзета
Η	Η	Η	заглавная эта
Θ	Θ	Θ	заглавная тета
Ι	Ι	Ι	заглавная иота
Κ	Κ	Κ	заглавная каппа
Λ	Λ	Λ	заглавная лямбда
Μ	Μ	Μ	заглавная мю
Ν	Ν	Ν	заглавная ню
Ξ	Ξ	Ξ	заглавная кси
Ο	Ο	Ο	заглавная омикрон
Π	Π	Π	заглавная пи
Ρ	Ρ	Ρ	заглавная ро
Σ	Σ	Σ	заглавная сигма
Τ	Τ	Τ	заглавная тау
Υ	Υ	Υ	заглавная ипсилон
Φ	Φ	Φ	заглавная фи
Χ	Χ	Χ	заглавная хи
Ψ	Ψ	Ψ	заглавная пси
Ω	Ω	Ω	заглавная омега
α	α	α	строчная альфа
β	β	β	строчная бета
γ	γ	γ	строчная гамма
δ	δ	δ	строчная дельта
ε	ε	ε	строчная эпсилон
ζ	ζ	ζ	строчная дзета
η	η	η	строчная эта
θ	θ	θ	строчная тета
ι	ι	ι	строчная иота
κ	κ	κ	строчная каппа
λ	λ	λ	строчная лямбда
μ	μ	μ	строчная мю
ν	ν	ν	строчная ню
ξ	ξ	ξ	строчная кси
ο	ο	ο	строчная омикрон
π	π	π	строчная пи
ρ	ρ	ρ	строчная ро
&sigmaf;	ς	ς	строчная сигма(final)
σ	σ	σ	строчная сигма
τ	τ	τ	строчная тау
υ	υ	υ	строчная ипсилон
φ	φ	φ	строчная фи
χ	χ	χ	строчная хи
ψ	ψ	ψ	строчная пси
ω	ω	ω	строчная омега

Группирование

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

H1 {font-family: Verdana}

H2 {font-family: Verdana}
можно сгруппировать и задать в виде одного правила со списком селекторов

H1, H2 {font-family: Verdana}

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

H2 {font-weight: bold}

H2 {font-size: 14pt}

H2 {font-family: Verdana}

можно сгруппировать в виде одного правила, сгруппировав определения:

H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;}

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

H2 {font: bold 14pt Verdana}

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

Идентификаторы

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

Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #: <STYLE TYPE="text/css">

</STYLE>
<BODY>
<P ID=myID> Разрежённые слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>

В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.

Импортирование

В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.

Элементы HTML

Большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:

<H1>Foreword</H1>

В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например <HR>, являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен. Далее мы будем называть теги по их именам, опуская обязательные угловые скобки.

Классы

А что делать, если нужно некоторые ссылки отобразить по-другому? CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

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

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:

<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blue">Красный шрифт на синем фоне</H1>

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

Теперь два класса red и blue можно применять к любым элементам документа:

<P CLASS="red">Красный шрифт</P>
<P CLASS="blue">Красный шрифт на синем фоне</P>

Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.

Наследование

В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определён как синий(P {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству color, например font-family, font-size.

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

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

BODY {color: black;
font-family: "Times New Roman";
background: url(picture.gif) white;
}

Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом picture.gif, или на белом фоне, если файл недоступен.

Общая пунктуация

–	–	–	тире
—	—	—	длинное тире
‘	‘	‘	левая одиночная кавычка
’	’	’	правая одиночная кавычка
&sbquo;	‚	‚	нижняя одиночная кавычка
“	“	“	левая двойная кавычка
”	”	”	правая двойная кавычка
&bdquo;	„	„	нижняя двойная кавычка

Практическое освоение CSS

Существует целых четыре способа связывания документа и таблицы стилей:

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

Остановимся на каждом из этих способов более подробно.

Прочие символы

&spades;	♠	♠	знак масти 'пики'
&clubs;	♣	♣	знак масти 'трефы'
&hearts;	♥	♥	знак масти 'червы'
&diams;	♦	♦	знак масти 'бубны'
&circ;	ˆ	ˆ	диакритический знак над гласной
&tilde;	˜	˜	тильда
™	™	™	знак торговой марки

Простейший пример

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

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений.

Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Разделение на строки и использование пробелов и символов табуляции

Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PRE (предварительно отформатированный текст). То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML. С другой стороны, пробел в файле HTML может быть представлен с использованием любого количества пробелов или новыми (пустыми) строками.

Селекторы

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

< STYLE TYPE="text/css">

</--STYLE>

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

Некоторые символы не входят в базовую часть таблицы кодов ASCII. К ним относятся буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы "<" и ">", используемые для указания тегов.

В этих случаях можно вводить нужные символы с помощью специальных кодов. Коды начинаются с символа "амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;).

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

ИмяКодВидОписание

"	"	"	двойная кавычка
&	&	&	амперсанд
<	<	<	знак 'меньше'
>	>	>	знак 'больше'
			неразрывный пробел
¡	¡	¡	перевернутый восклицательный знак
¢	¢	?	цент
£	£	£	фунт стерлингов
¤	¤	¤	денежная единица
¥	¥	¥	иена или юань
¦	¦	¦	разорванная вертикальная черта
§	§	§	параграф
¨	¨	¨	умляут
©	©	©	знак copyright
ª	ª	ª	женский порядковый числитель
«	«	«	левая двойная угловая скобка
¬	¬	¬	знак отрицания
			место возможного переноса
®	®	®	знак зарегистрированной торговой марки
¯	¯	¯	верхняя горизонтальная черта
°	°	°	градус
±	±	±	плюс-минус
²	²	²	"в квадрате"
³	³	³	"в кубе"
´	´	´	знак ударения
µ	µ	µ	микро
¶	¶	¶	символ параграфа
·	·	·	точка
¸	¸	¸	седиль (орфографический знак)
¹	¹	¹	верхний индекс 'один'
º	º	º	мужской порядковый числитель
»	»	»	правая двойная угловая скобка
¼	¼	¼	одна четвертая
½	½	½	одна вторая
¾	¾	¾	три четвертых
¿	¿	¿	перевернутый вопросительный знак
À	À	À	латинская заглавная А с тупым ударением
Á	Á	Á	латинская заглавная А с острым ударением
Â	Â	Â	латинская заглавная А с диакритическим знаком над гласной
Ã	Ã	Ã	латинская заглавная А с тильдой
Ä	Ä	Ä	латинская заглавная А с двумя точками
Å	Å	Å	латинская заглавная А с верхним кружком
Æ	Æ	Æ	латинские заглавные символы AE вместе
Ç	Ç	Ç	латинская заглавная C с седилем
È	È	È	латинская заглавная E с тупым ударением
É	É	É	латинская заглавная E с острым ударением
Ê	Ê	Ê	латинская заглавная E с диакритическим знаком над гласной
Ë	Ë	Ë	латинская заглавная E с двумя точками
Ì	Ì	Ì	латинская заглавная I с тупым ударением
Í	Í	Í	латинская заглавная I с острым ударением
Î	Î	Î	латинская заглавная I с диакритическим знаком над гласной
Ï	Ï	Ï	латинская заглавная I с двумя точками
Ð	Ð	Ð	латинская заглавная D с черточкой
Ñ	Ñ	Ñ	латинская заглавная N с тильдой
Ò	Ò	Ò	латинская заглавная O с тупым ударением
Ó	Ó	Ó	латинская заглавная O с острым ударением
Ô	Ô	Ô	латинская заглавная O с диакритическим знаком над гласной
Õ	Õ	Õ	латинская заглавная O с тильдой
Ö	Ö	Ö	латинская заглавная O с двумя точками
×	×	×	знак умножения
Ø	Ø	Ø	латинская заглавная O со штрихом
Ù	Ù	Ù	латинская заглавная U с тупым ударением
Ú	Ú	Ú	латинская заглавная U с острым ударением
Û	Û	Û	латинская заглавная U с диакритическим знаком
Ü	Ü	Ü	латинская заглавная U с двумя точками
Ý	Ý	Ý	латинская заглавная Y с острым ударением
Þ	Þ	Þ	латинская заглавная THORN
à	à	à	латинская строчная a с тупым ударением
á	&##225;	á	латинская строчная a с острым ударением
â	&##226;	â	латинская строчная a с диакритическим знаком
ã	ã	ã	латинская строчная a с тильдой
ä	ä	ä	латинская строчная a с двумя точками
å	å	å	латинская строчная a с верхним кружком
æ	æ	æ	латинская строчные буквы ae
ç	ç	ç	латинская строчная c с седилем
è	è	è	латинская строчная e с тупым ударением
é	é	é	латинская строчная e с острым ударением
ê	ê	ê	латинская строчная e с диакритическим знаком
ë	ë	ë	латинская строчная e с двумя точками
ì	ì	ì	латинская строчная I с тупым ударением
í	í	í	латинская строчная I с острым ударением
î	î	î	латинская строчная I с диакритическим знаком
ï	ï	ï	латинская строчная I с двумя точками
ð	ð	ð	латинская строчные символы eth
ñ	ñ	ñ	латинская строчная N с тильдой
ò	ò	ò	латинская строчная O с тупым ударением
ó	ó	ó	латинская строчная O с острым ударением
ô	ô	ô	латинская строчная O с диакритическим знаком
õ	õ	õ	латинская строчная I с тильдой
ö	ö	ö	латинская строчная I с двумя точками
÷	÷	÷	знак деления
ø	ø	ø	латинская строчная O со штрихом
ù	ù	ù	латинская строчная U с тупым ударением
ú	ú	ú	латинская строчная U с острым ударением
û	û	û	латинская строчная U с диакритическим знаком
ü	ü	ü	латинская строчная U с двумя точками
ý	ý	ý	латинская строчная Y с острым ударением
þ	þ	þ	латинская строчная thorn
ÿ	ÿ	ÿ	латинская строчная Y с двумя точками
&fnof;	ƒ	?	знак функции

Стрелки

←	←	←	стрелка влево
↑	↑	↑	стрелка вверх
→	→	→	стрелка вправо
↓	↓	↓	стрелка вниз
↔	↔	↔	стрелка влево-вправо

Связывание

Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK, располагающегося внутри тега HEAD ваших страниц:

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.

Свойства элементов, управляемых с помощью CSS

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

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

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

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

РАЗМЕРЫ ЭЛЕМЕНТА

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

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

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

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

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

Есть еще одна небольшая, но очень полезная хитрость – это способ скрыть от устаревших броузеров описания стилей, располагающихся в теге <STYLE>, внутри раздела<HEAD>. Поскольку броузер был написан несколько лет назад, когда никакого CSS еще и в планах не было, он просто не поймет, что это такое написано внутри <STYLE>…</STYLE>, и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.

где <!-- – тег, открывающий комментарий, а > – закрывающий.

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

Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью: вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать один слой текста на другой и получать весьма интересные и привлекательные результаты.

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

Таблица базовых цветов BgColor

Aliceblue

F0F8FF

Antiquewhite

FAEBD7

Aqua

00FFFF

Aquamarine

7FFFD4

Azure

F0FFFF

Beige

F5F5DC

Bisque

FFE4C4

Black

000000

Blanchedalmond

FFEBCD

Blue

0000FF

Blueviolet

8A2BE2

Brown

A52A2A

Burlywood

DEB887

Cadetblue

5F9EA0

Chartreuse

7FFF00

Chocolate

D2691E

Coral

FF7F50

Cornflowerblue

6495ED

Cornsilk

FFF8DC

Crimson

DC143C

Cyan

00FFFF

Darkblue

00008B

Darkcyan

008B8B

Darkgoldenrod

B8860B

Darkgray

A9A9A9

Darkgreen

006400

Darkkhaki

BDB76B

Darkmagenta

8B008B

Darkolivegreen

556B2F

Darkorange

FF8C00

Darkorchid

9932CC

Darkred

8B0000

Darksalmon

E9967A

Darkseagreen

8FBC8F

Darkslateblue

483D8B

Darkslategray

2F4F4F

Darkturquoise

00CED1

Darkviolet

9400D3

deeppink

FF1493

Deepskyblue

00BFFF

Dimgray

696969

Dodgerblue

1E90FF

Firebrick

B22222

Floralwhite

FFFAF0

Forestgreen

228B22

Fuchsia

FF00FF

Gainsboro

DCDCDC

Ghostwhite

F8F8FF

Gold

FFD700

Goldenrod

DAA520

Gray

808080

Green

008000

Greenyellow

ADFF2F

Honeydew

F0FFF0

Hotpink

FF69B4

Indianred

CD5C5C

Indigo

4B0082

Ivory

FFFFF0

Khaki

F0E68C

Lavendar

E6E6FA

Lavenderblush

FFF0F5

Lawngreen

7CFC00

Lemonchiffon

FFFACD

Lightblue

ADD8E6

Lightcoral

F08080

Lightcyan

E0FFFF

Lightgoldenrodyellow

FAFAD2

Lightgreen

90EE90

Lightgrey

D3D3D3

Lightpink

FFB6C1

Lightsalmon

FFA07A

Lightseagreen

20B2AA

Lightskyblue

87CEFA

Lightslategray

778899

Lightsteelblue

B0C4DE

Lightyellow

FFFFE0

Lime

00FF00

Limegreen

32CD32

Linen

FAF0E6

Magenta

FF00FF

Maroon

800000

Mediumauqamarine

66CDAA

Mediumblue

0000CD

Mediumorchid

BA55D3

Mediumpurple

9370D8

Mediumseagreen

3CB371

Mediumslateblue

7B68EE

Mediumspringgreen

00FA9A

Mediumturquoise

48D1CC

Mediumvioletred

C71585

Midnightblue

191970

Mintcream

F5FFFA

Mistyrose

FFE4E1

Moccasin

FFE4B5

Navajowhite

FFDEAD

Navy

000080

Oldlace

FDF5E6

Olive

808000

Olivedrab

688E23

Orange

FFA500

Orangered

FF4500

Orchid

DA70D6

Palegoldenrod

EEE8AA

Palegreen

98FB98

Paleturquoise

AFEEEE

Palevioletred

D87093

Papayawhip

FFEFD5

Peachpuff

FFDAB9

Peru

CD853F

Pink

FFC0CB

Plum

DDA0DD

Powderblue

B0E0E6

Purple

800080

Red

FF0000

Rosybrown

BC8F8F

Royalblue

4169E1

Saddlebrown

8B4513

Salmon

FA8072

Sandybrown

F4A460

Seagreen

2E8B57

Seashell

FFF5EE

Sienna

A0522D

Silver

C0C0C0

Skyblue

87CEEB

Slateblue

6A5ACD

Slategray

708090

Snow

FFFAFA

Springgreen

00FF7F

Steelblue

4682B4

Tan

D2B48C

Teal

008080

Thistle

D8BFD8

Tomato

FF6347

Turquoise

40E0D0

Violet

EE82EE

Wheat

F5DEB3

White

FFFFFF

Whitesmoke

F5F5F5

Yellow

FFFF00

YellowGreen

9ACD32

Теги HTML

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

левой угловой скобки < (такого же, как "меньше чем" символа)

необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом в этом контексте Вы можете читать символ /, как конец...

имени тега, например TITLE или PRE

необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER

правой угловой скобки > (такой же, как символа "больше чем").

Примеры:

<H1>

Теги по категориям

Гиперссылки

Графика

Таблицы

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

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

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

Списки

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

Фреймы

Другие теги

Гиперссылки A

Графика IMG

Таблицы CAPTION

TABLE

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

HTML

Внедрение

Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания броузеру использовать CSS.

Встраивание в теги документа

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

Знаки пунктуации

Kbd

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

Тег <KBD> отмечает текст, вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. От английского keyboard - клавиатура

Пример

Для запуска Windows наберите: win.

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

Для запуска Windows наберите: <kbd>win</kbd>

Категория

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

Li

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

Тег <LI>(List Item) служит для обозначения элемента (строки) списка. Используется в нумерованных(OL) и ненумерованных(UL) списках

Пример

Пугачева Орбакайте Киркоров Пресняков

А выглядит код так: <OL type=A title="нумерованный список"> <LI>Пугачева <LI>Орбакайте <LI>Киркоров <LI>Пресняков </OL>

Категория

Списки

Link

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

Тег <LINK> определяет ссылку. В отличие от тега A, тег LINK может располагаться только в части заголовка HEAD документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.

Пример

Смотри информацию на CSS

Категория

Другие теги

Тег <LEGEND>

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

Атрибуты

Примеры

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

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

Категория

Другие теги

Атрибуты

titleВсплывающая подсказка disabledЕсли установить равным 1, то текст будет выведен серым цветом

Map

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

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

Пример

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

Категория

Другие теги

Marquee

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

Этот элемент является ответом Microsoft на BLINK. MARQUEE заставляет текст не мигать, а прокручиваться, либо перемещаться из стороны в сторону

Атрибуты

BEHAVIOR=ALTERNATE | SCROLL | SLIDE Определяет вид скроллинга

•	•	•	маленький черный кружок
…	…	…	многоточие ...
′	′	′	одиночный штрих - минуты
″	″	″	двойной штрих - секунды
&oline;	‾	‾	надчеркивание
&frasl;	⁄	⁄	косая дробная черта

ALTERNATE	Колебательные движения налево и направо
SCROLL	Перемещение текста в направлении, указанном в DIRECTION. Достигнув края экрана, надпись появляется снова с противоположной стороны
SLIDE	Схоже с SCROLL, но текст перемещается только один раз и останавливается

DIRECTION=DOWN | LEFT | RIGHT | UP Определяет направление скроллинга

DOWN	Движение вниз
LEFT	Движение справа налево. По умолчанию
RIGHT	Движение слева направо
UP	Движение вверх

Пример

ALTERNATE

SCROLL

SLIDE

А выглядит код так: <MARQUEE BEHAVIOR=ALTERNATE DIRECTION="right">Здесь ваш текст</MARQUEE>

Категория

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

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

Первый элемент меню Второй элемент меню
А выглядит код так: <menu disabled=1 title="я - меню!">
<LI>Первый элемент меню <LI>Второй элемент меню </menu>
Категория

Списки

Тег <MENU>

Тег MENU служит для создания ненумерованного списка. Данный тег является устаревшим и оставлен для совместимости со старыми браузерами. Закрывающий тег требуется

Nobr

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

Тег <NOBR> запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами и , будет гарантированно располагаться в одной строке без переноса на другую. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки

Пример

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

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

<nobr>Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку</nobr> Категория

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

Атрибуты

labelЗадает имя для заданной группы

Пример

Кошки

Собаки

Мышки

Попугай

Ворона

Сорока

Категория

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

Ol

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

Тег <OL>(Ordered List) служит для создания нумерованного списка. Допускается вложение нумерованного списка в списки другого вида

Атрибуты

type Тип маркера

A	Заглавные буквы
a	Строчные буквы
I	Заглавные римские цифры
i	Строчные римские цифры
1	Арабские цифры (по умолчанию)

startНачальное значение для нумерованного списка при использовании арабских цифр titleВсплывающая подсказка

Пример

Пугачева Орбакайте Киркоров Пресняков

А выглядит код так: <OL type=A title="нумерованный список"> <LI>Пугачева <LI>Орбакайте <LI>Киркоров <LI>Пресняков </OL>

Категория

Списки

Option

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

Каждый элемент SELECT должен содержать хотя бы один или более элементов OPTION, с помощью которого создаются строки списков

Атрибуты

selectedИндикатор, что данная строка является выбранной по умолчанию. Если данный индикатор отсутствует, то такой строкой является первый элемент

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Код для примера <select size=3> <option>Это список с прокруткой <option>Вторая строка <option>Третья строка <option selected>Четвертая строка</select>

Категория

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

Тег OPTGROUP

Тег OPTGROUP позволяет группировать элементы в SELECT в логические группы. Требуется закрывающий тег

p

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

Тег <P> создает новый параграф. Два или более тега <P>, идущих подряд, заменяются одним

Параметры

alignВыравнивает параграф относительно одной из сторон документа, значения: left, right, или center

left	выравнивание по левому краю. По умолчанию
right	выравнивание по правому краю
center	выравнивание по центру
justify	выравнивание по ширине

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

Пример

Выравниваем параграф по правому краю с помощью соответствующего атрибута <p align="right">

Категория

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

Pre

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

Тег <PRE> обрамляет предварительно отформатированный текст. Преформатированный текст отображается моношириным шрифтом. Получается как бы текстовая вставка в html

Пример

Буря мглою небо кроет, ... То завоет как дитя

Категория

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

Не побоялись нажать на

Sub clickme() Alert "Молодец! Не побоялись нажать на меня!" End Sub
Нажми меня!
А выглядит код так: <script language="VBScript"> Sub clickme() Alert "Молодец! Не побоялись нажать на меня!" End Sub </script> <button onclick="clickme()">Нажми меня!</button>
Категория

Другие теги

Строка содержит одно слово красного

Строка содержит одно слово красного цвета. Причем это слово нельзя выделить.
А выглядит код так: <P&gtСтрока содержит одно слово &ltSPAN STYLE="color:red">красного</SPAN> цвета.
Категория

Другие теги

s

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

Тег <s> указывает, что текст должен быть зачеркнут

Пример

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

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

Категория

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

Samp

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

Тег <SAMP> отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом

Пример

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

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

Категория

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

Select

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

Тег <select> создает список или выпадающий список. Каждый элемент списка описывается тегом Option

Атрибуты

sizeЧисло отображаемых элементов. Если равно 1 или не указано, то выводится одна строчка. Если значение больше 1, то выводится список с прокруткой

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Это выпадающий список Вторая строка Третья строка Четвертая строка

Приведем пример подобия pull-down меню для навигации по сайту

Выбор раздела

1 страница

2 страница

3 страница

4 страница

5 страница

Вот код:

<SELECT NAME="navSelect"

ONCHANGE="top.location.href =

this.options[this.selectedIndex].value">

<OPTION>Выбор раздела</OPTION>

<OPTION VALUE="1.html">1 страница</OPTION>

<OPTION VALUE="2.html">2 страница</OPTION>

<OPTION VALUE="3.html">3 страница</OPTION>

<OPTION VALUE="4.html">4 страница</OPTION>

<OPTION VALUE="5.html">5 страница</OPTION>

</SELECT>

Основную работу выполняет обработчик события ONCHANGE. top ссылается на окно браузера, активное в данный момент. top.location.href - URL документа, отображаемого этим окном. Одним из свойств объекта SELECT является коллекция options, которая содержит параметры элементов выбора. Например navSelect.option[1].value содержит значение "index.html". Свойство элемента SELECT selectedIndex - номер выбранного пункта. Элемент this внутри элемента ссылается именно на этот элемент. Вместо него можно было использовать (в Internet Explorer) ссылку document.all.navSelect, но this гораздо короче и работает в обоих браузерах. Я советую вам всегда использовать элемент this, когда это возможно.

Приведем еще один пример, когда пользователь сначала выбирает пункт из списка и потом щелкает на кнопке

Здесь необходимо пояснить, что каждый

1 страница

2 страница

3 страница

Вот код:

<FORM>

SELECT NAME="navSelect"<>

<OPTION>Выбор раздела</OPTION>

<OPTION VALUE="1.html">1 страница</OPTION>

<OPTION VALUE="2.html">2 страница</OPTION>

<OPTION VALUE="3.html">3 страница</OPTION>

</SELECT><BR>

<INPUT TYPE=BUTTON NAME="go" VALUE="Go!"

ONCLICK="top.location.href =

this.form.navSelect.options[this.form.navSelect.selectedIndex].value">

</FORM>

Здесь необходимо пояснить, что каждый элемент формы имеет свойство form, которое содержит ссылку на его родительскую форму. Таким образом можно сослаться на любой элемент формы из любого другого элемента, чем мы здесь и воспользовались: this.form.navSelect ссылается именно на элемент выбора.

Категория

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

Small

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

Тег <SMALL> выводит более мелкий текст

Атрибуты

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

Пример

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

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

Категория

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

Strong

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

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

Пример

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

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

Категория

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

Sub

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

Тег <sub> приспускает текст

Пример

Текст с использованием тега <sub>
Формула воды - H2O

Категория

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

Sup

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

Тег <sup> приподнимает текст

Пример

Текст с использованием тега <sup>

42 = 16

Категория

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

Тег <SCRIPT>

Элемент SCRIPT используется для включения небольших программ - скриптов (JavaScript, VBScript). При помощи скриптов можно достаточно легко создавать интерактивные страницы. Если броузер не поддерживает сценарии, то содержимое контейнера SCRIPT может быть выведено на экран. Чтобы этого не случилось, весь текст программы вкладывают в комментарий, а поясняющий текст помещают внутрь контейнера NOSCRIPT. Обратите также внимание на то, что закрывающему тегу комментария предшествует комментарий на языке JavaScript (//). Это делается для того, чтобы интерпретатор JavaScript не выдал ошибки, дойдя до символов «чужеродной» конструкции HTML. Закрывающий тег: требуется

Атрибуты

languageОпределяет язык скрипта. Может иметь следующие значения: JScript, javascript, vbs, vbscript, XML srcСодержит ссылку на внешний файл, содержащий скрипт

Тег <SPAN>

Элемент SPAN определяет контейнер для внутреннего текста. Данный элемент предназначен для использования в CSS. Закрывающий тег: требуется

Атрибуты

UNSELECTABLEЗапрещает или разрешает выделять текст в данном элементе (on - запрещает, off - разрешает)

Td

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

Тег <TD> определяет отдельную ячейку в таблице

Атрибуты

heightУказывает высоту элемента в процентах или пикселях alignВыравнивает текст в ячейке

left - по левому краю (по умолчанию) rigth - по правому краю center - по центру

valignВыравнивает текст в ячейке по вертикали

top - по верхнему краю middle - по центру bottom - по нижнему краю

colspanУказывает кол-во столбцев которое объединено в одной ячейке (по умолчанию=1) rowspanУказывает кол-во строк которое объединено в одной ячейке (по умолчанию=1) titleВсплывающая подсказка

Пример

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

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

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

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

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

<TABLE BORDER=2 COLS=2> <TR> <TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH> </TR> <TR > <TD height=70 title="пример">Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд первый</TD> </TR> <TR align=center> <TD>Ячейка столбца первый, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD> </TR> </TABLE>

Категория

Таблицы

Тег <TABLE>

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

Атрибуты

align=Выравнивание таблицы относительно документа. Возможные значения: center, left, right backgroundСтрока, определяющая рисунок для заднего фона bgcolorОпределяет задний фон таблицы borderТолщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки bordercolorЦвет рамки cellspacingЗадает расстояние между ячейками таблицы cellpaddingЗадает расстояние между содержимым ячейки и ее рамкой rulesОписывает рамки вокруг таблицы. Может принимать следующие значения

all	Отображает все части рамки внутри таблицы
cols	Отображает все вертикальные рамки внутри таблицы
groups	Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT
none	Удаляет все рамки вокруг таблицы
rows	Отображает все горизонтальные рамки внутри таблицы

summaryОписание таблицы для удобства людей, использующих браузеры, поддерживающие азбуку Бройля или речевой вывод titleВсплывающая подсказка widthШирина таблицы в процентах или пикселах

Пример

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

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

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

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

<TABLE BORDER=2 COLS=2 BGCOLOR=yellow align=center> <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>

Категория

Таблицы

Тег <TH>

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

Атрибуты

bgcolorЦвет фона bordercolorЦвет рамки для элемента heightУказывает высоту элемента в процентах или пикселях alignВыравнивает текст в ячейке

left - по левому краю (по умолчанию) rigth - по правому краю center - по центру

valignВыравнивает текст в ячейке по вертикали

top - по верхнему краю middle - по центру bottom - по нижнему краю

Пример

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

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

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

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

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

Категория

Таблицы

Тег <THEAD>

Тег THEAD определяет заголовок таблицы, содержащий информацию о столбцах таблицы. В таблице может быть только один THEAD. Внутри заголовка допустимо использовать теги TR, TH, TD. Закрывающий тег необязателен

Атрибуты

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

Пример

Текст для заголовка таблицы

Текст для тела таблицы

Категория

Таблицы

Title

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

Элемент TITLE не является частью отображаемого текста. Он может отображаться, например, как заголовок страницы или название окна. Только один TITLE может быть в документе. Элемент TITLE должен использоваться для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Таким образом, вместо такого заголовка, как "Введение", который не даёт достаточно информации о документе, авторы должны записать, например, так: "Введение в HTML". Название должно быть не более 40 символов, т.к. название, привышающее размер в 40 символов непомещается в строку заголовка окна браузера.

Категория

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

Tr

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

Тег <TR> определяет строку в таблице

Атрибуты

alignВыравнивает текст в ячейке

left - по левому краю rigth - по правому краю center - по центру

valignВыравнивает текст в ячейке по вертикали

top - по верхнему краю middle - по центру bottom - по нижнему краю

Пример

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

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

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

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

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

Категория

Таблицы

Tt

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

Тег <tt> создает текст, имитирующий стиль печатной машинки

Пример

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

А это уже текст с использованием тега <tt>,имитирующий стиль печатной машинки

Категория

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

u

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

Тег <u> указывает, что текст должен быть подчеркнут

Пример

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

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

Категория

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

Ul

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

Тег <UL>(Unordered List) служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида

Атрибуты

typeТип маркера

disk	Закрашенный кружок. По умолчанию
circle	Незакрашенный кружок
square	Квадратик

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

Пример

Пугачева Орбакайте Киркоров Пресняков

А выглядит код так: <UL type=square title="Ненумерованный список"> <LI>Пугачева <LI>Орбакайте <LI>Киркоров <LI>Пресняков </UL>

Категория

Списки

Var

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

Тег <VAR> используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского variable - переменная

Пример

function() - фунция

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

<var>function()</var> - фунция

Категория

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