Вставка в HTML объектов

Все мультимедиа-компоненты в сети можно разделить на два основных типа: содержимое, обрабатываемое непосредственно броузером и содержимое, обрабатываемое дополнительными средствами. Броузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные, либо передаёт их на обработку дополнительным приложениям. Тип содержимого файла определяется либо по его расширению: .gif, .jpg, .mpg, .wrl и т.д., либо по специальному коду content type=”тип содержимого“ вставляемому в исходный код документа, где тип содержимого может принимать значения: text/html, image/gif, video/quicktime и т.д..

Так как язык HTML создавался как язык разметки текста и только для этих целей, то естественно что в нем изначально не была предусмотренна поддержка мультимедийных объектов. В последнее же время многие компании-разработчики стали предоставлять пользователям их броузеров доступ к мультимедиа-содержимому, встраивая в них различные plug-ins. Они позволяют представить мультимедиа-содержимое как внутреннее содержимое Web-страницы и могут располагаться как во всё окно, так и в заданных размерах. На практике получается следующее – если броузер подгружает файл с таким содержимым впервые, то пользователю предлагается скачать плагин, который запишется на жесткий диск и в следующий раз броузер передаст мультимедиа-содержимое на обработку уже сразу ему.

В Microsoft, например, для этих целей были созданны элементы управления ActiveX, позволяющие использовать разнообразное содержимое, включая даже электронные таблицы и средства управления от Windows, хотя на самом деле общие стандарты для всех броузеров и платформ, на которых они работают, ещё не разработанны.

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

• Элемент <IMG>.
• Элемент <MAP>.
• Элемент <AREA>.
• Элемент <BANNER>.
• Элемент <BGSOUND>.
• Элемент <MARQUEE>.
• Элемент <APPLET>.
• Элемент <SCRIPT>.
• Элемент <OBJECT>.
• Элемент <EMBED>.

Элемент <IMG>

Элемент <IMG> Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна броузера. Кроме того элемент <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.
Синтаксис: <IMG src= URL атрибуты >

• src
  Этот атрибут указывает на файл графики, задавая его URL.
  Синтаксис: <IMG src=” URL “>
• alt
  В некоторых случаях, когда броузер не в состоянии загрузить файл с изображением, либо когда пользователь намеренно, с целью сэкономить время и деньги,отключает загрузку картинок, на экране высвечивается альтернативный текст типа здесь нарисован логотип фирмы .
  Синтаксис: <IMG alt=” описание “>
• align
  Этот атрибут задает расположение рисунка в окне и его выравнивание.Он может принимать значения: bottom–по нижнему краю, left–влево, middle–по центру, right–справа, top–по верхнему краю.
  Синтаксис: <IMG align=” значение “>
• width
  Этот атрибут задает ширину области в пикселах, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется броузером под заданный размер.
  Синтаксис: <IMG wigth= число >
• height
  Этот атрибут задает высоту области в пикселах, отводимой в окне под изображение.В этом случае рисунок автоматически масштабируется броузером под заданный размер.
  Синтаксис: <IMG height= число >Обратите Ваше внимание на тот факт, что размер изображения в килобайтах не меняется – какие бы вы не задавали параметры width и height
• hspace
  Этот атрибут задает пустое пространство в пикселах справа и слева от рисунка.
  Синтаксис: <IMG hspace= число >
• border
  Этот атрибут задает в пикселах толщину рамки вокруг рисунка.
  Синтаксис: <IMG border= число >
• vspace
  Этот атрибут задает пустое пространство в пикселах сверху и снизу от рисунка.
  Синтаксис: <IMG vspace= число >
• ismap
  Этот атрибут разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие рисунки называют MAP карта, они используются совместно с элементом <A>. В этом случае реакцию на щелчек по карте отрабатывает сервер.
  Синтаксис: <A href=” URL карты “><IMG src=” URL изображения ” ismap>
