Как вставить картинку в текст?
Сегодня сайты тяжело представить без графики. Графические элементы значительно упрощают восприятие информации. Иногда изображения, схемы и другие картинки говорят больше, чем сам текст, поэтому на веб-ресурсах в изобилии можно найти разнообразную графику.
Разные системы управления контентом предусматривают наличие встроенного редактора, с помощью которого можно залить и вставить изображение в текст. Но случается, что функциональность редактора ограничена или возникала необходимость вставить графику вручную. Причем, применить к изображению выравнивание и другие атрибуты.
Примеры добавления и оформления картинки
Итак, обсудим тему, как вставить картинку в текст, а затем правильно «оформить», применить обтекание текстом и тому подобное. За вставку изображения в HTML-документ отвечает тег <IMG>. Существуют также разные атрибуты этого тега.
Кроме использования тега <img>, для того, чтобы вставить картинку, необходимо обязательно прописать атрибут «SRC». Последний указывает на путь к необходимому файлу. Впрочем, если изображение находится в папке, где расположен HTML-документ, то путь прописывать необязательно. Достаточно указать имя файла.
Таким образом, в месте, где нужно вставить изображение, следует прописать следующий код:
<img src="путь к файлу/название файла.jpg">.
Если картинка расположена на сайте, то прописывать нужно относительный путь. Если же необходимо вставить графику, расположенную на другом ресурсе, следует указать абсолютный путь к изображению.
Впрочем, последним вариантом не рекомендуется пользоваться. Во-первых, это лишняя нагрузка и запросы. Во-вторых, неведомо, что может случиться с изображением на других сайтах завтра. Либо изменится путь к картинке, или ее удалят, или же вовсе исчезнет ресурс. Что касается графики на личном сайте, то, допустим, она размещается в папке «image», которая расположена на уровне ниже коренного каталога.
Тогда путь к фотографии «go.jpg» будет выглядеть так:
<img src="/image/go.jpg">.
Рассмотрим дополнительные атрибуты тега <IMG> в вопросах того, как вставить картинку в текст. С их помощью, к примеру, можно указать размер фото на странице. Для этого используют атрибут «width» (задается ширина изображения в процентном соотношении или пикселях) и атрибут «height» (задается высота фото в тех же единицах). Эти атрибуты указывают браузерам, что сначала нужно выделить определенное место под фото, подготовить макет, отобразить текст, а потом загрузить изображение.
Например, картинка с кодом:
<img src="go.jpg width="100px" height="80px">
будет иметь ширину 100 пикселей, высоту 80 пикселей.
Альтернативный текст к картинке (полезно как тем, у кого в браузере не отображается графика, так и для индексации изображений) добавляется с помощью атрибута «alt». Например, текст «Дворняжка» - альтернативный:
<img src="go.jpg" alt="Дворняжка">.
Этот текст не отображается, если присутствует изображение. Выравнивание картинки можно осуществить, применяя атрибут «align». Чаще других используют такие значения «align», как «left» (фото размещается у левого края, а текст обтекает его справа) и «right» (фото у правого края, а текст обтекает слева).
Вот пример кода:
<img src="/image/go.jpg" align="left">.
Как бы ни были красивы картинки, всегда следует помнить, что это серьезное ресурсное потребление и дополнительное время загрузки сайта. Во-первых, нужно оптимизировать графику, то есть уменьшить ее размер, а во-вторых, не нужно отвлекать пользователя от главного. Желательно найти баланс между текстом и картинками, что удобно и привлекательно.