htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > HTML по шагам > Изображения

Этот материал устарел, рекомендую Самоучитель HTML

Шаг 9. Изображения

Влад Мержевич

Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

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

Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.

В примере 9.1 показаны несколько способов указания пути к графическому файлу при добавлении изображений на веб-страницу.

Пример 9.1. Вставка изображения в документ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="http://www.htmlbook.ru/images/sample.gif"> - абсолютный адрес размещения изображения
<img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>

Альтернативный текст

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

Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 9.2.

Пример 9.2. Добавление альтернативного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="index.html"><img src="home.gif" alt="Вернуться на главную страницу"></a>
</body>
</html>

Размеры изображения

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG> (пример 9.3). В качестве значений используется пиксел — элементарная точка на мониторе.

Пример 9.3. Размеры изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100">
</body>
</html>

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

Замечание

Подход, когда приходится менять размеры изображения относительно исходных, не следует применять часто. Если количество пикселов в картинке насильно увеличивается, то они никак не появятся из ниоткуда и браузеру придется, используя алгоритмы интерполяции, достраивать их самостоятельно. Тот же алгоритм применяется и в обратном случае, когда необходимо уменьшить картинку. Данный подход изменения размера изображения получил термин ресемплирование. Качество ресемплирования напрямую зависит от типа изображения, чем больше оно содержит мелких и контрастных деталей, тем хуже конечный результат, который проявляется как размытость.

Рамка вокруг изображения

Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах.

Пример 9.4. Добавление рамки вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100" border="1">
</body>
</html>

Поля вокруг изображения

Для любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 9.5).

Пример 9.5. Добавление отступов вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" width="50" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Выравнивание изображения

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

Табл. 9.1. Значения параметра align для выравнивания изображений
Значение Описание Пример
bottom Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left Изображение располагается по левому краю родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle Середина изображения выравнивается по базовой линии текущей строки текста. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right Изображение выравнивается по правому краю родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Наиболее популярные параметры — left и right, создающие обтекание вокруг изображения (пример 9.6).

Пример 9.6. Обтекание текста вокруг рисунка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" hspace="10" vspace="10" width="50">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</body>
</html>

Работа с изображениями в Nvu

Для добавления нового изображения в Nvu нажмите на кнопку или выберите пункт меню Вставка > Изображение... После этого откроется диалоговое окно, где следует указать адрес изображения и альтернативный текст (рис.9.3).

Рис. 9.3. Окно свойст изображения

Рис. 9.3. Окно свойств изображения

Замечание

Некоторые браузеры никак не отображают альтернативный текст, кроме случая отключения показа изображений. Если вы хотите обязательно сделать всплывающую подсказку, используйте параметр title тега <IMG>. В Nvu можно добавить эту возможность, заполнив текстом поле «Всплывающая подсказка» (рис. 9.3).

С помощью вкладки «Размеры» (рис. 9.4) можно задать новые размеры изображения в пикселах, причем как в большую, так и меньшую сторону. По умолчанию флажок «Соблюдать пропорции» включен, поэтому при вводе ширины или высоты второй параметр будет высчитываться автоматически.

Рис. 9.4. Изменение размеров изображения в Nvu

Рис. 9.4. Изменение размеров изображения в Nvu

Остальные параметры, определяющие вид изображения, меняются на вкладке «Внешний вид» (рис. 9.5). Сюда входят «Поля слева и справа» (параметр hspace), «Поля сверху и снизу» (vspace), «Сплошная рамка» (border) и «Расположение текста относительно изображения» (align).

Рис. 9.5. Добавление отступов, рамки и выравнивания к изображению

Рис. 9.5. Добавление отступов, рамки и выравнивания к изображению

Изображение в качестве ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <A> и </A>, как показано в примере 9.7.

Пример 9.7. Создание рисунка-ссылки

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="sample.html"><img src="images/figure.jpg" border="0" height="111" width="100"></a>
</body>
</html>

Когда изображение становится ссылкой, вокруг него автоматически добавляется рамка толщиной один пиксел. Чтобы убрать рамку, добавьте параметр border="0" к тегу <IMG>.

В Nvu создание ссылки для изображения делается с помощью вкладки «Ссылка» в параметрах добавления и свойств изображения, как показано на рис. 9.6.

Рис. 9.6. Создание ссылки на изображении в Nvu

Рис. 9.6. Создание ссылки на изображении в Nvu

Статья опубликована: 14.08.2005 Последнее обновление: 23.07.2010
HTML по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru