Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Обрамление изображения




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

План

Використання графічної кнопки

1. Розміщення зображень

2. Призначення графічної кнопки

3. Приклад використання

Задание:

Вариант 1. В распечатанном варианте самостоятельной работы подчеркнуть основной материал, ответить на контрольные вопросы. Скрепить листы. Подписать работу

Вариант 2. Составить опорный конспект в тетради для СР. Ответить на контрольные вопросы.

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

Синтаксис определения изображения: <img src="url">

URL указывает на то место, где хранится изображение.

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

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


<html><body><p>Первый параграф</p><img src="logo.gif"><P>Второй параграф</p></body></html> <html><body><p>В этом примере изображение <img src="logo.gif">размещено прямо внутри параграфа</p></body></html>

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

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

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

· align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;

· align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;

· align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику;

· align=right – то же что и для left, только изображение смещается к правой части рабочей зоны.

 

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

Изображение в HTML может быть обрамлено прямоугольной рамкой. Для этого используется атрибут border, который задает ширину рамки вокруг изображения в пикселях. По умолчанию для простых изображений толщина рамки устанавливается равной нулю (отображаются без рамки). В противоположность этому для изображений, являющихся гиперссылками, по умолчанию устанавливается рамка толщиной 2 пикселя.

<html> <body><p><img src="logo.gif" align="left">Изображение без рамки (по умолчанию для простых графических изображений).</p><p><img src="logo.gif" align="left" border="5">В данном варианте толщина рамки установлена в 5 пикселей. </p></body> </html>

 




Поделиться с друзьями:


Дата добавления: 2015-07-13; Просмотров: 259; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




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