Встраивание изображений

Для размещения рисунков на странице используется тег <img>.

Чтобы вставить изображение в HTML-документ нужно написать следующее:

<img src="url " >

У тега <img> имеется обязательный атрибут src, значением которого является адрес файла с изображением. Если файл находится с той же папке, что и текст странички сайта, как в данном случае, можно писать адрес в сокращенном виде, не указывая путь доступа к нему.

Пример 29

<html>

<head>

<title>Первые шаги</title>

</head>

<body

<h4>Мой рисунок</h4>

<img src="sp_a0144.jpg"/>

</body>

</html>

Кроме того, можно указывать еще ряд параметров для размещения изображения, задавая значения атрибутов внутри тега.

Атрибуты тега < img >

Src

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

alt ="text"

Данный необязательный элемент задает строку текста, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений или в том случае, когда не будет найден файл с рисунком. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тег ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим.

Height

Данный необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

Width

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

Задавая размеры данного и предыдущего параметров нужно внимательно следить, не изменятся ли пропорции рисунка, что может привести к его искажению.

Align

Данный параметр используется, чтобы сообщить браузеру, как располагается рисунок относительно следующего за ним блока текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не задан, то большинство броузеров по умолчанию располагает изображение в левой части экрана, а текст справа от него. Он может принимать следующие значения:

align="top" или “texttop”- выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста;

align="middle" - выравнивает центр изображения по базовой линии строки окружающего текста;

align="bottom" или “baseline” - выравнивает нижний край изображения по базовой линии строки окружающего текста;

align="left" - изображение прижимается к левому краю документа, текст справа;

align="right" - изображение прижимается вправо, текст слева;

align="absmiddle" - выравнивает центр изображения по центру строки окружающего текста.

align="absbottom" - выравнивает нижний край изображения по базовой линии строки окружающего текста.

Border

Данный параметр позволяет автору определить толщину рамки вокруг рисунка. Задается толщина рамки в пикселах.

Vspace

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

Hspace

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

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

name - определяет имя изображения, уникальное для данного документа. Это необходимо для доступа к изображению из JavaScript-сценариев.

Пример 30

Использование параметра alt:

<html>

<head>

<title>Изображения</title>

</head>

<body>

<h4>Мои рисунки</h4>

<img src="sp_a0144.jpg" alt="Первый рисунок"/>

<img src="sp_a0139.jpg" alt="Второй рисунок" />

</body>

</html>

Пример 32

Задание высоты поля для изображения

<html>

<head>

<title>Первые шаги</title>

</head>

<body>

<h4>Мои рисунки</h4>

<img src="sp_a0144.jpg"/>

<img src="sp_a0139.jpg" height="300"/>

</body>

</html>

Пример 31

Задание размера поля для изображения.

<html>

<head>

<title>Первые шаги</title>

</head>

<body>

<h4>Мои рисунки</h4>

<img src="sp_a0144.jpg"/>

<img src="sp_a0139.jpg" height="300" width="70%"/>

</body>

</html>

Пример 35

Задание толщины рамки для изображения.

<html>

<head>

<title>Первые шаги</title>

</head>

<body text="blue">

<h4>Мой рисунок</h4>

<img src="sp_a0144.jpg"/>

<img src="sp_a0139.jpg" border="10"/>

</body>

</html>

Пример 36

<html>

<head>

<title>Первые шаги</title>

</head>

<body text="blue">

<h4>Мой рисунок</h4>

<img src="sp_a0144.jpg"/><br>

<img src="sp_a0139.jpg" vspace="100" />

</body>

</html>

Пример 37

Горизонтальный отступ

<html>

<head>

<title>Первые шаги</title>

</head>

<body text="blue">

<h4>Мой рисунок</h4>

<img src="sp_a0144.jpg"/>

<img src="sp_a0139.jpg" hspace="100" />

</body>

</html>

Пример 33

Задание разных параметров

<html>

<head>

<title>Первые шаги</title>

</head>

<body text="blue">

<h4>Мои рисунки</h4>

<img src="sp_a0144.jpg" hspace="30" alt="Первый рисунок"/>

<img src="sp_a0139.jpg" height="300" width="70%" align="right" border="10" alt="Второй рисунок" />

</body>

</html>