Цитата сообщения Rost Параметры для html-кода изображения.



Очередное дополнение в

Сегодня хочу поговорить о html-коде для изображений, который уже описывал тут в первом пункте. Напомню для тех, кто забыл или не знал.
Для того, чтобы поместить в сообщение или в комментарий изображение, которое уже лежит где-то в интернете, надо написать следующее:
<img src="адрес изображения" />
Где "адрес изображения" - полный адрес (http:// и т.д.)
Параметр "src" - это сокращение от английского "source", что в переводе означает"источник".

Сегодня хочу подробно описать и другие параметры, которые могут входить в этот код.
А поможет мне в этом опять этот цветной квадратик:


1. Задаём размеры изображения.
В коде "img" можно явно задать размеры изображения.
Можно сделать его больше оригинальной картинки:

Или - меньше:

Или сделать из квадратика прямоугольник:

Отвечают за это параметры "width" (ширина) и "height" (высота).
Значения этих параметров может быть
- в пискелях. Например: width="50" height="50"
- в процентах от ширины отведённой для картинки области. Например: width="50%" (на ЛиРу ширина такой области равно 700 пикселям)
Код пишется так:
<img src="//img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" width="50" height="50" />

2. Задаём альтернативный текст.
За альтернативный текст отвечает параметр "alt" (сокращение от "alternative", переводе с английского "альтернативный").
Сначала объясню, что такое альтернативный текст.
Это - тот текст, который можно видеть, если изображение не загрузилась по какой-то причине.
Например:

В качестве альтерантивного текста можно использовать всё, что угодно. Как правило там пишут краткое описание, размеры в пикселях или в кБайтах.
Код пишется так:
<img src="//img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" alt="Разноцветный квадратик" />

3. Задаём заголовок изображения.
За заголовок изображения отвечает параметр "title" (в переводе с английского "название", "заголовок").
Заголовок - это текст, который будет "всплывать" при наведении на изображение мышкой.
Например:

После наведения на изображения, расположенное выше, мышкой, на экране должен появится его заголовок:

Код пишется так:
<img src="//img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" title="Разноцветный квадратик" />

4. Задаём толщину рамки вокруг изображения.
За толщину рамки вокруг изображения отвечает параметр "border" (в переводе с английского "граница").
Рамка имеет цвет текста текущей страницы. Размер рамки задаётся в пискелях.
Вот, например, наш квадратик с рамкой в 3 пикселя (слева) и без неё (справа):

Код пишется так:
<img src="//img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" border="3" />

5. Задаём выравнивание изображения.
За выравнивание изображения отвечает параметр "align" (в переводе с английского "выравнивание").
В своё время подробное описание этого параметра сделал тут

LI 5.09.15