4 сентября 2011 г.

Вставка картинки с рамкой в 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="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: 10px  double #992211;" title="Как вставить картинку в HTML" /><p>

Логотип

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




<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: 8px  groove #992211;" title="Как вставить картинку в HTML" /><p>

Логотип

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




<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: 8px  ridge #992211;" title="Как вставить картинку в HTML" /><p>

Логотип
Стиль рамки - ridge




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

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

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



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

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

0 коммент.:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...