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

Различия

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

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

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
html:tags:img [21/04/2010 10:27] – dnaumovhtml:tags:img [21/04/2010 13:05] (текущий) – dnaumov
Строка 17: Строка 17:
 |[[#parametr_alt|alt]]  |Альтернативный текст для изображения.  | |[[#parametr_alt|alt]]  |Альтернативный текст для изображения.  |
 |[[#parametr_border|border]]  |Толщина рамки вокруг изображения.  | |[[#parametr_border|border]]  |Толщина рамки вокруг изображения.  |
-|[[#parametr_height|height]]  |Высота изображения. | +|[[#parametr_height_i_width|height]]  |Высота (ширина) изображения. | 
-|[[#parametr_hspace|hspace]]   |Горизонтальный отступ от изображения до окружающего контента.  |+|[[#parametr_hspace_i_vspace|hspace]]   |Горизонтальный отступ от изображения до окружающего контента.  |
 |[[#parametr_ismap|ismap]]  |Говорит браузеру, что картинка является серверной картой-изображением.  | |[[#parametr_ismap|ismap]]  |Говорит браузеру, что картинка является серверной картой-изображением.  |
 |[[#parametr_lowsrc|lowsrc]]  |Путь к графическому файлу низкого разрешения для предварительного отображения.  | |[[#parametr_lowsrc|lowsrc]]  |Путь к графическому файлу низкого разрешения для предварительного отображения.  |
 |[[#parametr_src|src]]  |Путь к графическому файлу.  | |[[#parametr_src|src]]  |Путь к графическому файлу.  |
-|[[#parametr_vspace|vspace]]  |Вертикальный отступ от изображения до окружающего контента.   | +|[[#parametr_hspace_i_vspace|vspace]]  |Вертикальный отступ от изображения до окружающего контента.   | 
-|[[#parametr_width|width]]  |Ширина изображения.  |+|[[#parametr_height_i_width|width]]  |Ширина изображения.  |
 |[[#parametr_usemap|usemap]]  |Ссылка на тег [[map|<MAP>]], содержащий координаты для клиентской карты-изображения. | |[[#parametr_usemap|usemap]]  |Ссылка на тег [[map|<MAP>]], содержащий координаты для клиентской карты-изображения. |
  
Строка 82: Строка 82:
     <td>Выравнивание нижней границы изображения по окружающему тексту..</td>     <td>Выравнивание нижней границы изображения по окружающему тексту..</td>
  
-    <td>Lorem ipsum dolor sit amet, consectetuer <img src="../images/square.gif" width="20" height="20" align="bottom" alt=""> +    <td>Lorem ipsum dolor sit amet, consectetuer <img src="/lib/images/square.gif" width="20" height="20" align="bottom" alt=""> 
       adipiscing elit...</td>       adipiscing elit...</td>
   </tr>   </tr>
Строка 88: Строка 88:
     <td bgcolor="#f6f6f0">left</td>     <td bgcolor="#f6f6f0">left</td>
     <td>Выравнивает изображение по левому краю окна.</td>     <td>Выравнивает изображение по левому краю окна.</td>
-    <td><img src="../images/square.gif" width="20" height="20" align="left" alt=""> Lorem +    <td><img src="/lib/images/square.gif" width="20" height="20" align="left" alt=""> Lorem 
       ipsum dolor sit amet, consectetuer adipiscing elit...</td>       ipsum dolor sit amet, consectetuer adipiscing elit...</td>
  
Строка 95: Строка 95:
     <td bgcolor="#f6f6f0">middle</td>     <td bgcolor="#f6f6f0">middle</td>
     <td>Выравнивание середины изображения по базовой линии текущей строки. </td>     <td>Выравнивание середины изображения по базовой линии текущей строки. </td>
-    <td>Lorem ipsum dolor sit amet, <img src="../images/square.gif" width="20" height="20" align="middle" alt=""> +    <td>Lorem ipsum dolor sit amet, <img src="/lib/images/square.gif" width="20" height="20" align="middle" alt=""> 
       consectetuer adipiscing elit...</td>       consectetuer adipiscing elit...</td>
   </tr>   </tr>
Строка 102: Строка 102:
  
     <td>Выравнивает изображение по правому краю окна.</td>     <td>Выравнивает изображение по правому краю окна.</td>
-    <td><img src="../images/square.gif" width="20" height="20" align="right" alt=""> Lorem +    <td><img src="/lib/images/square.gif" width="20" height="20" align="right" alt=""> Lorem 
       ipsum dolor sit amet, consectetuer adipiscing elit...</td>       ipsum dolor sit amet, consectetuer adipiscing elit...</td>
   </tr>   </tr>
Строка 109: Строка 109:
     <td>Верхняя граница изображения выравнивается по самому высокому элементу      <td>Верхняя граница изображения выравнивается по самому высокому элементу 
       текущей строки.</td>       текущей строки.</td>
-    <td>Lorem ipsum dolor sit amet, <img src="../images/square.gif" width="20" height="20" align="top" alt=""> +    <td>Lorem ipsum dolor sit amet, <img src="/lib/images/square.gif" width="20" height="20" align="top" alt=""> 
       consectetuer adipiscing elit...</td>       consectetuer adipiscing elit...</td>
  
Строка 116: Строка 116:
 </HTML> </HTML>
  
 +Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения.
  
- +=== Значение по умолчанию === 
-^Значение   ^Описание   ^Пример  ^ +
-|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, создающие обтекание текста вокруг изображения. +
-Значение по умолчанию+
  
 bottom bottom
  
-Пример 2. Выравнивание изображения +=== Пример === 
- +<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 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>
Строка 148: Строка 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>
Строка 189: Строка 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 0
  
-Пример 4. Рамка вокруг изображения +=== Пример ===
- +
-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>
Строка 224: Строка 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 сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Строка 234: Строка 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>
Строка 260: Строка 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>
Строка 294: Строка 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 +По умолчанию этот параметр выключен.
- +
-HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0+
  
 +=== Пример ===
 +<code html|Использование параметра ismap>
 <!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>
Строка 329: Строка 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. Путь к графическому файлу +Нет.
- +
-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, параметр src</title>   <title>Тег IMG, параметр src</title>
  </head>  </head>
Строка 365: Строка 380:
  </body>  </body>
 </html> </html>
 +</code>
 +