Теги HTML

! A B C D E F G H I J K L M N
O P Q R S T U V W X Y Z

    !
  1. !--
  2. !DOCTYPE
    A
  3. A
  4. ABBR
  5. ACRONYM
  6. ADDRESS
  7. APPLET
  8. AREA
    B
  9. B
  10. BASE
  11. BGSOUND
  12. BIG
  13. BLOCKQUOTE
  14. BODY
  15. BR
  16. BUTTON
    C
  17. CAPTION
  18. CENTER
  19. CITE
  20. CODE
    D
  21. DD
  22. DFN
  23. DIV
  24. DL
  25. DT
    E
  26. EM
    F
  27. FIELDSET
  28. FONT
  29. FORM
  30. FRAME
    H
  31. Hx
  32. HEAD
  33. HR
  34. HTML
    I
  35. I
  36. IFRAME
  37. IMG
  38. INPUT
    K
  39. KBD
    L
  40. LEGEND
  41. LI
  42. LINK
    M
  43. MAP
  44. MARQUEE
  45. MENU
  46. META
    N
  47. NOBR
    O
  48. OL
  49. OPTGROUP
  50. OPTION
    P
  51. P
  52. PRE
    Q
  53. Q
    S
  54. S
  55. SAMP
  56. SCRIPT
  57. SELECT
  58. SMALL
  59. SPAN
  60. STRONG
  61. SUB
  62. SUP
    T
  63. TABLE
  64. TD
  65. TEXTAREA
  66. TH
  67. THEAD
  68. TITLE
  69. TR
  70. TT
    U
  71. U
  72. UL
    V
  73. VAR


Теги:Введение

Теги HTML

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

  • левой угловой скобки < (такого же, как "меньше чем" символа)
  • необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом в этом контексте Вы можете читать символ /, как конец...
  • имени тега, например TITLE или PRE
  • необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
  • правой угловой скобки > (такой же, как символа "больше чем").

Примеры:

<H1>

<H1 ALIGN=LEFT>

Элементы HTML

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

<H1>Foreword</H1>

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

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, NOSHADE, NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

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

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

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

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

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

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


Теги HTML

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

    Гиперссылки
    Графика
    Таблицы
    Теги форматировния документа
    Теги физического форматирования текста
    Теги логического форматирования текста
    Списки
    Элементы управления
    Фреймы
    Звук
    Другие теги

    Гиперссылки
  • A
    Графика
  • IMG
    Таблицы
  • CAPTION
  • TABLE
  • TH
  • THEAD
  • TD
  • TR
    Теги форматировния документа
  • BASE
  • BODY
  • HEAD
  • HTML
  • META
  • TITLE
    Теги физического форматирования текста
  • B
  • BIG
  • BLOCKQUOTE
  • BR
  • FONT
  • Hx
  • HR
  • I
  • MARQUEE
  • NOBR
  • P
  • PRE
  • Q
  • S
  • SMALL
  • SUB
  • SUP
  • TT
  • U
    Теги логического форматирования текста
  • ABBR
  • ACRONYM
  • CITE
  • CODE
  • DFN
  • EM
  • KBD
  • SAMP
  • STRONG
  • VAR
    Списки
  • DD
  • DL
  • DT
  • LI
  • MENU
  • OL
  • UL
    Элементы управления
  • BUTTON
  • FIELDSET
  • INPUT
  • OPTGROUP
  • OPTION
  • SELECT
  • TEXTAREA
    Фреймы
  • IFRAME
    Звук
  • BGSOUND
    Другие теги
  • !--
  • !DOCTYPE
  • ADDRESS
  • APPLET
  • AREA
  • CENTER
  • DIV
  • FORM
  • LEGEND
  • LINK
  • MAP
  • SCRIPT
  • SPAN


!--

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

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

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

<a href="a.html">А ссылку вы видите!</a>
Категория
Другие теги


!DOCTYPE

Тег <!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">
Категория
Другие теги


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>
Категория
Гиперссылки


ABBR

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

Атрибуты
title
Всплывающая подсказка
Пример

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

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

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


ACRONYM

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

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

Пример

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

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

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


ADDRESS

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

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

Пример

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

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

Категория
Другие теги


APPLET

Тег <APPLET>

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

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

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

Код
<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>
Категория
Другие теги


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">
Категория
Другие теги


B

Тег <B>

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

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

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

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


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 | Устанавливает точное число повторов
src
URL звукового файла
Пример

Код с использованием тега <BGSOUND>
<bgsound src="newalert.wav" loop=5>

Категория
Звук


BIG

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

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

Атрибуты
title
Показывает текст в виде всплывающей подсказки
Пример

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

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


BLOCKQUOTE

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

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

Пример

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

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

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


BODY

Тег BODY

Тег <BODY> определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов. Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицы стилей. Начальный и конечный теги необязательны

Атрибуты
bgcolor
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для желтого цвета, используемой на данной странице <body bgcolor= "yellow">
background
Нежелательный. Указывает на url-адрес изображения - фона документа
contentEditable
Возможность редактирования
offsetWidth
Размер объекта
text
Нежелательный. Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета, например для зеленого цвета, используемой на данной странице <body text= "green">
link
Нежелательный. Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет,либо используя константы цвета,например для красного цвета,используемой на данной странице <body link= "red">
Пример красной ссылки
vlink=
Нежелательный. Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет
alink=
Нежелательный. Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой
bgproperties=fixed
Фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer
Эти параметры можно объединять, например на этой страничке используется <BODY bgcolor="yellow" text="green" link="red" alink="blue">
Категория
Теги форматирования документа


BR

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

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

Пример

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

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

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


BUTTON

Тег <BUTTON>

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

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

Пример

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

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


CAPTION

Тег <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>
Категория
Таблицы


CENTER

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

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

Пример

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

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

Категория
Другие теги


CITE

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

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

Атрибуты
title
Всплывающая подсказка
Пример

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

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


CODE

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

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

Атрибуты
title
Всплывающая подсказка
Пример

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

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


DD

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

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

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


DFN

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

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

Атрибуты
title
Всплывающая подсказка
Пример

Это обычный текст
Интернет - это...
Вторая строка с использованием тега <DFN>

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


DIV

Тег <DIV>

Элемент DIV определяет контейнер для HTML. Данный элемент предназначен для использования в CSS. Закрывающий тег: требуется. Весьма схож с элементом SPAN, но при этом браузеры обычно помещают символ перевода строки перед и после этого элемента (Смотри пример)

Атрибуты
align
Выравнивает элемент к одной из сторон документа или таблицы (left, right, center, justify)
contentEditable
Возможность редактирования
title
Всплывающая подсказка
UNSELECTABLE
Запрещает или разрешает выделять текст в данном элементе (on - запрещает, off - разрешает)

Пример

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

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

