28 декабря 2010 г.

Как сделать надпись к картинке


Иногда хочется снабдить понравившуюся  картинку какой-то своей надписью так, чтобы эта надпись вставлялась вместе с картинкой неразрывно. Это можно сделать, используя HTML-коды. Давайте посмотрим, как это будет выглядеть на примере этой картинки "Глаз". Я это делал в Blogger, по идее можно и на других сервисах, суть одна.
Это код нашей картинки.




Теперь мы отредактируем его так, чтобы под ним появилась нужная нам надпись. Для этого окружаем весь этот код тегами


  
Теперь между кавычками "-"начинаем описывать нашу картинку. Кстати этот тег

 

предназначен для того, чтобы придать тексту или картинке определенный вид, сделать ее такой, какой мы хотим ее видеть.
Теперь вырезаем
и вставляем его между кавычек

 где 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 -полужирный шрифт.

В итоге мы получаем следующее. Картинка имеет вот такой код:


А вот так она выглядит в "натуре"

Этот глаз видит все!







0 коммент.:

Отправить комментарий