мета-данные страницы
  •  
Загрузка не удалась. Возможно, проблемы с правами доступа?

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
html:tags:img [14/04/2010 10:59] – создано dnaumovhtml:tags:img [21/04/2010 13:05] (текущий) – dnaumov
Строка 14: Строка 14:
 ==== Параметры ==== ==== Параметры ====
  
-|align  |Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. | +|[[#parametr_align|align]]  |Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. | 
-|alt  |Альтернативный текст для изображения.  | +|[[#parametr_alt|alt]]  |Альтернативный текст для изображения.  | 
-|border  |Толщина рамки вокруг изображения.  | +|[[#parametr_border|border]]  |Толщина рамки вокруг изображения.  | 
-|height  |Высота изображения. | +|[[#parametr_height_i_width|height]]  |Высота (ширина) изображения. | 
-|hspace   |Горизонтальный отступ от изображения до окружающего контента.  | +|[[#parametr_hspace_i_vspace|hspace]]   |Горизонтальный отступ от изображения до окружающего контента.  | 
-|ismap  |Говорит браузеру, что картинка является серверной картой-изображением.  | +|[[#parametr_ismap|ismap]]  |Говорит браузеру, что картинка является серверной картой-изображением.  | 
-|lowsrc  |Путь к графическому файлу низкого разрешения для предварительного отображения.  | +|[[#parametr_lowsrc|lowsrc]]  |Путь к графическому файлу низкого разрешения для предварительного отображения.  | 
-|src  |Путь к графическому файлу.  | +|[[#parametr_src|src]]  |Путь к графическому файлу.  | 
-|vspace  |Вертикальный отступ от изображения до окружающего контента.   | +|[[#parametr_hspace_i_vspace|vspace]]  |Вертикальный отступ от изображения до окружающего контента.   | 
-|width  |Ширина изображения.  | +|[[#parametr_height_i_width|width]]  |Ширина изображения.  | 
-|usemap  |Ссылка на тег [[map|<MAP>]], содержащий координаты для клиентской карты-изображения. |+|[[#parametr_usemap|usemap]]  |Ссылка на тег [[map|<MAP>]], содержащий координаты для клиентской карты-изображения. |
  
 ==== Закрывающий тег ==== ==== Закрывающий тег ====
Строка 49: Строка 49:
 </code> </code>
  
-Описание параметров тега <IMG> +===== Описание параметров тега <IMG> ===== 
-Параметр ALIGN + 
-HTML: 3.2 4 XHTML: 1.0 1.1 +==== Параметр ALIGN ==== 
-Описание+ 
 +=== Описание === 
  
 Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img align="bottom | left | middle | right | top"> <img align="bottom | left | middle | right | top">
-Аргументы+</file>
  
-В табл. 1 перечислены возможные значение параметра align и результат его использования. +=== Аргументы ===
-Табл. 1. Использование значений параметра align Значение Описание Пример +
-bottom Выравнивание нижней границы изображения по окружающему тексту.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit... +
-left Выравнивает изображение по левому краю окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit... +
-middle Выравнивание середины изображения по базовой линии текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit... +
-right Выравнивает изображение по правому краю окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit... +
-top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...+
  
-Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения. +В таблице перечислены возможные значение параметра align и результат его использования.
-Значение по умолчанию+
  
-bottom+<HTML> 
 +<table width="90%" border="1" align="center" cellpadding="3" cellspacing="0" class="data"> 
 +  <caption> 
 +  Таблица. Использование значений параметра align  
 +  </caption>
  
-Пример 2. Выравнивание изображения+  <tr>  
 +    <th>Значение</th> 
 +    <th>Описание</th> 
 +    <th>Пример</th> 
 +  </tr> 
 +  <tr align="left">  
 +    <td bgcolor="#f6f6f0">bottom</td> 
 +    <td>Выравнивание нижней границы изображения по окружающему тексту..</td>
  
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0+    <td>Lorem ipsum dolor sit amet, consectetuer <img src="/lib/images/square.gif" width="20" height="20" align="bottom" alt="">  
 +      adipiscing elit...</td> 
 +  </tr> 
 +  <tr align="left">  
 +    <td bgcolor="#f6f6f0">left</td> 
 +    <td>Выравнивает изображение по левому краю окна.</td> 
 +    <td><img src="/lib/images/square.gif" width="20" height="20" align="left" alt=""> Lorem  
 +      ipsum dolor sit amet, consectetuer adipiscing elit...</td>
  
 +  </tr>
 +  <tr align="left"> 
 +    <td bgcolor="#f6f6f0">middle</td>
 +    <td>Выравнивание середины изображения по базовой линии текущей строки. </td>
 +    <td>Lorem ipsum dolor sit amet, <img src="/lib/images/square.gif" width="20" height="20" align="middle" alt=""> 
 +      consectetuer adipiscing elit...</td>
 +  </tr>
 +  <tr align="left"> 
 +    <td bgcolor="#f6f6f0">right</td>
 +
 +    <td>Выравнивает изображение по правому краю окна.</td>
 +    <td><img src="/lib/images/square.gif" width="20" height="20" align="right" alt=""> Lorem 
 +      ipsum dolor sit amet, consectetuer adipiscing elit...</td>
 +  </tr>
 +  <tr align="left"> 
 +    <td bgcolor="#f6f6f0">top</td>
 +    <td>Верхняя граница изображения выравнивается по самому высокому элементу 
 +      текущей строки.</td>
 +    <td>Lorem ipsum dolor sit amet, <img src="/lib/images/square.gif" width="20" height="20" align="top" alt=""> 
 +      consectetuer adipiscing elit...</td>
 +
 +  </tr>
 +</table>
 +</HTML>
 +
 +Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения.
 +
 +=== Значение по умолчанию === 
 +
 +bottom
 +
 +=== Пример ===
 +<code html|Выравнивание изображения>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр align</title>   <title>Тег IMG, параметр align</title>
  </head>  </head>
Строка 91: Строка 138:
 </body> </body>
 </html> </html>
 +</code>
  
-Примечание+=== Примечание ===
  
 Дополнительные аргументы absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0. Дополнительные аргументы absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.
-Параметр ALT + 
-HTML: 3.2 4 XHTML: 1.0 1.1 +==== Параметр ALT ==== 
-Описание+ 
 +=== Описание ===
  
 Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Параметр alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
  
 Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img alt="текст"> <img alt="текст">
-Аргументы+</file> 
 + 
 +=== Аргументы ===
  
 Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки. Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
-Обязательный параметр+ 
 +=== Обязательный параметр ===
  
 Да. Да.
-Значение по умолчанию+ 
 +=== Значение по умолчанию ===
  
 Нет. Нет.
  
-Пример 3. Добавление альтернативного текста +=== Пример ===
- +
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0+
  
 +<code html|Добавление альтернативного текста>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр alt</title>   <title>Тег IMG, параметр alt</title>
  </head>  </head>
Строка 132: Строка 185:
  </body>  </body>
 </html> </html>
 +</code>
  
-Параметр BORDER +==== Параметр BORDER ====
-HTML: 3.2 4 XHTML: 1.0 1.1 +
-Описание+
  
-Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.+=== Описание === 
 + 
 +Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега [[body|<BODY>]].
  
 Чтобы убрать рамку, следует задать параметр border="0". Чтобы убрать рамку, следует задать параметр border="0".
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img border="толщина рамки"> <img border="толщина рамки">
-Аргументы+</file> 
 + 
 +=== Аргументы ===
  
 Любое целое положительное число в пикселах. Любое целое положительное число в пикселах.
-Значение по умолчанию 
  
-0+=== Значение по умолчанию ===
  
-Пример 4. Рамка вокруг изображения+0
  
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0+=== Пример ===
  
 +<code htnl|Рамка вокруг изображения>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр border</title>   <title>Тег IMG, параметр border</title>
  </head>  </head>
Строка 167: Строка 224:
  </body>  </body>
 </html> </html>
 +</code>
  
-Параметр HEIGHT и WIDTH +==== Параметр HEIGHT и WIDTH ==== 
-HTML: 3.2 4 XHTML: 1.0 1.1 + 
-Описание+=== Описание ===
  
 Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину. Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Строка 177: Строка 235:
  
 Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается. Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img height="высота"> <img width="ширина"> <img height="высота"> <img width="ширина">
-Аргументы+</file> 
 + 
 +=== Аргументы ===
  
 Любое целое положительное число в пикселах или процентах. Любое целое положительное число в пикселах или процентах.
-Значение по умолчанию+ 
 +=== Значение по умолчанию ===
  
 Исходная ширина или высота изображения. Исходная ширина или высота изображения.
  
-Пример 5. Размеры изображения +=== Пример === 
- +<code html|Размеры изображения>
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0 +
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр width</title>   <title>Тег IMG, параметр width</title>
  </head>  </head>
Строка 203: Строка 263:
  </body>  </body>
 </html> </html>
 +</code>
  
-Параметр HSPACE и VSPACE +==== Параметр HSPACE и VSPACE ==== 
-HTML: 3.2 4 XHTML: 1.0 1.1 + 
-Описание+=== Описание ===
  
 Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство. Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img hspace="отступ по горизонтали" vspace="отступ по вертикали"> <img hspace="отступ по горизонтали" vspace="отступ по вертикали">
-Аргументы+</file> 
 + 
 +=== Аргументы ===
  
 Любое целое положительное число в пикселах. Любое целое положительное число в пикселах.
-Значение по умолчанию+ 
 +=== Значение по умолчанию ===
  
 0 0
  
-Пример 6. Отступы вокруг изображения +=== Пример ===
- +
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0+
  
 +<code html|Отступы вокруг изображения>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр hspace</title>   <title>Тег IMG, параметр hspace</title>
  </head>  </head>
Строка 237: Строка 301:
  </body>  </body>
 </html> </html>
 +</code>
 +
 +==== Параметр ISMAP ====
  
-Параметр ISMAP +=== Описание ===
-HTML: 3.2 4 XHTML: 1.0 1.1 +
-Описание+
  
 Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения. Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
  
 Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу. Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img ismap> <img ismap>
-Аргументы+</file> 
 + 
 +=== Аргументы ===
  
 Нет. Нет.
-Значение по умолчанию+ 
 +=== Значение по умолчанию ===
  
 По умолчанию этот параметр выключен. По умолчанию этот параметр выключен.
  
-Пример 7. Использование параметра ismap +=== Пример === 
- +<code html|Использование параметра ismap>
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0 +
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр ismap</title>   <title>Тег IMG, параметр ismap</title>
  </head>  </head>
Строка 272: Строка 339:
  </body>  </body>
 </html> </html>
 +</code>
  
 Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере. Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.
-Параметр SRC + 
-HTML: 3.2 4 XHTML: 1.0 1.1 +==== Параметр SRC ==== 
-Описание+ 
 +=== Описание ===
  
 Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG. Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.
-Синтаксис 
  
 +=== Синтаксис ===
 +<file>
 <img src="URL"> <img src="URL">
-Обязательный параметр+</file> 
 + 
 +=== Обязательный параметр ===
  
 Да. Да.
-Аргументы+ 
 +=== Аргументы ===
  
 В качестве значения принимается полный или относительный путь к файлу. В качестве значения принимается полный или относительный путь к файлу.
-Значение по умолчанию+ 
 +=== Значение по умолчанию ===
  
 Нет. Нет.
  
-Пример 8. Путь к графическому файлу +=== Пример === 
- +<code html|Путь к графическому файлу>
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0 +
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html> <html>
  <head>  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Тег IMG, параметр src</title>   <title>Тег IMG, параметр src</title>
  </head>  </head>
Строка 308: Строка 380:
  </body>  </body>
 </html> </html>
 +</code>
 +