Выравнивание картинки

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

Указание размеров картинки

Начнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:

· width — ширина картинки в пикселах или процентах;

· height — высота картинки в пикселах или процентах.

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

Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

< img src="logo.jpg" width="50" height="20">

или

< img src="logo.jpg" width="10%" height="5%">

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

< img src="logo.jpg" alt="Логотип сайта www.seoded.ru">

В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt (повторю, если пользователь отключил показ графики, если же нет, то картинка скроет собой альтернативный текст).

С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:

· left — изображение располагается у левого края страницы, а текст обтекает картинку справа;

· right — изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.

Например, HTML-код

< img src="logo.jpg" align="left"> Это мой аватар на форумах и в различных сервисах

браузер покажет так

Это мой аватар на форумах и в различных сервисах

А этот HTML-код

< img src="logo.jpg" align="right"> Это мой аватар на форумах и в различных сервисах

будет выглядеть вот так

Это мой аватар на форумах и в различных сервисах
Для прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про форматирование текста в html). У тега BR есть атрибут clear, который может принимать три значения:

· left — прекращение обтекания текстом картинок, выровненных по левому краю;

· right — прекращение обтекания текстом картинок, выровненных по правому краю;

· all — прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.