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

Роль графики

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

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

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

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

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

Чтобы вставить изображение, нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

<IMG> – элемент для создания ссылки на графический файл (image). Он не содержит конечного тэга – вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т. д.

Необходимым атрибутом является SRC – указатель на графический файл:

SRC ="Ссылка на файл".

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящееся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на «подходе», пользователь должен видеть, какие изображения он сможет получить.

Пример

<HTML>

<HEAD>

<TITLE>Вставка изображения</title>

</head>

<BODY>

</body>

</html>

Встретив такую метку, браузер покажет на экране текст “Картинка” и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).

Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае необходимо указать его полное имя (путь в файлу):

Можно использовать атрибуты выравнивания:

align ="bottom" — по нижнему краю;

align ="left" —влево;

align ="middle" —по центру;

align ="right" —вправо;

align ="top" — по верхнему краю.

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов height - высота и width - ширина. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции.

Таким образом, применение только одного из атрибутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным размером. Масштабирование, как правило, ухудшает качество изображения.

Например, реальный размер рисунка 76x121 пикселов. Напишем два варианта отображения данного рисунка.

Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет пропорционально изменена автоматически) При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.

Атрибут border – задает рамку вокруг объекта. border="2" ширина рамки задается в пикселях. При наличии тегов hspace и vspace вокруг картинки образуется отступ в соответствующее количество пикселей от текста.

hspace = Число пикселов	Пустое пространство справа и слева от рисунка
vspace = Число пикселов	Пустое пространство выше и ниже рисунка

Полностью тэг img может выглядеть следующим образом:

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: