Размещение картинки с текстом

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

Если текста у вас мало, а картинки большие сделать табличку гораздо лучше и практичнее. Текст будет находится строго в отведённом для него месте, т.е. в ячейке.

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

Очень романтично!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Placing pictures on the page with text

Add a picture on the page, you can use a table: Create plate for two (or three) column and put the picture in a single column, and the other text. If you have a little text and images to make a big plate is much better and more practical. The text will be stored strictly allotted to him place, ie in a cell.

street

Street of the old town is depicted in this old postcard.

Very romantic!

To familiarize with the creation of plaques here — 2u lesson here — Lesson 5i here — Lesson 14.

However, if you have a large text, you can do without the tables and insert pictures directly into the text, as is done here.

This can be done using the tag img:

Note that the text in the «alt» attribute is not necessary to write a long, otherwise, if the picture does not appear — the text box will stretch and distort the picture the entire page. It is better that the length of the inscription does not exceed the width of your pictures.

The attribute «align» — alignment. It may be «right» — when the picture is shifted to the right and the text flows around it on the left; «Left» — the picture on the left, and the text wraps around it on the right. At the «align» attribute can be, and many other values:

top — the top of the image is aligned with the upper boundary line;

texttop — the top of the picture is aligned to the top of the tallest character in the string;

middle — the picture is centered in a row;

absmiddle — the center of the image is aligned precisely on the center line;

baseline — the bottom of the image is aligned with the baseline of the line;

bottom — the bottom of the image is aligned to the bottom line;

absbottom — the bottom of the picture is aligned to the bottom of the low-set character strings.

attribute «hspace» specifies the indentation of the text from the image horizontally;

attribute «vspace» — vertical;

attribute «border» allows you to create a frame around the picture.

«width» — the width of our image;

«height» — the height;

I will not give all the code page of our training — because of the text, it is very big, but you can by clicking on the page, right-click and see all the html-code.

The top picture (portrait Bestuzhev):

Aligned on the right side of the picture, text alignment — 10 px, border = «0»

Photo Editor «Contemporary»:

Aligned on the left side, indented text — 20 px, frame 1 px.

Portrait Griboyedov differs only increased frames (3 px) and increased indentation 30 px.

But the tag images with a portrait of Apollon Grigoryev is already different from all previous ones:

There spelled frame style — border: 1px solid red;

The same style is registered and padding — margin-left: 20px;

If you compare the portraits of Griboyedov and Apollon Grigoriev, you will see that the portrait Grigorieva abuts against the right edge of our website, indent 20 px at it only from the left side, while around the portrait, AS Griboyedov indentation 20 px and the right and left.

This happens because in styles pictures with An. Grigorieva have registered only the left margin: margin-left: 20px ;.

Color frames can be set to any.

Finally, the inscription on the picture.

At the bottom of the page goes blue rim. This rim make the picture on top of which is written the author’s name and title of the work.

You can make the writing on the image like we did in lesson 15 (scaled logo 0)

That is, plate making and placing it in our background image.

But you can do without labels. For example:

<p> <i> <b> Alexander Bestuzhev (Bestuzhev-Marly) <br> look at old and new literature in Russian. </ b> </ i> <br>

<br>

</ div>

If you put a background image under the text — you need to have your image in any case there was no variegated — otherwise the text will be unreadable.

Post Views: 193

Вам также может понравиться

Закрыть ссылку от индексации

Скрытые ссылки в DLE

Задачи с таблицами

Добавить комментарий Отменить ответ