Самоучитель по HTML, обтекание картинки текстом.

В этом уроке я вас научу прерывать обтекание картинок текста, вспомните тэг <br> - принудительный перенос на другую строку, в этом уроке мы поговорим об атрибуте тэга <br> - clear. Зачем он нужен? Допустим, текст обтекает какой-то объект (например, изображение):
пример, обтекание картинки тестом.
Ферари
Мотор такой-то
коробка автомат
макс.скорость 250км/час.
Лучший автомобиль в своём классе, правда цена кусается, но она того стоит. И пошло любительское описание описание дальше...

А нам нужно, что-бы только тех.характеристики били справа, а описание снизу, вы, конечно, можете ввести несколько тэгов <br> и решить эту проблему. Но если вдруг картинка (объект) будет большой, а текста много, то тут вы уже явно не обойдетесь несколькими <br> , тут вам придется употребить их с десяток, а то и больше. Так вот, чтобы вам не пришлось мучаться в таких ситуациях, и существует атрибут clear: <br clear="left>.
Вставим в нужное место и посмотрим:

пример, принудительное прерывание отекания картинки текстом.
Ферари
Мотор такой-то
коробка автомат
макс.скорость 250км/час.
Лучший автомобиль в своём классе, правда цена кусается, но она того стоит. И пошло любительское описание описание дальше...

Теперь другое дело!

У атрибута clear существует несколько значений - all, left, right.
All - завершить обтекание объекта текстом. Left - завершить обтекание текстом объекта, выровненного по левому краю. Right - завершить обтекание текстом объекта, выровненного по правому краю.
В своём примере я задал: clear="left", т.к. наша картинка выровнена по левому краю. Поробуйте самостоятельно прижать одну картинку побольше(150 на 100px) влево, а по меньше(100 на 100px) вправо и поиграйтесь атрибутами.

Ну на этом с картинками у меня всё!!! Так-же дам вам совет: Не перегружайте свои страницы графикой, старайтесь чтобы ваша страница не превышала 50кБайт(текст + графика и другие объекты), т.е. что-бы загрузка файлов не превышала 15-20 секунд на медленых модемах, в противном случае можете потерять посетителей!!!
П.С. Если в процесе обучения у вас возникнут вопросы или что-то не понятно то воспользуйтесь обратной связью на сайте, обязательно отвечу.
Ну а для тех кому всё понятно жмём далее...


Перейти к выбору следующей страницы