А выглядит код так: <P>Строка содержит одно слово <div STYLE="color: red" UNSELECTABLE="on" align="center">красного</div> цвета.

Категория
Другие теги


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>
Категория
Списки


EM

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

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

Пример

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

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


FIELDSET

Тег <FIELDSET>

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

Атрибуты
Примеры
Группа кнопочек

Два текстовых поля
Категория
Элементы управления


FONT

Тег <font>

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

Атрибуты
color
Устанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета,например для зеленого цвета<font color= "green">
face
Определяет гарнитуру шрифта
size
Размер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3
Примечание: Атрибуты можно объединять
Пример

Это обычный текст
А это уже текст с использованием тега <font size=1>
Текст с использованием шрифта семейства courier
Используем тег <font size=5 color="blue">

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


FORM

Тег <FORM>

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

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

Категория
Другие теги


Hx

Теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6>

Тег <Hx> служит для создания заголовка. Всего существует 6 видов заголовков - от H1 до H6. Тегу H1 соответствует самый большой заголовок, тегу H6 - самый маленький. Закрывающий тег требуется

Атрибуты
align
Выравнивает заголовок в соответствии со следующими значениями:
center | По центру
left | По левому краю
right | По правому краю
title
Всплывающая подсказка
Пример

Очень большой заголовок с тегом <H1>

Заголовок поменьше с тегом <H2 title="я-подсказка!">

Еще меньше с тегом <H3 align=right>

Маленький заголовок с тегом <H4>

Очень маленький заголовок с тегом <H5>
Самый маленький заголовок с тегом <H6 align=center>
Категория
Теги форматирования текста


HEAD

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

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

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


HR

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

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

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

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

Это линия потолще и красная <hr size=3 color=red>
Категория
Теги форматирования текста


HTML

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

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

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


I

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

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

Пример

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

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


IFRAME

Тег <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>

Тег 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>

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

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

Радиопереключатели
Можно выбрать только один элемент
Попробуйте

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


KBD

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

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

Пример

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

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

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


LEGEND

Тег <LEGEND>

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

Атрибуты
Примеры
Группа кнопочек

Два текстовых поля
Категория
Другие теги


LI

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

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

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


LINK

Тег LINK

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

Пример
Смотри информацию на CSS
<LINK REL="Stylesheet" HREF="default.css" TYPE="text/css">
Категория
Другие теги


MAP

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

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

Пример
первая область вторая область А выглядит код так:
<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">
Категория
Другие теги


MARQUEE

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

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

Атрибуты
BEHAVIOR=ALTERNATE | SCROLL | SLIDE
Определяет вид скроллинга
ALTERNATE | Колебательные движения налево и направо
SCROLL | Перемещение текста в направлении, указанном в DIRECTION. Достигнув края экрана, надпись появляется снова с противоположной стороны
SLIDE | Схоже с SCROLL, но текст перемещается только один раз и останавливается
DIRECTION=DOWN | LEFT | RIGHT | UP
Определяет направление скроллинга
DOWN | Движение вниз
LEFT | Движение справа налево. По умолчанию
RIGHT | Движение слева направо
UP | Движение вверх
Пример ALTERNATE SCROLL SLIDE А выглядит код так:
<MARQUEE BEHAVIOR=ALTERNATE DIRECTION="right">Здесь ваш текст</MARQUEE>
Категория
Теги форматирования текста


MENU

Тег <MENU>

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

Атрибуты

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

Пример

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


META

Тег META

Специальная группа инструкций <META>, предназначена в основном для описания и индексирования документа поисковыми машинами. Все тэги META не видны при просмотре документа. Команды <META> вносятся в "шапку" гипертекстового документа - внутри блока <HEAD>...</HEAD>. Закрывающий тег </META> запрещен

<META HTTP-EQUIV="Expires" CONTENT="Mon, 25 Sep 2002 00:02:01 GMT">

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

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

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

<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://winchanger.narod.ru/">

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

<META name="author" content="Arni Schwarz">

Используется для указания имени автора. Поисковые системы могут найти нужный сайт по имени автора (или найти самого автора).

<META name="copyright" content="&copy; 2001 SOFT BANANAS">

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

<META http-equiv="PICS-Label" content=' (PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1)) '>

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

<META name="keywords" content="META, HTML, WWW, Web, паутина, поиск, определение, рекомендации, примеры использования, учебник, руководство, информация, справка, Netscape, Microsoft Internet Explorer">

Список терминов и ключевых слов это то, что является самым главным при индексировании Вашего сайта поисковой машиной! Длина содержимого тегов МЕТА "keywords" не должна превышать 1000 символов

<META name="description" content="The best homepage">

Краткое описание Вашего сайта, используемое поисковым сервером для индексирования, и, как правило, вставляемое в текст страницы найденных совпадений в качестве описания Вашего сайта. Длина содержимого тегов МЕТА "description" не должна превышать 200 символов

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

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

<META HTTP-EQUIV="MSThemeCompatible" Content="No">

Поддержка интефейса, используемого в Windows XP. Если вы пользуетесть Windows XP, то Internet Explorer 6 использует новый внешний вид некоторых элементов (кнопки, полосы прокрутки), как в Windows XP. Вы может отключить эту поддержку

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

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на страницу)

<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе со страницы)

<META HTTP-EQUIV="Site-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на сайт)

<META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе с сайта),
где Duration задает время в секундах, а Transition - номер эффекта
Посмотреть примеры

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


NOBR

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

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

Пример

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


OL

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

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

Атрибуты
type
Тип маркера
A | Заглавные буквы
a | Строчные буквы
I | Заглавные римские цифры
i | Строчные римские цифры
1 | Арабские цифры (по умолчанию)
start
Начальное значение для нумерованного списка при использовании арабских цифр
title
Всплывающая подсказка Пример
  1. Пугачева
  2. Орбакайте
  3. Киркоров
  4. Пресняков
А выглядит код так:
<OL type=A title="нумерованный список">
<LI>Пугачева
<LI>Орбакайте
<LI>Киркоров
<LI>Пресняков
</OL>
Категория
Списки


OPTGROUP

Тег OPTGROUP

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

Атрибуты

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

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


OPTION

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

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

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

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

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


P

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

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

Параметры
align
Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
left | выравнивание по левому краю. По умолчанию
right | выравнивание по правому краю
center | выравнивание по центру
justify | выравнивание по ширине
title
Всплывающая подсказка
Пример

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

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


PRE

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

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

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


Q

Тег <Q> предназначен для включения в документ короткой цитаты без создания отступов (сравни с BLOCKQUOTE). Закрывающий тег обязателен

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

Он сказал: "Поехали!"

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


S

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

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

Пример

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

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


SAMP

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

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

Пример

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

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


SCRIPT

Тег <SCRIPT>

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

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

