- •17. Изображения в html
- •Введение
- •Изображение говорит больше чем тысяча слов - так ли это?
- •Различные типы изображений в Web - содержательные и фоновые изображения
- •Элемент img и его атрибуты
- •Создание альтернативного текста с помощью атрибута alt
- •Добавление полезной информации с помощью атрибута title
- •Использование longdesc для описания сложных изображений
- •Быстрый вывод изображения при определении размеров с помощью width и height
- •Только это о строковых изображениях
- •Фоновые изображения с помощью css
- •Как применять фоновые изображения с помощью css
- •Заключение
- •Контрольные вопросы
- •Об авторе
Быстрый вывод изображения при определении размеров с помощью width и height
Когда агент пользователя встречает элемент img в коде HTML, он начинает загружать изображение, на которое указывает атрибут src. По умолчанию, он не знает размеров изображения, поэтому просто выводит весь текст целиком, а затем смещает остаток документа, когда изображения наконец загрузятся и появятся. Это может замедлить загрузку страницы, и выглядит немного странно для посетителей страницы. Чтобы избежать этого, можно приказать агенту пользователя выделить необходимое пространство для изображений до их загрузки, задавая размеры изображений с помощью атрибутов width и height (inlineimagewithdimensions.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with dimensions</title>
</head>
<body>
<img src="balconyview.jpg" alt="View from my balcony, showing a row of houses,
trees and a castle" width="400" height="186">
</body>
</html>
В этом случае выводится свободное пространство размером с изображение, пока изображение не загрузится и не займет свое место, поэтому исключается неприятное смещение страницы. Можно также изменять размеры изображений с помощью этих атрибутов (попробуйте уменьшить наполовину значения атрибутов в примере выше, сохранить его, и затем перезагрузите страницу), но это не слишком хорошая идея, так как изменение размера не во всех браузерах приводит к хорошему качеству результата. Особенно плохо изменение размеров изображений действует при превращении в пиктограммы, так как идея пиктограммы состоит не только в уменьшении физического размера изображения, но и также и в уменьшении размера файла. Никто не захочет загружать фотографию размером 300 Кб, чтобы увидеть просто небольшое изображение, которое должно иметь размер 5 Кбайт.
Только это о строковых изображениях
Имеется много других атрибутов, которые можно использовать с изображениями, но большинство из них объявлены исключенными, так как определяют компоновку и выравнивание изображения. Это работа не для HTML — для этого был изобретен CSS. Достаточно сказать, что важно помнить, что изображения являются — по умолчанию — строковыми элементами. Это означает, что они могут появляться между словами в тексте, не создавая новые строки. Это удобно, когда вы хотите добавить небольшую пиктограмму в основной текст, но это может раздражать, когда вы пытаетесь создавать компоновки, используя изображения и текст. С помощью CSS можно переопределить используемое по умолчанию строковое представление и сделать изображения элементами блочного уровня (элементами, которые выводятся в новой строке, когда их добавляют в документ).
Фоновые изображения с помощью css
Вполне безопасно сказать, что Web-дизайн стал значительно более интересным, когда браузеры начали поддерживать CSS. Вместо хитроумного использования HTML с помощью ячеек таблиц для позиционирования элементов на странице, неразрывных пробелов ( ) для сохранения величины пробела, и GIF-изображений разделителей (прозрачных GIF-изображений размером 1х1 пиксель, которые изменялись в размере для создания полей), теперь можно использовать заполнения, поля, размеры и позиционирования в CSS, и оставить HTML заботу только о структуре содержимого.
CSS позволяет также использовать фоновые изображения самым разнообразным образом — можно разместить их позади и вокруг текста любым желательным образом, а также повторять изображения в регулярных шаблонах, чтобы создавать фоновые изображения. Здесь изображения CSS будет рассмотрены только кратко, так как будущая лекция рассматривает фоновые изображения CSS значительно более подробно.