Синтаксис 
<Caption
    align= bottom | center | left | right | top
    class=classname
    id=value
    lang=language
    language=javascript | jscript | vbscript
    style=properties
    title=string
    event=script
>

<Caption align=bottom>
Пример таблицы: 
</Caption>
<table border=1>
<tr><td>a<sub>1,1</sub><td>a<sub>1,2</sub>
<tr><td>a<sub>2,1</sub><td>a<sub>2,2</sub>
</table>
<

• Атрибут align задает выравнивание внутри всех ячеек таблицы. Если, например указать align=center, то содержимое каждой ячейки будет выравнено по центру.
• Атрибут valign также задает выравнивание, но уже по вертикали. Может принимать значения top - выравнивание по верху и middle - по центру, ну и bottom по низу.
• Атрибуты bgcolor и background задают цвет или изображение фона одной строки таблицы.

<Caption align=top>
Пример: 
</Caption>
<table border=3>
<tr><td>a<td>b<td>c<td>d<td>e
<tr><td background=images/sky.gif align=middle colspan=2 rowspan=2>f<td  colspan=2>g<td width=10% rowspan=2>h
<tr><td>i<td>j
<tr><th bgcolor=navy align=center colspan=5><font color=snow>z</font>
</table>

Навигация по рисунку

Первое решение заключается оно в использовании bitmap-a изображения.

Для того, чтобы создать "карту" в языке html существует тег <map>, задающий разбиение изображения на "горячие" области, т.е. области при нажатии на которые можно загрузить другой файл html.

Параметр у этого тега только один - это name. Пример:

<map name="time">
.....
</map>

Закрывающая скобка должна обязательно присутствовать. Внутри тега <map>...</map> должны следовать элементы описывающие "горячие" области.

Эти области задает элемент <area>. Он не должен содержать закрывающей скобки. У него существуют следующие параметры :

href

адрес страницы, которая будет загружаться этой областью.

shape

Задает форму "горячей" области. Может принимать значения circle - окружность, rect - прямоугольник, poly - полигон любой формы.

coords

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

Для окружности : coords="Х центра, Y центра, радиус"

Для прямоугольника : coords="лево верх Х, лево верх Y, право низ X, право низ Y"

Для полигонов : coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......"

nohref

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

alt

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

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

Пример тега <area>:

 <area shape=rect coords=5,5,15,15 nohref>
 <area href=main.html shape=rect coords=0,0,20,20 alt="Main Page">

Для того, чтобы назначить изображению карту надо использовать атрибут usemap и в нем указать значение name в теге <map>. Пример:

 <img src=Images/time.gif usemap="#time">

При указании имени важно учитывать регистр.

Давайте теперь вернемся к нашему "разбиваемому изображению". Чтобы применить способ карт, создадим вот такой код :

<map name="time">
<area href=yesterday.html shape="circle" coords="340,245,20">
<area href=today.html shape="poly" 
    coords="5,270,5,210,60,210,110,240,110,270,5,270">
<area href=tomorrow.html shape="rect" coords="300,20,360,145">
</map>

<p><img src=Images/time.jpg usemap="#time" alt="Время">

Разрежем картинку на части

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

Фреймы

Плавающая область

Синтаксис 
<IFRAME
    align= absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
    border =pixels
    bordercolor=color
    class=classname
    datafld=colname
    datasrc=#id
    frameborder= no | yes | 0 | 1
    framespacing=pixels
    height=n
    hspace= pixels
    id=value
    lang=language
    language=javascript | jscript | vbscript
    marginheight=pixels
    marginwidth=pixels
    name=windows_name | _blank | _parent | _self | _top
    noresize=noresize | resize
    scrolling = auto | no | yes
    src=url
    style=properties
    title=string
    vspace=pixels
    width=n
    event=script
>

<center>
<IFRAME align=Botton FrameBorder=0 height=200 id=iffrm srolling= yes src="main.html" width=300 border =3>
</IFRAME>
</center>

Стили документа

Синтаксис

<tag style="attribute:value; attribute:value;..."></tag>

Парный тег <DIV> позволяет выделить фрагмент документа (например несколько абзацев вместе с заголовком) и запрограммировать как единый объект. Использование атрибута style тега <div> управляет стилем этого документа. Тег <SPAN> делает то же что и тег <DIV>, но для небольших фрагментов.

• position-задает абсолютное или относительное положение элемента в документе. Может принимать следующие значения
  • absolute - атрибуты left и top задают в пикселах абсолютное размещение элемента в документе;
  • relative - атрибуты left и top задают в пикселах относительное размещение элемента в документе;
  • static - элемент размещается так словно атрибут position не установлен;
