< к оглавлению

<img src="адрес"> - простейшая команда вставки на web-страничку рисунка. (img - image - англ. изображение; src - source - англ. источник)

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


1. alt="текст"

Добавление к рисунку альтернативного текста. При наведении указателя мышки на рисунок данный текст появляется во всплывающем окне на несколько секунд. Пример: <img src=pic.jpg alt="Это альтернативный текст"> - Это альтернативный текст. Если же ссылка указывает на несуществующее изображение (или в настройках браузера отображение рисунков вообще отключено), то данный текст появляется вместо рисунка: Это альтернативный текст


2. height="цифра" width="цифра"

Задание высоты и ширины рисунка. Почти всегда указывается в пикселях. С одной стороны, если указать размеры, отличающихся от истинных, то это позволяет масштабировать и искажать рисунок (к примеру, маленьким квадратиком можно нарисовать сколь угодно длинную линию - экономия трафика). С другой стороны, при наличии указанных длины и ширины изображения браузер ещё до загрузки рисунка резервирует место под него. Благодаря этому по ходу загрузки web-страницы не происходит перестройки текстовых блоков, поэтому пользователь спокойно может приступить к изучению текстовой информации, не дожидаясь появления всех рисунков. Пример: <img src=pic.jpg height=15 width=100> -

Также можно вместо цифры (означающей пиксели) указать проценты. При этом браузер промасштабирует рисунок по длине или ширине своей рабочей области, принимая их размеры за 100%. Если указан только один параметр (к примеру, height=100% или width=50%), то второй будет рассчитан исходя из пропорции. Если указаны оба, рисунок исказится. Чтобы не быть голословной: <img src=pic.jpg height=15% width=100%> -




3. border="цифра"

С помощью данного атрибута вокруг рисунка можно создать небольшое окаймление (border - англ. граница, край). По умолчанию его значение =0. Пример: <img src=pic.jpg border=20> -


4. vspace="цифра" hspace="цифра"

Задание отступов по вертикали и горизонтали.
<img src=pic.jpg> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 Без использования отступов (образец для дальнейшего сравнения)
<img src=pic.jpg vspace=30> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 Отступы по вертивали (vspace - vertical space - англ. вертикальное пространство)
<img src=pic.jpg hspace=30> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 Отступы по вертивали (hspace - horizontal space - англ. вертикальное пространство)



5. align="значение"

Атрибут задаёт относительное расположение изображения и текста. По молчанию используется bottom. Думаю, лучше один раз показать, чем сто раз рассказать.
<img src=pic.jpg align=top> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
<img src=pic.jpg align=middle> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
<img src=pic.jpg align=bottom> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
<img src=pic.jpg align=left> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
<img src=pic.jpg align=right> text1 text1 text1 text1 text1 text1 text1 text1 text1 text1text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2
(Есть ещё несколько значений: absbottom, absmiddle, baseline, texttop - но здесь уже идут нюансы, тем более, мне не известные. :) )

< к оглавлению