1. Главная страница » Уроки HTML » Атрибуты для тэга <img>

Атрибуты для тэга <img>

Автор: | 22.01.2013

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

<body background=»image/oblaco.jpg»>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body background=»image/oblaco.jpg»>
<div align=»center»>
Получилось!!! <br/>
Это моя первая страница.<br/>
<font color=»red»> Привет!!! </font><br/>
<img src=»image/coloboc3.png»>
</div>
</body>
</html>

Атрибут «align» есть и у картинок:

<img src=»coloboc3.png» align=»left»>

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

<img src=»coloboc3.png» align=»right»>

Но это не все:

<img src=»coloboc3.png» align=»bottom»> — текст располагается внизу картинки
<img src=»coloboc3.png» align=»middle»> — посередине
<img src=»coloboc3.png» align=»top»> — вверху

Кроме атрибута «align» для тэга <img> можно ввести еще несколько атрибутов:

(1) — <img src=»coloboc3.png» vspace=»10″>
(2) — <img src=»coloboc3.png» hspace=»30″>
(3) — <img src=»coloboc3.png» title=»колобок»>
(4) — <img src=»coloboc3.png» width=»100″>
(5) — <img src=»coloboc3.png» height=»200″>
(6) — <img src=»coloboc3.png» border=»5″>
(7) — <img src=»coloboc3.png» alt=»рисунок»>

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

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

(3) — атрибут «title» — краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза – «колобок».

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

(5) — атрибут «height» — высота самой картинки (тоже в пикселях).

(6) – атрибут «border» — рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут «border» равным нулю.

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

Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом. Введем следующие атрибуты для нашей картинки:

<img src=»image/coloboc3.png» align=»right» height=»100px» width=»99%» alt=»колобок»>

Наша картинка будет прижата к правому краю экрана, высота изображения — 100 пикселей, ширина изображения — 150 пикселей, и если вы наведете на картинку курсор, то появиться надпись – «колобок» .

<html>
<head>
<title>Моя первая страница</title>
</head>
<body background=»image/oblaco.jpg»>
<div align=»center»>
Получилось!!! <br/>
Это моя первая страница.<br/>
<font color=»red»> Привет!!! </font><br/>
<img src=»image/coloboc3.png» align=»right» height=»100px» width=»99%» alt=»рисунок» title=»колобок»>
</div>
</body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code