Как вставить картинку в HTML и работа с картинками

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

Для вставки изображения в html-документ используется непарный тег <img>, который помещается в то место документа, где должно быть вставлено изображение. У этого тега есть обязательный параметр src, значение которого указывает путь к нужному изображению в каталоге вашего сайта.

Например, чтобы поместить на страничку изображение:

в нужном месте документа помещается строчка:

<img src="img/1.png">

Это дает браузеру понять, что в корневом каталоге сайта www.mysite.com есть подкаталог img, в нем лежит изображение с именем 1.png, которое и нужно поместить на страничке.

Здесь мы указали полный путь (или абсолютный адрес) до изображения. А можно указать относительный адрес изображения:

<img src="img/1.png">

Такую строчку браузер интерпретирует так: в каталоге, где лежит данный html-документ, есть подкаталог img, в нем лежит изображение с именем 1.png, которое и нужно поместить на страничке.

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

<img src="/../img/1.png">

Такую строчку браузер интерпретирует так: сочетание символов ../ означает, что из каталога, где лежит данный html-документ, нужно выйти на уровень вверх; а далее как в предыдущем примере: в том каталоге, где мы оказались есть подкаталог img, в нем лежит изображение с именем 1.png, которое и нужно поместить на страничке.

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

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

Размер каждого изображения задается двумя параметрами: ширина и высота. У тега <img> есть соответствующие параметры: width и height. Эти параметры принимают значения в пикселах (px).

Вы можете задать истинные размеры изображения:

<img src="img/1.png" width="176" height="146">

Это делать необязательно, но полезно, т.к. немного ускоряет процесс загрузки странички браузером (браузеру не приходится самостоятельно вычислять эти величины). Если размеры изображения сразу заданы в параметрах тега <img>, то под данное изображение будет выделено место на страничке, и структура странички при загрузке уже не будет меняться - текст прыгать, например.

А можете увеличить или уменьшить изображение, присвоив параметрам width и height другие значения. Причем, если вы хотите пропорционально изменить оба параметра, достаточно указать новое значение только одному из них, а второй - просто опустить. Браузер вычислит его автоматически.

Например, чтобы увеличить наше изображение в 1,5 раза, можно написать:

<img src="img/1.png" width="264"> или <img src="img/1.png" width="264" height="219">

Результат будет один:

Еще параметры width и height могут принимать значения в процентах. Но! Следует учесть, что это проценты от размера окна браузера. В таком случае тоже можно указать только один параметр, а второй - опустить.

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

<img src="img/1.png" width="50%">

И мы получим:

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

У тега <img> есть еще один необязательный параметр border. С его помощью можно задать толщину рамки вокруг изображения. По умолчанию толщина рамки изображения нулевая, т.е. рамки нет.

Например, так можно добавить к нашей картинке рамку толщиной 2 пиксела:

<img src="img/1.png" border="3">

Вот что покажет нам браузер:

Цвет рамки совпадает с цветом текста на странице, заданным с помощью параметра text тега <body> (См. Урок 6. Свойства страницы - параметры тега body), по умолчанию это черный цвет.

Но если изображение является ссылкой, то у него толщина рамки по умолчанию = 1, а его цвет совпадает с цветом ссылок:

И если Вы не хотите видеть рамку, принудительно присвойте параметру border нулевое значение:

<img src="img/1.png" border="0">

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

Альтернативный текст отображается браузером на месте картинки, пока та не загрузится. Или вместо картинки, если она по какой-либо причине не отобразилась.

Когда и если картинка загрузилась, альтернативный текст будет показываться при наведении курсора мыши на эту самую картинку.

Чтобы добавить альтернативный текст, используется параметр alt тега <img>, которому присваивается строковое значение, обязательно заключенное в кавычки.

<img src="img/1.png" alt="Альтернативный текст">

Можно создать многострочный альтернативный текст.

Наведите курсор на картинку

Для этого достаточно вставить перенос строки в html-документе.

<img src="img/1.png" alt="Альтернативный
текст">

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

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

Ниже приведена таблица возможных значений параметра align:

Значение	Описание	Результат
<img src="/sample.gif" align="texttop">	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="top">	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="middle">	Выравнивание середины изображения по базовой линии текущей строки.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="absmiddle">	Выравнивание середины изображения по средине текущей строки.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="baseline">	Выравнивание изображения по базовой линии текущей строки.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="bottom">	Выравнивание нижней границы изображения по окружающему тексту.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="left">	Выравнивает изображение по левому краю окна.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="/sample.gif" align="right">	Выравнивает изображение по правому краю окна.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.

Параметры texttop, top, middle, absmiddle, baseline, bottom задают выравнивание изображения по вертикали. А параметры left и right дают браузеру понять, с какой стороны текст должен обтекать изображение.

Отступы вокруг изображения

Чтобы при обтекании текст не прилегал близко к изображению, можно задать отступы вокруг изображения. Сделать это можно с помощью параметров hspace (отступы слева и справа) и vspace (отступы сверху и снизу) тега <img>.

В следующем примере продемонстрирован случай, когда текст обтекает изображение, при этом изображение выровнено по левому краю и имеет отступы вокруг, равные 5 пикселам:

<img src="img/1.png" align="left" hspace="5" vspace="5">В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.

Вот результат в браузере:

В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.

Разбиение изображения на части

Бывают случаи, когда на странице необходимо поместить большое изображение. Но тогда страница будет долго грузиться. Что же делать?

Один из возможных вариантов выхода из положения - разрезать изображение на части и разместить его на странице с помощью таблицы. A чтобы изображение выглядело как целое, необходимо у таблицы удалить границу и все отступы внутри и между ячейками. Т.е. присвоить соответствующим параметрам тега <table> нулевые значения: border="0", cellspacing="0", cellpadding="0".

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

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/part1.png"></td>
<td><img src="img/part2.png"></td>
</tr>
<tr>
<td><img src="img/part3.png"></td>
<td><img src="img/part4.png"></td>
</tr>
</table>

А вот результат:

Такой прием может пригодиться и в других случаях. Вы можете видеть пример наложения 2-х изображений с текстовыми вставками:

		Другой текст

Один текст