понедельник, 07 июля 2014
Часто спрашивают, как добавить на страницу несколько изображений так, чтобы они располагались рядом друг с другом по горизонтали. Давайте попробуем сделать это вместе.
Используем url изображения несколько раз подряд, обозначив отступы от ширины (vspace) и высоты (hspace) изображения:
<img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"> ;
Как видим, изображения выстроились в ряд. При этом между ними есть пропуски.
Уберем отступы hspace="8" и vspace="5":
<img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0">
Этот способ хорош для того, чтобы замостить фон, в том числе и разными изображениями. На вкус и цвет...
Используем url изображения несколько раз подряд, обозначив отступы от ширины (vspace) и высоты (hspace) изображения:
<img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" hspace="8" vspace="5"> ;
Как видим, изображения выстроились в ряд. При этом между ними есть пропуски.
Уберем отступы hspace="8" и vspace="5":
<img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0"><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0">
Этот способ хорош для того, чтобы замостить фон, в том числе и разными изображениями. На вкус и цвет...
Пример 1: Изображение - слева, текст - справа.
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее. Обтекание рисунка текстом— один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Так, у тега![]()
есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега ![]()
— vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу.
В данном примере был применен html-код <img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" align="left" hspace="8" vspace="5">, где http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg - URL изображения; width - ширина изображения; height - высота изображения; border - рамка вокруг изображения; align="left" указывает на то, что изображение должно располагаться слева; hspace - расстояние от изображения до текста слева и справа; vspace - расстояние от изображения до текста над и под изображением.
Пример 2
Изображение - справа, текст - слева В этом примере был применен html-код, аналогичный html-коду приведенному выше. Отличие в кодах предлагаю найти Вам :-). Итак, html-код картинки в тексте, расположенной справа: <img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" align="right" hspace="8" vspace="5">. «Пример 2» и «Изображение расположено справа». Ниже приведен пример выравнивания рисунка по центру.
Пример 3
Выравнивание рисунка по центру
Здесь html-код изменен и выглядит так: <center><b>Пример 3<br>Выравнивание рисунка по центру</b><br><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" vspace="5"></center>. В этом случае «Пример 3 Выравнивание рисунка по центру» используется как оглавление и - как и рисунок - выравнен по центру, поэтому и текст и изображение заключены в теги <center>...</center>
Если изображение выравнивается в "просто тексте", то html-код будет такой: <br><center><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" vspace="5"><center><div align="left"> и смотреться будет так:
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее. Обтекание рисунка текстом— один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.Так, у тега
В данном примере был применен html-код <img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" align="left" hspace="8" vspace="5">, где http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg - URL изображения; width - ширина изображения; height - высота изображения; border - рамка вокруг изображения; align="left" указывает на то, что изображение должно располагаться слева; hspace - расстояние от изображения до текста слева и справа; vspace - расстояние от изображения до текста над и под изображением.
Изображение - справа, текст - слева
Выравнивание рисунка по центру
Если изображение выравнивается в "просто тексте", то html-код будет такой: <br><center><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" vspace="5"><center><div align="left"> и смотреться будет так:
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
