Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Лабораторный практикум по информатике.doc
Скачиваний:
19
Добавлен:
01.12.2018
Размер:
9.62 Mб
Скачать

22.1.5 Рисунки

Тэг для вставки рисунка (в примере он имеет название my.jpg) выглядит следующим образом:

<img src="my.jpg">

Необходимо отметить, что все расположенное между кавычками - ссылка (путь к рисунку). Данный пример (<img src="my.jpg">) говорит о том, что рисунок находится в том же каталоге (директории, папке), в которой находится и файл html. Если рисунок находится в поддиректории (например, my), то ссылка на него будет выглядеть так:

<img src="/my/my.jpg">

Если рисунок находится на уровень выше, а документ находится в поддиректории, то ссылка на него будет такой:

<img src="../my.jpg">

Если рисунок лежит на другом сайте, то путь к нему прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

Для удобства лучше помещать рисунок в ту же директорию, что и файл html.

Для того чтобы рядом с рисунком располагался весь текст, следует знать, что у некоторых тэгов есть параметры (атрибуты). Параметр может задаваться один, а может быть их несколько. Например, у тэга <p> есть <p align="center">. Параметр align есть и у рисунков:

<img src="my.jpg " align="left">

Это означает, что рисунок будет прижат к левому краю экрана, а текст будет обтекать его справа. Чтобы сделать наоборот (рисунок справа, а текст - слева), надо прописать right:

<img src="my.jpg " align="right">

Текст может располагаться внизу рисунка (по умолчанию) - (1), справа и лева от рисунка - (2), и вверху - (3):

(1) - <img src=" my.jpg " align="bottom">

(2) - <img src=" my.jpg " align="middle">

(3) - <img src=" my.jpg " align="top">

Кроме параметра align существует еще несколько параметров:

(1) - <img src=" my.jpg " vspace="10">

(2) - <img src=" my.jpg " hspace="30">

(3) - <img src=" my.jpg " alt="моя фотография">

(4) - <img src=" my.jpg " width="100">

(5) - <img src=" my.jpg " height="200">

(6) - <img src=" my.jpg " border="5">

Это означает:

(1) - параметр vspace - задает расстояние между текстом и рисунком по вертикали. Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек). В примере расстояние равно 10 пикселям.

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В примере оно равно 30 пикселям.

(3) - параметр alt - краткое описание рисунка. Если навести курсор на рисунок и задержать его несколько секунд, то появится его описание. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет.

(4) - параметр width - ширина самого рисунка (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине.

(5) - параметр height - высота самого рисунка (в пикселях). Так же как в случае с width высоту (height) можно не задавать.

(6) - параметр border - рамка вокруг рисунка ( толщина линии рамки - в пикселях). Можно не задавать.

Все параметры могут использоваться одновременно друг с другом.

Рисунок также можно сделать фоном документа. Фон прописывается в открывающем тэге body:

<body text="336699" bgcolor="000000" background="ваш_фон.jpg">

Параметр Background указывает на то, где находится фоновый рисунок. В примере он указывает, что рисунок лежит в той же директории, что и файл html.