ОФОРМЛЯЕМ КАРТИНКУ, - HTML КОДЫ

ЗАСТАВИМ КАРТИНКУ РАБОТАТЬ

Что такое, - Картинка, к Вашему сообщению?.. Нужна ли она вообще? Какой она должна быть?

Вот те вопросы, на которые мы с Вами вместе, постараемся ответить.

Те, кто "просеивает" страничку за страничкой в поисках интересных фото и других графических файлов, скажет - Ну, как, конечно же "лицо" сообщения/поста, ракламный баннер, обложка, "конфетка для ребенка", и будет прав. Но, как всегда существуют нюансы, которые стоит учитывать при добавлении картинки в "тело" поста. И мы с Вами, это сегодня постараемся рассмотреть на примерах. Плюс к тому, мною будут предложены несколько полезных HTML кодов, которые помогут Вам заставит работать ту оригинальную, яркую, красивую, и строго соответствующую теме сообщения картинку.

Приступим к наглядным примерам.

Предыдущий мой пост, был с flash часиками. Он назывался, - Flash Clock - Бесплатные flash часики. Ну, часики и часики. Удачно сделаны или нет, это абсолютно неважно в данном случае.

Предлагаю провести небольшой эксперимент. Он, нам покажет одну из возможных сторон работы Вашей, но в данном случае моих картинок. Click-ните по предложенной мною ссылке на поисковик Google в его Rus сегменте/части.

В поисковую строку, "вбейте" запрос с названием моего прошлого Поста. Смотрим какие картинки выдаст нам Поисковый Сервис Google.

Для тех, кому "в лом", совершить эти простые манипуляции, смотрим на скрин ниже.

В зависимости от того, как раскрыт Ваш браузер (на полный экран или нет), первых четырех строках, будут картинки ведущие на мои посты, и их почти десять в первых строчках...

Если учесть, что российский/русскоговорящий сегмент Сети, насчитывает несколько миллионов пользователей, то результат довольно хорош.

Со временем, конечно результаты выдаваемые Сервисом будут меняться, как и всё в нашей жизни, но на 29.08.3013г., - это выглядит так.

Вывод, - картинки работают на меня.)

С моей стороны было бы ошибочным утверждать, что это только результат работы какой-то особенной, "магической" картинки. Попадание в поисковые выдачи, результат не только работы картинки, но и ряда других критериев.

Часть рекомендаций, то как я это вижу, я опишу в нескольких строчках. Всё остальное зависит только от Вас.

Для начала, у картинки должно быть свое название. И не должна быть огромных размеров, а значит и "весить" много. Если Вы пишите пост на тему и с заголовком, - Блогер. То у картинки в посте, должно быть созвучное название, для примера: Ведение Блога; В помощь Блоггеру, и т.д. и т.п. Объясню, задав такое имя картинке, Вы добавляете в Поисковик сразу несколько своих заголовков, tags/меток по которым пользователь находит необходимую ему информацию.

Делаем вывод, - картинки имеющие названием: 47728990, io4u7i2u и т.д., конечно же имеют право на существование. Но, когда Вы едите в гости к кому-либо, Вы имеете его адрес, даже если он, - "...На Деревню Дедушке"...

А посему, Вы попадаете по назначению.

Далее, картинка должна быть - оригинальной/авторской.

И послышался ропот.) Понимаю, не каждый может пока работать в графических редакторах, поэтому, прелагаю несколько возможных вариантов: измените размер, поверните картинку (всё это можно сделать в стандартном Microsoft Office), воспользуйтесь OnLine Сервисом. Они, предназначены именно для подобных случаев.

Увеличили/уменьшили размер, отредактировали картинку, добавили "верное" название и, - "...Будет Вам Счастье"...) Вот Вам авторская, оригинальная картинка, сама просящаяся в первые строчки поисковых запросов.

Перейдем к полезным HTML кодам.

КОД ДЛЯ ВСТРАИВАНИЯ КАРТИНКИ НА ОСНОВЕ МОЕЙ "ПРЕВЬЮШКИ":

ПРЕВЬЮ КОД <img alt="3996605_Misli (250x250, 137Kb)" height="250" data-cke-saved-src="<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png"" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...518098_3996605_Misli.png"</a> src="<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png"" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...518098_3996605_Misli.png"</a> width="250" /></p> ДЛЯ ВАШЕЙ КАРТИНКИ<img alt="3996605_Misli (250x250, 137Kb)" height="ВЫСОТА" data-cke-saved-src="АДРЕС КАРТИНКИ" src="АДРЕС КАРТИНКИ" width="ШИРИНА" /></p>

КОД ДЛЯ ВСТРАИВАНИЯ КАРТИНКИ ССЫЛКИ/CLICK-НУЛ И ПЕРЕШЕЛ ПО НУЖНОМУ АДРЕСУ, НА ОСНОВЕ МОЕЙ "ПРЕВЬЮШКИ":

ПРЕВЬЮ КОД <a target="_blank" data-cke-saved-href="<a href="//www.liveinternet.ru/users/merlinwebdesigner/"" target="_blank">http://www.liveinternet.ru/users/merlinwebdesigner/"</a> href="<a href="//www.liveinternet.ru/users/merlinwebdesigner/"><img" target="_blank">http://www.liveinternet.ru/users/merlinwebdesigner/"><img</a> alt="3996605_Misli (250x250, 137Kb)" height="250" data-cke-saved-src="<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png"" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...518098_3996605_Misli.png"</a> src="<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png"" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...518098_3996605_Misli.png"</a> width="250" /></a> ДЛЯ ВАШЕЙ КАРТИНКИ <a target="_blank" data-cke-saved-href="АДРЕС НА КОТОРЫЙ МЫ ДОЛЖНЫ ПЕРЕЙТИ" href="АДРЕС НА КОТОРЫЙ МЫ ДОЛЖНЫ ПЕРЕЙТИ"><img alt="3996605_Misli (250x250, 137Kb)" height="ВЫСОТА" data-cke-saved-src="АДРЕС КАРТИНКИ" src="АДРЕС КАРТИНКИ" width="ШИРИНА" /></a>

