Тагже картинку можно сделать фоном документа. Это прописывается в открывающем тэге <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> можно ввести еще несколько атрибутов:
(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> |