Пример

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


SELECT

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

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

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

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

Вот код:

<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, когда это возможно.

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

Вот код:

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

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


SPAN

Тег <SPAN>

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

Атрибуты
contentEditable
Возможность редактирования
title
Всплывающая подсказка
UNSELECTABLE
Запрещает или разрешает выделять текст в данном элементе (on - запрещает, off - разрешает)

Пример

Строка содержит одно слово красного цвета. Причем это слово нельзя выделить.

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

<P>Строка содержит одно слово <SPAN STYLE="color:red">красного</SPAN> цвета.
Категория
Другие теги


STRONG

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

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

Пример

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

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


SUB

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

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

Пример

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

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


SUP

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

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

Пример

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

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


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>
Категория
Таблицы


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 align=right>
  <TD height=70 title="пример">Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд первый</TD>
 </TR>
 <TR align=center>
  <TD>Ячейка столбца первый, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD>
 </TR>
</TABLE>
Категория
Таблицы


TEXTAREA

Тег <TEXTAREA>

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

Атрибуты
cols=
Определяет ширину поля в символах
disabled
Делает элемент недоступным
readonly
Текст только для чтения. Нельзя изменять, вставлять и т.д.
rows=
Определяет число строк
title=
Всплывающая подсказка
Пример

Код
<textarea cols=11 rows=7 readonly>
Текстовое поле шириной в 11 символов и в семь строк <textarea/>
Категория
Элементы управления


TH

Тег <TH>

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

Атрибуты
bgcolor
Цвет фона
bordercolor
Цвет рамки для элемента
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 align=right>
  <TD height=70 title="пример">Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд первый</TD>
 </TR>
 <TR align=center>
  <TD>Ячейка столбца первый, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD>
 </TR>
</TABLE>
Категория
Таблицы


THEAD

Тег <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 align=right>
  <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>

Тег <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> - фунция

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


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

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

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

В спецификации HTML указано большое количество спецсимволов, но только некоторые из них используются. Наиболее часто используемые спецсимволы приведены в таблице:
Имя | Код | Вид | Описание
&quot;&#34;"двойная кавычка
&amp;&#38;&амперсанд
&lt;&#60;<знак 'меньше'
&gt;&#62;>знак 'больше'
&nbsp; | &#160; | неразрывный пробел
&iexcl;&#161;¡перевернутый восклицательный знак
&cent;&#162;¢цент
&pound;&#163;£фунт стерлингов
&curren;&#164;¤денежная единица
&yen;&#165;¥иена или юань
&brvbar;&#166;¦разорванная вертикальная черта
&sect;&#167;§параграф
&uml;&#168;¨умляут
&copy;&#169;©знак copyright
&ordf; | &#170; | ª | женский порядковый числитель
&laquo;&#171;«левая двойная угловая скобка
&not;&#172;¬знак отрицания
&shy; | &#173; | место возможного переноса
&reg;&#174;®знак зарегистрированной торговой марки
&macr;&#175;¯верхняя горизонтальная черта
&deg;&#176;°градус
&plusmn;&#177;±плюс-минус
&sup2; | &#178; | ² | "в квадрате"
&sup3; | &#179; | ³ | "в кубе"
&acute;&#180;´знак ударения
&micro; | &#181; | µ | микро
&para;&#182;¶символ параграфа
&middot;&#183;·точка
&cedil;&#184;¸седиль (орфографический знак)
&sup1; | &#185; | ¹ | верхний индекс 'один'
&ordm; | &#186; | º | мужской порядковый числитель
&raquo;&#187;»правая двойная угловая скобка
&frac14; | &#188; | ¼ | одна четвертая
&frac12; | &#189; | ½ | одна вторая
&frac34; | &#190; | ¾ | три четвертых
&iquest;&#191;¿перевернутый вопросительный знак
&Agrave; | &#192; | À | латинская заглавная А с тупым ударением
&Aacute; | &#193; | Á | латинская заглавная А с острым ударением
&Acirc; | &#194; | Â | латинская заглавная А с диакритическим знаком над гласной
&Atilde; | &#195; | Ã | латинская заглавная А с тильдой
&Auml; | &#196; | Ä | латинская заглавная А с двумя точками
&Aring; | &#197; | Å | латинская заглавная А с верхним кружком
&AElig; | &#198; | Æ | латинские заглавные символы AE вместе
&Ccedil; | &#199; | Ç | латинская заглавная C с седилем
&Egrave; | &#200; | È | латинская заглавная E с тупым ударением
&Eacute; | &#201; | É | латинская заглавная E с острым ударением
&Ecirc; | &#202; | Ê | латинская заглавная E с диакритическим знаком над гласной
&Euml; | &#203; | Ë | латинская заглавная E с двумя точками
&Igrave; | &#204; | Ì | латинская заглавная I с тупым ударением
&Iacute; | &#205; | Í | латинская заглавная I с острым ударением
&Icirc; | &#206; | Î | латинская заглавная I с диакритическим знаком над гласной
&Iuml; | &#207; | Ï | латинская заглавная I с двумя точками
&ETH; | &#208; | Ð | латинская заглавная D с черточкой
&Ntilde; | &#209; | Ñ | латинская заглавная N с тильдой
&Ograve; | &#210; | Ò | латинская заглавная O с тупым ударением
&Oacute; | &#211; | Ó | латинская заглавная O с острым ударением
&Ocirc; | &#212; | Ô | латинская заглавная O с диакритическим знаком над гласной
&Otilde; | &#213; | Õ | латинская заглавная O с тильдой
&Ouml; | &#214; | Ö | латинская заглавная O с двумя точками
&times;&#215;×знак умножения
&Oslash; | &#216; | Ø | латинская заглавная O со штрихом
&Ugrave; | &#217; | Ù | латинская заглавная U с тупым ударением
&Uacute; | &#218; | Ú | латинская заглавная U с острым ударением
&Ucirc; | &#219; | Û | латинская заглавная U с диакритическим знаком
&Uuml; | &#220; | Ü | латинская заглавная U с двумя точками
&Yacute; | &#221; | Ý | латинская заглавная Y с острым ударением
&THORN; | &#222; | Þ | латинская заглавная THORN
&agrave; | &#224; | à | латинская строчная a с тупым ударением
&aacute; | &##225; | á | латинская строчная a с острым ударением
&acirc; | &##226; | â | латинская строчная a с диакритическим знаком
&atilde; | &#227; | ã | латинская строчная a с тильдой
&auml; | &#228; | ä | латинская строчная a с двумя точками
&aring; | &#229; | å | латинская строчная a с верхним кружком
&aelig; | &#230; | æ | латинская строчные буквы ae
&ccedil; | &#231; | ç | латинская строчная c с седилем
&egrave; | &#232; | è | латинская строчная e с тупым ударением
&eacute; | &#233; | é | латинская строчная e с острым ударением
&ecirc; | &#234; | ê | латинская строчная e с диакритическим знаком
&euml; | &#235; | ë | латинская строчная e с двумя точками
&igrave; | &#236; | ì | латинская строчная I с тупым ударением
&iacute; | &#237; | í | латинская строчная I с острым ударением
&icirc; | &#238; | î | латинская строчная I с диакритическим знаком
&iuml; | &#239; | ï | латинская строчная I с двумя точками
&eth; | &#240; | ð | латинская строчные символы eth
&ntilde; | &#241; | ñ | латинская строчная N с тильдой
&ograve; | &#242; | ò | латинская строчная O с тупым ударением
&oacute; | &#243; | ó | латинская строчная O с острым ударением
&ocirc; | &#244; | ô | латинская строчная O с диакритическим знаком
&otilde; | &#245; | õ | латинская строчная I с тильдой
&ouml; | &#246; | ö | латинская строчная I с двумя точками
&divide;&#247;÷знак деления
&oslash; | &#248; | ø | латинская строчная O со штрихом
&ugrave; | &#249; | ù | латинская строчная U с тупым ударением
&uacute; | &#250; | ú | латинская строчная U с острым ударением
&ucirc; | &#251; | û | латинская строчная U с диакритическим знаком
&uuml; | &#252; | ü | латинская строчная U с двумя точками
&yacute; | &#253; | ý | латинская строчная Y с острым ударением
&thorn; | &#254; | þ | латинская строчная thorn
&yuml; | &#255; | ÿ | латинская строчная Y с двумя точками
&fnof; | &#402; | ƒ | знак функции

