Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Для указания адреса изображения можно задавать как абсолютный, так и относительный путь. В общем случае, правила для добавления изображений те же, что и при создании ссылок.
Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.
- Если в начале адреса стоит слэш (символ /), то отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru означает, что написав путь к изображению как/images/bird.jpg, мы, тем самым говорим серверу показать в браузере файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
- Если перед адресом добавляется упоминание протокола HTTP (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
- Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 9.1 показан файл index.html, в который требуется поместить рисунок sample.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.
- Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис.9.2, относительный путь к рисунку sample.gif из файла index.html будет images/pic.gif.
Рис. 9.1. Пример размещения файлов
Рис. 9.2. Пример размещения файлов
В примере 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 перечислены возможные значения этого параметра и результат его использования.
| Значение | Описание | Пример |
|---|---|---|
| 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. Окно свойств изображения
Замечание
Некоторые браузеры никак не отображают альтернативный текст, кроме случая отключения показа изображений. Если вы хотите обязательно сделать всплывающую подсказку, используйте параметр title тега <IMG>. В Nvu можно добавить эту возможность, заполнив текстом поле «Всплывающая подсказка» (рис. 9.3).
С помощью вкладки «Размеры» (рис. 9.4) можно задать новые размеры изображения в пикселах, причем как в большую, так и меньшую сторону. По умолчанию флажок «Соблюдать пропорции» включен, поэтому при вводе ширины или высоты второй параметр будет высчитываться автоматически.
Рис. 9.4. Изменение размеров изображения в Nvu
Остальные параметры, определяющие вид изображения, меняются на вкладке «Внешний вид» (рис. 9.5). Сюда входят «Поля слева и справа» (параметр hspace), «Поля сверху и снизу» (vspace), «Сплошная рамка» (border) и «Расположение текста относительно изображения» (align).
Рис. 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
Поддержите мой проект! Поделитесь ссылкой на понравившейся материал...