Оглавление

7.1. Изображение на Web-странице

Изображения вставляются в Web-страншгы с помощью одинарного тега <img>. Сам тег <img> должен быть расположен внутри блочного тега, например, <р>, <div> или др. Тег имеет следующие параметры:
-   src  — URL-адрес файла графического изображения:
       <img src="foto.gif"   alt="Текст подсказки" >
   <img src="http://www.mysite.ru/foto.gif" alt="Текст подсказки">

 

-   alt — строка текста, которая будет выводиться на месте появления изображения до его загрузки или при отключенной графике, а также если изображение загрузить не удалось. Кроме того, при наведении курсора мыши на изображение текст, указанный в параметре alt, можно увидеть в качестве текста всплывающей подсказки:
       <img src="foto.gif"   alt="Текст подсказки" >


-   width — ширина изображения в пикселах:

       <img src="foto.gif"   width="480"   alt="Текст подсказки" >


-   height — высота изображения в пикселах:
       <img src="foto.gif"   width="480"  height="60"   alt="Текст подсказки" > (1)

 

Следующие параметры доступны  только при использовании формата Transitional:
border — толщина границы изображения:

       <img src="foto.gif"   border="0"   alt="Текст подсказки" >


align — расположение изображения относительно текста или других элементов Web-страницы. Параметр может принимать следующие значения:
     •   left — изображение выравнивается по левому краю, а текст обтекает его с правой стороны:
             <p><img  src="foto.gif"   align="left"  alt="Подсказка"  >Текст</p>     

     •    right — изображение выравнивается по правому краю, а текст обтекает его с левой стороны:

             <p><img  src="foto.gif"   align="right"  alt="Подсказка"  >Текст</p>
     •     top — изображение выравнивается по верху текущей строки:

             <p><img src="foto.gif"   align="top"  alt="Подсказка">Текст</p>
     •     bottom — изображение выравнивается по низу текущей строки:

             <p><img src="foto.gif"   align="bottom"  alt="Подсказка">Текст</p>
     •     middle — центр изображения выравнивается по базовой линии текущей строки:

             <p><img src="foto.gif"   align="middle"  alt="Подсказка">Текст</p>


-   hspace — отступ от изображения до текста по горизонтали:

    <p><img src="foto.gif"   align="left"  hspace="20" alt="Подсказка">Текст</p>

 

-   vspace — отступ от изображения до текста по вертикали:

    <p><img src="foto.gif"   align="left"  vspace="20" alt="Подсказка">Текст</p>

Примечания:
  • Значения параметров width и height могут не соответствовать реальным размерам изображения. В этом случае Web-браузер выполнит перемасштабирование. Если значение одного из параметров указать неправильно, то изображение будет искажено. Если указать только один параметр, то значение второго будет рассчитано пропорционально значению первого исходя из реальных размеров изображения.
  • Всегда указывайте значения параметров width и height, так как это позволит Web-браузеру отформатировать Web-страницу до загрузки изображений. В противном случае загрузка каждого изображения приведет к необходимости произвести форматирование еще раз. что в свою очередь приведет к перемещению других элементов Web-страницы. В результате картинка в окне Web-брау^ера будет дергаться.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити