Как сделать окошко для кода

Как сделать окошко для кодов?

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

Часто  возникает один и тот же вопрос - А как вставить код или текст в окошечко? Вот и решила об этом  в блоге написать (чтоб не забыть), да  вдруг кому ещё интересно будет.

 Теперь чуть подробнее о коде и как его применять

КОД

<textarea rows="5" cols="40">ваш текст, код</textarea>

rows="5" - Цифра 5 это ВЫСОТА окошка

cols="40" - Цифра 40 это ШИРИНА окошка

При необходимости поменяйте эти значения на нужные Вам.



КОД ОКОШКА
ВАША КАРТИНКА

<textarea style="text-align: center;" readonly="readonly" cols="40" rows="5" name="S1">ВАША КАРТИНКА</textarea>

Пояснения:
textarea - область с текстом.

rows - количество строк,

cols - кол-во столбцов (символов в строке)

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

также есть параметр disabled, запрещающий выделять и копировать код из textarea.

text-align: center; - расположение текста внутри формы, так же можно написать: сenter, left, right 

Итак:

1. Загрузите нужную картинку,

2. Скопируете код окошка написанный выше и поставьте его после загруженной картинки,

3. Скопируете код картинки полностью и вставьте его после кода окошка.

КАРТИНКА --->>> КОД ОКОШКА --->>>КОПИЯ КОДА КАРТИНКИ

...............................................................

Чтобы получить код картинки, имеющейся у вас на компьютере - можно загрузить её на сайт http://radikal.cc/Img/ShowUploadedImg?id=e409b735efb440ef96d305516f4cae9b

 Спасибо всем моим друзьям из СОДРУЖЕСТВА УЧИТЕЛЕЙ!
Благодаря вам - я двигаюсь вперёд.