Главная
К библиотеке

Military.com Free Screensavers!

Изображения и мультимедия в HTML

В документах HTML может использоваться изображения и графика, звук, а также мультипликации и видеоизображения. Для передачи изображений и звука используются команды: IMG и BGSOUND.

Простой движущийся текст можно задать, используя команду MARQUEE (эта команда поддерживается пока только MS Internet Explorer).
Например: Это движущийся текст для MS_IE.

Графика и картинки

Графические файлы включаются в HTML документы с помощью команды IMG. Допускается использование файлов в формате GIF или JPG/JPEG (для систем, работающих под MS Windows, допускаются файлы формата BMP).

Следующий пример демонстрирует, вставку в документ GIF файла:

<IMG SRC="internet.gif" WIDTH=46 HEIGHT=46 ALT="Earth">

Атрибут SRC= определяет URL адрес (имя) графического файла. В приведенном примере файл будет размещен в квадрате шириной 46 и высотой 46 пикселей соответственно. Если размеры указанные атрибутами HEIGHT= (высота) и WIDTH= (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры соответствующие размерам графического файла.

Рекомендуется для больших графических файлов (более 10 Kb) всегда задавать их размеры, для убыстрения работы просмотрщика. Если размеры не заданы, то встретив графический файл просмотрщик прекращает вывод текста и ждет пока перекачается вся картинка, чтоб определить ее размеры.

Атрибут ALT= указывает, что ставить на место рисунка, если ваш просмотрщик не умеет показывать графические файлы или вследствие медленной скорости перекачки вы не получили файл по сети.

Если вы вставляете команду IMG в документ, то просмотрщик размещает следующий за ней текст внизу от картинки. Используя атрибут ALIGN= можно переместить, следующий перед и за картинкой текст.

Допустимые значения атрибута ALIGN=

Каждый "уважающий" себя WEB сервер (программы, поддерживающя протокол передачи гипертекста) имеет свой базовый набор картинок (иконок - icons) для встаки в документы, генерируемые по умолчанию (например, листинг директории), см. список картинок WEB сервера Apache, на котором размещен данный курс (стадарно эти картинки расположениы в виртуальной директории сервера /icons).

"Плавующие" картинки

Используя атрибут ALIGN= со значениями LEFT или RIGHT можно создать "плавающую" картинку, которую будет обтекать текст. В конце плавающего объекта обязательно должна присутствовать команда BR с атрибутом CLEAR=, который прекращает обтекание картинки. После этой команды текст выводится ниже графического файла.

Рассмотрим следующий пример:

<IMG SRC="picture.gif" ALIGN=LEFT HSPACE=4>
Здесь располагается текст, который следует поместить справа
рядом с картинкой. Текст должен обтекать картинку
<BR CLEAR=LEFT>Здесь располагается текст, который следует
поместить ниже картинки.

Атрибут HSPACE= задает горизонтальный отступ между текстом и картинкой. Если данный атрибут не задан, то текст будет располагаться вплотную к картинке. (См. также атрибут VSPACE=).

Несколько советов:

Всегда использовать атрибуты задания размера картинки. В этом случае просмотрщик, не дожидаясь пока перекачается вся картинка, будет подолжать паказывать документ дальше.

Использовать картинки, преимущественно в формате JPEG/JPG. (картинки в формате GIF, особенно имеющие большое количество деталей медлено отрисовываются на не очень мощных машинах, типа PC-386).

Если хототе чтобы пользователь с интересом читал ваши страницы, то не вставляйте в документ картинки более 40 Kb. Для картинок большего размера использовать гиперссылку с обязательными указанием ее объема (наши каналы пока еще недостаточно быстры, чтоб перекачивать большой объем данных).

Не следует использовать более 256 цветов. Большинство ваших читателей-клиентов используют 8-битную видеокарту и большое количество цветов (True Color) все равно не увидет. Картинки высокой цветовой разрешимости всегда проверяйте на 256 цветовом режиме (хотя это не панацея от всех бед - некоторые компьютеры могут произвольно менять палитру, но все же некоторая гарантия, что вас увидят).

Не злоупотребляте анимационными GIF'ам (такими как на этой странице), это сильно затрудняет управление на слабой машине, особено для Netscape.

Видео клипы

Используя команду IMG можно вставить в документ видео-клип (видео файл типа   .avi   - Audio Video Interleave). Для задание видео фрагмента используется атрибут DYNSRC=.

Пример:

<IMG DYNSRC="TheEarth.avi" SRC="TheEarth.gif"
WIDTH=46 HEIGHT=46 LOOP=INFINITE ALIGN=RIGHT>

В этом примере видео-клип будет демонстрироваться непрерывно: атрибут LOOP= имеет значение LOOP=INFINITE. Атрибуты CONTROLS и START= управляют способом проигрывания клипа (клип может стартовать сразу после загрузки документа или после того как пользователь нажмет на изображение заданное атрибутом SRC=.

Использование видео-клипов в документах пока существенно сдерживается скоростью передачи данных по сети (размер файла с клипом как правило больше мегабайта) и тем, что далеко не все средства просмотра имеет возможность показывать видео-фрагменты или требуют загрузки специальных пакетов для поддержки видео.

Гиперссылки

Картинка может быть средством задания и управления выбором гиперссылок в HTML документе (hot spot "anchoring"). В этом случае на команду IMG должна указывать гиперссылка, определяемая командой A.

По умолчанию просмотрщик рисует рамку вокруг картинки, которая отмечена как гиперссылка. Вы можете убрать отрисовку рамки, использовав атрибут BORDER= в команде IMG с значением ноль.

Кроме этого вы имеете возможность создать "активную" (с гиперссылками) картинку, в которой разные части картинки имеют разные ссылки. Это является достаточно мощным аппаратом навигации в WWW (см. активные карты).

Звуки

Команда BGSOUND задает фоновые звуки или музыку при просмотре документа. Атрибут SRC= должен указывать на URL соответствующего звукового файла (.WAV, .AU, MIDI). Атрибут LOOP= указывает на частоту проигрывания звукового файла.

Пример:

<BGSOUND SRC="boing.wav" LOOP=5>
Вы будете слышать звук 5 раз.

Если LOOP=INFINITE (или LOOP=-1) то звук играется непрерывно.

Для проигрывания звуковых файлов компьютер пользователя должен быть оборудован звуковой картой.

Движущийся текст

Команда MARQUEE позволяет задать движущийся текст (эта команда поддерживается пока только MS Internet Explorer).

Пример:

<B><FONT COLOR=GREEN>
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10
SCROLLDELAY=200>Движущийся текст.</MARQUEE>
</FONT></B>

Что даст:

Движущийся текст.

В этом примере текст Движущийся текст. двигается слева направо со скоростью 10 пикселов с задержкой 200 миллисекунд.

Для команды MARQUEES применяются атрибуты ALIGN (LEFT или RIGHT), подобно картинкам (IMG), установка BACKGROUND COLOR, HEIGHT, WIDTH, и горизонтальные и вертикальные отступы.


Hosted by uCoz