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

 Взято здесь

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

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

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

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

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