Вы, наверное, давно ждёте этого урока, изнывая от всех этих тегов и элементов. Ну когда же можно будет навести красоту и поместить среди всех этих блоков текста, заголовков и таблиц потрясающую воображение картину, которая одна скажет зрителю всё лучше, чем десять тысяч чудесно структурированных гипертекстовых слов?! Что ж, ликуйте: вот вам элемент <IMG>. Элемент этот состоит только из открывающего тега. Главный его атрибут - src - задаёт имя файла изображения. Поскольку картинка - это не текст, сам по себе текстовый HTML-файл не может содержать в себе картинку. Он может только ссылаться на неё, т.е. иметь некоторую метку, говорящую браузеру, что "вот в этом месте должна быть вон та картинка".

Из этого следует, во-первых, что картинки лежат отдельно от HTML-файлов, а во-вторых, что атрибут src принимает значения, аналогичные значениям href атрибута <A>. Т.е. мы фактически ставим ссылку на изображение, а элемент <IMG> заставляет браузер самостоятельно "сходить" по этой ссылке, получить картинку и отобразить её в указанном месте нашего документа. Соответственно, всё, что было сказано относительно гиперссылок, справедливо и для изображений: адрес картинки может быть относительный или абсолютный.

Как вы знаете, изображения могут быть в формате GIF или jpg. Сейчас многие браузеры поддерживают также формат png, обладающий рядом замечательных свойств. Многие, но не все. Поэтому универсальными форматами веб-графики по-прежнему остаются GIF и jpg. Атрибут alt позволяет задать описание изображения. Значение этого атрибута больше, чем кажется. Изображение само по себе - это некий чуждый гипертексту элемент, менее универсальный: в отличие от текста, воспринять изображение можно только визуально. Соответственно, для невизуальных браузеров, а также различных автоматических систем, поисковых, например, содержание изображений остается тайной за семью печатями.

Мало того, в визуальных браузерах также есть возможность отключить показ графических элементов (с целью экономии времени или трафика -

объема скачиваемой информации). Тогда на месте изображений появляются прямоугольники с aft-текстом. Это позволяет нам продолжать пользоваться сайтом даже с отключенной графикой. Итак, атрибут alt позволяет создать "текстовую" версию изображения. Если на картинке изображен текст, то сам бог велел этот текст продублировать в атрибуте alt. Если что-то содержательное, то дать краткое описание этого содержания.

А вот если картинка выполняет чисто декоративную функцию, то alt-текст следует оставить пустым, не забивать страницу лишней информацией. Вряд ли слушателю звукового браузера будет интересно узнать, что между заголовком и картинкой располагается какая-то линеечка. У изображений имеются атрибуты width и height, задающие ширину и высоту изображения. Это может показаться странным, но значения этих атрибутов могут не совпадать с шириной и высотой самого изображения. И браузер худо-бедно растянет изображение под заданный формат (менее качественно, конечно, чем графический редактор, но растянет).

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

Это приводит к тому, что если эти атрибуты не заданы, то уже загруженный текст страницы "переверстывается" на ходу по мере загрузки картинок. Выглядит это, прямо скажем, не ахти. А в некоторых старых браузерах даже останавливалась дальнейшая загрузка текста, пока не с сервера не "приходило" изображение. В свете сказанного рекомендуется всегда явно указывать размеры всех изображений на странице.

Что касается умышленной деформации, то она позволяет делать некоторые фокусы. Например, в своё время дизайнер по имени Дэвид Сигель придумал т.н. "графическую распорку". Это изображение в формате GIF размером 1x1 пиксель, прозрачное. На странице такое изображение не видно. Теперь, вставляя в нужном месте документа это изображение и задавая ему нужный размер с помощью атрибутов width и height, мы можем точно управлять пустыми пространствами на нашей странице. Например, ячейка таблицы, в которую заключена такая "распорка" уже не сожмётся меньше размера этой распорки. С точки зрения содержания это, конечно, полный нонсенс, но до появления таблиц стилей распорки были вообще одним из основных механизмов управления размещением информации на странице: отступы, межстрочные интервалы и т.д., всё это имитировалось с помощью распорок.

Другой фокус: если нам нужно изобразить нечто вытянутое в одном из двух измерений, например, какую-нибудь тень, нам достаточно взять "сечение" этого предмета шириной 1 пиксель и вытянуть его с помощью атрибута width настолько, насколько нам нужно. При этом, как вы понимаете, мы существенно экономим на объеме графических файлов. Другие атрибуты изображения: hspace и vspace задают поле вокруг изображения. Соседняя с картинкой информация (текст или другие картинки) может прилегать к ней вплотную, а может отстоять на некоторое расстояние. Hspace задаёт это расстояние по горизонтали, а vspace - по вертикали. Особенно это актуально как раз при обтекании картинки текстом, поскольку текст, обтекающий картинку вплотную в большинстве случаев смотрится неудовлетворительно.

