-Рубрики

 -Приложения

  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Кнопки рейтинга «Яндекс.блоги» Кнопки рейтинга «Яндекс.блоги»Добавляет кнопки рейтинга яндекса в профиль. Плюс еще скоро появятся графики изменения рейтинга за месяц
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

 -Всегда под рукой

 -Поиск по дневнику

Поиск сообщений в Шадрина_Галина

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 22.09.2013
Записей: 1430
Комментариев: 53055
Написано: 55127


Как правильно вставлять код в окошко для кодов.

Понедельник, 25 Января 2016 г. 12:58 + в цитатник

1223222399_gifs_divers.gifМногие сталкиваются с проблемой, особенно на ЛиРу, что при вставлении кодов в кодовое окошко, код в окне выставляется не полностью - обрезаются "хвостики" или наоборот - начало кода, или когда в посте блога надо написать HTML-код в виде текста а многие этого не умеют. Так что же делать, чтобы код остался в тексте сообщения виден как HTML?
Напишу несколько вариантов, как это сделать.
1. Код с использованием тэга <input
Код баннера можно поставить вот в такое окошечко. Это самый простой вид окошечка, и его используют в основном для небольших кодов.



Вот код этого окошечка, который можно сразу копировать, и вместо слов КОД БАННЕРА вставлять свой код.

<input type='text' size='15' value='тут код'>

где: size='35' - ширина окошка в пикселях (можно менять значение, если хотите что б окошечко было большего размера.)

Если вы заметили, кавычки в коде одинарные. Это для предотвращения путаницы с кавычками. Если вам нужно вставить код также с одинарными кавычками, то в коде самого окошка нужно поменять кавычки на двойные!!!





2. Код с использованием тэга <textarea
ЭТОТ КОД НАИБОЛЕЕ УДОБЕН, ЕГО ЛЕГКО МОЖНО ПРЕОБРАЗОВАТЬ, ВЫДЕЛИТЬ. В него можно вставить коды большой рамочки, или целого поста. Такое окошечко удобно и тем, что нет путаницы с кавычками, как в первом, так как если где то встретятся одинарные, то в первое окошечко вы и вовсе не сможете вставить правильный код.
Для такого случая используйте ОКОШЕЧКО ВОТ С ТАКИМИ ТЕГАМИ.

<textarea rows="1" cols="30">ВАШ КОД </textarea>

Где <textarea> - это ОТКРЫВАЮЩИЙ ТЕГ, и ставится вначале кода
</textarea> - ЗАКРЫВАЮЩИЙ, который ставится в конце кода.
При необходимости меняем размер.
Атрибут cols="30" отвечает за ширину окошка. Меняем цифру "30" на нужную нам.
Атрибут rows="1" отвечает за высоту. Высоту окошечка можно менять на удобную вам.
Где написано ...ВАШ КОД... туда и вставляете свой код.

С этими тегами КОД, например простой рамки будет выглядеть ВОТ ТАК.


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

Для того, что б как то выделить код, можно украсить наше окошко цветом, вот так:


Код такого цветного окошечка.

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета;">ВАШ КОД</textarea>

Обводку окошечка тоже можно выделить цветом. Выглядит это вот так



КОДЫ ЦВЕТНОГО ОКОШЕЧКА, С ЦВЕТНОЙ ОБВОДКОЙ.

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета ОКОШЕЧКА; border: 2px solid ЦИФРОВОЕ обозначение цвета ОБВОДКИ;">ВАШ КОД</textarea>

кому непонятны "цифровые" обозначения цвета то напомню что в таблице КОДОВ ЦВЕТОВ, КОТОРАЯ НАХОДИТСЯ ЗДЕСЬ берем вот такие значения
#ffffff - белый,
#cccccc - серый,
#000000 - черный.
#8b0000 бордо и т.д.

В коде есть кусок border: 2px - 2px это толщина обводки. Меняем двойку как хотим. толщина обводки по вашему вкусу.. ЦВЕТ СТАВИТ ТАК ЖЕ, как и цветв самом окошечке, то есть ЦИФРОВОЕ обозначение цвета.

