|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Инспектор
Вы можете этот курс.
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:
Изображения в 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-странице желательно придерживаться следующих рекомендации:
- При размещении изображения на Web-странице независимо от исходного размера изображения желательно в явном виде задавать размеры области для отображения при помощи атрибутов height и width. В этом случае браузер еще до полной загрузки изображения получает информацию о его размерах и заранее резервирует место, благодаря чему весь текст на странице может быть размещен и отформатирован еще до загрузки изображений.
- Желательно избегать предлагаемых браузерами возможностей масштабирования изображения (за исключением изображений заднего плана) и отображать полноразмерную графику. Для этого изображения должны быть соответствующим образом обработаны при помощи специальных графических пакетов (например, Adobe Photoshop). Это позволяет избегать искажений изображения вследствие масштабирования, уменьшает объем загружаемой информации при использовании изображения большего размера.
- При необходимости размещения на Web-странице изображений большого размера (фотографии, сложные схемы, репродукции картин и т.п.) на первой странице желательно размещать уменьшенные копии изображений, при нажатии на которые будет показываться полноразмерное изображение. В этом случае необходимо использовать два различных варианта этого изображения: полноразмерное и изображение-иконку.
Можно пояснить эти рекомендации на следующем примере.
<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-кода
Атрибут Alt
В ряде случаев графическое изображение на 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>
