• Авторизация
Дневник chetvernina2 Лента друзей - Дневник - Полная версия


Полезные HTML коды, - оформляем Картинку 01-09-2013 15:17 к комментариям - к полной версии - понравилось!

Это цитата сообщения merlinwebdesigner Оригинальное сообщение

Полезные HTML коды, - оформляем Картинку

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

[250x250]

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

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

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

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

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

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

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

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

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

[520x340]

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Изменяя значения: - 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. Большая к Вам просьба, если коды для встраивания, что в рамках, "порвет" - станут нерабочими, пожалуйста напишите мне...

        [256x25]         [256x24]

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


Комментарии (2): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Полезные HTML коды, - оформляем Картинку | chetvernina2 - Страна чудес | Лента друзей chetvernina2 / Полная версия Добавить в друзья Страницы: раньше»