Шаг 9. ИзображенияДля встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой. Для указания адреса изображения можно задавать как абсолютный, так и относительный путь. В общем случае, правила для добавления изображений те же, что и при создании ссылок. Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице. - Если в начале адреса стоит слэш (символ /), то отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru означает, что написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу показать в браузере файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
- Если перед адресом добавляется упоминание протокола HTTP (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
- Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 9.1 показан файл index.html, в который требуется поместить рисунок sample.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.
Рис. 9.1. Пример размещения файлов - Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис.9.2, относительный путь к рисунку sample.gif из файла index.html будет images/pic.gif.
Рис. 9.2. Пример размещения файлов
В примере 9.1 показаны несколько способов указания пути к графическому файлу при добавлении изображений на веб-страницу. Пример 9.1. Вставка изображения в документ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="http://www.htmlbook.ru/images/sample.gif"> - абсолютный адрес размещения изображения
<img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html> Альтернативный текстАльтернативный текст позволяет получить текстовую информацию об изображении при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то альтернативный текст появляется раньше самого рисунка. Некоторые браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 9.2. Пример 9.2. Добавление альтернативного текста <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<a href="index.html"><img src="home.gif" alt="Вернуться на главную страницу"></a>
</body>
</html> Размеры изображенияДля изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG> (пример 9.3). В качестве значений используется пиксел — элементарная точка на мониторе.
|