Пишите на сайтах красиво!

УРОК «Как сделать надпись на картинке с помощью HTML»

Дорогие друзья!

Иногда возникает ситуация, когда у нас есть красивая картинка и нужно написать на ней текст в определённом месте, не прибегая к помощи графических редакторов (Paint.NET, Photoshop или др.), чтобы, к тому же, если возникнет необходимость, иметь возможность быстро отредактировать этот текст в любой момент.

Принцип создания таких изображений следующий:
мы создаём таблицу по размеру нашей картинки и эту картинку используем в качестве фона таблицы. Затем определяем область размещения текста (то есть смотрим, где лучше всего сделать надпись на картинке), создаём необходимое количество ячеек и столбцов внутри таблицы и подгоняем их размер так, чтобы наш текст оказался в нужном месте. При этом мы можем выравнивать его так, как нужно, задать ему фон и размер, чтобы вся "конструкция" выглядела привлекательно.

Вот для таких случаев мы можем воспользоваться нашими умениями кодировать таблицы. Как сделать таблицу вы можете прочитать в уроке " Как сделать каркас таблицы".

Пример:

Код картинки:

Теперь объясню, что я сделала:

1. У меня есть красивая картинка размером 414 на 376 пикселей. Размер я узнала, когда открыла её в Paint.NET. Я хочу сделать из неё открытку и разместить на сайте, например. Но я вижу, что эта картинка имеет расширение .gif, то есть она анимированная и, если я просто напишу на ней в графическом редакторе что-то, то она перестанет быть анимированной, к сожалению. Что делать? Будем делать таблицу!
2. Посмотрим, какой именно она должна быть. Я хочу сделать надпись сверху и несколько слов слева. Эти несколько слов вполне могут располагаться в одной ячейке в одной строке, если каждое из них поместить в свой контейнер <p>...</p>. Справа у нас изображение, значит, нам будет достаточно сделать таблицу из 2 строк, причём верхняя ячейка должна охватывать 2 нижние.
3. Напишем каркас таблицы:
   

   <table> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </table>

4. Теперь пропишем размеры таблицы по размерам картинки и саму картинку как фон. Я загрузила картинку на сайт-хостинг и использовала полученную ссылку. Также зададим высоту верхней строки - получится примерно 30 пикселей. Кроме того, сразу введём в ячейки нужный текст:

   <table width="414" height="376" background="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http:////s51.radikal.ru/i132/1105/3f/05cd3c0d25b2.gif">" target="_blank">//s51.radikal.ru/i132/1105/3f/05cd3c0d25b2.gif"></a> <tr height="30"> <td colspan="2">Всегда вместе!</td> </tr> <tr> <td>Скучаю! Мечтаю! Целую! Люблю! Жду!</td> <td> </td> </tr> </table>

   На данный момент наша картинка выгладит вот так:

   Всегда вместе!
   Скучаю! Мечтаю! Целую! Люблю! Жду!

5. Мы видим, что у нас всё получилось, как нужно, но текст пока не оформлен и прижат к краю таблицы. Теперь нужно задать в открывающем теге таблицы отступ cellpadding, чтобы немного отодвинуть текст от краёв. Кроме того, нужно заключить каждое слово в контейнер <p>, чтобы они были порознь, а не на одной строке, а также получили небольшое расстояние друг между другом:

   <table width="414" height="376" cellpadding="20" background="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http:////s51.radikal.ru/i132/1105/3f/05cd3c0d25b2.gif">" target="_blank">//s51.radikal.ru/i132/1105/3f/05cd3c0d25b2.gif"></a> <tr height="30"> <td colspan="2">Всегда вместе!</td> </tr> <tr> <td><p>Скучаю!</p> <p>Мечтаю!</p> <p>Целую!</p> <p>Люблю!</p> <p>Жду!</p></td> <td></td> </tr> </table>

6. И, наконец, с помощью тега font и его атрибутов оформим текст курсивом, зададим ему тёмно-серый цвет и нужный размер. В результате получится то, что мы и увидели в начале этого урока.

Кроме того, используя таблицу, вы можете создать рамку определённого цвета вокруг своей картинки. Для этого таблицу с картинкой нужно будет вложить в другую таблицу с одной ячейкой, задать фон нужного цвета для этой таблицы (атрибут bgcolor) и отступ от границы ячейки до её содержимого (атрибут cellpadding), чтобы проявилась рамка. В этом случае мы не можем прописать рамку и её цвет в таблице картинки, так как, если мы напишем любое значение border, отличное от нуля, то у нас вокруг ячеек таблицы появятся границы, а нам это не нужно.

О том, как вкладывать одну таблицу в другую, вы сможете прочитать в специальном уроке.

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

http://webmaster-html.ucoz.ru/publ/html_tekhnologi...s_pomoshhju_html_quot/3-1-0-35