2020-05-21
83
В HTML высоту и ширину изображения можно определить с помощью атрибутов HEIGHT и WIDTH тега <IMG>.
Во время загрузки Web-страницы необходимо ждать, пока загрузятся изображения, чтобы затем получить возможность прочитать текст, т.к. при обращении к Web-странице браузер сначала загружает все встроенные изображения и только потом - окружающий их текст. Если сообщить браузеру размер в пикселях изображений, содержащихся на вашей Web-странице, то он сможет подготовить макет страницы и разместить текст до того, как будет окончена загрузка всех изображений. Посетитель страницы сможет щелкнуть на какой-либо текстовой ссылке еще до окончания загрузки изображений. Например:
< IMG SRC="моя_собака.gif" HEIGHT=400 ALIGN=LEFT>
Обтекание изображений текстом
Для определения способа обтекания текста вокруг изображения используются тег <BR> и атрибут CLEAR.
Для того чтобы удалить текст, находящийся справа от изображения, и поместить его под изображением, необходимо записать:
< BR CLEAR=LEFT>..
Для удаления текста, находящегося слева от изображения, и размещения под изображением, воспользуйтесь записью:
|
|
|
< BR CLEAR=RIGHT>.
Чтобы удалить весь текст, расположенный слева и справа от изображения, и разместить его внизу, необходимо записать:
< BR CLEAR=ALL>.
Типичный HTML-код изображения-ссылки выглядит примерно так:
< A HREF="URL"><IMG SRC="имя_файла_изображения"></A>.
В данном случае пользователь щелкает не на строке, а на изображении.
Еще один полезный атрибут тега <IMG>, особенно для изображений-ссылок - это BORDER. По умолчанию изображения-ссылки заключаются в рамку шириной 2 пикселя. Если увеличить рамку, то станет более очевидно, что изображение является ссылкой, хотя BORDER можно использовать и для обычных изображений. Пример использования атрибута BORDER в теге <IMG>:
<IMG SRC="моя_собака.gif" BORDER=4>
Если присвоить значение 0, то рамка вокруг изображения будет отсутствовать.
Альтернативы изображениям-ссылкам
Обычно пользователи, имеющие "медленное" подключение к Internet, отключают в браузере функцию загрузки изображений. Существует простое решение данной проблемы с помощью атрибута ALT элемента IMG. Атрибут ALT позволяет определить текстовую строку, которая служит альтернативой для браузеров, не поддерживающих графику. Например:
< IMG SRC="моя_собака.gif" ALT="фотография собаки">
Использование графики, цвета и текста
Добавление на Web-страницы цветных фоновых изображений
Если вы хотите создать Web-страницу, производящую на зрителя хорошее впечатление, то вам не обойтись без цветных фоновых изображений (рис. 14). Сначала надо сделать фоновое изображение цветным. С помощью атрибута BGCOLOR тега <BODY> можно определить цвет фона, указав шестнадцатеричное число, состоящее из шести цифр. Этот атрибут имеет следующий формат:
|
|
|
< BODY BGCOLOR=#rrggbb>
................
< /BODY>.
Запись #rrggbb состоит из трех двухзначных шестнадцатеричных чисел, определяющих соотношения красного, зеленого и голубого цветов.
Добавление на Web-страницы графических фоновых изображений
Многие разработчики Web-страниц любят создавать единообразный фон для всех своих Web-страниц. В HTML для создания графического фона используется атрибут BACKGROUND тега <BODY>, например:
< BODY BACKGROUND="bkgrnd.gif">.
Для получения эффекта браузер "выкладывает" изображение мозаикой, заполняя пространство фона.