Будьте ВНИМАТЕЛЬНЫ, при стирании слов в кодах, и подставлении своих значений, НЕ СТИРАЙТЕ КАВЫЧКИ, ТОЧКИ С ЗАПЯТОЙ и прочие НУЖНЫЕ символы в кодах. Аккуратно стираем только рекомендательные слова, и вместо них, так же аккуратно ставим свои значения.


Теперь ВНИМАНИЕ. Несмотря на все наши старания, на ЛиРу мы часто сталкиваемся с проблемой, что при выставлении кодов в кодовое окошко, код в окне выставляется не полностью - обрезаются "хвостики", и код становится не рабочим.

Что же делать? Секрет этого безобразия в том, что код, который надо вставить в окошко сначала надо преобразовать в текстовом (визуальном) режиме, то есть осуществить перевод специальных символов кода в их текстовые обозначения. Заменить все правые угловые скобочки < на  &lt; , левые угловые скобочки > на &gt;

Вручную такой перевод сделать очень сложно, поэтому обратимся к ОНЛАЙН ГЕНЕРАТОРУ, который сделает это быстро и без проблем.



3. Как в посте блога записать HTML-код в виде текста.

После перевода специальных символов кода в их текстовые обозначения, коды можно ставить как В ОКОШЕЧКИ ДЛЯ КОДОВ, которые даны выше, так и просто вставить коды в текст, без ВСЯКИХ ОКОШЕЧЕК.

То есть, если вы хотите написать в тесте поста такой код рамочки, (Уже заменив символы правые угловые скобочки < на  &lt; , левые угловые скобочки > на &gt;) то можете его вставить в окошечко. и тогда он будет выглядеть вот так, и НИКАКИЕ *ХВОСТИКИ* НЕ ОБРЕЖУТСЯ:



ПРОСТО В ЗАПИСИ, без ВСЯКИХ ОКОШЕЧЕК, КОДЫ РАМОЧКИ БУДУТ ВЫГЛЯДЕТЬ ВОТ ТАК (то есть HTML-код в виде текста):

<div align="center"><div style="padding: 10px; background:url('https://img-fotki.yandex.ru/get/6717/65387414.159/0_ca958_2cb15c4d_S'); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px rgb(128, 128, 128), 0px 0px 20px rgb(128, 128, 128);"><center>ПОСТ</center></div></div>

Сравните эти коды, и вы увидите, что они совершенно одинаковые. То есть код, с применением Html Character EnCoder можно ставить как в ОКОШЕЧКЕ. ТАК И БЕЗ НЕГО.

А теперь подробнее где и как это сделать.


в расширенном редакторе на ЛиРу, есть перевод угловых скобочек в специальные символы. Но это сложная процедура, и кроме того не все умеют работать в расширенном редакторе, и еще в некоторых редакторах не так отображаются кавычки, возможно еще какие-то символы.

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

Конвертеров таких много, я пользуюсь, "Html Character EnCoder"

Программа очень простая и удобная. Зайдя на сайт Html Character EnCoder, вы увидите вот такие окошечки

pic1 (575x516, 222Kb)

Выполняете Шаг 1. Вставляете свой код (например той же рамочки, что я дала в окошечке), в пустое окошко внизу

pic2 (563x350, 247Kb)

Шаг 2. Нажимаете кнопку "Convert". И в окошке получаете ваш код, переконвертированный в текст

pic3 (525x294, 221Kb)

Шаг 3. Копируете этот новый код и вставляете его в своем редакторе сообщений в режиме редактирования HTML., как хотите - можно в окошечко для кодов, а можно оставить просто как текст, выделив его цветом или шрифтом, что б был виден и немного выделялся. Если код у вас очень большой, то потяните за ПРАВЫЙ НИЖНИЙ уголочек рамки, и она сразу растянется, пока не будет виден весь код.

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


Точно так же сайт вам переконвертирует любой код в текст, и вы ЛЕГКО ЕГО ВСТАВИТЕ В любой ТЕКСТ.


