ОГЛАВЛЕНИЕ
1. Представление HTML изображения на Web-странице
1.1 Задание параметров изображения
1.2 Задание фона в виде изображения
1.3 Позиционирование элементов на Web-странице
2 Представление видеофрагментов и звука на Web-странице
Пример 1
1 Представление HTML изображения на Web-странице
1.1 Задание параметров изображения
Для помещения HTML графических изображений на Web-страницу применяется тэг <IMG>, который использует следующие параметры:
- SRC - URL- адрес файла с графическим изображением. URL (Universal Resource Locator) имеет следующий формат: http://host[:port][path], где
- http (hypertext transfer protocol) - название протокола передачи гипертекста (HTML-документа Web-страницы);
- host - IP-адрес или доменное имя компьютера;
- port - номер порта;
- path - путь к файлу на компьютере.
- ALT - текстовая строка, которая выводится на экран вместо изображения в случаях, когда изображение по какой-то причине, например, в параметрах браузера установлен запрет на загрузку изображений, не может быть помещено на Web-страницу;
- ALIGN - выравнивание изображения относительно текста:
- left - изображение располагается слева от текста;
- right - изображение располагается справа от текста;
- top - верхний край изображения выравнивается по по верхнему краю текста;
- middle - центр изображения выравнивается по нижней строке текста;
- bottom - нижний край изображения выравнивается по базовой линии текста (задается по умолчанию);
- textop - верхний край изображения выравнивается по по верхнему краю самого высокого символа в строке;
- absmiddle - центр изображения выравнивается по центру окружающего текста;
- baseline - то же, что bottom;
- absbottom - нижний край изображения выравнивается по нижнему краю строки с учетом нижних "хвостиков".
- HEIGHT - высота изображения в пикселях или в % от высоты окна;
- WIDTH - ширина изображения в пикселях или в % от ширины окна;
- HSPACE - отступ в пикселях от текста по горизонтали;
- VSPACE - отступ в пикселях от текста по вертикали;
С помощью параметров HEIGHT и WIDTH осуществляется масштабирование изображений. Масшабирование позволяет уменьшить размер файла с изображением для его более быстрой передачи по сети.
Можно отметить и следующую особенность - если указаны параметры HEIGHT и WIDTH, то на экране сначала появляется прямоугольник без изображения, затем текст и только потом изображение. Если из текста следует, что даннаяWeb-страница не представляет интереса, можно не дожидаясь загрузки изображения, перейти к следующей странице. В противном случае чтобы получить текстовую информацию, необходимо дождаться полной загрузки изображения.
Если HTML-документе указан только один из параметров (HEIGHT или WIDTH), то второй параметр будет изменен пропорционально изменению первого.
В примере №1 показано задание параметров изображения при помещении его на экран (файл "fish.gif").
1.2 Задание фона в виде изображения
Для задания фона в виде изображения в тэгах, в которых можно указывать фон (BODY, TABLE, TR, TH или TD), вместо параметра BGCOLOR, необходимо использовать параметр BACKGROUND, значением которого является адрес графического файла. Если указанное изображение меньше области экрана, для которой создается фон, то оно повторяется и по горизонтали и по вертикали, заполняя полностью всю указанную область (весь экран, таблицу или ячейку в таблице).
Например, если файл "bg.gif" содержит изображение 
, то в результате выполнения тэга
<BODY BACKGROUND="bg.gif">
весь экран заполниться сеткой, состоящей из таких синих квадратов.
Наряду с параметром BACKGROUND при задании фона в виде изображения можно также использовать параметр BGPROPERTIES со значением FIXED. В этом случае при прокрутке страницы фоновое изображение останется неподвижным (эффект водяных знаков).
Каскадные листы стилей CSS для задания фона на Web-странице используют следующие свойства:
- background-color - указывает цвет фона, имеет такие значения:
- имя цвета;
- #RrGgBb;
- #RGB;
- transparent (фон прозрачен).
- background-image - задает фон в виде изображения, имеет такие значения:
- none - фон в виде изображения не задан ;
- url(имя графического файла).
- background-repeat - указывает на повторяемость изображения:
- repeat - изображение повторяется по горизонтали и по вертикали (принимается по умолчанию);
- repeat-x - изображение повторяется по горизонтали;
- repeat-y - изображение повторяется по вертикали;
- norepeat - изображение не повторяется.
- background-attachment - указывает свойства скольжения фона:
- scroll - фон скользит вместе с содержимым Web-страницы при ее прокрутке;
- fixed - фон остается неподвижным при прокрутке Web-страницы (этот параметр применяется только для тэга <BODY>).
- position - задает позицию фонового изображения относительно верхнего левого края области. Для данного свойства обычно задают два значения, разделенные пробелами:
- [top|center|bottom][left|center|right];
- [pt mm cm][[pt mm cm];
- [px %][px %].
Если вместо двух значений задается одно, то считается, что указана позиция по горизонтали, а позиция по вертикали принимается равной 50%
Для свойства background можно указать сокращенный способ задания значений, например, background: url(bg.gif) fixed.
Использование каскадных листов стилей для задания фона на Web-странице показано в примере №1.
1.3 Позиционирование элементов на Web-странице
Позиционирование, т.е. расположение элементов на Web-странице осуществляется с помощью свойства CSS position, которое имеет такие параметры:
- static;
- relative;
- absolute;
Значение static, которое принимается по умолчанию, означает, что браузер будет располагать элементы на Web-странице в соответствии со своими правилами в том порядке, в каком они указаны в HTML-документе.
Значение relative означает, что браузер будет располагать элемент на Web-странице в месте, которое отличается от места, заданного по умолчанию (т.е. с помощью свойства static) на величину, указанную с помощью свойств left и top.
Значение absolute означает, что браузер будет располагать элемент на Web-странице в месте, непосредственно заданном с помощью свойств left и top. В этом случае свойство left задает расстояние в пикселях от левой границы экрана до элемента, а свойство top - расстояние в пикселях от верхней границы экрана до элемента.
С помощью CSS можно также сделать видимым на Web-странице не весь элемент, а только его часть. Это осуществляется с помощью свойства clip , которое имеет такие значения:
- auto - делает видимым весь элемент (задается по умолчанию);
- rect(верхняя граница, правая граница, нижняя граница, левая граница) - делает видимым часть изображения в виде прямоугольника, ограниченного указанными границами, заданными в пикселях и отсчитываемыми от левого верхнего угла изображения.
При задании абсолютных координат для элементов Web-страницы становится возможным наложение на экране одного элемента на другой, т.е. создания многослойного изображения. В этом случае верхним браузер поместит элемент, который в HTML-документе стоит позже другого.
Вместе с тем имеется возможность для каждого элемента задавать номер слоя явно. Это делается с помощью свойства CSS z-index, значением которого является число. Чем больше это число, тем к более высокому слою относится элемент. По умалчиванию всем элементам Web-страницы присваивается значение z-index:0.
Использование каскадных листов стилей для позиционирования элемента, представления только его части и задания двух слоев на Web-странице показано в примере №1.
2 Представление видеофрагментов и звука на Web-странице
Существует несколько форматов файлов с видеофрагментами. Например, разработанный фирмой MicroSoft стандарт AVI (Audio-Video Interlaced - перемежающиеся аудио-видео).
Для указания видеофрагмента на Web-странице можно использовать тот же тэг <IMG>, что и для задания изображений, содержащий следующие параметры:
- DYNSRC - указывает URL-адрес файла с видеофрагментом;
- SRC - указывает URL-адрес файла с изображением, которое выводится на экран в том случае, когда видеофрагмент не может быть загружен на Web-страницу;
- START - указывает, как осуществляется запуск видеофрагмента:
- fileopen - сразу после загрузки Web-страницы;
- mouseover - после наведения на видеофрагмент указателя мыши.
- LOOP - указывает число повторений видеофрагмента (-1 или infinite - бесконечно) ;
- Для задания размера и выравнивания видеофрагментов используются те же параметры (HEIGHT, WIDTH и ALIGN), что и для изображений.
К недостаткам такого подхода включения видеофрагментов на Web-странице является то, что его поддерживает только браузер MicroSoft Internet Explorer. Чтобы сделать вывод видеофрагментов на Web-странице доступным и для других браузеров, можно воспользоваться тэгом <EMBED>, который содержит такие параметры:
- SRC - указывает URL-адрес файла с видеофрагментом (можно указывать файлы и с другими типами данных, но не все из них поддерживаются браузерами);
- TYPE - указывает тип MIME файла данных.
Типы MIME (Multipurpose Internet Mail Extentions - многоцелевые расширения почты) были первоначально разработаны как стандарт идентификации различных типов файлов для отправки их по электронной почте, но впоследствии их функции были расширены и на другие сервисы Интернета.
В примере №1 показано задание видеофрагментов на Web-странице как с помощью тэга <IMG>, так и с помощью тэга <EMBED>.
Для задания звука на Web-странице используется тэг <BGSOUND>, который содержит такие параметры:
- SRC - указывает URL-адрес звукового файла (расширения .WAV, AU, MIDI и др.);
- LOOP - указывает число повторений звукового сопровождения (-1 или infinite - бесконечно).
Пример 1
<HTML>
<HEAD>
<TITLE> Графика html изображения на Web-странице </TITLE>
<LINK REL=STYLESHEET HREF="my.css">
<STYLE> P{color:blue; font:italic bold 8mm} </STYLE>
</HEAD>
<BODY STYLE="background:url(back.gif) fixed ">
<H1> Графика и видеофрагменты на Web-странице </H1>
<TABLE WIDTH=50% HEIGHT=100 ALIGN=center
STYLE="text-align:center;border:solid 3 #00FFFF">
<TR>
<TD STYLE="background-color:#A0FFFF"> Непрозрачный фон
<TD STYLE="background-color:transparent"> Прозрачный фон
</TABLE><BR><BR>
<IMG SRC="fish.gif" ALT="Изображение рыбок" WIDTH=200
ALIGN=left HSPACE=20 STYLE="border:groove 12 red">
<P> Изображение увеличено в три раза, выравнено слева от текста, имеет рамку и отступы по горизонтали <BR><BR><BR><BR>
<P ALIGN=right> Вырезанный фрагмент изображения
<IMG SRC="fish.gif" WIDTH=300 STYLE="z-index:-1;
position: absolute; left:500; top:430; clip:rect(0,250,120,100)"> <BR><BR>
<P> Видеофрагмент
<IMG DYNSRC="Orbit.avi" START=mouseover WIDTH=500
HEIGHT=125 LOOP=1 ALIGN=middle> выровнен по центру текста, запускается по наведению мыши и выполняется один раз
<BR><BR>
<P> Видеофрагмент с органами управления
<EMBED SRC="Orbit.avi" TYPE="video/avi">
</BODY>
</HTML>
