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

Анна Петрова

Senior UX Designer @ TechCorp

☛HTML и CSS ✎ 14 ноя 2011

★★★★★

4.7 / 5 (99 оценок)

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

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

Размещение изображений в тексте

Изображение можно поместить в тексте, но при этом следует вы-значить, каким образом текст будет обтекать его. Для взаимного расположения текста и изображений предназначен атрибут ALIGN в теге <IMG>, который может принимать, в частности, следующие значения:

left - изображение размещено в левой части страницы, текст обтекает его справа;

right - изображение размещено в правой части страницы, текст обтекает его слева;

top - обтекания нет, изображение размещено в тексте, в соответствии строка которого выровнен по верхней границе рисунка;

bottom - обтекания нет, изображение размещено в тексте, соответствующую строку которого выровнен по нижней границе рисунка;

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

По умолчанию атрибут ALIGN имеет значение left.

Для того чтобы картинка не была расположена вплотную к тексту, можно задать отступы. Это делают с помощью атрибута HSPASE для боковых полей и атрибута VSPASE для верхнего и нижнего полей. Значения аргументов задают в виде чисел, определяющих размеры отступов в пикселах.

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

Предыдущая - Страница: 2 из 2

Навигация: 1 2

Другие статьи по теме:

Встроенные стили

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

Фреймы, их теги и атрибуты

Формирование карты гиперссылок

Визуальный редактор веб-сайтов

#UX #UI #Дизайн #Доступность