Все мультимедиа-компоненты в сети можно разделить на два основных типа: содержимое, обрабатываемое непосредственно браузером и содержимое, обрабатываемое дополнительными средствами.
Браузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные, либо передаёт их на обработку дополнительным приложениям. Тип содержимого файла определяется либо по его расширению:
.gif, .jpg, .mpg, .wrl и т.д., либо по специальному коду content type="тип содержимого" вставляемому в
исходный код документа, где тип содержимого может принимать значения: text/html, image/gif, video/quicktime и т.д.
Так как язык HTML создавался как язык разметки текста и только для этих целей, то естественно что в нем изначально не была предусмотрена
поддержка мультимедийных объектов. В последнее же время многие компании-разработчики стали предоставлять пользователям их браузеров доступ к мультимедиа-содержимому,
встраивая в них различные plug-ins. Они позволяют представить мультимедиа-содержимое как внутреннее содержимое Web-страницы и могут располагаться как во всё окно, так и в заданных размерах.
На практике получается следующее - если браузер подгружает файл с таким содержимым впервые, то пользователю предлагается скачать плагин, который запишется на жесткий диск и в следующий раз браузер передаст мультимедиа-содержимое
на обработку уже сразу ему.
Пример (84 kB).
В Microsoft, например, для этих целей были созданы элементы управления ActiveX, позволяющие использовать разнообразное содержимое, включая даже электронные таблицы и средства управления от Windows,
хотя на самом деле общие стандарты для всех браузеров и платформ, на которых они работают, ещё не разработаны.
Если же браузер не в состоянии обработать мультимедиа-данные сам или при помощи встроенных модулей, то он запускает внешние приложения, а в Windows, например, они прописаны в регистре, и передает им эти данные.
Внешние приложения, например RealAudio, уже не в окне браузера обрабатывают содержимое для пользователя.
Элемент <IMG> Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера.
Кроме того, элемент <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.
Синтаксис: <IMG src= URL атрибуты >
src Этот атрибут указывает на файл графики, задавая его URL.
Синтаксис: <IMG src=" URL "> Пример:
alt В некоторых случаях, когда браузер не в состоянии загрузить файл с изображением, либо когда пользователь намеренно, с целью сэкономить время и деньги, отключает загрузку картинок, на экране высвечивается альтернативный текст типа здесь нарисован логотип фирмы .
Синтаксис: <IMG alt=" описание "> Пример:
align Этот атрибут задает расположение рисунка в окне и его выравнивание. Он может принимать значения:
top-по верхнему краю Пример: строка, в которую вставлена картинка, будет выровнена по верхнему краю картинки и высота строки будет равна высоте самого рисунка
bottom-по нижнему краю Пример:
строка, в которую вставлена картинка, будет выровнена по нижнему краю картинки
middle-по центру Пример: строка, в которую вставлена картинка, будет выровнена по центру
right-справа Пример: картинка выравнивается по правому краю, текст будет обтекать картинку слева, применяется когда рисунок имеет достаточно большие размеры
left-влево Пример: картинка выравнивается по левому краю, текст будет обтекать картинку справа, часто применяется для создания буквиц, когда первая буква представляется ввиде рисунка Синтаксис: <IMG align=" значение ">
width Этот атрибут задает ширину области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
Синтаксис: <IMG wigth= число >
height Этот атрибут задает высоту области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
Синтаксис: <IMG height= число >
Обратите Ваше внимание на тот факт, что размер изображения в килобайтах не меняется - какие бы вы не задавали параметры width и height
Пример width=50
Пример height=30
Пример width=50 height=100
Пример width=100 height=50
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= значение >
Примеры (208 kB) внедрения видео файлов в страницу.
Элемент <MAP>
Элемент <MAP> применяется для представления графического изображения в виде карты с активными областями.
Он поддерживает аттрибут name, который задает его имя, и включает внутри себя элемент <AREA>, который и задает собственно активные области карты, связанные ссылками с прочими ресурсами.
Синтаксис: <MAP name=" имя "> <AREA атрибуты > </MAP>
Элемент <AREA>
Элемент <AREA> задает активные области карты, щелчком по которым можно осуществить ссылку.
Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint , для него изображение должно быть трансформировано в формат
BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя.
Такая точность может очень пригодиться при задании координат активных областей карты. Элемент <AREA> поддерживает различные атрибуты:
href Этот атрибут указывает URL ссылки.
Синтаксис: <AREA href=" URL ">
alt Этот атрибут задает альтернативный текст для браузеров, которые не поддерживают данный элемент.
Синтаксис: <AREA alt=" текст подсказки ">
title Этот атрибут задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент.
Синтаксис: <AREA title=" текст подсказки ">
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>.
Элемент <BGSOUND>
Элемент <BGSOUND> используется для задания фонового звучания сразу же после загрузки страницы. Он может не иметь конечного тэга и может иметь атрибуты:
src Этот атрибут указывает URL звукового файла в формате WAV, AU или MIDI.
Синтаксис: < bgsound src= URL >
loop Этот атрибут задает количество воспроизведений звукового файла.
Он может принимать значения 1 или infinite - бесконечно.
Синтаксис: <BGSOUND loop= значение >
Элемент <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=число>
Элемент <APPLET> используется для передачи компьютеру клиента программы - апплета, которая загружается и выполняется браузером. Программы, переданные браузеру, существенно улучшают работу со страницей, придавая ей интерактивность не свойственную страницам написанным без использования апплетов.
Процесс внедрения состоит из двух этапов. Во-первых, необходимо убедиться, что все классы и связанные файлы, такие как графические изображения и аудио фрагменты, размещены в доступном каталоге - чаще всего это подкаталог classes каталога с документами HTML. Во-вторых, в исходный код страницы должен быть
внедрен тэг ссылки на классы <APPLET>, а так же все необходимые для его работы параметры. Он может иметь атрибуты:
CLASS Этот атрибут указывает имя апплета.
SRC Этот атрибут указывает URL каталога, в котором должен быть обнаружен откомпилированный апплет с символом / на конце.
Ни в коем случае нельзя указывать само имя аплета т.к. оно названо атрибутом CLASS.
WIDTH Этот атрибут указывает ширину области вывода апплета в пикселях.
HEIGHT Этот атрибут указывает высоту области вывода апплета в пикселях.
ALIGN Этот атрибут указывает режим выравнивания апплета относительно текста, принимает значения TOP, MIDDLE и BOTTOM.
Для придания документу дополнительных возможностей, которые невозможно обеспечить с помощью стандартных элементов языка 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.
Пример кликните курсором в первом поле, а потом перейдите во второе клавишей TAB:
onBlur Скрипт отрабатывается в момент, когда поле теряет фокус.
Пример кликните курсором в первом поле, а потом перейдите во второе клавишей TAB:
onSelect Скрипт отрабатывается в момент, когда в поле выбран текст.
Пример:
onChange Скрипт отрабатывается в момент, когда поле теряет фокус, а данные в нем уже изменены.
Пример измените содержимое первого поля, а затем перейдите ко второму полю клавишей TAB или курсором:
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>
Примеры (208 kB) внедрения в страницу при помощи <OBJECT>:
Еще один пример, а именно использование <OBJECT> вместо <APPLET>
Элемент <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 плагина для проигрывания мультимедиа файла
