Размещение графических изображений

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

Чтобы грамотно создавать изображения и правильно их использовать при Web — проектировании, нужно знать несколько основных приемов, используемых в этой технологии.

До недавнего времени в World Wide Web были наиболее распространены только два формата графических файлов — GIF  и  JPG. Теперь все большую заслуженную популярность получает сравнительно новый вид формата -PNG.

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

Каждый из приведённых форматов обладает своими недостатками и преимуществами, например качество изображений формата PNG выше, чем в GIF, но к сожалению, некоторые старые версии браузеров не поддерживают PNG формат. Иногда необходимо преобразовывать графические изображения одного формата в другой, например, для уменьшения размера файла.

Web — страницы можно рассматривать как многоуровневые слои. Так как графическое изображение может быть размещено на одном уровне с текстовым объектом , следует установить определённые правила сосуществования на одной  Web — странице текста и графики. Это значит, что для изображений обязательно нужно задавать правильные размеры, параметры обтекания графики текстом, рамки вокруг изображения и т.д.

У дескриптора изображения нет закрывающего дескриптора.

<img src=»roma.jpg»>

<img src=»roma.gif»>

<img src=»roma.png»>

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

Чтобы создать альтернативный текст, используются дескриптор <img> с обязательным атрибутом src плюс alt.  Значение атрибута alt и указывает текст, который будет отображаться в качестве всплывающей подсказки либо отображаться рядом с пиктограммой графического изображения.

Например:

<img src=» roma.jpg» alt=»Цветы»>
Вот как это выглядит.(В нашем случае мы не стали загружать файл, но при загрузке файла и при наведении мышки на это изображение — выражение «Цветы» будит появляться.)