Как создать код для вставки картинок в блог или дневник
 

Бывает хочется поделиться подборкой интересных картинок и при этом немного попиарить свой дневник. Для этого можно предложить пользователям html код для размещения этих картинок в своих дневниках. Как это сделать я расскажу ниже.

Для начала нужно зайти на сервис куда можно залить изображение. Я пользуюсь этим http://twinpix.nu/ Он довольно скоростной, и картинки не удаляют.

Там находим кнопку "обзор", выбираем картинку, затем нажимаем кнопку "загрузка"

Находим строку "HTML в тексте" и копируем текст расположенный в поле ниже.

Теперь идём в свой дневник в ЛиРу и создаём новый пост. При создании поста вверху будет выбор редактора:

Выбираем CKEditor. Это WYZYWYG (визуальный) редактор HTML тегов. Дальнейшие действия собраны в гиф анимацию. Дождитесь начала цикла анимации (после белой стрелки вниз)

Теперь подробнее рассмотрим теги:

<a href="ссылка"> объект ссылки </a> Этот тег состоит из открывающей и закрывающей скобки. В кавычках (вместо слова "ссылка") пишем ссылку на свой дневник. Пробелов между кавычками и ссылкой быть не должно. Между <a href="ссылка"> и </a> мы вставим тег изображения.

<img src="ссылка"/> это тег изображения, где "ссылка" это ссылка на изображение, которое мы загрузили на имэйдж хостинг.  Ещё внутри этого тэга нужно прописать border="0", либо после слова img либо перед />

Мы используем хостинг где нам предлагают уже готовый тег вместе со вписанным в него словом border="0". Для моего изображения тег выглядит так:

<img src="http://twinpix.nu/uploads/full/155633.png" border="0" />

Правда чтобы картинка хорошо "кушалась" поисковиками делаем хитрость. Вставляем в тег (также как и border="0") атрибут alt="", где в кавычках мы укажем ключевые слова через запятую, которые ассоциируются с данной картинкой. Никто этого текста не увидит. Но людям будет проще его найти через поисковые системы. Ещё нужно добавить атрибут title="", благодаря которому не будут видны ключевые слова в атрибуте alt. В кавычках атрибута title пишем название картинки.

В итоге у меня вышел такой код:

<a href="http://www.liveinternet.ru/users/cheerful_weasel/blog/"><img alt="санта клаус, новый год, картинки, PNG, клипарт" border="0" src="http://twinpix.nu/uploads/full/155633.png" title="Санта Клаус" /></a>

P.S. Когда делал урок перепутал картинки и загрузил не вырезанную. А в примере кода картинка уже вырезана мной и подкорректирована в цветах.