Изображения в тексте | htmlbook.ru
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.
Рисунок по центру
Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применим его для нужных абзацев, как показано в примере 1.
Пример 1. Выравнивание рисунка по центру
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок по центру</title> <style type="text/css"> P.fig { text-align: center; /* Выравнивание по центру */ } </style> </head> <body> <p> <img src="images/sample.gif" alt="Иллюстрация"> </p> </body> </html>
В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. 1.
Рис. 1. Рисунок в центре колонки текста
Обтекание рисунка текстом
Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа
Так, у тега <img> есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).
Пример 2. Использование свойств тега <img>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок в тексте</title> </head> <body> <p><img src="images/sample.gif" alt="Иллюстрация" align="left" vspace="5" hspace="5"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
Горизонтальный отступ от картинки до текста управляется атрибутом hspace, он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace.
Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.
Пример 3. Использование стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок в тексте</title> <style type="text/css"> IMG.fig { float: right; /* Обтекание картинки по левому краю */ padding-left: 10px; /* Отступ слева */ padding-bottom: 10px; /* Отступ снизу */ } </style> </head> <body> <p><img src="images/sample.gif" alt="Иллюстрация"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
В данном примере к тегу <img> добавляется класс fig, для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.
Рисунок на поле
При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).
Рис. 3. Изображение размещается на поле слева от текста
Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin.
Применение таблиц
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td>. В примере 4 показано создание указанной таблицы.
Пример 4. Создание рисунка на поле с помощью таблиц
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок на поле</title> <style type="text/css"> TD.leftcol { width: 110px; /* Ширина левой колонки с рисунком */ vertical-align: top; /* Выравнивание по верхнему краю */ } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td><img src="images/igels.png" alt="Вы не поверите, но это ёжик"></td> <td valign="top">Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td> </tr> </table> </body> </html>
Результат примера показан на рис. 4.
Рис. 4. Изображение слева от текста
В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.
Использование стилей
В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).
Пример 5. Использование margin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Рисунок на поле</title> <style type="text/css"> #pic { float: left; /* Обтекание картинки текстом */ } #text { margin-left: 110px; /* Отступ от левого края */ } </style> </head> <body> <div> <img src="images/igels.png" alt="Вы не поверите, но это ёжик"> </div> <div> Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. </div> </body> </html>
Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.
Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.
htmlbook.ru
текст поверх картинки html
При создании блога или сайта иногда требуется разместить текст поверх картинки или текст поверх изображения. Познаний html, чего греха таить, у многих блоггеров не хватает, а то и вовсе нет. Ничего страшного, даже если и так. Используем Атрибут position в HTML
Можно скопировать простой код и использовать его немного модифицируя под свои нужды. Приведу простой пример:
Есть картинка:
Есть текст:
Текст поверх картинки html
Есть код:
| <div> <h3>Текст поверх картинки HTML</h3> </div> <img src=»/mbg.png» title=»Текст поверх картинки html» alt=»Текст поверх картинки» /> |
Получаем на выходе:
Текст поверх картинки HTM
Текст поверх картинки html Рис.2 Блочный элемент <div> с текстом находится внутри блочного элемента <div> с картинкой. ( см. подробнее о теге <div> )
Нужно правильно указать путь к картинке. С помощью тегов «position:relative ; left:20px; top:200px;» можно отрегулировать отступ текста слева и сверху.
Буквам тоже можно задать любой цвет и размер, было бы желание, и тогда вы сможете написать любой текст поверх картинки, поверх изображения с помощью HTML.
← Перейти в каталог html уроков и советов
www.zarabotkii.ru
Как сделать обтекание картинки текстом в HTML и CSS
Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в HTML, а так же при помощи CSS свойств и значений.
Обтекание картинки текстом при помощи HTML
Наиболее простой, способ позиционирования картинки на странице это воспользоваться средствами HTML. Но у данного способа, по сравнению с возможностями CSS есть недостаток, в нем нет возможности установить отступ между картинкой и текстом, а лишь можно сделать так, чтобы текст обтекал изображение.
Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML: http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html. Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:
— где foto.jpg — это относительный путь к картинке. Можно задать и абсолютный путь, тогда нужно прописать URL вида: http://webmastermix.ru/foto.jpg
У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align=»left» по левому краю). Атрибут align имеет следующие значения:
- left — изображение будет расположено по левому краю, а текст будет обтекать его справа;
- right — изображение расположится справа, а текст будет обтекать его слева;
- bottom — отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
- top — тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
- middle — при данном значении происходит выравнивание середины изображения по базовой линии строки.
Теперь рассмотрим каждый элемент на практике.
1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:
2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:
<img src= "foto.jpg" align="left">
Пример:
3. Для выравнивания изображения по правому краю нужно соответственно прописать:
<img src= "foto.jpg" align="right">
Пример:
4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.
<img src= "foto.jpg" align="top">
Пример:
5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.
<img src= "foto.jpg" align="middle">
Пример:
Обтекание картинки текстом при помощи свойств CSS
Как вы могли заметить на вышеприведенных примерах наша картинка и текст не совсем красиво располагаются по отношению друг к другу. Расположить их красиво на помогут CSS стили, которые можно добавить к картинке задав ей определенный класс и применив нужные свойства. Если вы не знаете, что такое CSS смотрите урок Основы CSS и важные понятия: http://webmastermix.ru/lessons-css/17-bases-css.html.
На самом деле, те примеры создающей обтекание текста и позиционирование картинки, которые мы рассмотрели выше являются немного устаревшими, сейчас принято все элементы отвечающие за внешний вид страницы делать при помощи свойств и значений CSS.
Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.
В начале нужно присвоить нашей картинке определенный класс, тут можете использовать любое слово главное чтобы патом вы поняли за, что именно этот класс отвечает, в дизайне вашей страницы. Делается это так:
<img src= "foto.jpg">
Теперь классу leftfoto нужно присвоить определенные CSS стили.
.leftfoto{
float:left;
margin: 4px 10px 2px 0px;
}
Данный код располагают между тегами <head>…</head>, заключив в теги <style>…</style> или помещают во внешний файл стилей CSS.
Разберем те элементы, которые мы здесь задали:
- float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left».
- margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.
Пример:
Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями:
.leftfoto{
float:left;
margin: 4px 10px 2px 0px;
border:1px solid #CCC;
padding:6px;
}
Здесь мы добавили следующие элементы:
- border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом;
- padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.
Пример:
Материал подготовлен проектом: WebMasterMix.ru
Рекомендуем ознакомиться:
- Подробности
Обновлено: 14 Декабрь 2013
Создано: 14 Декабрь 2013
Просмотров: 161992
webmastermix.ru
HTML-уроки. Как вставить картинку в html
Очень часто при работе с сайтами нам надо вставить картинку на страницу. В html для вставки картинок используется специальный тег . Разберем основные для нас атрибуты которые имеют тег:
- align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом;
- alt — альтернативный текст для изображения, такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений;
- border — толщина рамки вокруг изображения;
- height — высота изображения;
- width — ширина изображения;
- src — путь к картинке;
- hspace — горизонтальный отступ от изображения до окружающего контента;
- vspace — Вертикальный отступ от изображения до окружающего контента.
В статье про HTML-редакторы я использовал несколько картинок, давайте в качестве примера возьмем одну из них, например скриншот программы SublimeText. Ссылка на эту картинку: https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png
Итак, в нашей рабочей папке создаем подпапку «Урок 2», копируем туда наш файл, который мы сделали в прошлом уроке и добавляем в него тег <img> в атрибуте src которого содержится ссылка на выбранную нами картинку.
<h2>Вставка изображения в html-страничку</h2> <img src=»https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png» alt=»Изображение из статьи про html-редакторы» align=»left» border=»2″ hspace=»20″ /> Это текст моей html-странички, а ниже картинка.
<h2>Вставка изображения в html-страничку</h2> <img src=»https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png» alt=»Изображение из статьи про html-редакторы» align=»left» border=»2″ hspace=»20″ />
Это текст моей html-странички, а ниже картинка.
|
Если мы сохраним эту картинку у себя на компьютере, то увидим, что она имеет довольно большой размер — 1600px x 903px. Для того чтобы изменить размеры картинки при выводе на нашей странице применяются атрибуты height и width. Эти атрибуты можно применять как вместе, так и по отдельности. Я задал ширину картинки при выводе на экран — 500px, а высоту задавать не стал — в этом случае браузер сам, пропорционально подберет высоту.
Теперь можно попробовать поменять местами теги <p> и <img> при этом задав атрибут align=»left» — изображение будет расположено у левого края страницы, а текст обтекать справа. А если задать атрибут align=»right», то изображение будет расположено у правого края страницы, а текст обтекать слева.
В случае когда текст обтекает справа мы можем заметить, что между картинкой и текстом нет отступа, давайте зададим этот отступ с помощью атрибута hspace=»20″. Теперь картинка слева и справа имеет отступ 20px.
С помощью атрибута border мы можем задать рамку вокруг изображения — border=»2″ — у картинки будет черная рамка с толщиной 2px. Цвет рамки мы можем изменить только с помощью css и о том, как это сделать я расскажу в следующих уроках.
Похожие записи
codernote.ru
Как сделать в html подпись под картинкой?
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<div class = «frog»> <img src = «frog.png»> <p>Лягушка</p> </div>
<div class = «frog»> <img src = «frog.png»> <p>Лягушка</p> </div> |
При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:
.frog p{ text-align: center; } .frog{ max-width: 200px; }
.frog p{ text-align: center; } .frog{ max-width: 200px; } |
В моем случае это 200 пикселей.
С помощью селектора .frog p вы можете применить дополнительные стили к подписи.
Использование тега figure
Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПо сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:
<figure class = «frog»> <img src = «frog.png»> <figcaption>Лягушка</figcaption> </figure>
<figure class = «frog»> <img src = «frog.png»> <figcaption>Лягушка</figcaption> </figure> |
Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.
Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку
В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.
<img class = «frog» src = «frog.png»> <p>Лягушка</p>
<img class = «frog» src = «frog.png»> <p>Лягушка</p> |
Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:
.frog{ display: block; } .frog + p{ width: 200px; text-align: center; }
.frog{ display: block; } .frog + p{ width: 200px; text-align: center; } |
Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.
Ну а чтобы выровнять подпись по центру картинки, мы даем ему ширину картинки и выравнивание текста по центру. Заметьте, какой селектор я использовал. Такие селекторы называются соседними. Например: .frog + p – будет выбран абзац, который лежит в html-разметке сразу за элементом с классом frog.
Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
Как вставить картинку в текст html
Автор КакПросто!
Изображения не являются обязательным атрибутом сообщения в блоге или на сайте, однако приятно оживляют весь текст и придают ему наглядность. Для оформления изображений используются специальные HTML-теги.
Статьи по теме:
Инструкция
Простейший тег для вставки изображения в режиме HTML выглядит так:Http:// и далее – это адрес самой картинки в сети. Если вы его не знаете, щелкните правой кнопкой мыши по изображению и нажмите кнопку «Открыть в новой вкладке». Откройте вкладку и скопируйте ссылку из адресной строки.
При вставке изображения с помощью этого тега размер будет совпадать с оригинальным. Поэтому выбирайте изображения небольшого размера (до 500 пикселей по большей стороне или около того).
Большие изображения оформляются примерно по тому же тегу, но, чтобы отрегулировать изображение в соответствии с шириной экрана, требуется вставка дополнительного тега “width” – ширина. Модифицированный тег будет выглядеть так: <img src=»http://site/…jpg»width=1000>
В примере 1000 – это ширина изображения в пикселях. Вы можете изменить размер в соответствии со своими потребностями. Высота подгоняется автоматически (пропорции сохраняются).
При выше описанных тегах текст располагается под картинками. Дополнительные теги позволяют разместить текст слева или справа от изображения – left и right соответственно. Полный тег будет выглядеть так: <img src=»http://site/…jpg»width=1000 align=left hspace=20>
При таком оформлении картинка будет располагаться слева, а текст справа, на расстоянии 20 пикселей от изображения. Само изображение будет иметь ширину 1000 пикселей по ширине.
Измените соответствующие параметры, чтобы разместить изображение справа от текста, на удобном для вас расстоянии.
Источники:
- тег картинки в тексте
Совет полезен?
Статьи по теме:
www.kakprosto.ru