Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

— Алло! Служба поддержки? Вы не знаете, почему у меня изображение на мониторе дрожжит, когда я грызу сухари?

  Моя группа в контакте:



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

Тагже картинку можно сделать фоном документа. Это прописывается в открывающем тэге <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="150px" 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="150px" alt="рисунок" title="колобок">
</div>
</body>
</html>
посмотреть
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь