Графические файлы

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. gif содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят. Поэтому, если не брать во внимание пользователей устаревшими программами, пинги вполне можно включать в свои страницы. Чтобы включить в страницу рисунок, надо описать ссылку на него:

где SRC (от source -источник)=Image -файл в формате gif, jpg или png , содержащий рисунок.

Вы можете задавать взаимное расположение рисунка и текста включением атрибута align = " ":

это выравнивание - по нижнему краю (делается browser по умолчанию) <img src="Image.gif">

это выравнивание по верхнему краю. <img src="Image.gif" align="top">

Возможны следующие типы выравнивания:

align = "middle" - относительно центра строки

align = "left" -текст обтекает картинку справа

align = "right"- то же слева (см.ниже)

Чтобы сделать рисунок по центру экрана расположите картинку между тегами <center> ... </center>

Также в картинках используется задание размеров. С их помощью, не дожидаясь полной загрузки изображений, браузер расположит все объекты с расчетом занятого пространства. В противном случае, браузер динамически будет изменять внешний вид страницы, до загрузки последней картинки. (Текст в это время будет постоянно уползать от пользователя, что согласитесь, не есть гуд.) Сотворить сее диво можно при помощи параметров WIDTH="n" и HEIGHT="n".(соответственно ширина и высота в пикселах) При несовпадении размеров, картинка все равно будет растянута или сжата до указанного этими параметрами.

При использовании выравнивания left или right можно включить в тег img дополнительный параметр отступа вокруг изображения, чтоб картинка не прижималась вплотную к Вашему тексту. Параметр VSPACE="n" - создает отступ по вертикали, а HSPACE="n" - по горизонтали на n пиксел. Таким образом, правильно написанный тег картинки с обтекающим справа текстом будет выглядеть так:

<img src="lego.gif" align="left" width="96" height="90" vspace="10" hspace="35" alt="Новый пример" border="1"> Text.

Последний параметр- ширина бордюра. Если он присутствует без значения, а просто в виде слова BORDER то бордюр нарисуется браузером по собственному желанию, а если как в примере, то значение обозначает его ширину. Нулевое значение этого параметра используется если файл служит графической гиперссылкой, для ее маскировки.

Примечания:

1.Золотое правило web-мастера - всегда явно задавать размеры картинки в параметрах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно.

2.Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT

3.ВСЕГДА сразу после <IMG ...> ставьте <BR>!!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <img ...><br>. Увижу что сделали иначе - лично пристрелю!

4.Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR.

5.Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.

6.Указывайте значения параметров HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

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