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

Деньгами надо управлять, а не служить им. Сенека.

Сегодня я вас научу делать красивые подписи для картинок такие, как у меня слева. Делается все элементарно, ничего сложного в этом нет. Вам всего лишь нужно отредактировать немного 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>

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

This entry was posted on Воскресенье, Июнь 20th, 2010 at 6:07 пп and is filed under HTML теги. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “Делаем подпись к картинке”

  1. Алексей:

    Jet оставил такую картинку, но было много посторонних ссылок в комментарии, поэтому пришлось его удалить.В его профиле найдете список его блогов, в которых представлены различные картинки…♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥.♥..♥  ╔══╦══╗╔╦══╗  ♥..♥♥..♥  ╚═╗║╔╗║║║╔╗║  ♥..♥♥..♥  ╔═╝║║║║║║║║║  ♥..♥♥..♥  ║╔═╣║║║║║║║║  ♥..♥♥..♥  ║╚═╣╚╝║║║╚╝║  ♥..♥♥..♥  ╚══╩══╝╚╩══╝  ♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥

  2. VICTORIYA CAMILLERI:

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

  3. Алексей:

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

  4. VICTORIYA CAMILLERI:

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

  5. Алексей:

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

  6. VICTORIYA CAMILLERI:

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

  7. Алексей:

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

  8. VICTORIYA CAMILLERI:

    Значит, будем разбираться. :)

  9. Ольга:

    Расскажите поподробнее как перевести в html код???

Прокомментировать запись: