HTML 5, CSS 3 и Web 2.0. Разработка современных 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-сайта.
НА ЗАМЕТКУ
Принципы формирования интернет-адресов файлов, применяемые в WWW, мы подробно рассмотрим в главе 6.
Мы
Из этого следуют два важных вывода.
Во-первых, мы можем вставить графическое изображение прямо в абзац:
Посмотрите картинку — <IMG SRC="image.gif">
Во-вторых, если нам понадобится отобразить на Web-странице отдельное, не связанное ни с каким абзацем графическое изображение, нам придется поместить его в специально созданный абзац:
<IMG SRC="/images/picture.jpg">
Настала пора попрактиковаться. Найдем подходящий графический файл и поместим его в папку, где хранятся файлы нашего Web-сайта. Автор выбрал изображение значка @, хранящееся в файле image.gif. Разумеется, вы можете выбрать любой другой файл, но в этом случае не забудьте указать его имя в HTML-коде листинга 4.1.
Впишем в раздел тегов Web-страницы index.htm тег <IMG> и создадим описывающую его Web-страницу. Это будет третья Web-страница нашего Web-сайта.
HTML-код приведен в листинге 4.1.
Листинг 4.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег IMG</TITLE>
</HEAD>
<BODY>
<H1>Тег IMG</H1>
Тег IMG служит для вставки на Web-страницу графического изображения.
<H6>Пример:</H6>
<PRE><P><IMG SRC="image.gif"></P></PRE>
<H6>Результат:</H6>
<IMG SRC="image.gif">
</BODY>
</HTML>
Здесь предполагается, что графический файл, содержимое которого мы будем выводить на Web-страницу, имеет имя image.gif. Если у вас другое имя файла, соответственно исправьте HTML-код.
Сохраним новую Web-страницу в файле t_img.htm и сразу же откроем в Web-обозревателе (рис. 4.1). На этой Web-странице мы увидим код примера вида
<IMG SRC="image.gif"> а чуть ниже — результат его выполнения.
Рис. 4.1. Web-страница t_img.htm в Web-обозревателе
Как видим, ничего сложного в размещении изображения на Web-странице нет. Нужно только приготовить графический файл и вставить в HTML-код один простой тег.
А теперь рассмотрим еще один атрибут тега <IMG>, который может нам пригодиться в дальнейшем.
Поскольку изображение хранится в отдельном от Web-страницы файле, Web- обозревателю придется послать Web-серверу еще один запрос на его получение. Web-серверу нужно найти этот файл и отправить его Web-обозревателю. Файл должен загрузиться по сети. На все это требуется время. Если изображений на Web-странице много, все они велики по размеру,
а канал связи медленный, понадобится значительное время. Может случиться так, что сама Web-страница будет успешно загружена и отображена на экране, а изображения — еще нет. И Web-обозреватель вместо не загруженного еще изображения выведет на экран пустой прямоугольник.Возникают две проблемы. Во-первых, пустые прямоугольники вместо изображений выглядят некрасиво. Во-вторых, посетитель не сможет понять, что за изображение должно находиться вместо того или иного прямоугольника, и стоит ли ждать окончания его загрузки.
И если с первой проблемой справиться практически невозможно, то вторую мы вполне способны решить. Для этого тег <IMG> поддерживает необязательный атрибут ALT, с помощью которого указывается так называемый текст замены. Он будет отображаться в пустом прямоугольнике, обозначающем незагруженное изображение, пока это изображение не загрузится:
<IMG SRC="image.gif" ALT="Пример изображения">
Здесь мы задали для изображения с Web-страницы t_img.htm текст замены "Пример изображения".
НА ЗАМЕТКУ
Хорошим тоном Web-дизайна считается указание текста замены только у значащих изображений. У изображений, являющихся элементами оформления Web-страницы, текст замены обычно не указывают.
На этом пока все об интернет-графике. Мы еще вернемся к ней в главе 6, когда будем рассматривать изображения-гиперссылки и карты-изображения. А сейчас пора начать разговор о…
Мультимедиа
Мультимедиа — это, в первую очередь, аудио и видео. Мультимедиа в приложении к Web-дизайну — это аудио- и видеоролики, размещенные на Web-страницах.
До недавних пор разместить на Web-странице аудио- или видеоролик можно было только с помощью громадного HTML-кода, дополнительных программ и "шаманских плясок" вокруг всего этого. Но сейчас, с появлением HTML 5 и поддерживающих его (хотя бы частично) Web-обозревателей, потребуется всего один тег. Какой? Очень простой, не сложнее уже знакомого нам тега <IMG>!
ВНИМАНИЕ!
В этой книге будет рассматриваться работа с мультимедиа исключительно средствами HTML 5. Устаревшие способы (в частности, тег <OBJECT>) не описаны.
Форматы файлов и форматы кодирования
Форматов мультимедийных файлов существует не меньше, чем форматов файлов графических. Как и в случае с интернет-графикой, Web-обозреватели поддерживают далеко не все мультимедийные форматы, а только немногие. (Хотелось бы автору посмотреть на Web-обозреватель, который поддерживает все форматы файлов — и на сам Web-обозреватель, и на его размеры…)
Но Web-обозревателю мало поддерживать только сам формат мультимедийных файлов. Он должен быть "знаком" и с форматом кодирования записанной в нем аудио- и (или) видеоинформации. В мире мультимедиа так — разные файлы одного формата могут хранить информацию, закодированную разными форматами. Более того, аудио- и видеодорожки мультимедийного файла практически всегда кодируются разными форматами.
Практически все форматы кодирования мультимедийных данных поддерживают их сжатие. Благодаря этому размер мультимедийных файлов значительно (иногда на несколько порядков) уменьшается, что благотворно сказывается на скорости их передачи по сети.