HTML от А до Я / Графика |
||
Как я уже говорил в теле HTML есть только ссылки на графику. Графические объекты тоже могут играть роль управляющих ссылок. Но обо всем по порядку.
В интернете получили широкое распространение 2 основных графических формата, в основном благодаря повсеместной поддержке любыми броузерами:
- GIF (тип файла .gif) - 8-разрядный графический формат. Применяется в основном для рукотворных рисунков так как имеет всего 256 цветов (необязательно стандартной палитры). Может иметь прозрачный фон. А так же может анимироваться.
- JPEG (тип файла .jpeg или .jpg) - 16-разрядный формат. Применяется для передачи сложных изображений (например фотографий). Качество изображения настраивается в графических редакторах и в HTML-документах, чем выше качество, тем больше размер файла.
- PNG (тип файла .png) - 32-разрядный формат. Может применяться для передачи любых изображений, обычно имеет меньший размер при более высоком качестве чем JPEG. Если изображение небольшого размера, то размер файла соизмерим с GIF, при росте размеров рисунка размер файла обгоняет подобный GIF, но качество у PNG гораздо выше. Внедрять палитру в рисунок не требуется, поскольку он использует стандартную High Color или True Color таблицы Windows. Для задания прозрачного фона можно создать и сохранить в рисунке Альфа-канал. Это что-то вроде маски, создаваемой в графическом редакторе, определяющей ряд цветов, считающихся невидимыми.
Поддерживаются и другие форматы (BMP, TIF, WMF), но они редко применяются в интернете из-за не очень хорошего соотношения "качество-размер файла" и несовместимости с некоторыми броузерами.
Все эти графические форматы поддерживаются в той или иной мере стандартным графическим редактором в Windows, Paint.
Internet Explorer (и Netscape Navigator последних версий) поддерживает видеоклип .avi (загружается параметром "dynsrc" вместо "src"). Кроме того эти броузеры могут поддерживать любые другие форматы и объекты благодаря поддержке тэгов подобных <object>, технология формата будет загружена в plug-in броузера из интернета, если формат не поддерживается. Вам на этом сейчас не нужно акцентировать внимание, но для общего развития не помешает. Например Flash-анимация изначально не поддерживается даже Internet Explorer 5, но если вы загрузите в этот броузер документ, содержащий Flash, то броузер обратится к секции системного реестра, указанного в тэге <object>, если секция не найдена то к "материнскому" серверу (microsoft.com), оттуда будет предложено скачать plug-in Macromedia Flash. Если Вы разрешите сделать это, то к IE будет подключен плагин Macromedia Flash Player и все документы с Flash-анимацией теперь будут отображаться как задумано создателями. В системном реестре Windows появится соответствующая секция, содержащая методы Flash Player.Тег рисунков <img> с обязательным параметром "src", где указывается файл рисунка. Здесь действуют те же правила, что и для управляющих ссылок. Тег рисунков не имеет окончания, все ограничивается его параметрами. Можно задать размер рисунка параметрами "width" (по горизонтали) и "height" (по вертикали). В качестве значения может быть любая цифра, тогда размер задается в пикселях. Если после цифры стоит знак "%", то размер задается в процентах от размера окна броузера.
Еще полезен параметр "alt". В качестве его значения задается текст, который будет виден при загрузке рисунка (или если он не сможет быть загружен). В современных броузерах при подведении указателя мыши к рисунку с указанным параметром "alt" появляется всплывающая подсказка со значением этого параметра (своего рода хинт).
Например рассмотрим рисунок в трех представлениях:
 |
<img src="PILLS.JPG" alt="Рука с таблеткой"> так загружен рисунок в своем реальном представлении. |
|
<img src="PILLS.JPG" alt="Рука с таблеткой" width="108" height="162"> так загружен рисунок уменьшенный до размеров 108х162 пикселя. |
|
<img src="PILLS.JPG" alt="Рука с таблеткой" width="50%" height="50%"> а вот так он изменен до размеров 50% от окна броузера (в данном случае от ширины ячейки таблицы). |
Параметр "align" указывает положение рисунка относительно текста. Он имеет следующие значения:
- middle-посередине
- top-сверху
- absbottom-внизу
- absmiddle-на самой середине
- texttop-наверху
- baseline-на основной линии
- left-слева
- right-справа
Если вы хотите чтобы при клике на рисунок загружался другой HTML-документ, то вставте тег рисунка в тег <a>.
Остальные параметры тега <img> смотрите в списке основных тегов.