Изучаем HTML. Часть 4 — Добавляем картинки

[Admin]

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

На этот раз мы из простых web-страничек, на которых есть только текст сделаем странички с картинками.

Для вставки картинки на страничку используется одиночный тег:
<IMG> — добавление картинки на страничку.

У этого тега есть много атрибутов. Давайте о них по порядку. Начнем с главного:
SRC — обязательный атрибут. Указывает адрес (URL) файла с изображением.
Причем адрес можно указывать как абсолютный и относительный. Пример абсолютного адреса: http://chatplanet.ru/forum/blackstream/blackstream_base/logo.gif. Пример относительного адреса: blackstream/blackstream_base/logo.gif.

Если указан абсолютный адрес, то картинка просто берется по этому адресу. Если же указан относительный, то адрес картинки получается прибавлением адреса сайта к относительному адресу картинки. В данном примере адрес сайта: http://chatplanet.ru/forum/ + blackstream/blackstream_base/logo.gif = http://chatplanet.ru/forum/blackstream/blackstream_base/logo.gif — тоже самое, что мы указали как абсолютный адрес.
Получатся теги:
С абсолютным адресом картинки:

Код HTML:
<img src="http://chatplanet.ru/forum/blackstream/blackstream_base/logo.gif" />С относительным адресом картинки:

Код HTML:
<img src="blackstream/blackstream_base/logo.gif" />Подробнее о абсолютных и относительных адресах читайте в следующем уроке.

Следующие 2 важных атрибута:
HEIGHT и WIDTH — определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества). Их можно не указывать. Тогда браузеры сами определят, сколько места надо отвести под картинку. Но я очень настоятельно рекомендую пользоваться этими атрибутами вот по каким причинам: Во-первых, как грузятся странички — сначала загружается весь текст, а потом начинают подгружаться картинки. Если у Вас быстрый интернет, то это не заметно. Но если инет достаточно медленный, то этот процесс заметен. Если заранее не указать размеры изображения, то в самом начале на страничке ему отведется небольшое место. Затем, после загрузки, становятся известны размеры и браузер начинает «двигать» всю страничку, чтобы поместить загруженную картинку. В итоге, если картинок много — вся страничка начинает «скакать» при их загрузке. Но если заранее указать ширину и высоту места под картинку, то браузеры заранее отведут для нее достаточное место и страничка не будет скакать при дозагрузке картинки. Во-вторых, если по каким-то причинам картинка не загрузилась (проблемы на сервере или просто отключен показ картинок), то дизайн странички не изменится при указанных размерах картинок. А при неизвестных размерах незагруженных картинок весь дизайн странички может «поехать».

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

Уже знакомый по предыдущим урокам атрибут:
ALIGN — указывает способ выравнивания изображения в документе. Может принимать следующие значения:
left — выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right — выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop — выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle — выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle — выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline — выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom — выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
Атрибут для идентификации изображения:
NAME — определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript сценариев.

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

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

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

Из любой картинки можно сделать т.н. «карту».
Что это такое? Можно сделать так, чтобы при нажатии на разные части изображения пользователя перенаправляло на разные странички. Не смотря на то, что это очень эффектный метод, я не рекомендую его использовать. Если отображение картинок отключено, то вместо карты пользователь увидит только надпись, которая определяется тегом ALT. И догадаться, куда надо нажать, чтобы попасть в нужное место — просто никак.
Но все же атрибуты надо описать:

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

На этом про картинки все. Экспериментируйте, пишите что у Вас получилось, а что нет. Ждите следующего урока про гиперссылки!