1ПИ / Учебник HTML / 112
.htmlУчeбник HTML.<IMG><MAP><BANNER><MARQUEE><APPLET><SCRIPT><OBJECT><EMBED> guide
<dimas>
help On-line учебник HTML с примерами,
справочник по созданию Web-сайтов. guide
<dimas>
help Главная Учебник HTML Учебник CSS Web- mastering Раскрутка Полезности FAQ Е- mailer Взять banner bookmark Контакты Отослать ссылку
Учебник HTML >>Вставка в документ объектов. Все мультимедиа-компоненты в сети можно разделить на два основных типа: содержимое, обрабатываемое непосредственно браузером и содержимое, обрабатываемое дополнительными средствами. Браузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные, либо передаёт их на обработку дополнительным приложениям. Тип содержимого файла определяется либо по его расширению: .gif, .jpg, .mpg, .wrl и т.д., либо по специальному коду content type="тип содержимого" вставляемому в исходный код документа, где тип содержимого может принимать значения: text/html, image/gif, video/quicktime и т.д.
Так как язык HTML создавался как язык разметки текста и только для этих целей, то естественно что в нем изначально не была предусмотрена поддержка мультимедийных объектов. В последнее же время многие компании-разработчики стали предоставлять пользователям их браузеров доступ к мультимедиа-содержимому, встраивая в них различные plug-ins. Они позволяют представить мультимедиа-содержимое как внутреннее содержимое Web-страницы и могут располагаться как во всё окно, так и в заданных размерах. На практике получается следующее - если браузер подгружает файл с таким содержимым впервые, то пользователю предлагается скачать плагин, который запишется на жесткий диск и в следующий раз браузер передаст мультимедиа-содержимое на обработку уже сразу ему.
Пример (84 kB).
В 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
Этот атрибут задает расположение рисунка в окне и его выравнивание. Он может принимать значения: 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 >
Пример изображения - карты :
<IMG src=" map.gif " usemap="# supermap " border= 0 >
<MAP name=" supermap ">
<AREA shape= circle coords=" 34,32,23 " href=" page1.html " title=" ссылка 1 ">
<AREA shape= poly coords=" 12,110,37,62,72,114 " href=" page2.html " title=" ссылка 2 ">
<AREA shape= rect coords=" 83,44,133,94 " href=" page3.html " title=" ссылка 3 ">
</MAP>
Элемент <BANNER> Элемент <BANNER> позволяет зафиксировать какую-либо информацию на экране вне зависимости от того, какая часть окна просматривается в данный момент. Данный элемент также редко поддерживается браузерами, добиться же подобного решения можно при помощи фреймов или слоев.
Синтаксис: <BANNER>Текст или рисунок </BANNER>
Пример: Текст, выделенный элементом <BANNER>.
Элемент <BGSOUND> Элемент <BGSOUND> используется для задания фонового звучания сразу же после загрузки страницы. Он может не иметь конечного тэга и может иметь атрибуты:
src
Этот атрибут указывает URL звукового файла в формате WAV, AU или MIDI.
Синтаксис: < bgsound src= URL > loop
Этот атрибут задает количество воспроизведений звукового файла. Он может принимать значения 1 или infinite - бесконечно.
Синтаксис: <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 height=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="адрес расположения объекта"></APPLET>
Пример внедрения в страницу аплета Java
Элемент <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.
Пример кликните курсором в первом поле, а потом перейдите во второе клавишей 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 плагина для проигрывания мультимедиа файла bgcolor задает фон объекта type указывает на тип мультимедиа файла quality указывает на качество мультимедиа файла alt задает альтернативное содержание
Пример: <EMBED src="file.swf" menu=true quality=high bgcolor=#000066 WIDTH=760
HEIGHT=410 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
вставка обьекта ShockwaveFlash Пример
Взять banner bookmark Контакты Отослать ссылку Раскрутка Полезности FAQ Е- mailer Главная Учебник HTML Учебник CSS Web- mastering guide
<dimas>
help u="u227.69.spylog.com";d=document;nv=navigator;na=nv.appName;t="";p=1; sz=" width=88 height=31 "; hl=history.length;d.cookie="b=b";c=0; bv=Math.round(parseFloat(nv.appVersion)*100); if (d.cookie) c=1;n=(na.substring(0,2)=="Mi")?0:1; if((n==0)||(bv >= 300)){rn=Math.random();t=(new Date()).getTimezoneOffset();} else {rn=0;} z="p="+p+"&rn="+rn+"&t="+t+"&c="+c+"&hl="+hl; if (self != top) { fr=1;} else { fr=0;} r=escape(d.referrer);r1=""; sl="1.0";h=0; pl="";sl="1.1"; if((n==1) && (bv >= 300)) { for(var i = 0; i < nv.plugins.length; i++) pl += nv.plugins[i].name+":"; } j = (navigator.javaEnabled() ? "Y" : "N"); sl="1.2";s=screen;wh=s.width+'x'+s.height; px=(n==0)?screen.colorDepth:screen.pixelDepth;z+="&wh="+wh+"&px="+px; sl="1.3" y=""; y+=""; y+=""; y+=""; d.write(y); On-line учебник HTML с примерами,
справочник по созданию Web-сайтов. guide
<dimas>
help