HTML: Популярный самоучитель

ОглавлениеДобавить в закладки К обложке

6.2. Изображения

Если линейки применяются в основном для визуального отделения обособленных частей текста, то изображения могут внести в HTML‑документ элемент иллюстративности. Своеобразная вставка изображения в документ уже рассматривалась при описании HTML‑элемента BODY. Тогда указывалось изображение‑фон страницы. Теперь пришло время научиться добавлять изображения непосредственно в текст HTML‑документа.

Для вставки изображения в текст HTML‑документа используется элемент IMG. Для задания этого HTML‑элемента используется одиночный тег <IMG>. Список наиболее используемых атрибутов:

• scr – задает URI изображения;

• alt – альтернативный текст, который отображается на месте изображения, если по каким‑либо причинам само изображение не может быть показано;

• border – задает толщину границы вокруг рисунка в пикселах;

• align – определяет выравнивание изображения (описание возможных значений приведено в табл. 6.1);

• height – задает высоту изображения в пикселах;

• width – определяет ширину изображения в пикселах;

• vspace – задает величину свободного пространства между изображением и текстом сверху и снизу;

• hspace – определяет величину свободного пространства между изображением и текстом справа и слева;

• name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии (поддерживается для совместимости с более ранними версиями HTML, для идентификации изображений лучше использовать атрибут id).

Среди перечисленных атрибутов элемента IMG обязательным является только атрибут scr. Значение атрибута alt задается тогда, когда нужно, чтобы пользователь, браузер которого не показывает изображения на странице (например, если отображение рисунков отключено в настройках браузера), хоть что‑то увидел на том месте, где должно быть изображение. Атрибуты height и width используются для того, чтобы браузер еще до загрузки изображения мог правильно расположить его в тексте. Кроме того, эти атрибуты можно применять для принудительного изменения (сжатия или увеличения) размера изображения.

Приведенный ниже пример 6.2 иллюстрирует использование атрибутов alt, width, height, а также атрибута border.

Пример 6.2. Вставка изображений в HTML-документ

<TITLE>Вставка изображений</TITLE>

<BODY>

<IMG src = "study.gif" border = 1> – небольшое изображение с рамкой.<BR>

<IMG scr = "image.gif" height = 200 width = 150 alt = "здесь должно быть изображение 150x200"> – это изображение не может быть загружено браузером.

</BODY>

При обработке приведенного примера браузером получится документ, показанный на рис. 6.2 (предполагается, что браузер не может найти изображение image.gif).

Рис. 6.2. Вставка изображений

Атрибут align задает положение изображения в тексте. Он может принимать достаточно большое количество значений. Значения атрибута align и описание их воздействия на положения изображения приведены в табл. 6.1.

Таблица 6.1. Положения изображения в тексте

Действие различных значений атрибута align на положение изображения приведено на рис. 6.3.

Рис. 6.3. Различное выравнивание изображений

Для большей наглядности и экономии места изображения показаны несколько уменьшенными (height=20 и width=23) и с использованием границы одинарной толщины (border=1).


-= 52 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня