4.6. Графика и мультимедиа
Графический объект, несомненно, — второй по значимости после текста компонент наполнения Web-страниц. К графическим объектам относят различного рода рисунки, фотографии и видеоклипы. Часто используют звуковое сопровождение отображения Web-страниц.
Браузеры в состоянии отображать только три вида графических файлов: файлы форматов “GIF”, “JPEG” и “PNG”. Файлы формата “GIF” позволяют создавать анимированные изображения. JPEG-файлы обычно применяются для сохранения фотографических изображений. После того как изображение было упаковано в графический файл, его необходимо каким-либо образом внедрить в состав Web-страницы.
Для этого применяется тэг “<img>” со множеством параметров. Этот тэг не имеет закрывающего двойника, т. к. он не задает какую-либо область действия правила отображения, а лишь внедряет в содержимое Web-страницы графическое изображение. Графическое изображение может быть еще и гиперссылкой, или даже скрывать несколько гиперссылок, но о гиперссылках мы поговорим в следующем разделе этой главы, а пока разберемся с правилами применения тэга “<img>”.
Основным и обязательным атрибутом тэга “<img>” является параметр “src”. В качестве значения этого атрибута используется адрес вставляемого графического файла, или, если быть точным, его URL. Если графический файл находится на том же Web-сервере, то достаточно записать полное наименование файла, включая путь к нему по вложенным каталогам. Допустим, что каталог “images” с рисунками расположен в той же папке, что и HTML-файлы с Web-страницами, тогда тэг вставки графического изображения приобретет следующий вид:
<img src="images\pictl.gif">
Первые появившиеся браузеры WWW отображали только текстовую информацию, никакая графика не поддерживалась. Сейчас такие обозреватели практически не встречаются, но каждый браузер имеет возможность отключения загрузки графики, поэтому всегда следует использовать альтернативное текстовое представление рисунка. Попросту, необходимо приготовить текст, который будет отображаться вместо рисунка, если тот не может быть по каким-либо причинам загружен браузером. Этот текст добавляется к тэгу “<img>” с помощью параметра “alt”, значением которого является текстовая строка. То есть, получится приблизительно следующая конструкция:
<img src="images\pict1.gif" alt="Это я на отдыхе">
В том случае, если графическое изображение все-таки показывается браузером, текст альтернативного текстового представления отображается в виде короткой текстовой подсказки, когда пользователь наводит курсор мыши на это графическое изображение.
По умолчанию графическое изображение показывается именно в том виде, в каком оно было создано, с сохранением размеров по вертикали и горизонтали. Однако мы имеем возможность явно задавать размеры рисунка по своему усмотрению. Для этого используются параметры “height” и “width”. Как задавать размеры в пикселах или процентах, мы уже знаем. Необходимо отметить лишь, что браузеры стремятся сохранять пропорции рисунка, поэтому явное задание размеров, меняющее пропорции, может быть проигнорировано браузером, и он выберет такие размеры, которые были бы максимально близки к указанным пользователем, но не нарушали пропорций изображения. Обычно для Web-страниц готовят рисунки тех размеров, которые будут применяться при их отображении в составе Web-страниц. Если одно изображение должно выводиться несколько раз с различными размерами, то проще приготовить несколько графических файлов, чем отдавать свои рисунки для бесконтрольного отображения браузеру, который сможет нарушить всю верстку Web-страниц.
Существуют параметры “hspace” и “vspace”, позволяющие указывать величину чистого пространства, которое будет отделять графическое изображение от окружающих его других элементов оформления Web-страницы, другими словами, задавать отступ рисунка. Параметр “hspace” устанавливает отступ по горизонтали в пикселах, а “vspace” — по вертикали. Эти параметры могут задаваться только числовыми значениями, указывающими расстояния в пикселах. Нулевого значения для этих параметров не предусмотрено, но обычно каждый браузер использует малое ненулевое значение.
С помощью параметра “border” можно устанавливать толщину границы, окружающей рисунок. Как обычно, значением параметра является число, указывающее толщину в пикселах. По умолчанию используется нулевое значение, делающее границу невидимой.
Для выравнивания графического объекта относительно обтекающего его текста используется параметр “align”. Его значением может быть одно ключевое слово из предопределенного набора. Значения “bottom”, “middle” и “top” применяются для позиционирования первой строки текста, обтекающего рисунок по вертикали, Значение “top” смещает ее вверх, “bottom” — вниз, а “middle” позволяет центрировать строку по вертикали. Для выравнивания по горизонтали графического изображения применяются значения “left” и “right”. Первое значение “left”, как нетрудно догадаться, смещает рисунок к левому края блока, в котором тот отображается, а “right” — к правому. Ниже представлен пример позиционирования рисунка в тексте.
<html>
<head>
<title>Рисунки и текст</title>
<body>
<p>Это текст, который обтекает рисунок.<img src="ris.bmp">
Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.</р>
</body>
</html>
Листинг 1.10
Рисунок 56. Результат просмотра в браузере файла, приведенного в листинге 1.10.
В данном примере был использован чистый тэг вставки изображения без каких-либо дополнительных параметров. Как мы можем видеть, изображение вставляется сразу после первого предложения, там, где мы разместили тэг “<img>”. Если мы уменьшим размеры окна просмотра браузера по горизонтали так, чтобы первое предложение и рисунок не смогли поместиться на одной строке, то сначала будет отображено предложение, а уже под ним рисунок, прижатый к левому краю окна просмотра. Справа от него начнется отображение следующего за ним текста таким образом, что базовая линия строки совпадет с нижним краем рисунка.
Теперь добавим к тэгу отображения рисунка параметр горизонтального выравнивания. Получившийся код приведен в листинге 1.11.
<html>
<head>
<title>Рисунки и текст</title>
<body>
<p>Это текст, который обтекает рисунок. <img src=" ris.bmp " align="left">
Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.</р>
</body>
</html>
Листинг 1.11
Рисунок 57. Результат просмотра в браузере файла, приведенного в листинге 1.11.
В этом случае сначала начинает отображаться текст, затем графическое изображение, прижатое к левому краю, согласно директиве, заданной с помощью параметра “align”, а справа от рисунка размещается остальной текст. Изображение не может занять первую строку, т.к. текст начинается раньше него. То же самое произойдет, если применить параметр “align” со значением “right”, но рисунок окажется прижатым к правому краю окна просмотра, а текст будет обтекать его с левой стороны. Вот и все изменения.
Теперь рассмотрим, как действует выравнивание по вертикали. Хотя параметр выравнивания вставляется в тэг рисунка, наибольшие изменения заметны в расположении текста, окружающего рисунок. Рассмотрим действие параметра вертикального выравнивания на примере.
<html>
<head>
<title>Рисунки и текст</title>
<body>
<p>Это текст, который обтекает рисунок. <img src=” ris.bmp “ align=”middle”>
Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.</р>
</body>
</html>
Листинг 1.12
Рисунок 58. Окно браузера с результатом отображения файла, приведенного в листинге 1.12.
В данном примере мы установили вертикальное выравнивание посередине. Первая строка текста, находящегося после тэга вставки изображения, отображается по вертикали в центре свободного пространства справа от рисунка. Остальной текст располагается под рисунком. Если бы мы присвоили параметру “align” значение “top”, то первая строка появилась бы рядом с верхним обрезом рисунка. При использовании значения “bottom” первая строка текста выводится рядом с нижней границей рисунка. Следует обратить внимание, что браузер распознает только один параметр “align”, т. е. мы можем указать либо вертикальное, либо горизонтальное выравнивание.
У нас есть возможность использовать в оформлении Web-страниц видеоролики, но применять их следует аккуратно, т. к. файлы, содержащие эти видеоресурсы, обычно имеют достаточно большой объем. Для того чтобы удаленный пользователь мог просмотреть их в своем браузере, ему понадобится полностью загрузить этот файл на свою машину. У большинства пользователей Интернета из-за характеристик используемых каналов подобная процедура может занять достаточно много времени.
Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real Video и Windows Media. Внедрение их в состав Web-страницы выполняется посредством все того же тэга “<img>”. Для указания местонахождения видеофайла используется параметр “dynsrc”. По умолчанию, внедренный в Web-страницу видеоклип проигрывается один раз, сразу после полной загрузки страницы, но у нас есть возможность регулировать процесс проигрывания клипа или позволить самому пользователю управлять его воспроизведением.
Включив в состав тэга “<img>” параметр “start”, мы сможем явно указывать событие, после которого браузер должен будет воспроизвести загруженный видеоклип. Ключевые слова “mouseover” и “fileopen” используются как значения данного параметра. Первое из них указывает, что клип необходимо воспроизвести после того, как пользователь поместит курсор мыши на пространство, отведенное под видеовставку, а второе — что воспроизведение начнется сразу после полной загрузки HTML-файла. Можно сочетать эти два варианта. В этом случае тэг вставки видеоролика будет выглядеть следующим образом:
<img dynsrc=”movie.avi” start=”mouseover, fileopen”>
Мы можем указать, сколько раз необходимо воспроизвести видеоролик, установив значение параметра “loop” равным числу повторений видеоклипа. Если мы хотим, чтобы видео воспроизводилось постоянно, без какого-либо, фиксированного количества повторений, то следует присвоить параметру “loop” значение “infinite”. Параметр “loopdelay” устанавливает временную задержку между повторами воспроизведения видеоклипа. Значением данного параметра должно быть число, указывающее промежуток времени в миллисекундах. Рассмотрим использование этих параметров на примере следующего фрагмента кода:
<img dynscr=”movie.avi” loop=”2” loopdelay=”5000”>
Здесь мы явно указываем, что видеоклип будет воспроизведен два раза сразу после загрузки Web-страницы с пятисекундной задержкой между воспроизведениями.
В данном случае мы сами управляем отображением видеофайла. Эту прерогативу можно передать и удаленному пользователю, который будет загружать Web-страницу. Для этого необходимо ввести в состав тэга “<img>” параметр “controls” без какого-либо значения. Наличие этого параметра в тэге явно указывает, что вместе с видеоклипом на Web-странице будут отображены и элементы управления, например кнопки перемотки, запуска и остановки воспроизведения, ползунок ускоренной перемотки и др.
Рассмотренных нами параметров вполне хватает для правильного внедрения видеофайлов в состав содержимого Web-страницы. Рассмотрим детальный пример (листинг 1.13 и рисунок 59).
<html>
<head>
<title>Видео</title>
<body>
<p>0бычный текст.<img dynsrc=”intro.avi” start=”mouseover” loop=”2” loopdelay=”5000”>
</body>
</html>
Листинг 1.13
Процедура вставки видеофрагмента в тело Web-страницы — это частный случай вставки графики, следовательно, в тэге вставки видеофрагмента используются и все остальные параметры, применимые к тэгу “<img>”, такие как параметры выравнивания, явного указания размера и пр.
К мультимедийным возможностям относится и звуковое оформление Web-страницы, но звук мы можем использовать лишь как фон. Звуковой файл будет воспроизводиться на компьютере удаленного пользователя только после загрузки Web-страницы, если, конечно, в его компьютере установлена звуковая плата. Сначала на компьютер удаленного пользователя загружается HTML-файл с Web-страницей, а затем подгружаются все остальные файлы, используемые в оформлении этой Web-страницы, такие как графические файлы, видео- и аудиоклипы.
Итак, для того чтобы просмотр Web-страницы сопровождался звуковым воспроизведением, необходимо в код страницы вставить тэг “<bgsound>”. Тэг помещается не в тело Web-страницы, а в его заголовок, т. е. между тэгами”<head>” и “</head>”. У этого тэга существует обязательный параметр src, в качестве значения которого используется URL подключаемого звукового файла. Браузеры очень хорошо распознают и воспроизводят аудиофайлы форматов MIDI и WAV.
Как и в случае с видеоклипами, мы можем задавать количество воспроизведений звукового фала с помощью параметра “loop”. В качестве значения этого параметра указывается число повторений. Если необходимо воспроизводить аудиофрагмент постоянно, следует использовать значение “-1”. Непрерывное проигрывание некоего аудиофайла при загрузке Web-страницы описывается следующей конструкцией:
<bgsound src="song.mid" loop="-l">