Тег | HTML справочник
HTML тегиЗначение и применение
Изображения в HTML документе определяются тегом <img>.
Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt, который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right top bottom middle | Не поддерживается в HTML5. Определяет выравнивание изображения в соответствии с окружающими элементами. |
| alt | text | Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом. |
| border | pixels | Не поддерживается в HTML5. Определяет ширину границы вокруг изображения. |
| crossorigin | anonymous use-credentials | Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается. У этого атрибута есть 2 допустимых значения: anonymous В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок use-credentials Перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается. Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок Origin: HTTP header), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous. |
| height | pixels | Определяет высоту изображения. |
| hspace | pixels | Не поддерживается в HTML5. Определяет пробелы слева и справа от изображения. |
| ismap | ismap | Сообщает браузеру, что изображение является серверной картой-изображением. |
| longdesc | URL | Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения). |
| src | URL | Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). |
| usemap | #mapname | Ссылается на элемент <map>, содержащий координаты для клиентской части карты-изображения. |
| vspace | pixels | Не поддерживается в HTML5. Определяет пробелы сверху и снизу изображения. |
| width | pixels | Определяет ширину изображения. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <img></title> </head> <body> <img src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси"> </body> </html>
Результат добавления изображения, с помощью тега <img> на HTML страницу:
Пример использование тега <img> в HTML документе.Изображение как ссылка
Допускается использование изображения в качестве ссылки, для этого необходимо поместить наше изображение (тег <img>) между отрывающим и закрывающим тегом <a>:
<!DOCTYPE html> <html> <head> <title>Пример использования изображения в качестве ссылки</title> </head> <body> <a href = "http://yandex.ru"> <img src = "10.jpg" alt = "Поиск в Яндекс"> </a> </body> </html>
При этом при клике по картинке будет осуществлён переход по заданой ссылке (в нашем случае откроется сайт компании Яндекс):
Отличия HTML 4.01 от HTML 5
В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace.Значение CSS по умолчанию
img {
display: inline-block;
}
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиbasicweb.ru
Тег | HTML справочник
Поддержка браузерами
Описание
Для вставки графических изображений в HTML-документ используется HTML тег <img> (img сокращение от англ. слова image — изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:
- JPG — наиболее распространенный формат для фотографий. Изображения с расширением .jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
- GIF используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
- PNG — формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением .png имеют несколько больший размер, чем JPG или GIF.
HTML тег <img> имеет два обязательных атрибута: src и alt.
Атрибут src выполняет важную роль в отображении графики на странице — задает путь (относительный или абсолютный) к изображению, которое технически не вставляется на страницу: браузер отображает изображение на которое ведет ссылка.
Атрибут alt задает альтернативный текст для изображения, который будет отображен только в том случае, когда изображение не может быть отображено (указан не правильный путь или картинка была удалена).
При необходимости изображение можно сделать ссылкой, для этого нужно всего лишь поместить тег <img> внутрь элемента <a>. При этом вокруг изображения появится рамка, которая легко убирается с помощью CSS:
<a href="#"><img src="image.png" alt="красивая картинка"></a>
Изображения также могут быть использованы в качестве карт-изображений — это когда одно изображение содержит несколько активных областей разной формы, каждая из которых является отдельной ссылкой. Такая карта по внешнему виду ничем не отличается от обычного изображения.
Примечание: для добавления изображений на веб-страницу вы также можете воспользоваться CSS свойством background-image, которое позволяет обычный задний фон элемента заменить на картинку.
Атрибуты
- src:
- Указывает браузеру расположение (URL-адрес) нужного изображения. Пример »
- alt:
- Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.
Примечание: для создания всплывающей подсказки, при наведении курсора мыши на картинку, нужно использовать глобальный атрибут title. В качестве значения атрибута выступает произвольная строка, в которой можно сообщить дополнительную информацию о картинке.
- height:
- Указывает высоту изображения в пикселях.
- ismap:
- Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение — изображение с интерактивными областями). Допустимые значения логического атрибута ismap:
При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.Примечание: атрибут ismap используется только если элемент <img> является дочерним элементом тега <a>, содержащего атрибут href.
- usemap:
- Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа «#»), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>.
Пример »
- width:
- Указывает ширину изображения в пикселях.
Примечание: всегда указывайте атрибуты width и height для изображения. В этом случае пространство требуемое для изображения будет заранее резервироваться браузером при загрузке страницы. Поскольку браузер сам не может заранее вычислить размер изображения, без этих атрибутов разметка страницы во время загрузки может отображаться некорректно, до тех пор пока изображение не будет загружено. Это будет особенно ощутимо для тех пользователей, у которых медленный интернет.
Тег <img> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
img {
display: inline-block;
}
Пример
<img src="images.jpg" alt="цветок">
Результат данного примера в окне браузера:
puzzleweb.ru
seodon.ru | Теги HTML — Тег IMG
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <IMG> используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt. Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег <A>), наглядно дополняют текстовую информацию и т.д. Если тег <IMG> используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border.
Важным моментом при включении изображения в страницу является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений — тем быстрее загрузится страница. В основном в сети используются графические форматы JPEG, GIF и PNG, которые вполне отвечают данным требованиям.
Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height, тега <IMG>. Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.
Атрибуты
Личные атрибуты:
- align — Устанавливает положение изображения относительно окружающего контекста.
- alt — Обязательный атрибут. Альтернативный текст, если в браузере отключен показ изображений.
- border — Устанавливает размер рамки вокруг изображения.
- height — Переопределяет высоту изображения.
- hspace — Размер боковых полей изображения от его краев до окружающего контекста.
- ismap — Позволяет использовать серверные карты изображений.
- src — Обязательный атрибут. Указывает адрес местонахождения изображения.
- title — Выводит «всплывающую» подсказку при наведении курсора мыши на изображение.
- usemap — Позволяет использовать клиентские карты изображений.
- vspace — Устанавливает размер верхних и нижних полей изображения от его краев до окружающего контекста.
- width — Переопределяет ширину изображения.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: изображения.
Модель тега: inline (встроенный, уровня строки).
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
<img src="URL" alt="текст">Пример HTML: применение тега IMG
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега IMG</title>
</head>
<body>
<p>А вы знаете, что такое знак
<a href="files/copyright.html">
<img src="images/copyright.png" alt="Знак Сopyright">
</a></p>
</body>
</html>Результат примера
Результат. Применение тега IMG.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
spravka.seodon.ru
Тег HTML картинка, изображение
Тег <img> используется для вставки графического изображения (картинки) в HTML документ.
HTML тег <img> имеет два обязательных атрибута: src — адрес файла картинки и alt — альтернативный текст, который будет отображен, если картинка не может быть загружена. Также не лишним будет использование глобального атрибута title.
Изображение из тега <img> может быть ссылкой. Для этого нужно обвернуть тег <img> тегом ссылки <a> (см. пример ниже).
Синтаксис
<img src="URL_картинки" alt="альтернативный текст">Отображение в браузере
Пример использования <img> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Вставка картинки в HTML документ</title>
</head>
<body>
<!-- Картинка на веб-странице -->
<img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"><!-- картинка-ссылка -->
<a href="page.html"><img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"></a>
</body>
</html>
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| alt | текст |
Альтернативный текст, который будет выведен, если картинка не будет загружена. |
| height | пиксели |
Высота изображения. |
| ismap |
ismap |
Логический атрибут. Указывает, что картинка является серверной (server-side) картой-изображением. |
| longdesc | URL |
URL файла, где содержится детальное описание картинки. |
| src | URL |
Указывает URL файла картинки. |
| usemap | id_map_элемента |
Указывает, что картинка является клиентской (client-side) картой-изображением. |
| width | пиксели |
Ширина изображения. |
Устаревшие атрибуты
Указанные ниже атрибуты не поддерживаются в HTML5. Используйте CSS вместо них.
| Атрибут | Значение | Описание |
|---|---|---|
| align | top bottom middle left right |
Правило выравнивания картинки. |
| border | пиксели |
Ширина границ картинки. |
| hspace | пиксели |
Ширина горизонтальных отступов (пустое место слева и справа от картинки). |
| vspace | пиксели |
Ширина вертикальных отступов (пустое место сверху и снизу от картинки). |
guruweba.com
HTML тег img | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 23.01.2011
Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<img src=../../html/tags/"URL" alt="..."/>
Атрибуты
Основные Вспомогательные События
| align | задает выравнивание рисунка и способ обтекания текстом
|
|---|---|
| alt | альтернативный текст |
| border | толщина рамки Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict |
| class | определяет имя используемого класса |
| controls | флаг. Когда установлен, отображает кнопки для просмотра видеофайла Отсутствует в спецификации HTML 4.01! |
| dir | определяет направление символов:
|
| dynsrc | URL видеофайла для проигрываия Отсутствует в спецификации HTML 4.01! |
| height | задает высоту рисунка |
| hspace | отступ по горизонтали (по умолчанию 0) |
| id | уникальный идентификатор |
| ismap | флаг, определяющий, что картинка является картой-изображением |
| lang | определяет язык отображаемого документа |
| longdesc | URL страницы с полным описанием изображения |
| loop | сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведение Отсутствует в спецификации HTML 4.01! |
| lowsrc | URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки. Отсутствует в спецификации HTML 4.01! |
| name | уникальное имя изображения |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| src | URL графического файла, отображаемого на странице |
| start | когда начинать воспроизведение видео
Отсутствует в спецификации HTML 4.01! |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
| usemap | применяет к изображению карту <MAP> |
| vspace | отступ по вертикали (по умолчанию 0) |
| width | задает ширину картинки |
Пример
Вставим картинку:
<img alt="hr" src=../../html/tags/"hr.png" border="2"/>
Тег <img> совместно с тегами <map> и <area> используются для создания карт-изображений:
<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href=../../html/tags/"#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href=../../html/tags/"#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src=../../html/tags/"map.png" alt="карта" usemap="#myMap"/>
Результат:
Рекомендации по использованию
- должен быть закрыт слешем (<img…/>)
- обязательные атрибуты: src, alt
- задавайте атрибуты width и height, это позволяет браузеру заранее зарезервировать место в памяти и не будет сам расчитывать размеры картинки, что положительно сказывается на скорости загрузки страницы
- не изменяйте размер картинки атрибутами width и height — это искажает изображение и не влияет на вес файла, используйте для таких целей специальные редакторы
- для предсказуемого кроссбраузерного отображения картинок явно указывайте бордюры (свойство border)
- содержание атрибута alt активно используется поисковыми системами и произносится голосовыми браузерами
- разница между атрибутами alt и title — alt определяет текст, который пользователь увидит вместо картинки (в случае, если, например, картинки отключены в настройках браузера), а title — вместе с картинкой, в виде всплывающей подсказки
- особенность IE6-7: при отсутствии атрибута title всплывает подсказка, текст которой берется у alt
- атрибуты тега <img>, предназначенные для воспроизведения видео не входят в спецификацию HTML 4.01 и некорректно обрабатываются большинством браузеров, для воспроизведения видео используйте тег <object>
- не рекомендуем использовать атрибуты align и border (не проходит валидацию XHTML 1.0, XHTML 1.1, HTML 4.01 Strict + засоряет код), вместо них применяйте таблицы стилей
- используйте тег <img> только в контентной части документа, графику оформления страниц прячьте в CSS (background) — получится более чистый код
Твой код:
<html> <head> <title></title> <style type=»text/css»> img { border: 2px solid #000; } </style> </head> <body> <div><img alt=»Примеры использования hr» src=»http://www.HTML-CSS-PHP-JS.RU/assets/images/html-tags/hr.png»/> </div> </body> </html> Сделай код и жми тут
Результат:
большой полигонПо теме
html-css-php-js.ru
что это такое, что значит тег
Москва г. Москва, ул. Нобеля 7, п. 56 +7 (800) 700-59-30
Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.
Зачем заполнять атрибут alt
В поисковой системе индексируется не только текст, но и графическая информация, и изображения – один из источников дополнительного трафика. Чтобы показывать релевантные изображения при поиске по картинкам, Google и Яндекс ориентируются на теги, в которых и написано, что представлено на них. Благодаря этому в результатах поиска пользователь получает именно то, что искал.
Поисковый робот же в первую очередь ориентируется на изображения с атрибутом alt, поэтому с точки зрения seo-оптимизации это очень важный пункт. Например, если у вас на сайте размещено более 1000 изображений в сотнях статей, то каждое из них может принести дополнительный трафик.
Посетители увидят атрибут alt только в случае отключения загрузки изображений или при плохом соединении Интернета. Загрузка графических элементов осуществляется после получения информации браузером, поэтому замещающий текст на экране монитора виден раньше.
Атрибут alt поможет только при поиске картинок, поэтому на органическую выдачу никак не повлияет.
Правила правильного заполнения alt
Для достижения максимального результата от заполнения тегов alt нужно придерживаться следующих правил.
- Поисковые системы игнорируют длинные описания, поэтому регулируйте длину alt до 5–6 слов, но не превышайте 200–250 символов.
- Описание изображения должно четко соответствовать его содержимому. Например, бессмысленно вставлять фразу «домашний кот» для изображения с автомобилем.
- Для увеличения эффекта от оптимизации картинок рекомендуется использовать ключевые слова из тега h2 или заголовка статьи, но только в том случае, если они похожи по смыслу.
- Не используйте в тексте большое количество ключевых слов, не допускайте спама в описании.
- Не оптимизируйте атрибуты alt у изображений, которые относятся к фону вашего сайта, элементам меню. У них тег должен быть пустым или вовсе отсутствовать. Изображения для элементов дизайна по возможности можно выносить в CSS-спрайты.
- Не придумывайте дополнительные теги alt для похожих картинок из одного материала или товара. Например, у вас интернет-магазин курток, у каждой несколько фотографий. Это значит, что для всех вы пишете одно и то же название, только можете добавить цифры 1, 2, 3 для разграничения.
wiki.rookee.ru
Тег IMG
Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG в контейнер A. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0 в тег IMG.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
<img src=…>
Закрывающий тег
Не требуется.
Параметры
align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt — альтернативный текст для изображения.
border — толщина рамки вокруг изображения.
height — высота изображения.
hspace — горизонтальный отступ от изображения до окружающего контента.
ismap — говорит браузеру, что картинка является серверной картой-изображением.
lowsrc — путь к графическому файлу низкого разрешения для предварительного отображения.
src — путь к графическому файлу.
vspace — вертикальный отступ от изображения до окружающего контента.
width — ширина изображения.
usemap — ссылка на тег MAP, содержащий координаты для клиентской карты-изображения.
Пример 1. Использование тега IMG
<a href=lorem.html><img src=/images/lorem.gif width=135 height=28 align=right vspace=4 hspace=4 border=0></a> Lorem ipsum dolor sit amet…
Описание параметров тега IMG
Параметр ALIGN
Описание
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG.
Синтаксис
<img align=absmiddle | baseline | bottom | left | middle | right | texttop | top>
Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.
Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметры hspace и vspace, задающие расстояние до текста в пикселах.
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не описаны в спецификации HTML 4.
Значение по умолчанию
bottom
Пример 2. Выравнивание рисунка
<html>
<body>
<img src=/images/square.gif width=20 height=20 align=right> Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
</body>
</html>
Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не поддерживаются спецификацией HTML 4.
Параметр ALT
Описание
Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
<img alt=»текст»>
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
<html>
<body>
<a href=/index.html><img src=home.gif alt=»Вернуться на главную страницу»></a>
</body>
</html>
Параметр BORDER
Описание
Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега IMG. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом текста, заданным с помощью стиля или параметра text тега BODY.
Если изображение является ссылкой, рамка добавляется автоматически, толщина ее составляет один пиксел, а цвет рамки совпадает с цветом ссылок. Чтобы убрать рамку, следует задать параметр border=0.
Синтаксис
<img border=толщина рамки>
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 3. Рамка вокруг рисунка
<html>
<body text=#00ff00>
<img src=sample.gif width=50 height=50 border=2> рамка зеленого цвета толщиной 2 пиксела
</body>
</html>
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег IMG. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
<img height=высота>
<img width=ширина>
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина или высота изображения.
Пример 4. Размеры изображения
<html>
<body>
<img src=sample.gif width=150 height=150>
</body>
</html>
Параметр HSPACE и VSPACE
Описание
Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
Синтаксис
<img hspace=…>
<img vspace=…>
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 5. Отступы от рисунка
<html>
<body>
<img src=sample.gif width=150 height=150 hspace=5 vspace=7>
</body>
</html>
Параметр ISMAP
Описание
Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить тег IMG в контейнер A, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.
Синтаксис
<img ismap>
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Пример 6. Рисунок как карта-изображение
<html>
<body>
<a href=http://www.htmlbook.ru/cgi-bin/map.cgi><img src=sample.gif width=150 height=150 ismap></a>
</body>
</html>
Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.
Параметр LOWSRC
Описание
Параметр lowsrc используется для отображения рисунка низкого качества перед полной загрузкой конечного изображения. Такой подход предназначен для снижения времени ожидания пользователя. Предварительно ему показывается изображение в низком разрешении или черно-белый рисунок, который быстро загружается из-за небольшого исходного объема файла. Пока пользователь рассматривает его, происходит загрузка изображения хорошего качества, которое постепенно сменяет первоначальное. Размеры этих изображений обязательно должны совпадать.
Синтаксис
<img lowsrc=URL>
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 7. Путь к рисунку низкого качества
<html>
<body>
<img src=sample.jpg width=450 height=450 lowsrc=samplelow.gif>
</body>
</html>
Параметр SRC
Описание
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
<img src=URL>
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 8. Путь к графическому файлу
<html>
<body>
<img src=sample.jpg width=450 height=450>
</body>
</html>
in-sites.ru