• left, top, width, height-координаты верхнего левого угла элемента и его ширина и высота;
• z-index-помещает элемент на переднем или заднем плане пересекающихся элементов. Может принимать значения auto или целое число, где 0 соответствует размещению на заднем плане.

<STYLE>
<!--
#first
{
    background-color=yellow; position: relative; color: gray;
        left: 0; top: 200; height: 100; width: 100; z-index: 0;
}
#second
{
    background-color=red; position:  relative; color: navy;
        left: 50; top: 50; height: 100; width: 100; z-index: 1;
}
#third
{
    background-color=blue; position:  relative; color: snow;
        left: 90; top: 0; height: 100; width: 100; z-index: 2;
}
-->
</STYLE>
<h3 id="first">First</h3>
<h3 id="second">Second</h3>
<h3 id="third">Third

First

Second

Third

Небо

<h1 style="position:relative;top:-200px;left:400px;z-index:1">
Небо</h1>
<img src=images/sky.gif style="position:relative;top:-300px;left:300px;z-index:0" >

Формы и элементы управления

Синтаксис 
<FORM
    action=url
    class=classname
    enctype=encoding
    id=value
    lang=language
    language=javascript | jscript | vbscript
    method= get | post
    name=name
    style=properties
    target=windows_name | _blank | _parent | _self | _top
    title=string
    event=script
>

Синтаксис 
<INPUT
    accesskey=key
    align= left | center | right
    alt= text
    class=classname
    disabled
    dynsrc=url
    id=value
    lang=language
    language=javascript | jscript | vbscript
    lowsrc=url
    maxlength=n
    name=name
    readonly
    size=n
    style=properties
    tabindex=n
    title=string
    type= button | checkbox | file | hidden | image | password | radio | reset | submit | text
    value=value
    event=script
>

• align -выравнивание текста стоящего за элементом управления.
• chacked-флажок или переключатель установлен при загрузке страницы.
• disabled-элемент управления не достижим для пользователя.
• maxlength=максимальное число символов, которые могут быть введены в поле ввода. По умолчанию - неограничено.
• name-имя элемента управления.
• size- размер поля ввода в символах. По умолчанию -20.
• src- адрес изображения, если значение атрибута type равно image.
• type-тип элемента управления.
  • button-кнопка, атрибут value задает текст на кнопке
  • chackbox- флажок. Атрибут value задает состояние флажка - on (установлен) и off (снят)
  • hidden- скрытое значение. Этот элемент позволяет разместить данные невидимые пользователю. Атрибут value определяет значение элемента.
  • hfssword- поле ввода пароля, то есть поле ввода, у которого вводимые символы заменяются звездочками. Атрибут value определяет значение по умолчанию.
  • image-рисунок.
  • radio-переключатель. Атрибут value определяет состояние переключателя. Допустимые значения оn, off.
  • reset-кнопка, устанавливающая во всех интерфейсных элементах значения используемые по умолчанию.
  • submit- кнопка, действие которой приводит к отправке содержимого формы на сервер.
  • title-всплывающая подсказка.
  • event- одно из событий
    • onblur-генерируется при потере элементом управления фокуса.
    • oncklick- генерируется при щелчке на элементе управления.
    • onchange-генерируется при изменении содержимого объекта, например, текста в полу ввода.
    • ondblclick-генерируется при двойном щелчке на элементе управления.
    • onfocus-генерируется при получении фокуса элементом управления.
    • onhelp- генерируется при нажимании клавиши F1 или команды Справка в окне браузера.
    • onkeydown-генерируется когда клавиша нажата.
    • onkeypress-генерируется при нажатии клавиши.
    • onkeyup-генерируется, когда клавиша отпущена.
    • onmousedown-генерируется при щелчке мыши по элементу управления.
    • onmousemove-генерируется при перемещении указателя мыши над элементом управления.
    • onmouseout-генерируется при покидании указателя мыши элемента управления.
    • onmouseover-генерируется когда указатель мыши находится над элементом управления.
    • onmouseup-генерируется при отпускании клавиши мыши.
    • onresize-генерируется при изменении размеров элемента управления.
    • onselect-генерируется при изменении текущего выбора, например, выборе нового элемента в списке.

 <center>
 <form name formBlank>
    <table border=18 bgColor=gray>
    <tr>
    <td> Ф.И.О.</td>
    <td colspan=3><input name=text1 size=40
         style="height: 22px;width: 289px"></td>
    <td></td>  
        <td></td>
        </tr>
    <tr>
    <td> Адрес</td>
    <td colspan=3><input name=text2 size=40
         style="height: 22px;width: 289px"></td>
    <td></td>  
        <td></td>
        </tr>
    <tr>
    <td> Город</td>
    <td><input name=text3 size=22></td>
    <td>Код</td>
     <td><input name=text4 size=8
              style="height: 22px;width: 79px"></td>
        </tr>
        </table>
    </form>
    </center>