• usemap
  Этот атрибут разрешает использовать изображения, отдельные части которого связаны с картами, они используются совместно с элементом <MAP>. В этом случае реакцию на щелчек по карте отрабатывает броузер.
  Синтаксис: <IMG src=” URL изображения ” usemap= “URL”карты(#имя карты) >
• lowsrc
  Этот атрибут задает URL файла с низкокачественной копией основного изображения,которое может быть визуализированно до изображения, заданного атрибутом src.
  Синтаксис: <IMG lowsrc= URL >
• dynsrc
  Этот атрибут задает URL файла с видеоклипом или сценой VRML.
  Синтаксис: <IMG dynsrc= URL >
• start
  Этот атрибут используется совместно с атрибутом dynsrc, он задает возможность управления процессом воспроизведения клипа, принимает значения fileopen-сразу после загрузки и mouseover-при наведении курсора.
  Синтаксис: <IMG dynsrc= URL start= mouseover >
• loop
  Этот атрибут задает количество воспроизведений видеоклипа. Он может принимать значения от 1 до infinite – бесконечно.
  Синтаксис: <IMG loop= значение >

Элемент <MAP>

Элемент <MAP> применяется для представления графического изображения ввиде карты с активными областями. Он поддерживает атрибут name, который задает его имя, и включает внутри себя элемент <AREA>, который и задает собственно активные области карты, связанные ссылками с прочими ресурсами.
Синтаксис: <MAP name=” имя “> <AREA атрибуты > </MAP>

Элемент <AREA>

Элемент <AREA> задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows – редакторе Paint , для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пиксела. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент <AREA> поддерживает различные атрибуты:

• href
  Этот атрибут указывает URL ссылки.
  Синтаксис: <AREA href=” URL “>
• alt
  Этот атрибут задает альтернативный текст для броузеров, которые не поддерживают данный элемент.
  Синтаксис: <AREA alt=” текст подсказки “>
• shape
  Этот атрибут задает форму активной области на карте и её координаты, он может принимать значения: “circle” coords=X,Y,R, где X,Y,R – координаты центра круга и его радиус, “poly” coords=X1,Y1,X2,Y2,X3,Y3…, гдеX1,Y1,X2,Y2,X3,Y3… – координаты вершин многоугольника, если многоугольник – прямоугольник, то достаточно указать его верхнюю левую и правую нижнюю вершины “rect” coords=X1,Y1,X3,Y3.
  Синтаксис: <AREA “ circle ” coords= X,Y,R >

Пример изображения – карты :

Элемент <BANNER>

Элемент <BANNER> позволяет зафиксировать какую-либо информацию на экране вне зависимости от того, какая часть окна просматривается в данный момент. Данный элемент также редко поддерживается броузерами, добиться же подобного решения можно при помощи фреймов или слоев.
Синтаксис: <BANNER>Текст или рисунок </BANNER>
Пример: Текст выделенный элементом <BANNER>.

Элемент <BGSOUND>

Элемент <BGSOUND> используется для задания фонового звучания сразу же после загрузки страницы. Он может не имеет конечного тэга и может иметь атрибуты:

• src
  Этот атрибут указывает URL звукового файла в формате WAV, AU или MIDI.
  Синтаксис: < bgsound src= URL >
• loop
  Этот атрибут задает количество воспроизведений звукового файла. Он может принимать значения 1 или infinite – бесконечно.
  Синтаксис: <TR bgsound loop= значение >

Элемент <MARQUEE>

Элемент <MARQUEE> используется с целью создания в документе бегущей строки.
<MARQUEE атрибуты> Текст строки </MARQUEE>
Он может иметь атрибуты:

• bgcolor
  Этот атрибут задает цвет фона бегущей строки.
  Синтаксис: <MARQUEE bgcolor=”цвет“>
• height
  Этот атрибут высоту бегущей строки в пикселах или процентах от всего окна.
  Синтаксис: <MARQUEE height=число>
• align
  Этот атрибут задает выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottom.
  Синтаксис: <MARQUEE align= …>
• direction
  Этот атрибут задает направление движения бегущей строки: left в лево, right в право, up вверх, down вниз.
  Синтаксис: <MARQUEE direction=”…“>
• behavior
  Этот атрибут задает поведение бегущей строки, либо scroll прокрутка, либо slide прокрутка с остановкой, либо alternate движение от края к краю.
  Синтаксис: <MARQUEE behavior=”…“>
• hspace
  Этот атрибут задает смещение в пикселах в право бегущей строки.
  Синтаксис: <MARQUEE hspace=число>
• vspace
  Этот атрибут задает пустое пространство выше и ниже бегущей строки.
  Синтаксис: <MARQUEE vspace=число>
• loop
  Этот атрибут задает количество проходов бегущей строки.
  Синтаксис: <MARQUEE loop=число>
• scrollamount
  Этот атрибут задает скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстро.
  Синтаксис: <MARQUEE scrollamount=число>
• scrolldelay
  Этот атрибут задает временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками.
  Синтаксис: <MARQUEE scrolldelay=число>

Пример: Бегущаястрока заданая элементом
<MARQUEE hight=10 behavior=”scroll“>СТРОКА</MARQUEE>
СТРОКА

Элемент <APPLET>

Элемент <APPLET> используется для передачи компьютеру клиента программы – аплета, которая загружается и выполняется броузером. Программы переданные броузеру существенно улучшают работу со страницей, придавая ей интерактивность не свойственную страницам написанным без использования аплетов. Процесс внедренния состоит из двух этапов. Во-первых необходимо убедиться что все классы и связанные файлы, такие как графические изображения и аудиофрагменты, размещены в доступном каталоге – чаще всего это подкаталог classes каталога с документами HTML. Во-вторых, в исходный код страницы должен быть внедрен тэг ссылки на классы <APPLET>, а так же все необходимые для его работы параметры. Он можнт иметь атрибуты:

• CLASS
  Этот атрибут указывает имя аплета.
• SRC
  Этот атрибут указывает URL каталога, в котором должен быть обнаружен откомпилированный аплет с символом / на конце. Ни в коем случае нельзя указывать само имя аплета т.к. оно названо атрибутом CLASS.
• WIDTH
  Этот атрибут указывает ширину области вывода аплета в пикселах.
• HEIGHT
  Этот атрибут указывает высоту области вывода аплета в пикселах.
• ALIGN
  Этот атрибут указывает режим выравнивания аплета относительно текста, принимает значения TOP, MIDDLE и BOTTOM.

Синтаксис: <APPLET class=”имя.class” src=”URL/” width=”число” height=”число” align=”значение“>
<PARAM NAME=имя параметра VALUE=его значение REF=”адрес расположения объекта“>

Элемент <SCRIPT>.

Для придания документу дополнительных возможностей, которые невозможно обеспечить с помощью стандартных элементов языка HTML, разработчики пользуются скриптовыми языками. Встраеваемые в документ обьекты придают ему динамичность, интерактивность, позволяют управлять содержимым страницы уже после её загрузки. Элемент <SCRIPT> определяет язык сценариев, который используется в текущем документе обычно это либо Java Script , либо Visual Basic Script. Он может иметь атрибуты:

• language
  Атрибут указывает язык, который использовался при написании сценария.
  Синтаксис: <SCRIPT LANGUAGE =”язык“>
• src
  Атрибут задает URL текстового файла с кодом сценария и расширением .js.
  Синтаксис: <SCRIPT type=”text/javascript” src = URL>

Кроме того скрипты могут привязываться к определенным событиям:

• onLoad
  Скрипт отрабатывается в момент загрузки страницы.
• onUnload
  Скрипт отрабатывается в момент ухода со страницы.
• onClick
  Скрипт отрабатывается в момент клика мыши в определенном месте.
• onMouseOver
  Скрипт отрабатывается в момент наведения курсора мыши на определенный объект.
• onMouseOut
  Скрипт отрабатывается в момент покидания курсором мыши определенного объекта.
• onFocus
  Скрипт отрабатывается в момент, когда поле активизируется клавишей TAB.
• onBlur
  Скрипт отрабатывается в момент, когда поле теряет фокус.
• onSelect
  Скрипт отрабатывается в момент, когда в поле выбран текст.
• onChange
  Скрипт отрабатывается в момент, когда поле теряет фокус, а данные в нем уже изменены.
• ondblclick
  Событие происходит при двойном щелчке на элементе. Этот атрибут может использоваться с большинством элементов.
• onmousedown
  Событие происходит при нажатии кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
• onmouseup
  Событие происходит при отпускании кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
• onmousemove
  Событие происходит при перемещении курсора, когда он находится на элементе. Этот атрибут может использоваться с большинством элементов.
• onkeypress
  Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
• onkeydown
  Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
• onkeyup
  Событие происходит при отпускании клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
• onsubmit
  Событие происходит при отправке формы. Оно используется только в элементе FORM
• onreset
  Событие происходит при сбросе формы. Оно используется только в элементе FORM

Существует другой способ применения элемента <SCRIPT>, когда тэг <SCRIPT> используется совместно с закрывающим тэгом </SCRIPT>, заключая в себе инструкции сценария. Если эту конструкцию поместить в заголовке, то сценарий будет запущен еще до того как загрузится документ. Сценарии, которые должны выполняться после загрузки документа или в результате действий пользователя, помещают в соответствующие формы или гиперссылки.
Синтаксис: <SCRIPT >инструкции сценария</SCRIPT>
В случае неподдержания броузером языков сценариев инструкции сценария визуализируются на странице ввиде текста, скрыть его можно так:
Синтаксис: <SCRIPT ><!- –инструкции сценария //- – ></SCRIPT>

Элемент <OBJECT>

Элемент <OBJECT> вставляет в документ графическое изображение, видеоклип, аплет JAVA или элемент управления ActiveX. Можно сказать что он пришел на смену элементу <APPLET> т.к. с помощью последнего можно вставить только лишь аплет Java. Единый для всех объектов и модулей элемент <OBJECT> функционально замещает элемент IMG и при необходимости может расширяться. Его атрибуты:

• id
  Этот атрибут определяет идентификатор документа.
• declare
  Этот атрибут позволяет подразумевать документ, не создавая его.
• classid
  Этот атрибут определяет URL идентификатора класса или экземпляра объекта.
• codebase
  Этот атрибут определяет URL местоположения кода.
• data
  Этот атрибут определяет URL, который указывает на необходимые данные или объект.
• type
  Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом DATA.
• codetype
  Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом CLASSID.
• standby
  Этот атрибут позволяет выводить окна с коротким сообщением в процессе загрузки объекта.
• align
  Этот атрибут определяет режим выравнивания объекта относительно строки текущего текста или как отдельного элемента.
  Допустимые значения:
  • text-top
  • middle
  • textmiddle
  • baseline
  • textbottom
  • left
  • center
  • right
• width
  Этот обязательный атрибут определяет ширину объекта в окне броузера.
• height
  Этот обязательный атрибут определяет высоту объекта в окне броузера.
• border
  Этот атрибут задает наличие или отсутсвие обрамления объекта при помощи значений 1 и 0 соответственно.
• hspace
  Этот атрибут позволяет задать дополнительное пространство вокруг объекта.
• vspace
  Этот атрибут позволяет задать дополнительное пространство вокруг объекта.
• usemap
  Этот атрибут определяет URL объекта, если тот является картой.
• shapes
  Этот атрибут используется вместе с объектами, которые обладают точками привязки или активными зонами.
• name
  Этот атрибут используется с формами HTML, которые могут содержать объект, и определяет, должен ли тот передавать данные серверу при запуске формы.
• alt
  Этот атрибут определяет альтернативное содержимое, которое будет визуализированно в случае, если пользователь не может или не хочет отобразить объект.
• title
  Этот атрибут определяет заголовок объекта.

Синтаксис: <OBJECT атрибуты>параметры и альтернативное содержание</OBJECT>

Элемент <EMBED>

Элемент <EMBED> является популярным расширением к языку HTML от Netscape пока он сам и его синтаксис не описанны в спецификации HTML 4.0, но т.к. Microsoft обеспечила некоторую поддержку этого элемента своими броузерами, то довольно часто применяется при внедрении в страницы мультимедиа содержимого и других файлов. Официально для этих целей Консорциум W3C в спецификации HTML 4,0 рекомендует применять дескриптор <OBJECT>, однако Web-мастера довольно часто используют тэги <EMBED> и </EMBED>, и в зависимости от возможностей броузера элемент обрабатывается либо броузером, либо в специально запущенном приложении.
Синтаксис: <EMBED атрибуты> </EMBED>
Элемент может поддерживать следующие атрибуты:

• height задает вертикальный размер, вставляемого обьекта
• width задает горизонтальный размер, вставляемого обьекта
• autostart задает возможность запуска при загрузке, принимает значения true или false
• loop задает количество повторений, принимает значения true или false
• hidden позволяет скрыть панель управления, принимает значения true или false
• src указывает на URL мультимедиа файла
• pluginspage указывает на URL плагина для проигрывания мультимедиа файла
• bgcolor задает фон обьекта
• type указывает на тип мультимедиа файла
• quality указывает на качество мультимедиа файла
• alt задает альтернативное содержание

Пример: