Иногда хочется снабдить понравившуюся картинку какой-то своей надписью так, чтобы эта надпись вставлялась вместе с картинкой неразрывно. Это можно сделать, используя 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 -полужирный шрифт.
В итоге мы получаем следующее. Картинка имеет вот такой код:
Теперь вырезаем
и вставляем его между кавычек
где 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 коммент.:
Отправить комментарий