WEB-технологии

        <TD>47.9%</TD>

    </TR>

    <TR>

        <TD>Google</TD>

        <TD>34.9%</TD>

        <TD>34.7%</TD>

    </TR>

    <TR>

        <TD>Search.Mail.ru</TD>

        <TD>8.6%</TD>

        <TD>8.6%</TD>

    </TR>

   </TBODY>

</TABLE>

</BODY>

</HTML>

Рис. 9.4.  Результат дополнительной структуризации таблицы

 

 

Лекция 9. HTML-4.0 (графика, мультимедиа, модули расширения, элементы Flash)

Все мультимедиа-компоненты в сети можно разделить на два основных типа: содержимое, обрабатываемое непосредственно браузером и содержимое, обрабатываемоедополнительными средствами. Браузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные, либо передаёт их на обработку дополнительным приложениям. Тип содержимого файла определяется либо по его расширению: .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 src="roma.jpg" align=" значение ">
• width - Этот атрибут задает ширину области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.  
  Синтаксис: <IMG width= число >
• 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="# map.gif " border= 0 > 
<MAP name=" map.gif "> 
<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/песня.mid ">
• loop 
  Этот атрибут задает количество воспроизведений звукового файла. Он может принимать значения 1, 2... или 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=число>