Вставка графических изображений
Добавить на Web-страницу графическое изображение позволяет одинарный тег <IMG>. Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег <IMG>.
Обязательный атрибут этого тега SRC служит для указания интернет-адреса файла с изображением:
<IMG SRC="image.gif">
Этот тег помещает на Web-страницу изображение, хранящееся в файле image.gif, который находится в той же папке, что и файл самой этой Web-страницы.
Другой пример:
<IMG SRC="/images/picture.jpg">
Данный тег помещает на Web-страницу изображение, хранящееся в файле picture.jpg, который находится в папке images, вложенной в корневую папку Web-сайта.
Пример:
<IMG SRC="http://www.othersite.ru/book12/author.jpg">
А этот тег помещает на Web-страницу изображение, хранящееся в файле с интернет-адресом http://www.othersite.ru/book12/author.jpg, т. е. изображение с другого Web-сайта.
Мы уже знаем о том, что элементы Web-страницы могут быть блочными и встроенными. Так вот, изображение, помещенное на Web-страницу с помощью тега <IMG>, — встроенный элемент. Это значит, что он не может "гулять сам по себе", а должен быть частью блочного элемента, например, абзаца.
Из этого следуют два важных вывода. Во-первых, мы можем вставить графическое изображение прямо в абзац:
<P>Посмотрите картинку — <IMG SRC="image.gif"></P>
Во-вторых, если нам понадобится отобразить на Web-странице отдельное, не связанное ни с каким абзацем графическое изображение, нам придется поместить его в специально созданный абзац:
<P><IMG SRC="/images/picture.jpg"></P>
Задание 1: Найдем графический файл с изображением @ и поместим его в папку, где хранятся файлы нашего Web-сайта в файл image.gif.
Впишем в раздел тегов Web-страницы index.htm тег <IMG> и создадим описывающую его Web-страницу. Это будет третья Web-страница нашего Web-сайта. Ее HTML-код приведен в листинге 3.1.
Листинг 3.1
Здесь предполагается, что графический файл, содержимое которого мы будем выводить на Web-страницу, имеет имя image.gif. Если у вас другое имя файла, соответственно исправьте HTML-код.
Сохраним новую Web-страницу в файле t_img.htm и сразу же откроем в Web-обозревателе (рис. 3.1). На этой Web-странице мы увидим код примера вида
<P><IMG SRC="image.gif"></P>
а чуть ниже — результат его выполнения.
Рис. 3.1. Web-страница t_img.htm в Web-обозревателе
Как видим, ничего сложного в размещении изображения на Web-странице нет. Нужно только приготовить графический файл и вставить в HTML-код один простой тег.
Поскольку изображение хранится в отдельном от Web-страницы файле, Web-обозревателю придется послать Web-серверу еще один запрос на его получение. Web-серверу нужно найти этот файл и отправить его Web-обозревателю. Файл должен загрузиться по сети.
На все это требуется время. Если изображений на Web-странице много, все они велики по размеру, а канал связи медленный, понадобится значительное время. Может случиться так, что сама Web-страница будет успешно загружена и отображена на экране, а изображения — еще нет. И Web-обозреватель вместо не загруженного еще изображения выведет на экран пустой прямоугольник.
Возникают две проблемы. Во-первых, пустые прямоугольники вместо изображений выглядят некрасиво. Во-вторых, посетитель не сможет понять, что за изображение должно находиться вместо того или иного прямоугольника, и стоит ли ждать окончания его загрузки.
И если с первой проблемой справиться практически невозможно, то вторую мы вполне способны решить. Для этого тег <IMG> поддерживает необязательный атрибут ALT, с помощью которого указывается так называемый текст замены. Он будет отображаться в пустом прямоугольнике, обозначающем незагруженное изображение, пока это изображение не загрузится:
<P><IMG SRC="image.gif" ALT="Пример изображения"></P>
Здесь мы задали для изображения с Web-страницы t_img.htm текст замены "Пример изображения".
Задание 2: Добавьте на предыдущую Web-страницу произвольный текст замены, проверьте результат.
Хорошим тоном Web-дизайна считается указание текста замены только у значащих изображений. У изображений, являющихся элементами оформления Web-страницы, текст замены обычно не указывают.
Б. МУЛЬТИМЕДИА
Мультимедиа — это, в первую очередь, аудио и видео. Мультимедиа в приложении к Web-дизайну — это аудио- и видеоролики, размещенные на Web-страницах.
До недавних пор разместить на Web-странице аудио- или видеоролик можно было только с помощью громоздкого HTML-кода и дополнительных программ. Но сейчас, с появлением HTML 5 и поддерживающих его (хотя бы частично) Web-обозревателей, потребуется всего один тег, не сложнее уже знакомого нам тега <IMG>.