Вставка картинки с рамкой в HTML

На платформе "Blogger" вставлять картинки легко. Достаточно нажать на иконку в редакторе, при наведении на которую высвечивается "вставить изображение". Но когда захотела оформить картинку рамкой, код подправить в редакторе не получилось. Пришлось разбираться. В итоге получилась шпаргалка по оформлению рамок.

Исходный код. Вставляем в режиме HTML.

<p><img align="left" alt="Логотип"  src="http://lh4.googleusercontent.com/-jMV4TaJ7_nU/TmDlhwqM-RI/AAAAAAAAA4E/r8W7uh1H_WE/s800/html.png"style="margin: 5px 15px 5px 5px; width: 142px; height: 52px;" title="Как вставить картинку в HTML"  /><p>

Код картинки (выделен красным) взяла из Пикаса - Ссылка - Вставить изображение -Только изображение (ссылка отсутствует). Хотя можно взять из любого файлообменника. Он будет иметь вид http://..........png
Или вставьте подготовленную картинку из компьютера в блок с помощью кнопки-иконки. Картинка автоматом загрузится в Пикаса. Затем выделите код и продолжайте с ним работать. Так будет проще.

 Обтекание картинки текстом:

•  align=left – картинка слева
•  align=right - картинка справа
•  margin: 5px 15px 5px 5px - отступы в px вокруг картинки 

 width="ширина картинки в px"     height="высота px"
 alt -  название картинки, обязательный элемент.
 title - всплывающая подсказка  при наведении мышкой на  картинку. Не  является обязательной, но желательна.
 Атрибуты alt и title влияют на успешное продвижение блога. 

Оформляем рамку :  border: 3px  solid #992211;

где 3px - толщина рамки вокруг картинки,  #992211 - цвет рамки
Выделенное синим можно менять.

<p><img align="left" alt="Логотип" src="http://lh4.googleusercontent.com/-jMV4TaJ7_nU/TmDlhwqM-RI/AAAAAAAAA4E/r8W7uh1H_WE/s800/html.png"style="margin: 5px 15px 5px 5px; width: 142px; height: 52px; border: 3px  solid #992211;" title="Как вставить картинку в HTML" /><p>

Стиль рамки -  solid

<p><img align="left" alt="Логотип" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuji582Ttchw8fmZptyPho6t7hg7walm4H8G5YYASn-0tJ7n2RNUZ9btLkZOlUp2JWdmuNE7nDls7xSQTZuuX0ALnYwS9ss6ubBpqWkLp9A9ZoZ4lfOt72XHXuz3S5UGpXtrFyKMuD_k/s800/html.png"style="margin: 5px 15px 5px 5px; width: 142px; height: 52px;  border: 10px  double #992211;" title="Как вставить картинку в HTML" /><p>

Стиль рамки -  double

<p><img align="left" alt="Логотип" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuji582Ttchw8fmZptyPho6t7hg7walm4H8G5YYASn-0tJ7n2RNUZ9btLkZOlUp2JWdmuNE7nDls7xSQTZuuX0ALnYwS9ss6ubBpqWkLp9A9ZoZ4lfOt72XHXuz3S5UGpXtrFyKMuD_k/s800/html.png"style="margin: 5px 15px 5px 5px; width: 142px; height: 52px;  border: 8px  groove #992211;" title="Как вставить картинку в HTML" /><p>

Стиль рамки - groove

<p><img align="left" alt="Логотип" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuji582Ttchw8fmZptyPho6t7hg7walm4H8G5YYASn-0tJ7n2RNUZ9btLkZOlUp2JWdmuNE7nDls7xSQTZuuX0ALnYwS9ss6ubBpqWkLp9A9ZoZ4lfOt72XHXuz3S5UGpXtrFyKMuD_k/s800/html.png"style="margin: 5px 15px 5px 5px; width: 142px; height: 52px;  border: 8px  ridge #992211;" title="Как вставить картинку в HTML" /><p>

Стиль рамки - ridge

А это код рамки, с помощью которой я оформила свою шпаргалку.

<div align="center" style="border: 1px solid  #992211;">
Рамка для вставки кода </div>

Можете также посмотреть видео " Делаем рамку для фотографии" с использованием photoshop:

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал

Понравилась статья? Поделитесь с друзьями.