4. КАК ВСТАВИТЬ В ТЕКСТ КОДЫ ФЛЕШ.

Если обычным способом вставлять коды флеш (то есть в окошечко для кодов). то коды ее исказятся, и работать не будут. Поэтому, чтобы этого не происходило есть один "секретик" - сразу после первой квадратной скобки поставьте звездочку.

Если вы просто даете коды флеш, то в окошечко для кодов их ставить не имеет смысла. Просто в коде флеш поставьте звездочку, после первой квадратной скобки, и правильный код будет виден всем.

СЂРёСЃ4 (574x131, 82Kb)

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

[flash=200,200,http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf]

ЕСЛИ КОДЫ ФЛЕШ В КАКОЙ ТО СЛОЖНОЙ РАМКЕ, или в составе кода муз.открытки. и прочего. то большой код лучше вставить в окошечко для кодов. НО ВНИМАНИЕ, в кодах флеш ВСЕГДА надо ставить ЗВЕЗДОЧКУ после первой квадратной скобки. Иначе формула исказится и в окошечке для кодов.

Вот вроде и все о кодах окошечек и выставлении кодов в них.
Успехов в вашем творчестве.
https://img-fotki.yandex.ru/get/16116/65387414.8bf/0_152ee2_6de8b6c7_orig

Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 16 - Заморские сайты к НОВОМУ ГОДУ
Часть 17 - 100 самых полезных сайтов Интернета
Часть 18 - Как правильно вставлять код в окошко для кодов.
Часть 19 - Рамочки с флагом своей страны.
Часть 20 - Справочник по основным тегам HTML.
...
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников

Метки:  

Процитировано 161 раз
Понравилось: 102 пользователям

