Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:

Изображения в HTML

< Лекция 6 || Лекция 7: 12345 || Лекция 8 >

Изображения в HTML

Размещение изображений

Для размещения изображений в HTML используется тег <img> с использованием обязательного атрибута src (от source – источник), который указывает URL-адрес загружаемого файла с изображением.

Синтаксис определения изображения:

<img src="url">

URL указывает на то место, где хранится изображение. В следующем примере на Web-странице выводится изображение логотипа интернет университета информационных технологий, расположенное в каталоге "img" на сервере "www.intuit.ru" (URL: http://www.intuit.ru/img/logo.gif).

<html>
<body>

<img src="http://www.intuit.ru/img/logo.gif">

</body>
</html>

Пример выполнения данного HTML-кода

Браузер размещает изображение там, где в документе появляется тег <img>. Если разместить тег <img> между двумя параграфами, то браузер покажет первый параграф, затем изображение, а затем второй параграф.

<html>
<body>

<p>Первый параграф</p>
<img src="http://www.intuit.ru/img/logo.gif">
<P>Второй параграф</p>

</body>
</html>

Пример выполнения данного HTML-кода

Если же разместить тег <img> внутри параграфа, то изображение будет отображено в одной строке с текстом.

<html>
<body>

<p>В этом примере изображение 
<img src="http://www.intuit.ru/img/logo.gif">
размещено прямо внутри параграфа</p>

</body>
</html>

Пример выполнения данного HTML-кода

Формат изображения, его расположение и ряд других параметров задается при помощи атрибутов тега <img>.

Выравнивание изображений

Для выравнивания изображений используется атрибут align.

  • align=top – изображение выравнивается по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике;
  • align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;
  • align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;
  • align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику;
  • align=right – то же что и для left, только изображение смещается к правой части рабочей зоны.

Следующий пример показывает различные варианты выравнивания изображений в тексте.

<html>
<body>

<p>Изображение выравнено по верху 
<img src="http://www.intuit.ru/img/logo.gif" align="top">
при помощи align="top"</p>

<p>Значение "middle" атрибута align
<img src="http://www.intuit.ru/img/logo.gif" align="middle">
центрирует изображение по вертикали</p>

<p>Выравнивание изображения по нижнему краю 
<img src="http://www.intuit.ru/img/logo.gif" align="bottom">
(align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).</p>

<p>В этом примере изображение 
<img src="http://www.intuit.ru/img/logo.gif" align="left">
смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок. 
При таком способе выравнивания желательно помещать изображение в начале параграфа.</p>

<p><img src="http://www.intuit.ru/img/logo.gif" align="right">
Изображение прижато к правому краю рабочей области (align="right"). 
Текст занимает все свободное пространство слева от изображения обтекая его.</p>

</body>
</html>

Пример выполнения данного HTML-кода

Кроме того, для форматирования изображений внутри текста используются атрибуты hspace и vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.

<html>
<body>

<p><img src="logo.gif" align="left">
В данном варианте используются установленные по умолчанию значения hspace и vspace. 
Изображение выравнено по левому краю при помощи align="left".</p>

<p><img src="logo.gif" align="left" hspace="20" vspace="20">
В данном варианте значения hspace и vspace установлены равными 20. 
Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, 
сколько на величину свободной зоны вокруг изображения вообще. 
В данном случае изображение сместилось вправо вниз.
</p>

<p>Примечание: Для лучшего понимания работы атрибутов hspace и vspace 
в данном примере уменьшите размер окна Вашего браузера.
</p>

</body>
</html>

Пример выполнения данного HTML-кода

< Лекция 6 || Лекция 7: 12345 || Лекция 8 >
Анна Королёва
Анна Королёва

Пожалуйста, уточните, кто автор курса Основы работы с HTML ?

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?