Вставка графических изображений

Вставка графических изображений

Добавить на Web-страницу графическое изображение позволяет одинарный тег <IMG>. Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег <IMG>.

В главе 1 мы говорили об атрибутах тегов HTML, после чего надолго о них забыли. Сейчас настала пора о них вспомнить, т. к. сила тега <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-сайта.

НА ЗАМЕТКУ

Принципы формирования интернет-адресов файлов, применяемые в WWW, мы подробно рассмотрим в главе 6.

Мы уже знаем о том, что элементы Web-страницы могут быть блочными и встроенными. Так вот, изображение, помещенное на Web-страницу с помощью тега <IMG>, — встроенный элемент. Это значит, что он не может "гулять сам по себе", а должен быть частью блочного элемента, например, абзаца.

Из этого следуют два важных вывода.

Во-первых, мы можем вставить графическое изображение прямо в абзац:

<P>Посмотрите картинку — <IMG SRC="image.gif"></P>

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

<P><IMG SRC="/images/picture.jpg"></P>

Настала пора попрактиковаться. Найдем подходящий графический файл и поместим его в папку, где хранятся файлы нашего 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>

<P>Тег IMG служит для вставки на Web-страницу графического изображения.</P>

<H6>Пример:</H6>

<PRE>&lt;P&gt;&lt;IMG SRC=&quot;image.gif&quot;&gt;&lt;/P&gt;</PRE>

<H6>Результат:</H6>

<P><IMG SRC="image.gif"></P>

</BODY>

</HTML>

Здесь предполагается, что графический файл, содержимое которого мы будем вы- водить на Web-страницу, имеет имя image.gif. Если у вас другое имя файла, соответственно исправьте HTML-код.

Сохраним новую Web-страницу в файле t_img.htm и сразу же откроем в Web-обозревателе (рис. 4.1). На этой Web-странице мы увидим код примера вида

<P><IMG SRC="image.gif"></P> а чуть ниже — результат его выполнения.

Рис. 4.1. Web-страница t_img.htm в Web-обозревателе

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

А теперь рассмотрим еще один атрибут тега <IMG>, который может нам пригодиться в дальнейшем.

Поскольку изображение хранится в отдельном от Web-страницы файле, Web- обозревателю придется послать Web-серверу еще один запрос на его получение. Web-серверу нужно найти этот файл и отправить его Web-обозревателю. Файл должен загрузиться по сети. На все это требуется время. Если изображений на Web-странице много, все они велики по размеру, а канал связи медленный, понадобится значительное время. Может случиться так, что сама Web-страница будет успешно загружена и отображена на экране, а изображения — еще нет. И Web-обозреватель вместо не загруженного еще изображения выведет на экран пустой прямоугольник.

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

И если с первой проблемой справиться практически невозможно, то вторую мы вполне способны решить. Для этого тег <IMG> поддерживает необязательный атрибут ALT, с помощью которого указывается так называемый текст замены. Он будет отображаться в пустом прямоугольнике, обозначающем незагруженное изображение, пока это изображение не загрузится:

<P><IMG SRC="image.gif" ALT="Пример изображения"></P>

Здесь мы задали для изображения с Web-страницы t_img.htm текст замены "Пример изображения".

НА ЗАМЕТКУ

Хорошим тоном Web-дизайна считается указание текста замены только у значащих изображений. У изображений, являющихся элементами оформления Web-страницы, текст замены обычно не указывают.

На этом пока все об интернет-графике. Мы еще вернемся к ней в главе 6, когда будем рассматривать изображения-гиперссылки и карты-изображения. А сейчас пора начать разговор о…

Данный текст является ознакомительным фрагментом.



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

Похожие главы из других книг:

Вставка изображений

Из книги автора

Вставка изображений Напомним, что для вставки изображений в языке HTML используется тег


Вставка гиперссылок и графических изображений

Из книги автора

Вставка гиперссылок и графических изображений Выше мы уже неоднократно отмечали, что одним из главных элементов любой веб-страницы является гиперссылка. В программе HtmlPad процесс создания гиперссылок автоматизирован: для этого нужно на вкладке HTML/Текст


Вставка в веб-документ графических объектов

Из книги автора

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


Вставка графических объектов

Из книги автора

Вставка графических объектов В данном разделе мы рассмотрим, каким образом в веб-документ можно вставить изображение, картинку или иной графический объект. Отметим, что возможности программы предусматривают вставку графических объектов тремя способами. Первый


Вставка графических изображений

Из книги автора

Вставка графических изображений Добавить на Web-страницу графическое изображение позволяет одинарный тег <IMG>. Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег <IMG>.В главе 1 мы говорили об атрибутах тегов HTML, после чего надолго о


5.5.6. Менеджер графических тем Emerald

Из книги автора

5.5.6. Менеджер графических тем Emerald Для Compiz был разработан собственный менеджер графических тем Emerald, запустить который можно с помощью команды меню Система?Параметры?Emerald Theme Manager (рис. 5.45). Рис. 5.44. Куб рабочих столов Рис. 5.45. Менеджер графических тем EmeraldПеред тем как


Вставка графических изображений

Из книги автора

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


6.2. Вставка изображений в документ

Из книги автора

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


Форматы графических файлов

Из книги автора

Форматы графических файлов Любое графическое изображение независимо от того, векторное оно или растровое, может храниться в компьютере исключительно за счет записывания его в отдельный файл. Каждый файл всегда имеет какой-то определенный формат.Формат указывает на то,


Форматы графических файлов

Из книги автора

Форматы графических файлов Формат – это способ записи изображения в виде файла. Существует довольно много форматов графических файлов, однако в большинстве случаев используется всего несколько. Каждый из них имеет характерные особенности, поэтому мы рекомендуем


Вставка изображений

Из книги автора

Вставка изображений Инструментарий ArchiCAD, предназначенный для визуализации разрабатываемого проекта, не ограничивается рассмотренными механизмами автоматического или интерактивного создания видов. Часто в проект требуется поместить уже готовые изображения, причем


Вставка и редактирование изображений

Из книги автора

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


Вставка изображений

Из книги автора

Вставка изображений Обмен данными между программами – отдельный, очень важный и достаточно сложный вопрос. ArchiCAD, естественно, имеет инструменты такого обмена, но рассмотрение этих возможностей выходит за рамки данной книги. Мы опишем только возможность вставки


Конверторы графических файлов

Из книги автора

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


Соглашения о графических обозначениях

Из книги автора

Соглашения о графических обозначениях Сейчас можно полностью объяснить графические символы, использованные на рис. 14.8. Звездочкой отмечаются отложенные компоненты или классы:FIGURE*display*perimeter* -- На уровне класса OPEN_FIGURE на рис. 14.8Знак плюс означает "эффективный" и им


Урок 5.8. Вставка графических объектов в документ

Из книги автора

Урок 5.8. Вставка графических объектов в документ Кроме автофигур в документы Word 2007 можно вставлять и другие графические объекты: рисунки из файлов, картинки из коллекции, диаграммы, фигурный текст, формулы и т. д. Особенности работы с этими объектами мы рассмотрим в этом