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

Графические файлы включаются в 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'ам (такими как на этой странице), это сильно затрудняет просмотр web-страниц, особено для 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).

    Атрибут COORDS задает список координат:

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

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

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