Есть несколько различных способов разместить картинки в документе так, чтобы страница выглядела
компактной, аккуратной и привлекательной. Давайте посмотрим, что можно сделать с картинками в разных случаях.
Разместим картинку слева от текста - для этого в коде картинки нужно прописать выравнивание
по левому краю, то есть align="left", при этом сначала в документе будет
идти код картинки, а потом - текст. Пример:
Результат:
Оптимист – это человек, который даже ударив лицом в грязь, убежден, что она лечебная (Евгений Тарасов).
Тот, кто, обращаясь к старому, способен открывать новое, достоин быть учителем (Конфуций).
Если вопрос задан правильно, ответ будет неожиданным (А. Подводный).
Если человек говорит правильные слова, это вовсе не значит, что он их понимает (А. Подводный).
Обратите внимание на атрибут тега img hspace="число", он задаёт отступы от картинки по
горизонтали, чтобы обтекающий картинку текст не прилипал к ней вплотную. Есть также атрибут
vspace="число" - он задаёт отступы по вертикали. Запомнить их очень просто: hspace -
horizontal горизонтальный), а vspace - vertical (вертикальный).
Разместим картинку справа от текста - для этого в коде картинки нужно прописать выравнивание
по правому краю, то есть align="right", пример:
Результат:
Критерий истины не практика, а собственная душа.
Если человек умеет думать, ему всё равно, что читать.
Удар судьбы в лоб означает, что не возымели действия её пинки в зад. (А. Подводный).
Благословляйте проклинающих вас, но всё же не конкретно за это (А. Подводный).
Картинка между двумя блоками с текстом - здесь мы уже должны применить таблицу из трёх ячеек, например, как здесь:
Результат:
Между «не могу» и «не хочу» имеется пропасть, наполненная самообманом (А. Подводный).
Некоторые мысли не по сердцу потому, что не по плечу (А. Подводный).
Текст в обрамлении двух картинок - принцип тот же - таблица:
Результат:
Вопиющий о чёрной неблагодарности, знай: ты её заслужил (А.Подводный).
Несколько картинок в ряд - и снова таблица: в каждую ячейку помещаем код картинки,
а в атрибутах тега table таблицы задаём такие параметры, чтобы всё "сооружение" выглядело
привлекательно, картинки "не слипались" друг с другом и не появлялась полоса прокрутки. Поля вокруг
картинок удобно задавать через атрибут cellpadding, также под каждой картинкой можно добавить подпись.
Если все картинки не помещаются в ряд, то лучше добавить в таблицу новую строку или изменить размер
самих картинок. Вместо оригинала большой картинки лучше вставлять так называемые "превью", при
клике по которому в новом или текущем окне откроется полноразмерная картинка. Пример:
Результат:
Примечание: можно задавать расположение картинок в документе с помощью CSS и float'ов, это будет рассмотрено в уроках по CSS.
