Текст возле картинки.

В этой главе мы научимся управлять текстом возле картинки. Т.е. изучим обтекание картинки текстом и научимся прерывать обтекание.

Давайте начнем с расположения текста возле картинки. Давайте создадим новый документ grafika_2.html:

        <html>
        <head>
        <title>текст возле картинки</title>
        </head>
        <body>
    <img src="images/moto.jpg" alt="Супер сайт">Текст... Текст... Текст... Текст
        </body>
        </html>

только вы текста вставте побольше, символов 200-500. просмотрим(откроется в новой вкладке) что у нас получилось.
Текст по умолчанию располагается по нижней линии картинки и то только одна строка, остальные переносятся под картинку.
Но эти умолчания можно изменить если задать атрибуту ALIGN нужное значение:
align="bottomtop" текст по верхней линии картинки
align="middle" текст по центру картинки
align="bottom" текст внизу картинки
Не знаю зачем это нужно, не зависимо какой атрибут мы зададим и зададим ли вообще, но все равно только одна строчка будет расположена вокруг картинки, а остальные будут перенесены под картинку!!!

Чтобы текст не переносился нужно значение атрибуту ALIGN задавать right или left. Задавать можно одной картинке только один раз этот атрибут, второй и следующие просто игнорируются.
У тега IMG есть еще полезные атрибуты:
vspace- атрибут который задает расстояние в пикселях от картинки к тексту по вертикали;
hspace - атрибут задает расстояние между текстом и рисунком, но по горизонтали.
<img src="images/moto.jpg" alt="Супер сайт" hspace="5" vspace="10">

А что делать если картинка большая,а текста возле нее нужно всего немного?
Можно конечно "играться" тегом BR, подставлять их 2, 3, 5, 10 или 20 штук, но у этого тега как раз для таких случаев есть прекрасный атрибут clear, который принудительно обрывает обтекание картинки текстом.
Атрибут clear может принимать следующие значения:
<br clear="all"> прерывает все обтекание;
<br clear="left"> прерывает обтекание слева;
<br clear="right"> прерывает обтекание справа.

        <html>
        <head>
        <title>текст возле картинки</title>
        </head>
        <body>
    <img src="images/moto.jpg" alt="Супер сайт">текст возле картинки
    <br clear="all"> текст под картинкой
        </body>
        </html>

Смотрите также: