2. Выравнивания текста относительно изображения

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

Атрибут ALIGN позволяет определить взаимное расположение текста и изображений на Web-странице. Для данного атрибута используется следующий синтаксис:

<IMG ALIGN=значение SRC=URL_изображения>

В таблице приведены некоторые значения атрибута ALIGN

Значение	Результат
TOP	Нижний край текста выравнивается по верхнему краю изображения
MIDDLE	Нижний край текста выравнивается по центру изображения
BOTTOM	Нижний край текста выравнивается по нижнему краю изображения

По умолчанию в дескрипторе <IMG> атрибуту ALIGN присваивается значение BOTTOM.

3. Плавающие изображения. Поля вокруг изображений

С помощью значений LEFT и RIGHT атрибута ALIGN можно определить, вдоль какого поля должно "плавать" изображение.

Для определения расстояния между текстом и плавающими изображениями, а также между краем окна и изображениями используются атрибуты VSPACE и HSPACE. Атрибут VSPACE служит для определения пустого пространства над и под плавающим изображением, а атрибут HSPACE – для определения пустого пространства справа и слева от плавающего изображения.

4. Определение ширины и высоты изображения

В HTML высоту и ширину изображения можно определить с помощью атрибутов HEIGHT и WIDTH дескриптора <IMG>.

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

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

<IMG SRC="file.gif" HEIGHT=400 WIDTH=450 ALIGN=LEFT>

5. Обтекание изображений текстом

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

<BR CLEAR=LEFT>.

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

<BR CLEAR=RIGHT>.

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

<BR CLEAR=ALL>

Изображение-ссылка – это изображение на Web-странице, щелкнув на котором, можно открыть новую Web-страницу или службу Internet.

Типичный HTML-код изображения-ссылки выглядит примерно так:

<A HREF="URL"><IMG SRC="имя_файла_изображения"></A>

Здесь "URL" – это просто гиперссылка.

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

<A HREF=Moreinfo.html> <IMG SRC="имя файла изображения"> текст </A>

Еще один полезный атрибут дескриптора IMG, особенно для изображений-ссылок, - это BORDER. По умолчанию изображения-ссылки заключаются в раму шириной два пикселя. Если увеличить рамку, то станет более очевидно, что изображение является ссылкой. Если присвоить данному атрибуту значение "0", то рамка вокруг изображения будет удалена.

Альтернативы изображениям-ссылкам

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

<IMG SRC="file.gif" ALT="Описание рисунка">

Практическое задание

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