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

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

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

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

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

Следующий пример демонстрирует, вставку в документ GIF файла: 
<IMG SRC="icons/earth.gif" WIDTH=46 HEIGHT=46 ALT="Земля">

Атрибут 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 - для таблиц или графиков.

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

    Картинки высокой цветовой разрешимости желательно использовать универсальную палитру цветов, «безопасных» при использовании в интернете.

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

    Гиперссылки и активные рисунки

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

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

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

    Для задания информации о гиперссылках в рисунке, которая включается в HTML документ, используется атрибут USEMAP= в команде IMG. Сама информация о гиперссылках определяется командами MAP и AREA, как это показано ниже: 
    <MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="0, 0, 16, 16" HREF="S1.html">
<AREA SHAPE="RECT" COORDS="16, 0, 16, 16" NOHREF>
<AREA SHAPE="RECT" COORDS="0, 16, 16, 16" HREF="S2.html">
<AREA SHAPE="RECT" COORDS="16, 16, 16, 16" HREF="S3.html">
<AREA SHAPE=default HREF="other.html">
</MAP>
<IMG BORDER=0 SRC="map1.gif" USEMAP="#map1">

    Чтобы увидеть пример работы активной картинки нажми здесь.

    В этом примере картика была размечена равными прямоугольниками (rectangular areas). Одна область является непомеченной, остальные три помечены документами   S1.html, S2.html, S3.html   соответсвенно.

    Команда AREA позволяет также помечать области кругами (CIRCLES) и ломаными (POLYGONS).

    Если две или боле областей пересекаются, то просмотрщик выбирает первую из тех, что описаны в команде MAP, непомеченные области никак не отвечают на вызов.

    Замечание
    MS Internet Exporer не обрабатывет команду "ответ по умолчанию" несмотря на команду 

    <AREA SHAPE=default HREF="other.html">

    Звуки

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

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

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

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

    Видео клипы

    Используя команду 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=.

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

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

    Команда 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, и горизонтальные и вертикальные отступы.