Символы для букв

&circ; | &#710; | ˆ | диакритический знак над гласной
&tilde;&#732;˜тильда

Греческие буквы
&Alpha; | &#913; | Α | заглавная альфа
&Beta; | &#914; | Β | заглавная бета
&Gamma; | &#915; | Γ | заглавная гамма
&Delta; | &#916; | Δ | заглавная дельта
&Epsilon; | &#917; | Ε | заглавная эпсилон
&Zeta; | &#918; | Ζ | заглавная дзета
&Eta; | &#919; | Η | заглавная эта
&Theta; | &#920; | Θ | заглавная тета
&Iota; | &#921; | Ι | заглавная иота
&Kappa; | &#922; | Κ | заглавная каппа
&Lambda; | &#923; | Λ | заглавная лямбда
&Mu; | &#924; | Μ | заглавная мю
&Nu; | &#925; | Ν | заглавная ню
&Xi; | &#926; | Ξ | заглавная кси
&Omicron; | &#927; | Ο | заглавная омикрон
&Pi; | &#928; | Π | заглавная пи
&Rho; | &#929; | Ρ | заглавная ро
&Sigma; | &#931; | Σ | заглавная сигма
&Tau; | &#932; | Τ | заглавная тау
&Upsilon; | &#933; | Υ | заглавная ипсилон
&Phi; | &#934; | Φ | заглавная фи
&Chi; | &#935; | Χ | заглавная хи
&Psi; | &#936; | Ψ | заглавная пси
&Omega; | &#937; | Ω | заглавная омега
&alpha; | &#945; | α | строчная альфа
&beta; | &#946; | β | строчная бета
&gamma; | &#947; | γ | строчная гамма
&delta; | &#948; | δ | строчная дельта
&epsilon; | &#949; | ε | строчная эпсилон
&zeta; | &#950; | ζ | строчная дзета
&eta; | &#951; | η | строчная эта
&theta; | &#952; | θ | строчная тета
&iota; | &#953; | ι | строчная иота
&kappa; | &#954; | κ | строчная каппа
&lambda; | &#955; | λ | строчная лямбда
&mu; | &#956; | μ | строчная мю
&nu; | &#957; | ν | строчная ню
&xi; | &#958; | ξ | строчная кси
&omicron; | &#959; | ο | строчная омикрон
&pi; | &#960; | π | строчная пи
&rho; | &#961; | ρ | строчная ро
&sigmaf; | &#962; | ς | строчная сигма (final)
&sigma; | &#963; | σ | строчная сигма
&tau; | &#964; | τ | строчная тау
&upsilon; | &#965; | υ | строчная ипсилон
&phi; | &#966; | φ | строчная фи
&chi; | &#967; | χ | строчная хи
&psi; | &#968; | ψ | строчная пси
&omega; | &#969; | ω | строчная омега

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

&ndash;&#8211;–тире
&mdash;&#8212;—длинное тире
&lsquo;&#8216;‘левая одиночная кавычка
&rsquo;&#8217;’правая одиночная кавычка
&sbquo;&#8218;‚нижняя одиночная кавычка
&ldquo;&#8220;“левая двойная кавычка
&rdquo;&#8221;”правая двойная кавычка
&bdquo;&#8222;„нижняя двойная кавычка

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

&#8224†латинский крест
&#8225‡двойной крест
&bull;&#8226;•маленький черный кружок
&hellip;&#8230;…многоточие ...
&#8240;‰знак промилле (процент с дополнительным ноликом)
&prime;&#8242; ′одиночный штрих - минуты
&Prime;&#8243; ″двойной штрих - секунды
&oline;&#8254; ‾надчеркивание
&frasl;&#8260; ⁄косая дробная черта
&#8364;€евро
&#8470;№знак номера
&trade;&#8482;™знак торговой марки

Стрелки

&larr;&#8592; ←стрелка влево
&uarr;&#8593; ↑стрелка вверх
&rarr;&#8594; →стрелка вправо
&darr;&#8595; ↓стрелка вниз
&harr;&#8596; ↔стрелка влево-вправо

Масти

&spades;&#9824; ♠знак масти 'пики'
&clubs;&#9827; ♣знак масти 'трефы'
&hearts;&#9829; ♥знак масти 'червы'
&diams;&#9830; ♦знак масти 'бубны'


Color

Таблица базовых цветов 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


Основы CSS

Что такое CSS

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

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

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

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

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

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

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

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

Связывание

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

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

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

Внедрение

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

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

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

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

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

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

Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы 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}

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

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

В 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, или на белом фоне, если файл недоступен.

Селекторы

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

< STYLE TYPE="text/css">
<!--
A {text-decoration:none; }
-->
</--STYLE>

Классы

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

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

<STYLE TYPE="text/css">
<!--
H1.red {color: red; }
H1.blue (color:red; background-color: blue}
-->
</STYLE>

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

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

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

<STYLE TYPE="text/css">
<!--
.red {color: red; }
.blue (color:red; background-color: blue}
-->
</STYLE>

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

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

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

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

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

Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #: <STYLE TYPE="text/css">
<!--
#myID {letter-spacing: 1em; }
H1#form3 (color:red; background-color: blue}
-->
</STYLE>
<BODY>
<P ID=myID> Разрежённые слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>

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

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

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

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

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

