Специально для новичков покажу лёгкий код, который можно использовать для вставки в нужное место Вашего текста, для того, чтобы Ваша картинка смотрелась гармонично и красиво.
Обтекаемая текстом картинка
<div style="float: right; margin: 8px; padding: 6px;"><img src="/templates/lora/img/osen.jpg" border="1px #295C8C dotted" alt="Осень" title="Осень" width="300" height="225" align="right" /></div>
Для новичков в области вёрстки сайтов сделаю небольшие пояснения кода (ещё год назад совсем ничего не понимала и просила всегда «разжевать» что называется любой код, поэтому теперь при написании статьи пытаюсь изложить всё максимально подробно):
- float: right; - обтекаемость картинки текстом. Если поставите так, то картинка будет справа, текст слева.
- float: left; - наоборот, картинка слева от текста.
- margin: 8px; - отступ от картинки до текста.
- border="1px #295C8C dotted – рамка границ картинки (толщина, цвет, тип рамки).
- dotted – точечная рамка;
- solid – сплошная;
- dashed – пунктирная рамка;
- double – двойная рамка;
- groove – затемнены верхняя и левая внешняя часть рамки и нижняя правая внутренняя часть;
- ridge – затемнённая рамка;
- inset – затемнены левая и верхняя части рамки;
- outset – затемнены правая и нижняя часть рамки.
- Alt – атрибут, который обязательно нужно заполнять. Если ваша картинка по каким-то причинам не будет показываться в браузере – на месте картинки выведется альтернативный текст. Именно тот текст, что Вы прописали в этом атрибуте.
- Title – тоже обязательно прописывайте в коде. Этот атрибут тоже немаловажен, как и alt при поисковой оптимизации, пусть и играя второстепенную роль, но всё же! Лучше заполнить, тем более это недолго и несложно. Title – это атрибут, который указывает название картинки (при наведении на неё курсором мышки). Плюс для пользователей будет интересно название картинки, особенно если изображена абстракция или что-то в этом роде.
- img src – это местонахождение Вашей картинки. Создайте для картинок отдельную папочку, с любым названием, но удобным для Вас и обязательно латинскими буквами (например, «img», «image», «kartinki» и т.п.). И в эту папочку положите все картинки, которые будете использовать на своём сайте.
Так как Я работаю чаще всего с CMS Joomla, поэтому в адресе картинки прописан путь именно для этого движка: img src="/templates/lora/img/osen.jpg". Если Вы тоже работаете с этой прекрасной системой управления контентом, можете скопировать этот код, поменяв только названия шаблона и картинки на свои.