ГЛАВНАЯ СТРАНИЦА | ВХОД
Свой блог я хочу посвятить таким же новичкам в сети, каким являюсь и я.
Здесь я буду делиться с вами всем тем, чему я научился за время существования моего блога.
И пусть опытные Веб-мастера не удивляются банальности моих тем, ведь я еще сам "чайник", поэтому и делиться советами буду прежде всего с такими же новичками, как и я.
Надеюсь, что мои советы кому-то помогут.
С уважением, Алексей

Делаем подпись к картинке

Деньгами надо управлять, а не служить им. Сенека.
Сегодня я вас научу делать красивые подписи для картинок такие, как у меня слева. Делается все элементарно, ничего сложного в этом нет. Вам всего лишь нужно отредактировать немного HTML-код картинки. Итак, давайте приступим.


Показывать буду на примере Blogger, но так можно сделать на любом сайте. Первым шагом будет загрузка картинки в сообщение. Загружаем картинку и переходим во вкладку "Изменить HTML". Видим примерно такой код:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s1600/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s200/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" width="200" /></a></div>

Это код нашей картинки. Теперь нам нужно его отредактировать так, чтобы под ним появилась красивая надпись. Для этого окружаем весь этот код тегами  <div style="">  и </div>. Теперь между кавычками начинаем описывать нашу картинку. Кстати этот тег <div style=""> предназначен для того, чтобы придать тексту или картинке определенный вид, сделать ее такой, как мы хотим ее видеть.

Итак, вырезаем float: left; margin-bottom: 1em; margin-right: 1em; и вставляем его между кавычек, где float означает обтекание текста, а margin - отступы. Не забывайте после каждого элемента ставить точку с запятой, иначе код работать НЕ БУДЕТ! Далее копируем ширину картинки width="200";  но вставляем немного в другом виде width: 200px; 

Можно дополнительно установить отдельные элементы, например, размер и цвет шрифта и выравнивание текста. Например, сделаем так, добавим: text-align: center; color: navy; font-style: italic; font-weight: bold;

text-align - выравнивание текста;
color -цвет текста;
font-style: italic - курсив;
font-weight: bold -полужирный шрифт.

Вот такой код мы получим:

<div style="float: left; margin-bottom: 1em; margin-right: 1em; width: 200px; text-align: center; color: navy; font-style: italic; font-weight: bold;"><div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s1600/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" imageanchor="1" style="clear: left;"><img border="0" height="160" src="http://2.bp.blogspot.com/_8722tsTSUo8/TB5RTWDYVSI/AAAAAAAAANo/UA5UNunueWQ/s200/%D0%B4%D0%B5%D0%BD%D1%8C%D0%B3%D0%B8.jpg" width="200" /></a></div>Деньгами надо управлять, а не служить им. Сенека.</div>

Попробуйте для начала скопировать это код и вставить его в свое сообщение, а потом уже попробуйте сделать свою картинку с подписью самостоятельно! Желаю удачи!

______________________________________

Уже много лет  фотоаппараты kodak радуют профессионалов и любителей своим качеством по доступным ценам! Запечатлите момент вместе с Kodak!

Знаете ли вы о том, что индекс доверия инвесторов к немецкой экономике значительно упал? Узнайте подробнее на forex4you.com.ua.

Самый новый и качественный ноутбук HP ProBook 4515s VC377ES предлагает компания Novatek. В нашем интернет-магазине вы можете приобрести его по смешной цене! Мы доставим его вам бесплатно в любую точку Белоруссии!

С этой темой еще читают:

8 комментариев:

  1. Jet оставил такую картинку, но было много посторонних ссылок в комментарии, поэтому пришлось его удалить.

    В его профиле найдете список его блогов, в которых представлены различные картинки.

    ..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥.
    ♥..♥  ╔══╦══╗╔╦══╗  ♥..♥
    ♥..♥  ╚═╗║╔╗║║║╔╗║  ♥..♥
    ♥..♥  ╔═╝║║║║║║║║║  ♥..♥
    ♥..♥  ║╔═╣║║║║║║║║  ♥..♥
    ♥..♥  ║╚═╣╚╝║║║╚╝║  ♥..♥
    ♥..♥  ╚══╩══╝╚╩══╝  ♥..♥
    ♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥

    ОтветитьУдалить
  2. Сейчас в новом редакторе можно просто кликнуть на изображении. Тогда в числе "выровнять налево-направо" появляется и функция "добавить подпись".
    И кажется, поисковики эту подпись хорошо видят, картинки начинают индексировать.

    ОтветитьУдалить
  3. Спасибо, Виктория! вы как всегда правы))
    У меня просто руки не дойдут никак до "чайника" - пересмотреть все статьи и написать новые.

    ОтветитьУдалить
  4. Технический прогресс прогрессирует слишком быстро. И мы вместе с ним. Вот потому я все свои компьютерные достижения Вам в блог вываливаю, а у меня только вечные ценности. :Р

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

    ОтветитьУдалить
  6. И Вам спасибо. Раскрашиваю блог дальше. :)
    Кто бы меня еще научил, как теперь обмонетить эту пузомерку.

    ОтветитьУдалить
  7. К сожалению, в зарабатывании денег сам пока особо не преуспел(((

    ОтветитьУдалить

В комментариях оставляем мнения и советы к данной статье. Все вопросы задаем ТОЛЬКО на ФОРУМЕ. Отвечаю и стараюсь помочь всем!