Blogger: Картинка с подписью!

Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков.
У Кайла в блоге можно найти целую коллекцию фотографий этих персонажей:
Russia: What to do With Old Mufflers and Converters!

Расскажи больше...

Александр, который ведет блог Записки европейца, кстати очень интересный. Спросил меня как-то на днях (ну, по крайней мере уже в этом году), как я делаю подписи к картинкам.

Думаю, что и другим читателям это будет интересно. Для того чтобы делать подписи к картинкам нам надо будет припомнить все что мы знаем об Html (Стандартном языке разметки документов). Ну или хотя бы самое основное, что Html будучи языком разметки документов состоит из этих самых меток, которые принято называть тэгами (tag). Метки (т.е. тэги) бывают одиночными (непарными) или парными. И всегда заключаются в угловые скобки - знаки меньше и больше < >.

Примером одиночного - непарного тэга может служить тэг описания картинки <img ...>, который говорит вот здесь у нас будет картинка, а внутри тэга записываются его параметры такие как адрес (т.е. где эта картинка лежит в интернете) - это обязательно, конечно, заголовок картинки (это надпись, которую ваш читатель увидит, если наведет мышкой на картинку) и т.д. подробно я об этом рассказывала в статье: Blogger: Меняем размер картинки!. Очень рекомендую перечитать!

Большинство же тэгов являются парными и это естественно, они отмечают начало и конец чего-то. Ну, например абзаца, или текста который является ссылкой (кстати, если вы не знаете как правильно оформить на Html ссылку пожалуйста сюда: Blogger: Начала HTML - Ссылки!, но сегодня впрочем нам это не понадобится.) Парный тэг состоит из двух частей: метка начала тега <типтэга ...> и метка конца </типтэга> Типтэга - это несколько латинских букв (иногда одна латинская буква). Так мы уже рассматривали:

a - для ссылки (парный)
img - для картинки (непарный)
center - для позиционирования чего- либо по центру (парный)

Самые любознательные могут посмотреть перечень всех тегов Html.

И еще нам придется припомнить то немногое, что мы знаем об CSS стилях: Blogger: Голография и раскрашивание скрипта!. В общем-то, идти по ссылке прямо сейчас не обязательно, все самое важное я скажу здесь.

А самым важным является то, что в любой Html тэг можно добавить параметр style, в котором можно записать как мы хотим увидеть объект, описываемый этой меткой. Ну, например ширину и высоту картинки, величину, шрифт и цвет буковок в абзаце и т.д.

Ну вот, все подготовительные слова сказаны можно, наконец, переходить к картинкам с подписями:

Загружаем картинку через Blogger.

0) Меняем размеры картинки перетаскиваем её на нужное нам место;
1) Переходим из режима Создать в режим Изменить Html;
2) Видим абракадабру от Blogger'а, описывающую нашу картинку. Я вот например увидела такую:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 300pх; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a>

3) Не пугаемся ничего, а окружаем этот текст, описывающий нашу картинку, парным Html тэгом описания блока: <div style=""> - перед началом описания картинки и </div> в конце описания.

4) Теперь печатаем наш текст для описания картинки. Печатаем его между концом описания картинки и закрывающим тегом </div>.

5) Внимательно смотрим на описание картинки и находим в нем параметр style

6) Начинаем переносить, а некоторые элементы копировать из стиля описания картинки в стиль описания блока.

Так элемент описания отступов margin мы переносим из style картинки в style нашего блока. Не забываем про точку с запятой ; (переносим значит в стиле для картинки этого элемента уже не будет, а он будет только в стиле описания блока!)

Мы переносим также элемент описания обтекания текстом float.

Ширину картинки width мы копируем из style картинки в style описания блока div.

Ну, вот и всё... Пожеланию в описание style для div можно добавить

text-align: center; или text-align: justify; для размещения подписи по центру блока или выравниванию её по ширине получившегося столбца,

color:blue; - это будет цвет букв в нашем блоке - столбце. Конечно, blue взято для примера, вы туда подставите шестизначный код цвета или pink или еще английское название какого-нибудь другого красивого цвета (Про цвета я рассказывала здесь: Blogger: Готовим краски для раскраски!).

И, пожалуйста, не забываем про точку с запятой в конце описания каждого свойства!

можно так же изменить величину шрифта в нашем блоке, путем добавления свойства
font-size: 80%;

а можно поставить font-style: italic; это чтобы подпись была курсивом
и добавить font-weight: bold; чтобы текст был полужирным.

На сем моя фантазия иссякла, дорогие мои... Будут вопросы спрашивайте!

А это получившийся в этой статье код (картинка и подпись):

<div style="margin: 0pt 10px 10px 0pt; float: left; width: 300px; color: rgb(0, 102, 0); font-size: 80%; text-align: justify; font-style: italic; font-weight: bold;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="cursor: pointer; width: 300px; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a>Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков....</div>

Небольшое добавление: Раз уж у нас все так хорошо пошло, давайте сделаем совсем красиво!

1) Увеличиваем ширину в <div> пикселей на 10;

2) а картинку окружаем тэгами размещения по центру <center> </center>

Вот теперь я вам рассказала абсолютно всё!
А вот это полученный улучшенный код:

<div style="margin: 0pt 10px 10px 0pt; float: left; width: 310px; color: rgb(0, 102, 0); font-size: 80%; text-align: justify; font-style: italic; font-weight: bold;"><center><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="cursor: pointer; width: 300px; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a></center>Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков....</div>

Всем удачи и здоровья!
Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...