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

         

ABBR


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

Атрибуты

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

Пример

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

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

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

Категория

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



Acronym


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

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

Пример

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

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

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

Категория

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



Address




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

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

Пример

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

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

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

Категория

Другие теги



Area


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

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

Атрибуты

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

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

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

Пример

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

<!-- центр окружности и радиус --> </MAP> <AREA HREF="2.html" ALT="вторая область" SHAPE="circle" COORDS="150,65,65">

<img src="../cat.jpg" width=200 height=130 border="0" usemap="#test">

Категория

Другие теги



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


Тег <!-- ...-->

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

Пример

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

А выглядит код так: <!-- Это комментарий, но вы его не видите -->

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

Категория

Другие теги



Тег <A>


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

Атрибуты

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

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

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

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

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

Пример

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

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

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

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

Категория

Гиперссылки



Тег <APPLET>


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

Атрибуты

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

Пример

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

document.writeln('

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

Код

<TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=3> <TBODY> <TR> <TD align=middle> <APPLET height=120 width=120 align=center code=Clock3D> <PARAM NAME="12hour" VALUE="0"> <PARAM NAME="a1" VALUE="4000"> <PARAM NAME="bgcolor" VALUE="#000000"> <PARAM NAME="color" VALUE="#00FF66"> <PARAM NAME="fps" VALUE="16"> <PARAM NAME="irotx" VALUE="0"> <PARAM NAME="iroty" VALUE="0"> <PARAM NAME="irotz" VALUE="0"> <PARAM NAME="pixangle" VALUE="4"> <PARAM NAME="pixd" VALUE="8"> <PARAM NAME="radius" VALUE="6"> <PARAM NAME="rotx" VALUE="0"> <PARAM NAME="roty" VALUE="-4"> <PARAM NAME="rotz" VALUE="0.401"> <PARAM NAME="style" VALUE="1"> </APPLET> </TABLE>

Категория

Другие теги



Тег <!DOCTYPE>


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

Пример


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

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

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

Категория

Другие теги



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

BASE


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

Атрибуты

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

Пример

<HTML> <HEAD> <BASE HREF="http://winchanger.narod.ru/"/> </HEAD>

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

Категория

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



BGSOUND


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

Атрибуты

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

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

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

Пример

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

<bgsound src="newalert.wav" loop=5>

Категория

Звук



Big


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

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

Атрибуты

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

Пример

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

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

Категория


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



Blockquote


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

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

Пример

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

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

Категория

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



Br


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

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

Пример

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


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

Категория


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



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



Кнопочка
в таблице

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

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

Тег <B>


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

Атрибуты

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

Пример

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

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

Категория


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



Тег BODY


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

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

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

Категория

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



Тег <BUTTON>


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

Атрибуты

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



Атрибут contentEditable


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



Center


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

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

Пример

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

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

Категория

Другие теги



Cite


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

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

Атрибуты

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

Пример

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

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

Категория


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



Code


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

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

Атрибуты

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

Пример

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

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

Категория


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



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


<Element contentEditable = sCanEdit...>

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

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

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

Тег <CAPTION>


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

Атрибуты

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

Пример

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

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

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

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

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

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

Категория


Таблицы



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


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

H4 {background-color: yellow;}

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

background-image Устанавливает или получает фоновый рисунок для элемента

Может принимать значения

none - По умолчанию. Используется цвет родительского объекта

sUrl - Задается абсолютный или относительный путь к рисунку

H3 {background-image: yellow;}

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

background-attachment Устанавливает или получает поведение фонового рисунка для элемента

Может принимать значения

scroll - По умолчанию. Фоновый рисунок прокручивается вместе с элементом

fixed - Фоновый рисунок не прокручивается вместе с элементом

body {background-attachment: fixed;}

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

Примеры

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



CSS: Границы


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

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

separate (по умолчанию) - Ячейки отделены друг от друга

collapse - ячейки не имеют промежутков между собой

<TABLE STYLE="border-collapse:collapse">



CSS: Курсоры


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

all-scroll Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении
I {cursor: all-scroll;}
auto По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте
I {cursor: auto;}
col-resize Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали

H4 {cursor: col-resize;}

crosshair Курсор-крест

H4 {cursor: crosshair;}

default Стандартный курсор, используемый системой

H4 {cursor: default;}

hand Рука с вытянутым указательным пальцем. Используется при гиперссылке

H4 {cursor: hand;}

help Стрелка с вопросительным знаком.

H3 {cursor: help;}

move Курсор со 4 стрелками, показывающий возможность перемещения

H2 {cursor: move;}

no-drop Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора

TD {cursor: no-drop;}

not-allowed Перечеркнутый круг. Данная операция не поддерживается

TD {cursor: not-allowed;}

pointer Идентична стилю hand

TD {cursor: pointer;}

progress Песочные часы, показывающие на продолжение операции

TD {cursor: progress;}

row-resize Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали

TD {cursor: row-resize;}

text Текстовый курсор-каретка

TD {cursor: text;}

url(uri) Ваш собственный курсор. Поддерживаются файлы .cur и .ani

TD {cursor:url(elogo.cur);}

vertical-text Горизонтальная текстовая каретка для вертикального текста

TD {cursor: vertical-text;}

wait Курсор, показывающий, что система занята и требуется подождать

TD {cursor: wait;}

*-resize Курсоры, показывающие возможность потянуть за край окна. Вместо символа * используйте N, NE, NW, S, SE, SW, E, или W, определяющие направление стрелок

TD {cursor: n-resize;}

<
Примеры

Проведите курсоры над ячейками таблицы для демонстрации стилей
all-scroll auto col-resize crosshair default hand
help move no-drop not-allowed pointer progress
row-resize text vertical-text wait
n-resize s-resize ne-resize sw-resize
nw-resize se-resize e-resize w-resize
url(new.cur) url(kiss.ani)

CSS: Отступы


margin Задает или получает ширину отступа от четырех сторон объекта

H4 {margin:1cm;}

body {margin:5mm;}

margin-top Задает или получает высоту верхнего отступа объекта

H5 {margin-top:3cm;}

margin-left Задает или получает ширину левого отступа объекта

img {margin-left:2cm;}

margin-right Задает или получает ширину правого отступа объекта

img {margin-right:2cm;}

margin-bottom Задает или получает высоту нижнего отступа объекта

img {margin-bottom:2cm;}

padding Задает или получает величину пространтства, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей

td {padding:2cm;}

padding-bottom Задает или получает величину пространтства, вставляемого между объектом его нижней границей

td {padding-bottom:2cm;}

padding-left Задает или получает величину пространтства, вставляемого между объектом его левой границей

td {padding-left:2cm;}

padding-right Задает или получает величину пространтства, вставляемого между объектом его правой границей

td {padding-right:2cm;}

padding-top Задает или получает величину пространтства, вставляемого между объектом его верхней границей

td {padding-top:2cm;}



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


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

scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки
body {scrollbar-3dlight-color: green;}
scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке со стрелками

body {scrollbar-arrow-color: red;}

scrollbar-base-color Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color

body {scrollbar-base-color: green;}

scrollbar-darkshadow-color Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками

body {scrollbar-darkshadow-color: red;}

scrollbar-face-color Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки

body {scrollbar-face-color: green;}

scrollbar-highlight-color Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол
body {scrollbar-highlight-color: green;}
scrollbar-shadow-color Схоже с scrollbar-darkshadow-color

body {scrollbar-shadow-color: green;}

scrollbar-track-color Устанавливает или получает цвет дорожки для ползунка

body {scrollbar-track-color: aqua;}

Примеры

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



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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

Свойство absolut

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

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

Свойство relative

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

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

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

function fnDown(){ oSpan.style.position="relative"; oSpan.style.top="5px"; oSpan.innerText="опустим"; } function fnRelative(){ oSpan.style.position="relative"; oSpan.style.top="-5px"; oSpan.innerText="поднимем"; } function fnStatic(){ oSpan.style.position="static"; oSpan.innerText="выравним"; }



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


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

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

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



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


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

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

Примеры

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



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


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



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


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

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

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

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

Примеры

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

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



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


text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст

H4 {text-decoration: underline;} - подчеркивание
A {text-decoration: none;} - стандартный текст
I {text-decoration: line-through;} - зачеркивание

B {text-decoration:overline;} - надчеркивание

text-transform Задает преобразование регистра текста при отображении

H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в заглавную
A {text-transform: uppercase;} - Все буквы преобразуются в заглавные
I {text-transform: lowercase;} - Все буквы преобразуются в строчные

B {text-decoration:none;} - Отменяет установленные преобразования

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

Примеры



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


САША +

ТАНЯ =

Любовь!

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



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


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

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

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

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

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

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

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

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

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



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


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

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

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

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



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


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

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


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

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


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

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

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

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

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


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

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


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

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

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

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

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

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

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

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



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


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

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

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

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

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

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

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



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


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

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

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

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

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

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



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


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

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



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


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



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


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

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

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

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

Vertical-align

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

C 2 H 5 OH



Dd


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

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

Пример

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

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

</DL>

Категория

Списки



Dfn


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

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

Атрибуты

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

Пример

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

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

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

Категория


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



Dl


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

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

Атрибуты

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

Пример

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

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

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

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

Категория


Списки



Dt


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

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

Пример

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

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

</DL>

Категория

Списки



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

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


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

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


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

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


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

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


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

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


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

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

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


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

И сюда

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



Событие ONCLICK


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

Синтаксис

<ELEMENT onmouseover = "handler" ... >

Пример



Событие ONCOPY


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

Синтаксис

<ELEMENT oncopy = "handler" ... >

Пример



Событие ONDRAG


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

Синтаксис

<ELEMENT ondrag = "handler" ... >

Пример



Событие ONDRAGEND


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

Синтаксис

<ELEMENT ondragend = "handler" ... >



Событие ONDRAGENTER


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

Синтаксис

<ELEMENT ondragenter = "handler" ... >



Событие ONDRAGLEAVE


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

Синтаксис

<ELEMENT ondragleave = "handler" ... >



Событие ONDRAGOVER


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

Синтаксис

<ELEMENT ondragover = "handler" ... >



Событие ONDRAGSTART


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

Синтаксис

<ELEMENT ondragstart = "handler" ... >

Пример



Событие ONDROP


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

Синтаксис

<ELEMENT ondrop = "handler" ... >



Событие ONMOUSEOUT


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

Синтаксис

<ELEMENT onmouseout = "handler" ... >

Пример

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

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



Событие ONMOUSEOVER


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

Синтаксис

<ELEMENT onmouseover = "handler" ... >

Пример

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

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



Событие ONSELECTSTART


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

Синтаксис

<ELEMENT onselectstart = "handler" ... >

Пример



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


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

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


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



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


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



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


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

И сюда

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



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


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



Em


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

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

Пример

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

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

Категория


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



Тег <FIELDSET>


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

Атрибуты

Примеры

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

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

Категория

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



Тег <font>


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

Атрибуты

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

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

Пример

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

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

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

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

Категория


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



Тег <FORM>


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

Атрибуты

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

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

Пример

Категория


Другие теги



Тег <frame>


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

Атрибуты

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

Пример

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

Категория


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


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

Атрибуты

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

Пример

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



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


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

Синтаксис:

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

Параметры

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

Пример

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

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



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


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

Синтаксис:

STYLE="filter:gray"

Пример

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

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



Invert


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

Синтаксис:

STYLE="filter:invert"

Пример

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

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



Mask


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

Синтаксис:

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

Параметры

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

Пример

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

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



Shadow


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

Синтаксис:

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

Параметры

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

Пример

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

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



Wave


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

Синтаксис:

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

Параметры

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

Пример

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

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



Xray


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

Синтаксис:

STYLE="filter:xray()"

Пример

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

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



Head


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

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

Категория

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



Hr


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

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

Атрибуты

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

Пример

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

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

Категория


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



Html


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

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

Категория

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



i


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

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

Пример

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

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

Категория


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



Тег <IFRAME>


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

Атрибуты

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

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

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

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

Пример

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

Категория


Фреймы



Тег <IMG>


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

Атрибуты

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

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

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

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

Пример


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

<img src="../cat.jpg" alt="Отдыхаем!" vspace=10 GALLERYIMG="yes">

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

Категория

Графика



Тег <INPUT>


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

Атрибуты

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

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

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

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

Примеры

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

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

Попробуйте

Категория


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



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

AddFavorite


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

Синтаксис

external.AddFavorite(sURL [, sTitle])

Параметры

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

Пример

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



Alert


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

Пример

Метод Alert

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

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



ALinkColor


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



AppCodeName


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



AppName


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



AppVersion


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



AvailHeight


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



AvailWidth


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



Back


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

Пример

Метод Back

sub Back() history.back 1 end sub



BgColor


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



Charset


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



Close


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

Пример

Метод Close

sub CloseShow() window.close end sub

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



ColorDepth


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



Confirm


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

Пример

Метод Confirm

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

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

end sub

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

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

end sub </script>



Cookie


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



CookieEnabled


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



DefaultCharset


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



Document


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



External


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



FgColor


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



FileCreatedDate


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



FileSize


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



Height


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