русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

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


Дата добавления: 2013-12-23; просмотров: 2061; Нарушение авторских прав


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

Изображения в 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-кода



<== предыдущая лекция | следующая лекция ==>
Графические форматы | Изменение размера изображения


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.004 сек.