Бегущая строка

Синтаксис 
<MARQUEE>
    behavior= alternate | scroll | slide
    bgcolor=color
    class=classname
    datafld=colname
    dataformatas =html | text
    datasrc=#id
    direction= down | left | right | up
    height = n
    id= value
    lang=language
    language=javascript | jscript | vbscript
    loop=n
    scrollamount=n
    scrolldelay=milliseconds
    style=properties
    title=string
    truespeed
    vspace=n
    width=n
    event=script
>

• behavior- тип движения в направлении указанном в качестве значения атрибута direction. Допустимые значения:
  • alternate- попеременно в противоположных направлениях,
  • scroll-при достижении края экрана процесс повторяется,
  • slide -при достижении края экрана процесс останавливается,
• loop -число повторений,
• scrollamaunt=число пикселов, на которые перемещается за одно движение строка,
• scrolldelay - скорость бегущей строки.

<TABLE>
<TR>
    <TD>
    <MARQUEE direction="up">
        <P> Грузите </P>
        <P> апельсины </P>
        <P> бочками </P>
    </MARQUEE>
    </TD>
</TR>
<TR>
    <P><b> Братья  Карамазовы </b></P>
</TD>
</TABLE>

Фильтры

Синтаксис

{filter:filtername(param1,param2,...)}

Alpha(opacity,finishopacity,style,startX,startY,finishX,finishY)

<IMG src="Images/today.jpg" style="filter: Alpha(opacity =1, finishOpacity=100, style=2)">


Blur(add, direction, strength)

Chroma(color) делает цвет color прозрачным.

DropShadow(color, offX, offY, positive)

Glow(color,strength)

Работа с мультимедиа

Методы воспроизведения звука.

1. С использованием тега <BGSOUND>, что позволяет использовать звуковую схему в фоновом режиме. В этом случае воспроизведение фонового звука происходит при каждой перегрузке страницы. Приведем пример

   <BGSOUND src="ding.wav" loop="N"></BGSOUND>
   здесь N-число повторов. Если это значение равно "true", то клип загружается "по кругу".
   

   Используя javascript, можно загружать звуковую схему при выполнении того или иного события, например, при нажатии на кнопку

   Код в этом случае будет иметь вид

   <input type="button" value="Дзвяк" onclick=
   "javascript:document.write('<bgsound src=Images/ding.wav loop=1>');history.back();">
   

2. Внедрение пользовательского проигрывателя мультимедийных файлов с помощью тега <EMBED>.

   Существенным ограничением использования фонового режима является невозможность управления звучанием после загрузки звукового файла. Использование тега <EMBED> свободно от этого недостатка.

   <EMBED  id="sound" autostart="false" balance="0" src="Images/ding.wav" 
       hidden="false" height="40" width="300" volume="0" loop="infinite"></EMBED>
   

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

