Главная страница Содержание Учебник по Html Словарь тегов Гостевая книга Напиши мне

Простейшие.

Ступенька 12 - "Что можно сделать с картинкой. Картинка, как фон документа и т.д.".

Итак, мы задались вопросом как же сделать так, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка. Все очень просто. Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у картинок:
<img src="*.gif" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:
<img src="*.gif" align="right">

Но это не все:

  1. <img src="*.gif" align="bottom"> текст может располагаться под картинкой (это по умолчанию)
  2. <img src="*.gif" align="middle"> текст может располагаться посередине картинки
  3. <img src="*.gif" align="top"> текст может располагаться над картинкой
Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:

  1. атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. <img src="*.gif" vspace="10"> В нашем примере расстояние равно 10 пикселям.

  2. атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. <img src="*.gif" hspace="30"> В нашем примере оно равно 30 пикселям (точкам).

  3. атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. <img src="*.gif" alt="компьютерная фирма"> В нашем случае это будет фраза - "компьютерная фирма". Если параметр alt не задавать, описания не будет. Но лучше это сделать(особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt , можно увидеть надпись, для чего картинка предназначена.

  4. атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире). <img src="*.gif" width="100">

  5. атрибут height - высота самой картинки (тоже в пикселях). <img src="*.gif" height="200"> Так же как в случае с width высоту (height) картинки можно и не задавать. Однако размеры картинок лучше задавать - для тех же особенных людей с отключенной графикой...

  6. атрибут border - рамка вокруг самой картинки (в пикселях). <img src="*.gif" border="5"> Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

Атрибуты для одного тэга могут употребляться одновременно друг с другом. Чтобы избежать путаницы, продемонстрирую наглядно на нашем примере. Введем следующие атрибуты для нашей картинки с такими параметрами, чтобы она была прижата к левому краю экрана, текст должен обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), и если навести на картинку курсор, то выскочит надпись - "компьютерная фирма".
    <html>
    <head>
    <title>Компания News computers</title>
    </head>
    <body text=red bgcolor="#000000">
    <h2>
    <p align="center" > Компания
    <font color="green"> News computers </font>
    </p>
    </h2>
    <font size="+1" face="alial">
    <b>
    <i>
    <img src="computer.gif" align="left" hspace="30" vspace="5" alt=" компьютерная фирма">
    Мы обеспечим вас компьютерами и программным обеспечением на любой вкус.
    </i>
    </b>
    </font>
    </body>
    </html>     посмотреть
Если вам понадобиться расположитьь саму картинку в центре экрана (справа, слева), то необходимо воспользоваться параграфом <p></p> или другими тэгами для выравнивания текста, ведь они не только текст выравнивают но и картинки.

Допустим, в нашем примере мы хотим дописать ''Обращайтесь к нам'' под картинкой с левой стороны. Конечно, вы можете ввести несколько тэгов <br> и решить эту проблему. Но если вдруг картинка (объект) будет большой, а текста много, то тут вы уже явно не обойдетесь лишь несколькими <br>, тут придется употребить их с десяток и больше. Так вот, чтобы вам не пришлось мучаться в таких ситуациях, и существует атрибут clear

У атрибута clear существует несколько значений:

  • <br clear="All"> - завершить обтекание объекта текстом.
  • <br clear="Left"> - завершить обтекание объекта текстом, выравненного по левому краю.
  • <br clear="Right"> - завершить обтекание объекта текстом, выравненного по правому краю.
    <html>
    <head>
    <title>Компания News computers</title>
    </head>
    <body text=red bgcolor="#000000">
    <h2>
    <p align="center" > Компания
    <font color="green"> News computers </font>
    </p>
    </h2>
    <font size="+1" face="alial">
    <b>
    <i>
    <img src="computer.gif" align="left" hspace="30" vspace="5" alt=" компьютерная фирма">
    Мы обеспечим вас компьютерами и программным обеспечением на любой вкус.
    <br clear="Left">
    Обращайтесь к нам
    </i>
    </b>
    </font>
    </body>
    </html>     посмотреть
Картинку также можно сделать фоном документа, прописав её в открывающем тэге <body>:

<body background="ваш_фон.jpg">

Атрибут background указывает на место, где расположена фоновая картинка.

    <html>
    <head>
    <title>Компания News computers</title>
    </head>
    <body text=red bgcolor="#000000" background="foil.jpg">
    <h2>
    <p align="center" > Компания
    <font color="green"> News computers </font>
    </p>
    </h2>
    <font size="+1" face="alial">
    <b>
    <i>
    <img src="computer.gif" align="left" hspace="30" vspace="5" alt=" компьютерная фирма">
    Мы обеспечим вас компьютерами и программным обеспечением на любой вкус.
    <br clear="Left">
    Обращайтесь к нам
    </i>
    </b>
    </font>
    </body>
    </html>     посмотреть
В нашем примере мы оставили атрибут bgcolor. Хотя могли и убрать, так как добавили атрибут background на тот случай, если фоновая картинка не загрузится .

[ Назад: Ступенька 11-ая ] [ Далее: Ступенька 13-ая ]