Теперь о самом этом обтекании. Задается оно атрибутом align. Вообще элемент <IMG> является текстовым и не начинает новой строки. Следующие за ним тексты или изображения по умолчанию примыкают к нему справа, но выравниваются по нижнему краю. Иногда такой вариант не подходит. С помощью атрибута align мы можем задать следующие варианты: bottom (это то, что мы имеем по умолчанию: текст выравнивается с изображением по нижнему краю), top (текст выравнивается по верху картинки), middle (текст выравнивается по центру картинки).

Пока об обтекании картинки текстом речи не идёт: вторая строка текста окажется под картинкой. Если же нам нужно встроить картинку в текст, то атрибут должен принять одно из значений left (картинка слева, текст обтекает её справа) или right (картинка выравнивается по правому краю, текст обтекает её слева). Обтекать картинку может не только текст, но и, например, другие изображения меньшего размера. Таким образом можно элегантно создавать конструкции, для которых, на первый взгляд, необходима таблица. Здесь же мы добиваемся того же эффекта без таблиц.

Здесь нам невредно будет вспомнить элемент <BR> с его атрибутом clear. Как вы помните, если мы поставим перенос строки в текст, обтекающий изображение (или даже два переноса), то перенос осуществится, но обтекание продолжится и с новой строки. С помощью атрибута clear мы можем прекратить обтекание и перенести новую строку под изображение, причем сделать это на выбор: только в случае, если текст обтекает картинку справа (clear=left), слева (clear=right) или в любом случае (clear=all). Относится это не только к тексту, но и к "обтекающим" изображениям.

Вначале мы говорили, что элемент <IMG> похож на элемент <A>. Ещё одно их сходство - это атрибут name. Правда, назначение этого атрибута в данном случае несколько иное: использовать его в качестве "пункта назначения" ссылки не получится, а нужен он для разных программистских нужд, для манипулирования изображением. Правда, атрибут этот несколько устарел, т.к. изображению, как и любому другому элементу, может быть присвоено имя с помощью универсального атрибута id. Атрибут border задает ширину рамки вокруг изображения. Атрибут, естественно, устаревший в пользу таблиц стилей, но тут есть одна тонкость: когда у нас в документе просто стоит изображение, его рамка по умолчанию равна нулю, и беспокоиться нам не о чем. Но вот если изображение является гиперссылкой, а это происходит довольно часто, то по умолчанию вокруг него появляется синяя рамка. Выглядит это обычно довольно несуразно. Соответственно, для изображений-ссылок, заключенных в элемент <A>, нам необходимо задать нулевую ширину рамки. Можно сделать это либо с помощью таблиц стилей, либо с помощью атрибута border, задав его значение равным нулю.

Теперь рассмотрим ещё один хитрый механизм. Как сделать изображение гиперссылкой, вы знаете, но можно, оказывается сделать гиперссылкой часть изображения, причём произвольной формы. И таких "частей" на одном изображении может быть несколько. Таким образом мы можем обойти прямоугольность картинки и сделать ссылки какой-то необычной формы. Делается это с помощью так называемых Image maps (карт изображений). Карты эти задаются отдельно от изображений с помощью специального элемента <MAP>. Элемент этот имеет обязательный атрибут name, по которому его сможет найти изображение. Закрывающий тег - обязателен.

Элемент <MAP> содержит элементы <AREA>, каждый из которых описывает одну из таких вот " чувствительных областей" изображения с помощью следующих атрибутов: shape - форма области. Может быть многоугольником (poly), прямоугольником (rect) или окружностью (circle). Coords - задает координаты области. Координаты эти, задаются в пикселях и, естественно, должны укладываться в размер изображения. Способ их задания зависит от формы области. Для прямоугольника это две пары координат: x и y верхнего левого угла и x и y правого нижнего угла.

В данном случае будет создана квадратная область размером 100х100 пикселей. Для окружности задаются координаты центра и радиус. В данном случае будет создана окружность радиусом 20 пикселей с центром в точке, отстоящей на 50 пикселей от верхнего края и на 50 - от левого. Ну а для многоугольника перечисляются через пробел координаты всех его точек. Следующий атрибут элемента <AREA> - href - полностью аналогичен атрибуту href гиперссылки, то есть задаёт собственно ссылку.

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

И, наконец, как всю эту чудовищную конструкцию присобачить теперь к изображению? Изображению этому нужно задать атрибут usemap, значением которого будет имя карты, заданное через атрибут name элемента <MAP>. И имя это должно предваряться решеткой. Вот и всё об элементе <IMG>, являющимся одним из основных инструментов веб-дизайнера. Осталось осветить ещё одну тему для продвинутых учеников. Вообще-то, изображения - это не единственный пример внешних данных, включаемых в HTML-документ. Таким же образом в наши странички могут встраиваться и другие виды информации, не являющейся гипертекстом.

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

Именно поэтому в последней версии HTML рекомендуется все подобные внешние файлы, в том числе и изображения, включать при помощи универсального элемента <OBJECT>. Этот элемент уже давно используется, например, для вставки fash-роликов, но использование его вместо элемента <IMG> пока что остается экзотикой.

Таблицы | TeachPro WEB-дизайн | Формы