Пример:

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

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

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

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

  • СВОЙСТВА ШРИФТА
  • ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
  • СВОЙСТВА ТЕКСТА
  • РАЗМЕРЫ ЭЛЕМЕНТА
  • СВОЙСТВА ТАБЛИЦЫ
  • ЕДИНИЦЫ ИЗМЕРЕНИЯ

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

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

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

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

<HEAD>
<STYLE type="text/css">
<!--
описания стилей
-- >
</STYLE>
</HEAD>

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

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

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

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


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

Примечания

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 равно размеру шрифта родительского элемента. Либо используются проценты - Задаются размеры шрифта в процентах по отношению к родительскому элементу

Примеры

Курсивный шрифт
все буквы заглавные
Жирный шрифт bolder
Жирный шрифт bold
Жирный шрифт на 200 %


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 ]

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

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

Тэг H2 имеет фоновый рисунок


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}

Примеры

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

Это ссылка без подчеркивания (none)
Перечеркнутый курсивный текст (line-through)

Текст с подчеркиванием сверху (overline)
каждая первая буковка слова большая

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

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

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

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

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

Vertical-align
Формула спирта

C 2 H 5 OH


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

position | Устанавливает или определяет позицию элемента. Может принимать значения: static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top и left relative - Позиция объекта определяется смещением от заданных свойств top и left
left/top | Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения: auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам length - число с заданной единицей измерения (10mm;5px;3em) percentage - число процентов от ширины/высоты родительского объекта (10%) Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются
z-index | Устанавливает или получает порядок слоев для объектов. В скриптовых языках используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два значения: строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам Order - число, задающее позицию объекта в слоях. С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим атрибут absolute или relative свойства position Нельзя применять к объектам, имеющим окно (например, select) Пример применения в скрипте

Примеры
Свойство absolut

Зададим элементу SPAN, содержащему слово ХАКЕР абсолютную позицию (0,0), что позволит вывести слово в левом верхнем углу браузера XAKEP
<SPAN STYLE="position: absolute; top:0px; left:0px; color:red">XAKEP</SPAN>

Свойство relative

А теперь поднимем слово относительно базовой линии строки на 5 пикселей
<SPAN id=oSpan STYLE="position: relative; top:-5px">поднимем</SPAN>

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


CSS: Границы

Спецификация 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">

Примечание

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

Примеры

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

Верхняя часть заголовка зеленого цвета (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>
Это обычный вид таблицы | Ячейки отделены друг от друга
Теперь попробуйте щелкнуть мышкой внутри таблицы | Ячейки должны соединиться


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: Отступы

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

Примеры

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

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

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

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

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


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

table-layout Устанавливает или получает алгоритм обработки таблицы
TABLE {table-layout: fixed;}
Имеет два значения
  • auto - По умолчанию. Браузер самостоятельно вычисляет необходимые размеры таблицы
  • fixed - Браузер не учитывает содержимое отдельных ячеек при вычислении ширины таблицы и отдельных ячеек. Он использует значения ширины таблицы, ширины столбцов, рамок и расстояний между ячейками. Ширина столбцов таблицы вычисляется в следующем порядке:
    1. используя значение атрибута WIDTH элементов COL
    2. используя значение атрибута WIDTH элементов TD первого ряда таблицы
    3. если данные значения не установлены, то ширина столбцов вычисляется соответственно контенту ячеек

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


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. (Используйте данный псевдокласс перед ними, чтобы не подавлять их поведение)

Примеры

XAKEP- журнал компьютерных хулиганов

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

Данный прием вам хорошо известен по книгам, использующим подобный прием в глубокой древности

Подведите курсор к ссылке, ведущей на сайт Xakep, и она станет красного цвета и исчезнет подчеркивание ссылки


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

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

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

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

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

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

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

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

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

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

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

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


ONCLICK

Событие ONCLICK

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

Синтаксис

<ELEMENT onmouseover = "handler" ... >

Пример

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

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

Внимание

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


ONCOPY

Событие ONCOPY

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

Синтаксис

<ELEMENT oncopy = "handler" ... >

Пример

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

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

Внимание

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


ONDRAG

Событие ONDRAG

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

Синтаксис

<ELEMENT ondrag = "handler" ... >

Пример

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

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

Внимание

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


ONDRAGEND

Событие ONDRAGEND

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

Синтаксис

<ELEMENT ondragend = "handler" ... >

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

Внимание

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


ONDRAGENTER

Событие ONDRAGENTER

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

Синтаксис

<ELEMENT ondragenter = "handler" ... >

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

Внимание

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


ONDRAGLEAVE

Событие ONDRAGLEAVE

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

Синтаксис

<ELEMENT ondragleave = "handler" ... >

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

Внимание

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


ONDRAGOVER

Событие ONDRAGOVER

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

Синтаксис

<ELEMENT ondragover = "handler" ... >

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

Внимание

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


ONDRAGSTART

Событие ONDRAGSTART

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

Синтаксис

<ELEMENT ondragstart = "handler" ... >

Пример

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

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

Внимание

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


ONDROP

Событие ONDROP

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

Синтаксис

<ELEMENT ondrop = "handler" ... >

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

Внимание

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


ONLOAD

Событие ONLOAD

Событие ONLOAD возникает при загрузке объекта браузером. Применима к объектам BODY, IMG, FRAME и др. Данное событие можно, например, использовать, чтобы узнать, отключена ли графика в браузере у пользователя. Если графика включена, событие есть, если графика отключена - нет. Таким образом можно написать скрипт, с помощью которого вы предупредите пользователя о том, что ему нужно включить графику в настройках браузера или перенаправить его другую страницу без графики).

Синтаксис

<ELEMENT onload = "handler" ... >

Пример

. Сначала мы инициализируем глобальную переменную gVar со значением "0" (графика отключена). При загрузке тестового изображения выполняется функция "change()" и значение переменной меняется на "1". При загрузке всей страницы выполняется функция "check()", которая проверяет значение переменной "gVar" и в зависимости от её значения выполняет то или иное действие.
Код для примера скрипта, использующего метод ONLOAD
...
<head>
<script language="vbscript">
dim gVar

function change()
  gVar=1
End function

function check()
  If gVar=1 Then
       alert "Графика включена"
  Else
       alert "Графика отключена"
  End If
End function
</script>
</head>

<body onload="check()">
<img src="../32.jpg" onload="change()">
...


ONMOUSEOUT

Событие ONMOUSEOUT

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

Синтаксис

<ELEMENT onmouseout = "handler" ... >

Пример

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

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

Внимание

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


ONMOUSEOVER

Событие ONMOUSEOVER

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

Синтаксис

<ELEMENT onmouseover = "handler" ... >