3. Посредством вставки объекта ActiveX с помощью тега <OBJECT>.

   Подключение объектов ActiveX дает широкие возможности использования мультимедийных приложений. В этом случае во избежание конфликта устройств необходимо добивить идентификатор класса проигрывателя CLSID (идентификатор класса объекта ActiveX можно найти в реестре по адресу HKEY_CLASSES_ROOT/CLSID). Значения параметров можно либо оставлять теми, которые приняты по умолчанию, либо установить требуемые.

   Использование объектов ActiveX позволяет свойства и методы этих объектов использовать из сценариев HTML.

   При использовании объектов ActiveX полезно использовать атрибут codeBase, содержащий путь к этому объекту. В случае отсутствия требуемого объекта, пользователь сможет загрузить и установить на свой компьютер, недостающий элемент.

   
   

   Например, можно управлять элементами WEB-формы объектом Media Player.

   Код со списком параметров имеет вид

   <OBJECT id="objWMPlayer" codeBase=
      "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.
       cab#Version=6,4,5,715" type="application/x-oleobject" 
       classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" VIEWASTEXT>
   <PARAM NAME="AudioStream" VALUE="-1">
   <PARAM NAME="AutoSize" VALUE="-1">
   <PARAM NAME="AutoStart" VALUE="0">
   <PARAM NAME="AnimationAtStart" VALUE="-1">
   <PARAM NAME="AllowScan" VALUE="-1">
   <PARAM NAME="AllowChangeDisplaySize" VALUE="-1">
   <PARAM NAME="AutoRewind" VALUE="0">
   <PARAM NAME="Balance" VALUE="0">
   <PARAM NAME="BaseURL" VALUE="">
   <PARAM NAME="BufferingTime" VALUE="5">
   <PARAM NAME="CaptioningID" VALUE="">
   <PARAM NAME="ClickToPlay" VALUE="-1">
   <PARAM NAME="CursorType" VALUE="0">
   <PARAM NAME="CurrentPosition" VALUE="-1">
   <PARAM NAME="CurrentMarker" VALUE="0">
   <PARAM NAME="DefaultFrame" VALUE="">
   <PARAM NAME="DisplayBackColor" VALUE="0">
   <PARAM NAME="DisplayForeColor" VALUE="16777215">
   <PARAM NAME="DisplayMode" VALUE="0">
   <PARAM NAME="DisplaySize" VALUE="0">
   <PARAM NAME="Enabled" VALUE="-1">
   <PARAM NAME="EnableContextMenu" VALUE="-1">
   <PARAM NAME="EnablePositionControls" VALUE="-1">
   <PARAM NAME="EnableFullScreenControls" VALUE="0">
   <PARAM NAME="EnableTracker" VALUE="-1">
   <PARAM NAME="Filename" VALUE="Images/ding.wav">
   <PARAM NAME="InvokeURLs" VALUE="-1">
   <PARAM NAME="Language" VALUE="-1">
   <PARAM NAME="Mute" VALUE="0">
   <PARAM NAME="PlayCount" VALUE="1">
   <PARAM NAME="PreviewMode" VALUE="0">
   <PARAM NAME="Rate" VALUE="1">
   <PARAM NAME="SAMILang" VALUE="">
   <PARAM NAME="SAMIStyle" VALUE="">
   <PARAM NAME="SAMIFileName" VALUE="">
   <PARAM NAME="SelectionStart" VALUE="-1">
   <PARAM NAME="SelectionEnd" VALUE="-1">
   <PARAM NAME="SendOpenStateChangeEvents" VALUE="-1">
   <PARAM NAME="SendWarningEvents" VALUE="-1">
   <PARAM NAME="SendErrorEvents" VALUE="-1">
   <PARAM NAME="SendKeyboardEvents" VALUE="0">
   <PARAM NAME="SendMouseClickEvents" VALUE="0">
   <PARAM NAME="SendMouseMoveEvents" VALUE="0">
   <PARAM NAME="SendPlayStateChangeEvents" VALUE="-1">
   <PARAM NAME="ShowCaptioning" VALUE="0">
   <PARAM NAME="ShowControls" VALUE="0">
   <PARAM NAME="ShowAudioControls" VALUE="-1">
   <PARAM NAME="ShowDisplay" VALUE="0">
   <PARAM NAME="ShowGotoBar" VALUE="0">
   <PARAM NAME="ShowPositionControls" VALUE="-1">
   <PARAM NAME="ShowStatusBar" VALUE="0">
   <PARAM NAME="ShowTracker" VALUE="-1">
   <PARAM NAME="TransparentAtStart" VALUE="0">
   <PARAM NAME="VideoBorderWidth" VALUE="0">
   <PARAM NAME="VideoBorderColor" VALUE="0">
   <PARAM NAME="VideoBorder3D" VALUE="0">
   <PARAM NAME="Volume" VALUE="0">
   <PARAM NAME="WindowlessVideo" VALUE="0">
   <EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
        SRC="Images/ding.wav" name="objWMPlayer" autostart="0" showcontrols="1"> </EMBED>
   </OBJECT> 
   
   <BR>
   <INPUT id="butStart" onclick="objWMPlayer.Play();" 
       type="button" value="Start" name="butStart">
   <INPUT id="butStop" onclick="objWMPlayer.stop()" 
       type="button" value="Stop" name="butStop">
   <INPUT id="butRepeat" onclick="objWMPlayer.PlayCount='2'" 
       type="button" value="Repeat" name="butRepeat">
   <INPUT id="butMute" onclick="objWMPlayer.Mute=!(objWMPlayer.Mute)" 
       type="button" value="Mute" name="butMute">
   

Методы воспроизведения видео.