Урок 20. Размещение картинки на странице с текстом

Разместить картинку на странице можно с помощью таблицы: создать табличку на две (или три) колонки и поместить в одну колонку картинку, а в другую текст. Если текста у вас мало, а картинки большие сделать табличку гораздо лучше и практичнее. Текст будет находится строго в отведённом для него месте, т.е. в ячейке.

Улица старого города изображена на этой старой открытке. Очень романтично!

Ознакомиться с созданием табличек можно здесь - урок 2 и здесь - Урок 5 и здесь - Урок 14 .

Однако если вас большой текст можно обойтись и без таблиц, а вставить картинки прямо в текст, как это сделано на этой странице .
Это можно осуществить с помощью тэга img:

<img src=АДРЕС КАРТИНКИ alt="ТО, ЧТО НАПИСАНО, ЕСЛИ КАРТИНКА НЕ ОТКРЫЛАСЬ " title="ТЕКСТ, НА ВСПЛЫВАЮЩЕЙ ПОДСКАЗКЕ, ПРИ НАВЕДЕНИИ НА КАРТИНКУ КУРСОРА" border="3" width="105" height="140" align=right hspace=20 vspace=20>

Учтите, что текст в атрибут "alt" не следует писать длинным, иначе, если картинка не откроется - текст будет растягивать квадратик картинки и искажать всю страницу. Лучше, чтобы длина надписи не превышала ширины вашей картинки.
Атрибут "align" - выравнивание. Может быть "right" - когда картинка смещены вправо, а текст её обтекает слева; " left" - картинка слева, а текст её обтекает справа. У атрибута "align" может быть и множество других значений:

top - вершина картинки выравнивается по верхней границе строки;
texttop - вершина картинка выравнивается по вершине самого высокого символа строки;
middle - картинка центрируется в строке;
absmiddle - центр картинки выравнивается точно по центру строки;
baseline - низ картинки выравнивается по базовой линии строки;
bottom - низ картинки выравнивается по низу строки;
absbottom - низ картинка выравнивается по низу самого низко сидящего символа строки.

атрибут "hspace" задаёт отступ текста от картинки по горизонтали;
атрибут "vspace" - по вертикали;
атрибут "border" позволяет создать рамку вокруг картинки.
"width" - ширина нашей картинки;
"height" - высота;

Я не буду здесь приводить весь код нашей учебной странички - из-за текста он очень большой, но вы можете щёлкнув по странице правой кнопкой мыши и посмотреть весь html-код.
Самая верхняя картинка (портрет Бестужева):

<img src=http://lezione.dugward.ru/bestujev.jpg width="119" height="140" alt=" Бестужев " title=" Бестужев-Марлинский" border="0" align=right hspace=10 vspace=10>

Выровнена картинка по правой стороне, отступы текста - по 10 px, border="0"

Фотография редакции журнала "Современник":

<img src=http://lezione.dugward.ru/sovremennik.jpg width="140" height="115" alt=" Кружок журнала Современник " title=" Кружок журнала Современник " border="1" align=left hspace=20 vspace=20>

Выровнена по левой стороне, отступы текста - по 20 px, рамочка в 1 px.

Портрет Грибоедова отличается только увеличенной рамочкой (3 px) и увеличенным отступом: 30 px.

<img src=http://lezione.dugward.ru/griboedov.jpg width="112" height="140" alt=" Грибоедов " title=" А.С. Грибоедов " border="3" align= right hspace=30 vspace=30>

А вот тэг картинки с портретом Аполлона Григорьева уже отличается от всех предыдущих:

<img src=http://lezione.dugward.ru/ap_grigoryev.jpg width="105" height="140" alt=" Григорьев " title=" Ап. Григорьев " align= right style="border: 1px solid red; margin-left: 20px;" >

Здесь рамочка прописана стилем - border: 1px solid red;
Так же, стилем прописан и отступ - margin-left: 20px;

Если вы сравните портреты Грибоедова и Аполлона Григорьева, то увидите, что портрет Григорьева примыкает вплотную к правой границе нашего сайта, отступ в 20 px у него только с левой стороны, в то время как вокруг портрета А.С. Грибоедова отступ в 20 px и справа и слева.
Так происходит потому, что в стилях картинки с Ап. Григорьева у нас прописан только отступ слева: margin-left: 20px;.
Цвет рамочки можно задать любой.

И наконец, надпись на картинке.
В самом низу страницы проходит синяя полосочка. Эта полосочка сделана картинкой, поверх которой написано имя автора и название произведения.
Можно сделать надпись на изображении так, как мы уже делали в уроке 15 (масштабирующийся логотип)

То есть, сделав табличку и поместив в ней нашу картинку фоном.
Но можно обойтись и без таблички. Например, так:

<div style="background: url('http://lezione.dugward.ru/fon-ipb.jpg') repeat-x;" > <p> <i> <b> Александр Александрович Бестужев (Бестужев-Марлинский) <br>Взгляд на старую и новую словесность в России. </b> </i> <br> <br> </div>

Если Вы ставите картинку фоном под текст - нужно, чтобы Ваше изображение ни в коем случае не было пёстрым - иначе текст будет нечитабельным.

Наверх