В HTML предусмотрен целый ряд возможностей для работы с мультимедиа. Это встраивание графики и использование звуков, применение анимационных роликов и видеофильмов. Применение мультимедийных возможностей является далеко не последним аргументом в борьбе за привлечение новых пользователей web-сайта, в то же время при использовании мультимедиа необходимо соблюдать чувство меры. Хорошо оформленная web-страница позволит привлечь и удержать внимание посетителей, в то же время чрезмерное увлечение изображениями, звуковыми эффектами и т.п. может затруднить просмотр страницы (при медленных каналах связи) или отпугнуть чересчур навязчивыми мелодиями.
В общем случае при использовании мультимедиа на web-страницах желательно придерживаться следующих правил: оформление сайта должно соответствовать его содержанию, применение графики и мультимедиа должно упрощать навигацию по сайту, должна быть предусмотрена возможность работы с web-страницей для медленных каналов связи (замещающие надписи, дублирующие текстовые меню или специальные текстовые варианты страницы).
В рамках данного курса будут рассмотрены возможности HTML по использованию изображений на web-страницах.
<html> <body> <p> Изображение: <img src="logo.gif" width="285" height="52"> </p> <p> Динамическое изображение: <img src="100x100_4.gif" width="100" height="100"> </p> <p> Обратите внимание, что синтаксис вставки динамического изображения не отличается от синтаксиса для обычного изображения. </p> </body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как вывести изображения на Web-странице.
<html> <body> <p> Изображение из другой папки: <img src="/img/dvd.jpg" width="160" height="237"> </p> <p> Изображение с сайта ИНТУИТ: <img src="http://www.intuit.ru/img/logo.gif" width="285" height="52"> </p> </body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как вывести на своей Web-странице изображение из другой папки или с другого сервера.
Изначально HTML поддерживал работу с двумя графическими форматами: GIF и JPEG, в последнее время все большее распространения находит формат PNG. Каждый из форматов имеет свои достоинства и недостатки, которые определяют область его применения.
Формат GIF был разработан коммерческой Online-службой
В то же время формат GIF обладает рядом свойств, определивших его широкое применение при разработке Web-страниц:
Область применения GIF-файлов ограничивается и применяемым алгоритмом сжатия изображений, чья эффективность зависит от разнообразия цветов в изображении, наличия одноцветных областей. Наибольшую экономию объема файла дают изображения с небольшим количеством цветов и большими одноцветными областями. Поэтому формат GIF широко используется для отображения графических меню и кнопок, а также для создания технических иллюстраций (графики, схемы, диаграммы и т.п.). В то же время использование формата GIF для отображения полноцветных фотографий практически не находит применения по причине малого количества передаваемых цветов и низкой эффективности алгоритма сжатия для таких изображений.
Формат JPEG был разработан для передачи фотографий между различными платформами. Благодаря поддержке 24-битовой цветовой палитры (миллионы цветов) формат JPEG получил широкое распространение для отображения иллюстраций высокого качества. При этом применяемый в JPEG алгоритм сжатия позволяет варьировать размер загружаемого файла в зависимости от требуемого качества отображения иллюстрации.
Кроме того, формат JPEG поддерживает опцию "прогрессивный" JPEG, которая во многом похожа со свойством чередования строк формата GIF, но реализована на совершенно других принципах. В файл JPEG записывается несколько иллюстраций полного размера, но различного уровня качества. Сначала отображается рисунок низкого качества (и, соответственно, малого объема), затем догружаются все более качественные изображения. При этом общий объем загружаемого файла возрастает несущественно по сравнению с оригинальным JPEG.
В последнее время все большее распространение получает формат PNG, который был разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества.
Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм черезстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения.
Кроме того, в PNG реализован эффективный механизм контроля
Для размещения изображений в HTML используется тег <img> с использованием обязательного атрибута src (от source – источник), который указывает URL-адрес загружаемого файла с изображением.
Синтаксис определения изображения:
<img src="url">
URL указывает на то место, где хранится изображение. В следующем примере на Web-странице выводится изображение логотипа интернет университета информационных технологий, расположенное в каталоге "img" на сервере "www.intuit.ru" (URL: http://www.intuit.ru/img/logo.gif).
<html> <body> <img src="http://www.intuit.ru/img/logo.gif"> </body> </html>
Пример выполнения данного HTML-кода
Браузер размещает изображение там, где в документе появляется тег <img>. Если разместить тег <img> между двумя параграфами, то браузер покажет первый параграф, затем изображение, а затем второй параграф.
<html> <body> <p>Первый параграф</p> <img src="http://www.intuit.ru/img/logo.gif"> <P>Второй параграф</p> </body> </html>
Пример выполнения данного HTML-кода
Если же разместить тег <img> внутри параграфа, то изображение будет отображено в одной строке с текстом.
<html> <body> <p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif"> размещено прямо внутри параграфа</p> </body> </html>
Пример выполнения данного HTML-кода
Формат изображения, его расположение и ряд других параметров задается при помощи атрибутов тега <img>.
Для выравнивания изображений используется атрибут align.
align=top – изображение выравнивается по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике;align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику;align=right – то же что и для left, только изображение смещается к правой части рабочей зоны.Следующий пример показывает различные варианты выравнивания изображений в тексте.
<html> <body> <p>Изображение выравнено по верху <img src="http://www.intuit.ru/img/logo.gif" align="top"> при помощи align="top"</p> <p>Значение "middle" атрибута align <img src="http://www.intuit.ru/img/logo.gif" align="middle"> центрирует изображение по вертикали</p> <p>Выравнивание изображения по нижнему краю <img src="http://www.intuit.ru/img/logo.gif" align="bottom"> (align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).</p> <p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif" align="left"> смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок. При таком способе выравнивания желательно помещать изображение в начале параграфа.</p> <p><img src="http://www.intuit.ru/img/logo.gif" align="right"> Изображение прижато к правому краю рабочей области (align="right"). Текст занимает все свободное пространство слева от изображения обтекая его.</p> </body> </html>
Пример выполнения данного HTML-кода
Кроме того, для форматирования изображений внутри текста используются атрибуты hspace и vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.
<html> <body> <p><img src="logo.gif" align="left"> В данном варианте используются установленные по умолчанию значения hspace и vspace. Изображение выравнено по левому краю при помощи align="left".</p> <p><img src="logo.gif" align="left" hspace="20" vspace="20"> В данном варианте значения hspace и vspace установлены равными 20. Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, сколько на величину свободной зоны вокруг изображения вообще. В данном случае изображение сместилось вправо вниз. </p> <p>Примечание: Для лучшего понимания работы атрибутов hspace и vspace в данном примере уменьшите размер окна Вашего браузера. </p> </body> </html>
Изображение в HTML может быть обрамлено прямоугольной рамкой. Для этого используется атрибут border, который задает ширину рамки вокруг изображения в пикселях.
<html> <body> <p><img src="logo.gif" align="left"> Изображение без рамки (по умолчанию для простых графических изображений).</p> <p><img src="logo.gif" align="left" border="5"> В данном варианте толщина рамки установлена в 5 пикселей. </p> </body> </html>
Пример выполнения данного HTML-кода
По умолчанию для простых изображений толщина рамки устанавливается равной нулю (отображаются без рамки). В противоположность этому для изображений, являющихся гиперссылками, по умолчанию устанавливается рамка толщиной 2 пикселя.
<html> <body> <p><a href="http://www.intuit.ru"><img src="logo.gif" align="left"></a> Несмотря на то, что значение border не задано, изображение-гиперссылка выводится обрамленным рамкой шириной 2 пикселя (значение по умолчанию)</p> <p><a href="http://www.intuit.ru"><img src="logo.gif" align="left" border="0"></a> В данном варианте рамка вокруг гиперссылки убрана благодаря принудительному присвоению параметру border нулевой толщины. </p> </body> </html>
Пример выполнения данного HTML-кода
В последнее время атрибут border при разработке Web-сайтов в подавляющем большинстве случаев используется именно для отмены рамки вокруг изображения-гиперссылки.
По умолчанию изображение отображается в браузере с сохранением своих исходных размеров и пропорций. При этом, если изображение превышает размер окна браузера, то оно может либо автоматически уменьшится до размера окна, либо предоставить возможность просмотра по частям с использованием полос прокрутки.
При помощи атрибутов height и width (высота и ширина, соответственно) можно задать размеры отображения графического файла на Web-странице.
<html> <body> В первом случае изображение выводится с сохранением своих исходных размеров (253*190 пикселей). <br> <img src="photo.png"> <br> Во втором варианте высота изображения уменьшена до 100 пикселей. Обратите внимание, хотя явно задан только атрибут height, браузер автоматически отмасштабировал изображение и по ширине с сохранением исходных пропорций. <br> <img src="photo.png" height="100"> <br> В третьем варианте принудительно заданы оба атрибута, при этом высота уменьшена до 100 пикселей, а ширина оставлена на прежнем уровне. В этом случае автоматического масштабирования не производится, и изображение сжимается по вертикали. <br> <img src="photo.png" height="100" width="253"> </body> </html>
Пример выполнения данного HTML-кода
Автоматическое масштабирование с заданием только одного из атрибутов довольно часто используется при необходимости вывода изображений различного формата в столбец (при этом для всех изображений задается одинаковым атрибут width ) или в строку друг за другом ( height ).
Значение атрибутов height и width задается не только в пикселях, но и в процентах. Но в этом случае речь идет о выделенной под размещение изображения области. Это может быть все окно браузера или ячейка таблицы.
<html> <body> Ширина изображения в данном примере задана равной 100%. Изменяя размер окна браузера можно заметить, как изображение автоматически масштабируется, занимая всю ширину окна. <br> <img src="photo.png" width="100%"> <br> </body> </html>
Пример выполнения данного HTML-кода
Необходимо отметить, что при задании значений атрибутов height и width в процентах используется тот же принцип масштабируемости, что и для значений в пикселях. При задании одного атрибута значение второго автоматически пересчитывается исходя из сохранения пропорции. При задании значений обоих атрибутов условие сохранения пропорций не соблюдается.
При размещении изображений на Web-странице желательно придерживаться следующих рекомендации:
height и width. В этом случае браузер еще до полной загрузки изображения получает информацию о его размерах и заранее резервирует место, благодаря чему весь текст на странице может быть размещен и отформатирован еще до загрузки изображений.Можно пояснить эти рекомендации на следующем примере.
<html> <body> В первом варианте в качестве изображения-иконки используется большое изображение, размер которого изменен при помощи атрибутов width и height. При нажатии на него исходная фотография будет отображена в полный размер. <br> <a href="photo_big.png"><img src="photo_big.png" width="80" height="60" border="0"></a> <br> Во втором варианте в качестве изображения-иконки используется специально подготовленное малое изображение, значения атрибутов width и height заданы для обеспечения правильного форматирования Web-страницы на этапе частичной загрузки. <br> <a href="photo_big.png"><img src="photo_small.png" width="80" height="60" border="0"></a> <br> Несмотря на то, что оба этих варианта с внешней точки зрения практически идентичны, во втором варианте объем загружаемой информации значительно ниже. Так объем большого изображения "photo_big.png" составляет более 1 Мб, в то время как "photo_small.png" - только 14 Кб. <br> Очевидно, что при малой скорости подключения в Интернет пользователь может просто не дождаться конца загрузки страницы. </body> </html>
Пример выполнения данного HTML-кода
В ряде случаев графическое изображение на Web-странице не может быть отражено. Это может происходить при просмотре страниц с использованием текстовых браузеров, при запрете на отображение графики в целях увеличения скорости загрузки и снижения расходов на Интернет, а также в ряде других случаев. При этом смысл страницы может быть существенно искажен, а при использовании графических меню и кнопок навигация по сайту будет значительна затруднена. Во избежание этого в HTML используется атрибут alt, который задает цепочку символов (максимальная длина 1024 символа), отображаемую в браузере вместо изображения и в произвольной форме описывающую его (заменяющий текст).
Следующий пример демонстрирует синтаксис применения атрибута alt.
<html> <body> <img src="logo.gif" width="285" height="52" alt="Логотип Интуита"> <br> Для демонстрации работы атрибута alt необходимо в свойствах обозревателя запретить использование графики на странице. <br> Обратите внимание, что даже при отображенной графике замещающий текст появляется на экране при наведении указателя мыши на изображение. Благодаря этому атрибут alt можно использовать и в качестве своеобразной подписи к рисунку. </body> </html>
Пример выполнения данного HTML-кода
Использование атрибута alt считается признаком хорошего HTML-тона, так как это позволяет улучшить вывод и полезность документа для людей, который используют браузеры только для вывода текста. Кроме того, использование атрибута ALT можно считать обязательным для графических ссылок. В следующем примере приведен фрагмент графического меню. В примере специально даются ссылки на несуществующие графические файлы (отпадает необходимость запрета на отображение рисунков браузером для понимания работы примера).
<html> <body> В первом варианте атрибут alt не используется, пользователь видит перед собой три прямоугольника, о назначении которых он может только догадываться. <hr> <img src="home.gif" width="80" height="30"> <img src="mail.gif" width="80" height="30"> <img src="map.gif" width="80" height="30"> <hr> <br> Использование атрибута alt во втором варианте позволяет эффективно использовать ссылки меню и в отсутствие изображений. <hr> <img src="home.gif" width="80" height="30" alt="На главную страницу"> <img src="mail.gif" width="80" height="30" alt="Отправить письмо"> <img src="map.gif" width="80" height="30" alt="Карта сайта"><br> <hr> </body> </html>
Наряду с использованием изображений в качестве иллюстраций к тексту или элементов оформления Web-страницы, в HTML предусмотрена возможность создания карт изображений (imagemap), отдельные области которого могут являться гиперссылками на другие разделы или страницы Web-сайта. В общем виде это соответствует использованию изображения в качестве гиперссылки с тем отличием, что на одной карте изображений можно создать несколько несовпадающих областей, и соответственно, гиперссылок.
Применение таких карт изображений удобно для создания географических справочных систем, путеводителей, карт погоды. Также карты изображений находят широкое применение при создании сложных графических меню.
В HTML предусмотрены два варианта обработки карт изображений: обработка карты изображения непосредственно браузером и передача на сервер координат указателя мыши для дальнейшей обработки.
Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemap тега <img>:
<img src="figure_1.png" usemap="#coordinates">
Где "figure_1.png" - имя файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области.
Координатные области карты изображений определяются при помощи тегов <map> и <area>.
Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coords и href.
Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect" - прямоугольник. Также область может быть описана в форме окружности ( shape="circle" ) или многоугольника ( shape="poly" ).
Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly" последовательно указываются координаты вершин многоугольника.
Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.
Заданные при помощи тегов <area> координатные области изображения ограничиваются при помощи тегов <map> - </map>.
В следующем примере задана карта изображений, на которой в соответствии с изображением выделены прямоугольная, круглая и треугольная координатная области.
<html> <body> <img src="figure_1.png" width="297" height="210" border="0" alt="Карта изображений" usemap="#coordinates"> <map name="coordinates"> <area shape="rect" coords="130,194,270,130" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="73,90,40" href="circle.html" alt="Круг"> <area shape="poly" coords="168,109,280,109,223,13" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>
Пример выполнения данного HTML-кода
Для корректной работы следующего примера необходимо создать в рабочей папке файлы rect.html, circle.html, polygon.html. Например, файл rect.html:
<html> <body> Вы выбрали прямоугольник </body> </html>
Обратите внимание, что атрибут alt (заменяющий текст) может использоваться как для всего изображения, так и для каждой его области.
В следующем примере координатные области пересекаются, обратите внимание, что для карт изображений действует принцип, согласно которому при пересечении двух или более координатных областей активной будет область, описанная первой. В данном примере есть определенное несоответствие, при щелчке мышью на окружности в области пересечения ее с прямоугольником загрузится файл rect.html.
<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="rect" coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>
Пример выполнения данного HTML-кода
В следующем примере порядок описания координатных областей приведен в соответствие с изображением на экране.
<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> <area shape="rect" coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> </map> </body> </html>
Пример выполнения данного HTML-кода
Карты изображений, обрабатываемые на сервере, описываются с помощью атрибута ismap тега <img>, располагающегося между тегами <a> - </a>, например:
<a href="tryhtml_ismap.htm"> <img src="figure_1.png" ismap> </a>
Где "tryhtml_ismap.htm" – файл на сервере, описывающий координатные области изображения.
При использовании серверной обработки карт изображений на сервер передаются координаты курсора относительно изображения. В следующем примере при перемещении курсора по поверхности изображения в строке состояния вместе с именем файла обработчика отображаются координаты курсора.
<html> <body> <a href="tryhtml_ismap.htm"> <img src="figure_1.png" width="297" height="210" border="0" alt="Карта изображений" ismap> </a> </body> </html>
Пример выполнения данного HTML-кода
Работая с картами изображений необходимо помнить, что при отключении отображения графики (например, при плохих каналах связи) работа с ними практически невозможна. При помощи атрибутов alt можно задать имена выделенным областям, но ориентироваться по такой карте изображений будет достаточно трудно, поэтому необходимо использовать карты изображения только в тех случаях, когда их присутствие целесообразно, например, в географических справочных системах, учебных системах, где необходима наглядность, и т.п. В этом случае признаком хорошего тона считается создание текстового меню, дублирующего ссылки на карте изображении.
Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений, отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента web-страницы (или страницы целиком), затем на ней размечаются прямоугольные области, соответствующие отдельным подэлементам страницы (кнопка меню, меню целиком и т.п.), в соответствии с которыми производится нарезка изображения. Следующий пример демонстрирует способ создания графического меню.
<html>
<body>
<table cellpadding='0' cellspacing='0'>
<tr><td><a href=""><img src="menu-1.png" border="0"
alt="Новости"></a></td></tr>
<tr><td><a href=""><img src="menu-2.png" border="0" alt="О
компании"></a></td></tr>
<tr><td><a href=""><img src="menu-3.png" border="0"
alt="Услуги"></a></td></tr>
<tr><td><a href=""><img src="menu-4.png" border="0" alt="Прайс-
лист"></a></td></tr>
<tr><td><a href=""><img src="menu-5.png" border="0"
alt="Контакты"></a></td></tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Чтобы понять, как нарезано изображение, достаточно при отображении таблицы установить параметр border:
<html> <body> <table cellpadding='0' cellspacing='0' border> <tr><td><a href=""><img src="menu-1.png" border="0" alt="Новости"></a></td></tr> <tr><td><a href=""><img src="menu-2.png" border="0" alt="О компании"></a></td></tr> <tr><td><a href=""><img src="menu-3.png" border="0" alt="Услуги"></a></td></tr> <tr><td><a href=""><img src="menu-4.png" border="0" alt="Прайс-лист"></a></td></tr> <tr><td><a href=""><img src="menu-5.png" border="0" alt="Контакты"></a></td></tr> </table> </body> </html>
Пример выполнения данного HTML-кода
<html>
<body>
<table cellpadding='0' cellspacing='0'>
<tr>
<td colspan="2"><img src="top.png"></td></tr>
<tr>
<td>
<table cellpadding='0' cellspacing='0'>
<tr>
<td><a href=""><img src="left-1.png" border="0" alt="Интернет"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-2.png" border="0" alt="Электронная почта"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-3.png" border="0" alt="EmEditor"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-4.png" border="0" alt="Photoshop"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-5.png" border="0" alt="Word"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-6.png" border="0" alt="SQL Manager"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-7.png" border="0" alt="Excel"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-8.png" border="0" alt="ImageReady"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-9.png" border="0" alt="Все программы"></a></td>
</tr>
</table>
</td>
<td>
<table cellpadding='0' cellspacing='0'>
<tr>
<td><a href=""><img src="right-1.png" border="0" alt="Мои документы"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-2.png" border="0" alt="Недавние документы"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-3.png" border="0" alt="Мои рисунки"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-4.png" border="0" alt="Моя музыка"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-5.png" border="0" alt="Мой компьютер"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-6.png" border="0" alt="Сетевое окружение"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-7.png" border="0" alt="Панель управления"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-8.png" border="0" alt="Принтеры и факсы"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-9.png" border="0" alt="Справка и поддержка"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-10.png" border="0" alt="Поиск"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-11.png" border="0" alt="Выполнить..."></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table cellpadding='0' cellspacing='0'>
<tr>
<td><img src="bottom-1.png"></td>
<td><a href=""><img src="bottom-2.png" border="0" alt="Выход из системы"></a></td>
<td><a href=""><img src="bottom-3.png" border="0" alt="Выключение"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
На примере меню Пуск" Windows XP представлен способ организации сложных несимметричных графических меню с использованием вложенных таблиц. В данном случае используется внешняя таблица для разделения изображения на верхнюю, нижнюю, левую и правую области, и три вложенных таблицы для реализации левого, правого и нижнего графического меню.
| Тег | Описание |
|---|---|
<img> |
Определяет изображение |
<map> |
Определяет карту ссылок |
<area> |
Определяет активную область внутри карты ссылок |
В HTML предусмотрен целый ряд возможностей для работы с мультимедиа. Это встраивание графики и использование звуков, применение анимационных роликов и видеофильмов. Применение мультимедийных возможностей является далеко не последним аргументом в борьбе за привлечение новых пользователей web-сайта, в то же время при использовании мультимедиа необходимо соблюдать чувство меры. Хорошо оформленная web-страница позволит привлечь и удержать внимание посетителей, в то же время чрезмерное увлечение изображениями, звуковыми эффектами и т.п. может затруднить просмотр страницы (при медленных каналах связи) или отпугнуть чересчур навязчивыми мелодиями.
В общем случае при использовании мультимедиа на web-страницах желательно придерживаться следующих правил: оформление сайта должно соответствовать его содержанию, применение графики и мультимедиа должно упрощать навигацию по сайту, должна быть предусмотрена возможность работы с web-страницей для медленных каналов связи (замещающие надписи, дублирующие текстовые меню или специальные текстовые варианты страницы).
В рамках данного курса будут рассмотрены возможности HTML по использованию изображений на web-страницах.
<html> <body> <p> Изображение: <img src="logo.gif" width="285" height="52"> </p> <p> Динамическое изображение: <img src="100x100_4.gif" width="100" height="100"> </p> <p> Обратите внимание, что синтаксис вставки динамического изображения не отличается от синтаксиса для обычного изображения. </p> </body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как вывести изображения на Web-странице.
<html> <body> <p> Изображение из другой папки: <img src="/img/dvd.jpg" width="160" height="237"> </p> <p> Изображение с сайта ИНТУИТ: <img src="http://www.intuit.ru/img/logo.gif" width="285" height="52"> </p> </body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как вывести на своей Web-странице изображение из другой папки или с другого сервера.
Изначально HTML поддерживал работу с двумя графическими форматами: GIF и JPEG, в последнее время все большее распространения находит формат PNG. Каждый из форматов имеет свои достоинства и недостатки, которые определяют область его применения.
Формат GIF был разработан коммерческой Online-службой
В то же время формат GIF обладает рядом свойств, определивших его широкое применение при разработке Web-страниц:
Область применения GIF-файлов ограничивается и применяемым алгоритмом сжатия изображений, чья эффективность зависит от разнообразия цветов в изображении, наличия одноцветных областей. Наибольшую экономию объема файла дают изображения с небольшим количеством цветов и большими одноцветными областями. Поэтому формат GIF широко используется для отображения графических меню и кнопок, а также для создания технических иллюстраций (графики, схемы, диаграммы и т.п.). В то же время использование формата GIF для отображения полноцветных фотографий практически не находит применения по причине малого количества передаваемых цветов и низкой эффективности алгоритма сжатия для таких изображений.
Формат JPEG был разработан для передачи фотографий между различными платформами. Благодаря поддержке 24-битовой цветовой палитры (миллионы цветов) формат JPEG получил широкое распространение для отображения иллюстраций высокого качества. При этом применяемый в JPEG алгоритм сжатия позволяет варьировать размер загружаемого файла в зависимости от требуемого качества отображения иллюстрации.
Кроме того, формат JPEG поддерживает опцию "прогрессивный" JPEG, которая во многом похожа со свойством чередования строк формата GIF, но реализована на совершенно других принципах. В файл JPEG записывается несколько иллюстраций полного размера, но различного уровня качества. Сначала отображается рисунок низкого качества (и, соответственно, малого объема), затем догружаются все более качественные изображения. При этом общий объем загружаемого файла возрастает несущественно по сравнению с оригинальным JPEG.
В последнее время все большее распространение получает формат PNG, который был разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества.
Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм черезстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения.
Кроме того, в PNG реализован эффективный механизм контроля
Для размещения изображений в HTML используется тег <img> с использованием обязательного атрибута src (от source – источник), который указывает URL-адрес загружаемого файла с изображением.
Синтаксис определения изображения:
<img src="url">
URL указывает на то место, где хранится изображение. В следующем примере на Web-странице выводится изображение логотипа интернет университета информационных технологий, расположенное в каталоге "img" на сервере "www.intuit.ru" (URL: http://www.intuit.ru/img/logo.gif).
<html> <body> <img src="http://www.intuit.ru/img/logo.gif"> </body> </html>
Пример выполнения данного HTML-кода
Браузер размещает изображение там, где в документе появляется тег <img>. Если разместить тег <img> между двумя параграфами, то браузер покажет первый параграф, затем изображение, а затем второй параграф.
<html> <body> <p>Первый параграф</p> <img src="http://www.intuit.ru/img/logo.gif"> <P>Второй параграф</p> </body> </html>
Пример выполнения данного HTML-кода
Если же разместить тег <img> внутри параграфа, то изображение будет отображено в одной строке с текстом.
<html> <body> <p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif"> размещено прямо внутри параграфа</p> </body> </html>
Пример выполнения данного HTML-кода
Формат изображения, его расположение и ряд других параметров задается при помощи атрибутов тега <img>.
Для выравнивания изображений используется атрибут align.
align=top – изображение выравнивается по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике;align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику;align=right – то же что и для left, только изображение смещается к правой части рабочей зоны.Следующий пример показывает различные варианты выравнивания изображений в тексте.
<html> <body> <p>Изображение выравнено по верху <img src="http://www.intuit.ru/img/logo.gif" align="top"> при помощи align="top"</p> <p>Значение "middle" атрибута align <img src="http://www.intuit.ru/img/logo.gif" align="middle"> центрирует изображение по вертикали</p> <p>Выравнивание изображения по нижнему краю <img src="http://www.intuit.ru/img/logo.gif" align="bottom"> (align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).</p> <p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif" align="left"> смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок. При таком способе выравнивания желательно помещать изображение в начале параграфа.</p> <p><img src="http://www.intuit.ru/img/logo.gif" align="right"> Изображение прижато к правому краю рабочей области (align="right"). Текст занимает все свободное пространство слева от изображения обтекая его.</p> </body> </html>
Пример выполнения данного HTML-кода
Кроме того, для форматирования изображений внутри текста используются атрибуты hspace и vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.
<html> <body> <p><img src="logo.gif" align="left"> В данном варианте используются установленные по умолчанию значения hspace и vspace. Изображение выравнено по левому краю при помощи align="left".</p> <p><img src="logo.gif" align="left" hspace="20" vspace="20"> В данном варианте значения hspace и vspace установлены равными 20. Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, сколько на величину свободной зоны вокруг изображения вообще. В данном случае изображение сместилось вправо вниз. </p> <p>Примечание: Для лучшего понимания работы атрибутов hspace и vspace в данном примере уменьшите размер окна Вашего браузера. </p> </body> </html>
Пример выполнения данного HTML-кода
Изображение в HTML может быть обрамлено прямоугольной рамкой. Для этого используется атрибут border, который задает ширину рамки вокруг изображения в пикселях.
<html> <body> <p><img src="logo.gif" align="left"> Изображение без рамки (по умолчанию для простых графических изображений).</p> <p><img src="logo.gif" align="left" border="5"> В данном варианте толщина рамки установлена в 5 пикселей. </p> </body> </html>
Пример выполнения данного HTML-кода
По умолчанию для простых изображений толщина рамки устанавливается равной нулю (отображаются без рамки). В противоположность этому для изображений, являющихся гиперссылками, по умолчанию устанавливается рамка толщиной 2 пикселя.
<html> <body> <p><a href="http://www.intuit.ru"><img src="logo.gif" align="left"></a> Несмотря на то, что значение border не задано, изображение-гиперссылка выводится обрамленным рамкой шириной 2 пикселя (значение по умолчанию)</p> <p><a href="http://www.intuit.ru"><img src="logo.gif" align="left" border="0"></a> В данном варианте рамка вокруг гиперссылки убрана благодаря принудительному присвоению параметру border нулевой толщины. </p> </body> </html>
Пример выполнения данного HTML-кода
В последнее время атрибут border при разработке Web-сайтов в подавляющем большинстве случаев используется именно для отмены рамки вокруг изображения-гиперссылки.
По умолчанию изображение отображается в браузере с сохранением своих исходных размеров и пропорций. При этом, если изображение превышает размер окна браузера, то оно может либо автоматически уменьшится до размера окна, либо предоставить возможность просмотра по частям с использованием полос прокрутки.
При помощи атрибутов height и width (высота и ширина, соответственно) можно задать размеры отображения графического файла на Web-странице.
<html> <body> В первом случае изображение выводится с сохранением своих исходных размеров (253*190 пикселей). <br> <img src="photo.png"> <br> Во втором варианте высота изображения уменьшена до 100 пикселей. Обратите внимание, хотя явно задан только атрибут height, браузер автоматически отмасштабировал изображение и по ширине с сохранением исходных пропорций. <br> <img src="photo.png" height="100"> <br> В третьем варианте принудительно заданы оба атрибута, при этом высота уменьшена до 100 пикселей, а ширина оставлена на прежнем уровне. В этом случае автоматического масштабирования не производится, и изображение сжимается по вертикали. <br> <img src="photo.png" height="100" width="253"> </body> </html>
Пример выполнения данного HTML-кода
Автоматическое масштабирование с заданием только одного из атрибутов довольно часто используется при необходимости вывода изображений различного формата в столбец (при этом для всех изображений задается одинаковым атрибут width ) или в строку друг за другом ( height ).
Значение атрибутов height и width задается не только в пикселях, но и в процентах. Но в этом случае речь идет о выделенной под размещение изображения области. Это может быть все окно браузера или ячейка таблицы.
<html> <body> Ширина изображения в данном примере задана равной 100%. Изменяя размер окна браузера можно заметить, как изображение автоматически масштабируется, занимая всю ширину окна. <br> <img src="photo.png" width="100%"> <br> </body> </html>
Пример выполнения данного HTML-кода
Необходимо отметить, что при задании значений атрибутов height и width в процентах используется тот же принцип масштабируемости, что и для значений в пикселях. При задании одного атрибута значение второго автоматически пересчитывается исходя из сохранения пропорции. При задании значений обоих атрибутов условие сохранения пропорций не соблюдается.
При размещении изображений на Web-странице желательно придерживаться следующих рекомендации:
height и width. В этом случае браузер еще до полной загрузки изображения получает информацию о его размерах и заранее резервирует место, благодаря чему весь текст на странице может быть размещен и отформатирован еще до загрузки изображений.Можно пояснить эти рекомендации на следующем примере.
<html> <body> В первом варианте в качестве изображения-иконки используется большое изображение, размер которого изменен при помощи атрибутов width и height. При нажатии на него исходная фотография будет отображена в полный размер. <br> <a href="photo_big.png"><img src="photo_big.png" width="80" height="60" border="0"></a> <br> Во втором варианте в качестве изображения-иконки используется специально подготовленное малое изображение, значения атрибутов width и height заданы для обеспечения правильного форматирования Web-страницы на этапе частичной загрузки. <br> <a href="photo_big.png"><img src="photo_small.png" width="80" height="60" border="0"></a> <br> Несмотря на то, что оба этих варианта с внешней точки зрения практически идентичны, во втором варианте объем загружаемой информации значительно ниже. Так объем большого изображения "photo_big.png" составляет более 1 Мб, в то время как "photo_small.png" - только 14 Кб. <br> Очевидно, что при малой скорости подключения в Интернет пользователь может просто не дождаться конца загрузки страницы. </body> </html>
Пример выполнения данного HTML-кода
В ряде случаев графическое изображение на Web-странице не может быть отражено. Это может происходить при просмотре страниц с использованием текстовых браузеров, при запрете на отображение графики в целях увеличения скорости загрузки и снижения расходов на Интернет, а также в ряде других случаев. При этом смысл страницы может быть существенно искажен, а при использовании графических меню и кнопок навигация по сайту будет значительна затруднена. Во избежание этого в HTML используется атрибут alt, который задает цепочку символов (максимальная длина 1024 символа), отображаемую в браузере вместо изображения и в произвольной форме описывающую его (заменяющий текст).
Следующий пример демонстрирует синтаксис применения атрибута alt.
<html> <body> <img src="logo.gif" width="285" height="52" alt="Логотип Интуита"> <br> Для демонстрации работы атрибута alt необходимо в свойствах обозревателя запретить использование графики на странице. <br> Обратите внимание, что даже при отображенной графике замещающий текст появляется на экране при наведении указателя мыши на изображение. Благодаря этому атрибут alt можно использовать и в качестве своеобразной подписи к рисунку. </body> </html>
Пример выполнения данного HTML-кода
Использование атрибута alt считается признаком хорошего HTML-тона, так как это позволяет улучшить вывод и полезность документа для людей, который используют браузеры только для вывода текста. Кроме того, использование атрибута ALT можно считать обязательным для графических ссылок. В следующем примере приведен фрагмент графического меню. В примере специально даются ссылки на несуществующие графические файлы (отпадает необходимость запрета на отображение рисунков браузером для понимания работы примера).
<html> <body> В первом варианте атрибут alt не используется, пользователь видит перед собой три прямоугольника, о назначении которых он может только догадываться. <hr> <img src="home.gif" width="80" height="30"> <img src="mail.gif" width="80" height="30"> <img src="map.gif" width="80" height="30"> <hr> <br> Использование атрибута alt во втором варианте позволяет эффективно использовать ссылки меню и в отсутствие изображений. <hr> <img src="home.gif" width="80" height="30" alt="На главную страницу"> <img src="mail.gif" width="80" height="30" alt="Отправить письмо"> <img src="map.gif" width="80" height="30" alt="Карта сайта"><br> <hr> </body> </html>
Пример выполнения данного HTML-кода
Наряду с использованием изображений в качестве иллюстраций к тексту или элементов оформления Web-страницы, в HTML предусмотрена возможность создания карт изображений (imagemap), отдельные области которого могут являться гиперссылками на другие разделы или страницы Web-сайта. В общем виде это соответствует использованию изображения в качестве гиперссылки с тем отличием, что на одной карте изображений можно создать несколько несовпадающих областей, и соответственно, гиперссылок.
Применение таких карт изображений удобно для создания географических справочных систем, путеводителей, карт погоды. Также карты изображений находят широкое применение при создании сложных графических меню.
В HTML предусмотрены два варианта обработки карт изображений: обработка карты изображения непосредственно браузером и передача на сервер координат указателя мыши для дальнейшей обработки.
Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemap тега <img>:
<img src="figure_1.png" usemap="#coordinates">
Где "figure_1.png" - имя файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области.
Координатные области карты изображений определяются при помощи тегов <map> и <area>.
Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coords и href.
Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect" - прямоугольник. Также область может быть описана в форме окружности ( shape="circle" ) или многоугольника ( shape="poly" ).
Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly" последовательно указываются координаты вершин многоугольника.
Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.
Заданные при помощи тегов <area> координатные области изображения ограничиваются при помощи тегов <map> - </map>.
В следующем примере задана карта изображений, на которой в соответствии с изображением выделены прямоугольная, круглая и треугольная координатная области.
<html> <body> <img src="figure_1.png" width="297" height="210" border="0" alt="Карта изображений" usemap="#coordinates"> <map name="coordinates"> <area shape="rect" coords="130,194,270,130" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="73,90,40" href="circle.html" alt="Круг"> <area shape="poly" coords="168,109,280,109,223,13" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>
Пример выполнения данного HTML-кода
Для корректной работы следующего примера необходимо создать в рабочей папке файлы rect.html, circle.html, polygon.html. Например, файл rect.html:
<html> <body> Вы выбрали прямоугольник </body> </html>
Обратите внимание, что атрибут alt (заменяющий текст) может использоваться как для всего изображения, так и для каждой его области.
В следующем примере координатные области пересекаются, обратите внимание, что для карт изображений действует принцип, согласно которому при пересечении двух или более координатных областей активной будет область, описанная первой. В данном примере есть определенное несоответствие, при щелчке мышью на окружности в области пересечения ее с прямоугольником загрузится файл rect.html.
<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="rect" coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>
Пример выполнения данного HTML-кода
В следующем примере порядок описания координатных областей приведен в соответствие с изображением на экране.
<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> <area shape="rect" coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> </map> </body> </html>
Пример выполнения данного HTML-кода
Карты изображений, обрабатываемые на сервере, описываются с помощью атрибута ismap тега <img>, располагающегося между тегами <a> - </a>, например:
<a href="tryhtml_ismap.htm"> <img src="figure_1.png" ismap> </a>
Где "tryhtml_ismap.htm" – файл на сервере, описывающий координатные области изображения.
При использовании серверной обработки карт изображений на сервер передаются координаты курсора относительно изображения. В следующем примере при перемещении курсора по поверхности изображения в строке состояния вместе с именем файла обработчика отображаются координаты курсора.
<html> <body> <a href="tryhtml_ismap.htm"> <img src="figure_1.png" width="297" height="210" border="0" alt="Карта изображений" ismap> </a> </body> </html>
Пример выполнения данного HTML-кода
Работая с картами изображений необходимо помнить, что при отключении отображения графики (например, при плохих каналах связи) работа с ними практически невозможна. При помощи атрибутов alt можно задать имена выделенным областям, но ориентироваться по такой карте изображений будет достаточно трудно, поэтому необходимо использовать карты изображения только в тех случаях, когда их присутствие целесообразно, например, в географических справочных системах, учебных системах, где необходима наглядность, и т.п. В этом случае признаком хорошего тона считается создание текстового меню, дублирующего ссылки на карте изображении.
Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений, отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента web-страницы (или страницы целиком), затем на ней размечаются прямоугольные области, соответствующие отдельным подэлементам страницы (кнопка меню, меню целиком и т.п.), в соответствии с которыми производится нарезка изображения. Следующий пример демонстрирует способ создания графического меню.
<html>
<body>
<table cellpadding='0' cellspacing='0'>
<tr><td><a href=""><img src="menu-1.png" border="0"
alt="Новости"></a></td></tr>
<tr><td><a href=""><img src="menu-2.png" border="0" alt="О
компании"></a></td></tr>
<tr><td><a href=""><img src="menu-3.png" border="0"
alt="Услуги"></a></td></tr>
<tr><td><a href=""><img src="menu-4.png" border="0" alt="Прайс-
лист"></a></td></tr>
<tr><td><a href=""><img src="menu-5.png" border="0"
alt="Контакты"></a></td></tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Чтобы понять, как нарезано изображение, достаточно при отображении таблицы установить параметр border:
<html> <body> <table cellpadding='0' cellspacing='0' border> <tr><td><a href=""><img src="menu-1.png" border="0" alt="Новости"></a></td></tr> <tr><td><a href=""><img src="menu-2.png" border="0" alt="О компании"></a></td></tr> <tr><td><a href=""><img src="menu-3.png" border="0" alt="Услуги"></a></td></tr> <tr><td><a href=""><img src="menu-4.png" border="0" alt="Прайс-лист"></a></td></tr> <tr><td><a href=""><img src="menu-5.png" border="0" alt="Контакты"></a></td></tr> </table> </body> </html>
Пример выполнения данного HTML-кода
<html>
<body>
<table cellpadding='0' cellspacing='0'>
<tr>
<td colspan="2"><img src="top.png"></td></tr>
<tr>
<td>
<table cellpadding='0' cellspacing='0'>
<tr>
<td><a href=""><img src="left-1.png" border="0" alt="Интернет"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-2.png" border="0" alt="Электронная почта"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-3.png" border="0" alt="EmEditor"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-4.png" border="0" alt="Photoshop"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-5.png" border="0" alt="Word"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-6.png" border="0" alt="SQL Manager"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-7.png" border="0" alt="Excel"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-8.png" border="0" alt="ImageReady"></a></td>
</tr>
<tr>
<td><a href=""><img src="left-9.png" border="0" alt="Все программы"></a></td>
</tr>
</table>
</td>
<td>
<table cellpadding='0' cellspacing='0'>
<tr>
<td><a href=""><img src="right-1.png" border="0" alt="Мои документы"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-2.png" border="0" alt="Недавние документы"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-3.png" border="0" alt="Мои рисунки"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-4.png" border="0" alt="Моя музыка"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-5.png" border="0" alt="Мой компьютер"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-6.png" border="0" alt="Сетевое окружение"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-7.png" border="0" alt="Панель управления"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-8.png" border="0" alt="Принтеры и факсы"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-9.png" border="0" alt="Справка и поддержка"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-10.png" border="0" alt="Поиск"></a></td>
</tr>
<tr>
<td><a href=""><img src="right-11.png" border="0" alt="Выполнить..."></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table cellpadding='0' cellspacing='0'>
<tr>
<td><img src="bottom-1.png"></td>
<td><a href=""><img src="bottom-2.png" border="0" alt="Выход из системы"></a></td>
<td><a href=""><img src="bottom-3.png" border="0" alt="Выключение"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
На примере меню Пуск" Windows XP представлен способ организации сложных несимметричных графических меню с использованием вложенных таблиц. В данном случае используется внешняя таблица для разделения изображения на верхнюю, нижнюю, левую и правую области, и три вложенных таблицы для реализации левого, правого и нижнего графического меню.
| Тег | Описание |
|---|---|
<img> |
Определяет изображение |
<map> |
Определяет карту ссылок |
<area> |
Определяет активную область внутри карты ссылок |
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.