КОД ДЛЯ ВСТРАИВАНИЯ КАРТИНКИ ССЫЛКИ/CLICK-НУЛ И ПЕРЕШЕЛ ПО НУЖНОМУ АДРЕСУ, СО ВСПЛЫВАЮЩЕЙ ПОДСКАЗКОЙ НА ОСНОВЕ МОЕЙ "ПРЕВЬЮШКИ":

ПРЕВЬЮ КОД <a data-cke-saved-href="<a href="//www.liveinternet.ru/users/merlinwebdesigner/"" target="_blank">http://www.liveinternet.ru/users/merlinwebdesigner/"</a> href="<a href="//www.liveinternet.ru/users/merlinwebdesigner/"><span" target="_blank">http://www.liveinternet.ru/users/merlinwebdesigner/"><span</a> style="text-decoration: underline;"><img alt=" HTML КОДЫ, ПОЛЕЗНЫЕ ДЛЯ ОФОРМЛЕНИЯ КАРТИНОК /3996605_Misli (250x250, 137Kb)" height="250" data-cke-saved-src="<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png"" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...518098_3996605_Misli.png"</a> src="<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png"" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...518098_3996605_Misli.png"</a> title=" HTML КОДЫ, ПОЛЕЗНЫЕ ДЛЯ ОФОРМЛЕНИЯ КАРТИНОК " width="250" /></span></a></p> ДЛЯ ВАШЕЙ КАРТИНКИ <a data-cke-saved-href="<a href="//www.liveinternet.ru/users/merlinwebdesigner/"" target="_blank">http://www.liveinternet.ru/users/merlinwebdesigner/"</a> href="<a href="//www.liveinternet.ru/users/merlinwebdesigner/"><span" target="_blank">http://www.liveinternet.ru/users/merlinwebdesigner/"><span</a> style="text-decoration: underline;"><img alt=" ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ /3996605_Misli (250x250, 137Kb)" height="ВЫСОТА" data-cke-saved-src="АДРЕС КАРТИНКИ" src="АДРЕС КАРТИНКИ" title=" ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ " width="ШИРИНА" /></span></a></p>

ЗАКРУГЛЯЕМ УГЛЫ У РАМКИ КАРТИНКИ (НА ОСНОВЕ "ПРЕВЬЮШКИ":

 

ПРЕВЬЮ КОД <div style="background: url('<a href="//img0.liveinternet.ru/images/attach/b/4/104/518/104518098_3996605_Misli.png'" target="_blank">//img0.liveinternet.ru/images/attach/b/4/104/...4518098_3996605_Misli.png'</a>); width: 250px; height: 250px; border: 3px solid #ff0000; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;" title=" HTML КОДЫ, ПОЛЕЗНЫЕ ДЛЯ ОФОРМЛЕНИЯ КАРТИНОК" alt=" HTML КОДЫ, ПОЛЕЗНЫЕ ДЛЯ ОФОРМЛЕНИЯ КАРТИНОК "></div> ДЛЯ ВАШЕЙ КАРТИНКИ <div style=text-align: center;"background: url('АДРЕС КАРТИНКИ'); width: ШИРИНАpx; height: ВЫСОТАpx; border: 3px solid #КОД ЦВЕТА РАМКИ; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;" title=" АЛЬТЕРНАТИВНЫЙ ТЕКСТ " alt=" АЛЬТЕРНАТИВНЫЙ ТЕКСТ "></div>

Изменяя значения: - border-radius/webkit-border-radius/moz-border-radius, мы изменяем вид и конфигурацию рамки вокруг картинки.

width:ШИРИНАpx; /* Длина фигуры */

height:ВЫСОТАpx; /* Высота фигуры */

color: #ШЕСТЬ ЗНАКОВ КОДА; /* цвет текста */

background:#ШЕСТЬ ЗНАКОВ КОДА; /* фон блока */

border: 3px #ШЕСТЬ ЗНАКОВ КОДА solid; /* стили рамки */

- -moz-border-radius: 10px 10px 0 0; /* закругление для старых Mozilla Firefox */

- -webkit-border-radius: 10px 10px 0 0; /* закругл. для старых Chrome и Safari */

- -khtml-border-radius: 10px 10px 0 0; /* закругл.для брауз.Konquerer сист. Linux */

- border-radius: 10px 10px 0 0; /* закругление углов для всех, кто понимает */

- padding: 5px; /* внутренние отступы */

 

 

 

 

 

 

Пока, всё...

Всего Вам доброго, и успехов.)

PS. Большая к Вам просьба, если коды для встраивания, что в рамках, "порвет" - станут нерабочими, пожалуйста напишите мне...

 

                

Free Banners | Free Horoscope & Tests | Free Flash Clock

Free OnLine Service | YouTube | Free OnLine Video | © MerlinWebDesigner

Серия сообщений "MerlinWebDesigner":
Часть 1 - MerlinWebDesigner
Часть 2 - Совсем немного о Баннерах
...
Часть 36 - Flash эпиграфы - С Новым Годом и Рождеством
Часть 37 - С Днем Пограничника - Free flash banners
Часть 38 - Полезные HTML коды, - оформляем Картинку