Пример

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

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

Внимание

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


ONSELECTSTART

Событие ONSELECTSTART

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

Синтаксис

<ELEMENT onselectstart = "handler" ... >

Пример

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

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

Внимание

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


contentEditable

Атрибут contentEditable

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

Синтаксис

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

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

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

Нажмите на кнопку для возможности или запрета редактирования содержимого тега SPAN.

Вы можете изменять этот зеленый текст

SPAN можно редактировать:


offsetWidth

Свойство offsetHeight

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

Синтаксис

[ iHeight = ] object.offsetHeight
iHeight является числовым значением ширины в пикселах

Свойство offsetWidth

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

Синтаксис

[ iWidth = ] object.offsetWidth
iWidth является числовым значением ширины в пикселах

Пример

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


Фильтры

Фильтры в 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: имя_фильтра([параметры]);

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

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

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

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

<IMG ID=img1 SRC="пример1.gif" STYLE="filter: blur(strength=50) fliph()>

В данном примере к графическому изображению применяются два фильтра: первый (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;


Фильтры: Alpha

Фильтры в DHTML

alpha

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

Синтаксис:
STYLE="filter:alpha(Opacity, FinishOpacity, Style, StartX, StartY, FinishX, FinishY)"

Параметры

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

Пример
Образец | Фильтр
Код для примера
<IMG SRC="cat.jpg" STYLE=filter:alpha(Opacity=50)>


Фильтры: Blur

Фильтры в DHTML

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

Фильтры в DHTML

chroma

Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным. Фильтр хорошо применять к изображениям, созданным в формате gif либо png. Для jpeg он обычно не дает хороших результатов, так как для данного формата трудно определить границы заливки отдельных цветов

Синтаксис:
STYLE="filter:chroma(Color)"

Параметры

Color
Цвет, который будет прозрачным
Пример
Образец | Фильтр
Код для примера
<IMG SRC="cat.jpg" STYLE=filter:chroma(color=#6c75d2)>


Фильтры: Shadow

Фильтры в DHTML

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>

Shadow

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

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

Параметры

Color
Цвет тени
Direction
Направление тени в градусах
Пример
Пример фильтра shadow
Код для примера
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:shadow(color=green,direction=45)>Пример фильтра shadow
</TABLE>


Фильтры

Фильтры в DHTML

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

Фильтры в DHTML

glow

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

Фильтры в DHTML

Gray

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

Синтаксис:
STYLE="filter:gray"

Пример
Образец | Фильтр
Код для примера
<IMG SRC="cat.jpg" STYLE=filter:gray()>


Фильтры: Invert

Фильтры в DHTML

Invert

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

Синтаксис:
STYLE="filter:invert"

Пример
Образец | Фильтр
Код для примера
<IMG SRC="cat.jpg" STYLE=filter:invert()>


Фильтры: Mask

Фильтры в DHTML

Mask

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

Синтаксис:
STYLE="filter:mask(Color=значение)"

Параметры

Color
Цвет, окружающий текст
Пример
Пример фильтра Mask
Код для примера
<TABLE BORDER=1>
<TR>
<TD STYLE=filter:mask(color=darkblue)>Пример фильтра shadow
</TABLE>


Фильтры: Wave

Фильтры в DHTML

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

Фильтры в DHTML

xray

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

Синтаксис:
STYLE="filter:xray()"

Пример
Образец | Фильтр
Код для примера

<IMG SRC="cat.jpg" STYLE=filter:xray()>


Объектная модель Internet Explorer

Объектная модель Internet Explorer представляет собой иерархию различных объектов, доступных через скрипты. В основном, объектная модель Internet Explorer совместима с объектными моделями других браузеров (напр., Netscape Navigator). Но надо помнить, что каждая новая версия Internet Explorer добавляет в эту модель новые объекты. Поэтому, если некоторые примеры у вас не заработают, значит ваш браузер не поддерживает эти объекты

Объектная модель Internet Explorer состоит из нескольких объектов, каждый из которых имеет свою область

  • Window
  • Document
  • Navigator
  • History
  • Location
  • Screen


Объектная модель Internet Explorer: Window

Window

На вершине объектной модели располагается Internet Explorer объект Window, который представляет собой окно текущего экземпляра Internet Explorer, в котором загружен HTML-документ. Свойства этого объекта обеспечивают доступ к другим объектам в объектной модели Internet Explorer

Так как объект Window является базовым объектом, то доступ к его свойствам и методам можно производить без указания самого объекта. Например, для отображения названия текущего окна используем следующий код:
Пример

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

<script language="vbscript">
sub showname()
 'Присвоим окну имя
 name="Мое окно"
 alert name
end sub
</script>

Свойства объекта Window

  • name
  • parent
  • self
  • top
  • defaultstatus
  • status
  • cleartimeout

Методы объекта Window

  • Alert
  • Close
  • Confirm
  • moveTo
  • Navigate
  • Open
  • Prompt
  • resizeTo
  • scrollBy
  • scrollTo
  • SetInterval
  • SetTimeOut

События объекта Windows

  • Onload
  • OnUnload


Window: Name

Name

Свойство Name возвращает имя текущего окна
Пример

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

<script language="vbscript">
sub showname()
 'Присвоим окну имя
 name="Мое окно"
 alert name
end sub
</script>


Window: Parent

Parent

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


Window: Status

Status

Свойство Status устанавливает текст в строке состояния (в нижней части страницы)
Пример

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

<script language="vbscript">
sub NewStatusText()
 'Присвоим окну имя
 status="Изменим Окна к лучшему!"
end sub
</script>


Window: Alert

Alert

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

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

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


Window: Close

Close

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

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

<script language="vbscript">
sub CloseShow()
 window.close
end sub
</script>


Window: Confirm

Confirm

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

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

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

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

end sub
</script>


Window: moveTo

moveTo

Метод moveTo перемещает верхний левый угол окна на экране в заданную позицию

Синтаксис

window.moveTo(iX, iY)

Параметры

iX
Требуется. Координата, определяющая смещение окна по горизонтали
iY
Требуется. Координата, определяющая смещение окна по вертикали

Пример
Переместим окно (верхний левый угол) центр экрана

Примечание: Если вы проверяете пример в окне справочника, то для восстановления окна жмите кнопку Восстановить (или Развернуть) в верхнем углу справочника


Window: Navigate

Navigate

Метод Navigate позволяет переместиться на заданную страницу
Пример

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

<script language="vbscript">
sub NavigateShow()
 window.Navigate "close.html"
end sub
</script>


Window: Open

Open

Метод Open открывает новое окно браузера с указанным адресом. Кроме указанного адреса, вы должны указать имя окна, а также можете использовать необязательные параметры для настройки внешнего вида открываемого окна
toolbar | boolean | Панель инструментов
location | boolean | Адресная строка
directories | boolean | Ссылки
status | boolean | Строка состояния
menubar | boolean | Меню
scrollbars | boolean | Полосы прокрутки, если документ больше окна
resizable | boolean | Возможность изменения размеров окна
width | integer | Ширина окна в пикселах
height | integer | Высота окна в пикселах
top | integer | Верхняя позиция окна в пикселах
left | integer | Левая позиция окна в пикселах

Пример
Откроем новое окно без панели инструментов, с меню и высотой окна в 100 пикселов

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

<script language="vbscript">
sub OpenShow()
 window.Open "close.htm", "myTest", "toolbar=no, menubar=yes height=100"
end sub
</script>


Window: Prompt

Prompt

Метод Prompt выводит на экран диалоговое окно со строкой для ввода. Имеет два параметра. В первом обязательном параметре вы задаете текст запроса. Во втором необязательном параметре вы можете установить текст, выводимый в текстовом поле. Если вы не установили текст, то там выводится <undefined>
Пример

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

<script language="vbscript">
sub PromptShow()
 Dim retval
 retval = prompt ("Как тебя зовут?","заяц")
 alert "Ну, " & retval & ", погоди!"
end sub
</script>


Window: resizeTo

resizeTo

Метод resizeTo устанавливает размер окна до заданных величин

Синтаксис

window.resizeTo(iWidth, iHeight)

Параметры

iWidth
Требуется. Величина в пикселах, определяющая ширину окна
iHeigh
Требуется. Величина в пикселах, определяющая высоту окна

Пример
Установим размер окна в половину экрана

Примечание: Если вы проверяете пример в окне справочника, то для восстановления окна жмите кнопку Восстановить (или Развернуть) в верхнем углу справочника


Window: scrollBy

scrollBy

Метод scrollBy производит скроллинг окна на экране на заданную величину относительно текущей позиции ползунка

Синтаксис

window.scrollBy(iX, iY)

Параметры

iX
Требуется. Координата, определяющая горизонтальный скроллинг в пикселах. Положительные значения скроллируют окно вправо, отрицательные - влево
iY
Требуется. Координата, определяющая вертикальный скроллинг в пикселах. Положительные значения скроллируют окно вниз, отрицательные - вверх

Пример
Прокрутим страницу вверх на 10 пикселов

Вверх
<a href="" onClick="scrollBy(0,-10); return false;">Вверх</a>


Window: scrollTo

scrollTo

Метод scrollTo производит скроллинг окна на экране на заданную величину

Синтаксис

window.scrollTo(iX, iY)

Параметры

iX
Требуется. Координата, определяющая горизонтальный скроллинг в пикселах
iY
Требуется. Координата, определяющая вертикальный скроллинг в пикселах

Пример
Вернемся в начало страницы

Hаверх страницы


Window: SetInterval

SetInterval

Метод SetInterval повторяет заданную операцию через заданное число миллисекунд
Пример

Пример HTML-часов

Код для примера
<script language="vbscript">
sub PauseSec()
 ID = Window.setinterval("TimerFunc",1000, "vbscript")
end sub

sub TimerFunc()
 mysample.innerText=time
end sub
</script>


Window: SetTimeOut

SetTimeOut

Метод SetTimeOut включает таймер для вызова определенной функции через заданное число миллисекунд
Пример

Данный текст изменится через 3 секунды после нажатия на кнопку

Код для примера
<script language="vbscript">
sub PauseSec()
 ID = Window.setTimeout("TimerFunc",3000, "vbscript")
end sub

sub TimerFunc()
 mysample.innerText="Изменим Окна к лучшему"
end sub
</script>


Window: OnLoad

Onload

Событие Onload возникает при загрузке данного HTML-документа. В обработке этого события вы можете поместить какой-нибудь код. Одним из способов создания обработчика события Onload является использование атрибута тега BODY. Ниже приводится пример обработчика события Onload, в котором вызывается процедура Loading
Пример

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

<body language="vbscript" OnLoad="Loading">

<script language="vbscript">
sub Loading()
 alert "Если Вы видите это сообщение, значит страница загрузилась"
end sub
</script>
</body>


Window: OnUnLoad

OnUnload

Событие OnUnload возникает перед выгрузкой данного HTML-документа. В обработке этого события вы можете поместить какой-нибудь код. Одним из способов создания обработчика события OnUnload является использование атрибута тега BODY. Ниже приводится пример обработчика события OnUnload, в котором вызывается процедура UnLoading
Данное событие возникает при

  • закрытии окна
  • переходе на другую страницу при вводе нового адреса или с использованием папки Избранное
  • нажатии кнопок Вперед, Назад, Обновить, Домой
  • использовании метода Close

Пример

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

<body language="vbscript" OnUnLoad="UnLoading">

<script language="vbscript">
sub UnLoading()
 alert "Если Вы видите это сообщение, значит сработало событие OnUnLoad"
end sub
</script>
</body>


Объектная модель Internet Explorer: Document

Document

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

Объекты, доступные через объект Document

  • Anchors
  • Links
  • Forms

Свойства объекта Document

  • ALinkColor
  • bgColor
  • charset
  • Cookie
  • fgColor
  • fileCreatedDate
  • fileSize
  • lastModified
  • LinkColor
  • mimeType
  • referrer
  • Title
  • URL
  • VLinkColor

Методы объекта Document


Document: ALinkColor

ALinkColor

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

Пример

Просто ссылка в никуда
Нажми на кнопку для изменения цвета активной ссылки на зеленый


Document: bgColor

bgColor

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

Пример


Document: charset

charset

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

Пример

Нажми на кнопку для получения кодировки


Document: Cookie

Cookie

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

Пример

Установим cookie для данной страницы


Document: defaultCharset

defaultCharset

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

Пример

Нажми на кнопку для получения кодировки


Document: fgColor

fgColor

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

Пример

По умолчанию текст выводится черным цветом. Можете изменить этот цвет, я сегодня добрый!
Рекомендую попробовать white :-)


Document: fileCreatedDate

fileCreatedDate

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

Пример

Примечание: Внутри справочника не работает. Создайте html-страничку и там проверяйте
Нажми на кнопку для получения даты создания файла


Document: fileSize

fileSize

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

Пример

Примечание: Внутри справочника не работает. Создайте html-страничку и там проверяйте
Нажми на кнопку для получения размера файла


Document: lastModified

lastModified

Свойство lastModified позволяет узнать дату последней модификации документа. Широко используется веб-мастерами на своих страничках. Используя скрипт вам не придется вручную изменять дату изменения странички.

Пример


Document: LinkColor

LinkColor

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

Пример

Просто ссылка в никуда
Нажми на кнопку для изменения цвета ссылки на зеленый


Document: mimeType

mimeType

Свойство mimeType возвращает тип MIME (Multipurpose Internet Mail Extension) объекта. Свойство только для чтения

Пример

<script>

function getchar()
{
    alert (document. mimeType);
}

</script>


Document: referrer

referrer

Свойство referrer позволяет узнать адрес страницы, которая привела пользователя на текущую страницу. Свойство только для чтения. Свойство возвращает значение, если пользователь пришел на текущую страницу по ссылке с предыдущей страницы. В других случаях возвращается пустая строка. Также возвращается пустая строка при ссылки с защищенных узлов. Например, если страница PageA.htm имеет ссылку на PageB.htm, и пользователь щелкнул на ссылке, то document.referrer на PageB.htm вернет "PageA.htm". Но если пользователь находясь на странице PageA.htm, напечатает PageB.htm в адресной строке или использует Файл-Открыть в меню, чтобы попасть на PageB.htm, то document.referrer возвращает пустую строку.

Пример

Нажми на кнопку для получения ссылающего документа


Document: Title

Title

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

Пример

Нажми на кнопку для получения заголовка формы


Document: URL

URL

Свойство URL позволяет узнать или получить полный адрес для текущего документа. Аналогичен href объекта Location

Пример

Нажми на кнопку для получения даты создания файла


Document: VLinkColor

VLinkColor

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

Пример

Ссылка на ALinkColor

Сходи по ссылке - вернись назад,
и ты увидишь результат!


Объектная модель Internet Explorer: Navigator

Navigator

Объект Navigator обеспечивает информацией об используемом браузере

Свойства объекта Navigator

  • appCodeName
  • appName
  • appVersion
  • cookieEnabled
  • javaEnabled
  • userAgent


Navigator: appCodeName

appCodeName

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

Пример

Узнаем имя приложения


Navigator: appName

appName

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

Пример

Узнаем имя приложения


Navigator: appVersion

appVersion

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

Пример

Узнаем версию приложения


Navigator: cookieEnabled

cookieEnabled

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

Пример


Navigator: javaEnabled

javaEnabled

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

Пример


Navigator: userAgent

userAgent

Свойство userAgent возвращает строку, эквивалентную HTTP-заголовку user-agent. Свойство только для чтения. Не имеет свойства по умолчанию

Пример


Объектная модель Internet Explorer: History

History

Объект History обеспечивает доступ к списку ранее загружавшихся страниц

Свойства объекта History

  • length

Методы объекта History

  • back


History: length

length

Свойство length возвращает число записей в списке History

Пример

Нажми на кнопку для получения количества записей


History: Back

Back

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


Объектная модель Internet Explorer: Location

Location

Объект Location содержит информацию о текущем URL

Свойства объекта Location

  • hash
  • host
  • hostname
  • href
  • pathname
  • port
  • protocol
  • search

Методы объекта Location

  • assign
  • reload
  • replace


Location: host

host

Свойство host позволяет узнать или установить часть адреса (a href="hostname.html">host) и номер порта

Пример

Узнаем host текущей страницы


Location: hostname

hostname

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

Синтаксис

object.hostname [ = sHostname ]

Параметры

sHostname
Строка, определяющая или устанавливающая имя хоста и домена или IP-адрес

Пример


Location: href

href

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

Синтаксис

location.href [ = sURL ]

Параметры

sURL
Строка, определяющая или устанавливающая адрес страницы

Пример

Переходим на страницу, выбранную пользователем


Location: replace

replace

Метод replace заменяет текущий документ, загружая другой документ с заданным URL. При этом заменяемый документ удаляется из объекта history

Синтаксис

location.replace(sURL)

Параметры

sURL
Обязательный параметр - строка, определяющая новый адрес загружаемого документа

Пример


Объектная модель Internet Explorer: Screen

Screen

Объект Screen обеспечивает информацией об используемом экране пользователя

Свойства объекта Screen

  • availHeight
  • availWidth
  • colordepth
  • height
  • width


Screen: availHeight и availWidth

availHeight

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

availWidth

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

Пример

Узнаем размеры рабочей области экрана


Screen: colorDepth

colorDepth

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

Пример

Узнаем разрешение экрана


Screen: height

height

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

width

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

Пример

Узнаем размеры экрана


Объектная модель Internet Explorer: external

external

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

Свойства объекта external

  • menuArguments

Методы объекта external

  • AddFavorite
  • ShowBrowserUI


external: AddFavorite

AddFavorite

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

Синтаксис

external.AddFavorite(sURL [, sTitle])

Параметры

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

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


external: ShowBrowserUI

ShowBrowserUI

Метод ShowBrowserUI выводит заданное диалоговое окно

Синтаксис

vReturn = external.ShowBrowserUI(sUI, null)

Параметры

sUI
Требуется. Строка, определяющая вид диалогового окна. Может иметь два значения:
LanguageDialog | Открывает окно Выбор языка
OrganizeFavorites | Открывает окно Упорядочить избранное
null
Требуется. Нулевое значение

Пример

Примечание: Внутри справочника не работает. Создайте html-страничку и там проверяйте


Примеры скриптов: Избранное и стартовая страница

Скрипты

Как сделать страничку стартовой

Если вы хотите сделать свою страничку стартовой, то необходимо использовать следующий код (Для IE 5 и выше)

<a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://winchanger.narod.ru/'); return false;">Сделать стартовой страницей</a>

При клике на ссылке появится диалоговое окно с запросом

Примеры

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


Z-index

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

САША +
ТАНЯ =
Любовь!


FRAME

Тег <frame>

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

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

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

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

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


FRAME

Тег <frame>

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

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

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

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

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


Пример с META

Примеры

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

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на страницу) (или Site-Enter)

<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе со страницы) (или Site-Exit),
где Duration задает время в секундах, а Transition - номер эффекта

Список эффектов

  • 0 - Box in (в поле)
  • 1 - Box out (из поля)
  • 2 - Circle in (в круг)
  • 3 - Circle out (из круга)
  • 4 - Wipe up (стирание вверх)
  • 5 - Wipe down (вниз)
  • 6 - Wipe right (вправо)
  • 7 - Wipe left (влево)
  • 8 - Vertical blinds (вертикальные жалюзи)
  • 9 - Horizontal blinds (горизонтальные жалюзи)
  • 10 - Checkboard across (в шахматном порядке поперечно)
  • 11 - Checkboard down (вниз)
  • 12 - Random dissolve (случайный наплыв)
  • 13 - Split vertical in
  • 14 - Split vertical out
  • 15 - Split horizontal in
  • 16 - Split horizontal out
  • 17 - Strips left down
  • 18 - Strips left up
  • 19 - Strips right down
  • 20 - Strips right up
  • 21 - Random bars horizontal (случайные горизонтальные линии)
  • 22 - Random bars vertical
  • 23 - Random (случайный эффект)