Дневник_Девы   обратиться по имени Понедельник, 25 Января 2016 г. 13:19 (ссылка)
...кто только мне не показывал,КАК это делать -и все учат по-разному!))0ВАМ спасибо за урок!ГАЛИНУШКА! от Веронички
Ответить С цитатой В цитатник
Лариса_Виноградова   обратиться по имени Понедельник, 25 Января 2016 г. 13:29 (ссылка)
Галочка,огромное спасибо!!!
Ответить С цитатой В цитатник
svetukia1941   обратиться по имени Понедельник, 25 Января 2016 г. 14:06 (ссылка)
Спасибо,Галочка за пост!!!!!!
0_12bbf0_71781994_S (150x73, 6Kb)
Ответить С цитатой В цитатник
Нинуля_Смолина   обратиться по имени Понедельник, 25 Января 2016 г. 14:07 (ссылка)
Спасибо за урок,Галочка !
Ответить С цитатой В цитатник
RozArija   обратиться по имени Понедельник, 25 Января 2016 г. 14:46 (ссылка)
спасибо
Ответить С цитатой В цитатник
Mono-Liza   обратиться по имени Понедельник, 25 Января 2016 г. 14:49 (ссылка)
Такой подробный урок невозможно пропустить! Галочка, ты спец по урокам, даже тупой поймет!
Ответить С цитатой В цитатник
GALINA_RAKITYANSKI   обратиться по имени Понедельник, 25 Января 2016 г. 15:10 (ссылка)
Галочка,спасибо!
Ответить С цитатой В цитатник
TAISA_ANDRYEYEVA   обратиться по имени Понедельник, 25 Января 2016 г. 15:37 (ссылка)
С благодарностью к Вам,Галина,за Ваши уроки!!!

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
Алло_чка44   обратиться по имени Понедельник, 25 Января 2016 г. 15:42 (ссылка)
Галина, огромное спасибо за подробное изложение твоих уроков!!!
Ответить С цитатой В цитатник
Liudmila_Sceglova   обратиться по имени Понедельник, 25 Января 2016 г. 15:43 (ссылка)
Cпасибо за пост!Удачной недели!
Ответить С цитатой В цитатник
Валяника   обратиться по имени Понедельник, 25 Января 2016 г. 16:07 (ссылка)
Спасибо...может разберусь....
Ответить С цитатой В цитатник
Галина_Ковальская   обратиться по имени Понедельник, 25 Января 2016 г. 16:27 (ссылка)
Галина! Серия "Шпаргалки" - это просто для меня. Спасибо.
Ответить С цитатой В цитатник
Марина_55   обратиться по имени Понедельник, 25 Января 2016 г. 16:37 (ссылка)
Спасибо, Галочка!
Ответить С цитатой В цитатник
Цветок_грез_Танюша   обратиться по имени Понедельник, 25 Января 2016 г. 17:36 (ссылка)
Код и правда обрезается. Поэтому и ставить перестала. Буду изучать, спасибо, Галина.
Ответить С цитатой В цитатник
Надежда_Заломина   обратиться по имени Понедельник, 25 Января 2016 г. 19:02 (ссылка)
Спасибо большое.
Ответить С цитатой В цитатник
Дуняша_Толковая   обратиться по имени Понедельник, 25 Января 2016 г. 19:09 (ссылка)
Для меня это темный лес, постараюсь выйти из него.Галя благодарю.
Ответить С цитатой В цитатник
VeraVik   обратиться по имени Понедельник, 25 Января 2016 г. 19:45 (ссылка)
Галочка, спасибо. С днем Студента - век живи, век учись!!
Ответить С цитатой В цитатник
ЛОИНА   обратиться по имени Понедельник, 25 Января 2016 г. 20:29 (ссылка)
Галина, спасибо!!!!
Ответить С цитатой В цитатник
Millena-Li   обратиться по имени Понедельник, 25 Января 2016 г. 21:58 (ссылка)
замечательный пост
на мой взгляд, самый удачный в объяснении)))
Ответить С цитатой В цитатник
Васточка   обратиться по имени Понедельник, 25 Января 2016 г. 22:07 (ссылка)
спасибо Галиночка
Ответить С цитатой В цитатник
Talya6   обратиться по имени Понедельник, 25 Января 2016 г. 22:11 (ссылка)
Спасибо, Галочка.
Ответить С цитатой В цитатник
Моисеева_Надежда   обратиться по имени Понедельник, 25 Января 2016 г. 23:43 (ссылка)
Спасибо за такой подробный урок!
Ответить С цитатой В цитатник
Назарова_Галина   обратиться по имени Вторник, 26 Января 2016 г. 01:14 (ссылка)
Замечательный, нужный пост. Спасибо, дорогая за такую отличную работу. Возьму себе.
Ответить С цитатой В цитатник
nadmirchik   обратиться по имени Вторник, 26 Января 2016 г. 14:06 (ссылка)
Спасибо Галочка! Ты всегда так доходчиво все объясняешь! Будь здорова дорогая! Не простывай!!!!
Ответить С цитатой В цитатник
valyok   обратиться по имени Вторник, 26 Января 2016 г. 22:54 (ссылка)
Галиночка СПАСИБО за урок и обьяснение
буду признательна за коммн-голос за мою первую работу
аукцион-конкурс в соо
http://www.liveinternet.ru/community/best_of_callery/post382999885/
пользовалась и твоими уроками
Ответить С цитатой В цитатник
Савва_Копман   обратиться по имени Пятница, 29 Января 2016 г. 17:12 (ссылка)
Спасибо за уроки,все очень интересно.Будем повышать свои знания.
Ответить С цитатой В цитатник
эжейни   обратиться по имени Пятница, 29 Января 2016 г. 23:29 (ссылка)
Большое спасибо, Галина, за подробный полезный урок! Может разберусь, что к чему ?
Ответить С цитатой В цитатник
Elocjka   обратиться по имени Четверг, 04 Февраля 2016 г. 19:27 (ссылка)
спасибо Галочна за полезный урок

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
Дарина_-Волшебница   обратиться по имени Четверг, 11 Февраля 2016 г. 10:18 (ссылка)
Забираю с благодарностью!
Ответить С цитатой В цитатник
Tanja_7   обратиться по имени Суббота, 20 Февраля 2016 г. 12:09 (ссылка)
Благодарю за подробный урок!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку