Файл: Примеры_по_HTML.docx

Используется для вставки изображений в HTML-документ. Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Червертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тега.

Атрибуты

SRC - обязательный атрибут. Указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN - обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

BORDER - определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

LOWSRC - указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

USEMAP - применяет к изображению навигационную карту (image map), заданную элементом [#navmaps/map.php MAP]. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты - "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.

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

Пример 1:

<IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.

Пример 2. Использование изображения в качестве гиперссылки:

<A href="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справа.

Пример 3. Использование ISMAP:

<A href="http://www.igf.ru/bin/imagemaps/map1">
<IMG SRC="map.gif" ISMAP></A>');

Пример 4. Использование USEMAP:

<IMG src="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">');

Примечания (особо важно)

Золотое правило web-мастера - всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно.
Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в атрибуте ALT.
Всегда сразу после <IMG ...> ставьте <BR>! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причём ставьте вплотную, без пробелов: <img ...><br>.
Для завершения обтекания изображения текстом используйте атрибут CLEAR элемента BR.
Значения top и texttop атрибута ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.
Указывайте значения атрибутов HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.
По возможности старайтесь не создавать навигационных карт, обрабатываемых на сервере. Иначе говоря, вместо атрибута ISMAP используйте атрибут USEMAP + локальные карты.

EMBED

(В спецификациях W3C отсутствует) - Embed

Используется для вставки в HTML различных объектов: не-html документов и media-файлов. Тип вставляемого объекта, будь то музыкальный wav/midi-файл или трехмерный мир VRML, должен быть зарегистрирован на машине пользователя как проигрываемый одним из имеющихся plug-in'ов или поддерживаемый каким-либо приложением. Если браузер поддерживает элемент EMBED, содержащиеся между начальным и конечным тегами текст и элементы будут игнорироваться.

Атрибуты

Вставка объекта происходит так же, как и вставка изображения (см. элемент IMG) : под внедряемый объект необходимо сначала выделить место. Поэтому элемент EMBED имеет ряд одинаковых с элементом IMG атрибутов, а именно: NAME, ALIGN, ALT, BORDER, WIDTH, HEIGHT, HSPACE и VSPACE.

Другие атрибуты

SRC - обязательный атрибут. Определяет имя файла вставляемого объекта.

PLUGINSPACE - указывает на адрес (URL), по которому можно найти plug-in, необ-ходимый для просмотра типа файлов, аналогичных указанному в атрибуте SRC.

PALETTE - определяет тип цветовой палитры для просмотра объекта. Данный атрибут работает только на Windows-машинах с 256-цветной системной палитрой. Возможные значения:

background - использовать background-палитру для отображения объекта (используется по умолчанию).
foreground - использовать foreground-палитру для отображения объекта.

HIDDEN - определяет, отображать указанный объект или нет. Возможные значения:

true - не отображать объект.
false - отображать объект (используется по умолчанию).

TYPE - явно указывает браузеру к какому типу файлов относится загружаемый объект, помогая определить необходимое средство просмотра (plug-in). В качестве значения указывается зарегестрированный MIME-тип файла.

Пример 1:

<EMBED SRC="music.mid" HIDDEN="true">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>

Пример 2:

<EMBED SRC="music.vrml" HEIGHT="300" WIDTH="200" HSPACE="10" ALIGN="center" PLUGINSPACE="../plugins/download_vrml.html">
<NOEMBED>Альтернативный текст для старых браузеров</NOEMBED>
</EMBED>

Примечания

Для старых браузеров, не поддерживающих элемент EMBED, необходимо использовать элемент NOEMBED с указанием между начальным и конечным тегами альтернативного текста, как показано в примерах выше.
Обратите внимание - в спецификациях консорциума W3C про EMBED ничего не сказано (!), скороее всего данный элемент появился по инициативе разработчиков Netscape 1.1 и с тех пор поддерживается всеми браузерами для совместимости (начиная с MSIE 3.0-beta-2 и выше).
Каким бы привлекательным элемент EMBED вам ни казался, но, поверьте, лучше его не использовать. Далеко не каждому может понравиться принудительное проигрывание MID-файла или попытка прокрутить ролик в неизвестном браузеру формате. Если вам все же не терпится украсить HTML чем-нибудь из ряда вон выходящим, не поленитесь, потратьте время на усиленное тестирование со всеми популярными видами браузеров.