-Метки

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

 -Рубрики

 -

Быстрый переход по страницам блога Kuma_1:

 -

Радио в блоге
[Этот ролик находится на заблокированном домене]

Добавить плеер в свой журнал
© Накукрыскин

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

Поиск сообщений в Kuma_1

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

 

 -Статистика

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


Окошки для кода или текста и Текст в ФЛЕЙМЕ с прокруткой

Четверг, 10 Ноября 2016 г. 21:42 + в цитатник
Окошко для вставки кода или текста (без прокрутки)
с использованием тэга input

size="10" -
size="40" -
Атрибут size - определяет ширину текстового поля
- код окошка без прокрутки


Окошко для вставки кода или текста (с прокруткой)
с использованием тэга textarea


Атрибуты определяющие площадь окна:
cols - определяет ширину текстового поля
rows - определяет высоту (кол-во строк) текстового поля

- код окошка с прокруткой


При желании, окошко можно залить цветом, т.е. сделать фон.

Атрибуты встречающиеся в ниже приведенных кодах:
background-color:цвет фона
border: 2px solid #CC0000; бордюр, где:
2px - толщина бордюра,
solid – вид линии,
#CC0000 – цвет бордюра.



или изменить цвет бордюра(обводки) окошка:

border-right: yellow 2px solid; - параметры правого бордюра
border-top: red 2px solid; - параметры верхнего бордюра
border-left: lime 2px solid; - параметры левого бордюра
border-bottom: blue 2px solid; - параметры нижнего бордюра
color:white; - цвет текста
width: 30%; - ширина окошка



Важное дополнение.

Все коды окошек, которые приведены выше,- позволяют пользователю не только брать код из окошка, но и писать самому в этом окошке. В этом нет ничего страшного.
Но если вдруг, пользователь нечаянно чего-нибудь сотрет или видоизменит код, а потом скопирует его себе, то код может и не сработать…
Чтобы этого избежать, тегу добавляется атрибут readonly (от англ. "read only" ‒ «только для чтения»).
readonly="readonly" - указывает, что текстовый элемент формы имеющий данный атрибут не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий.(копировать можно!)
И вот результат:


Изменить текст в этом окошке пользователю уже не удастся



font-size:20px; - задает размер шрифта и окошка:

- font-size: 10px

- font-size: 15px

- font-size: 20px

- код здесь


text-align: center; - расположение текста в окошке

- код здесь


Важное пояснение:
Такие окошки подходят для написания кодов или текста в один абзац.
При разделении текста на разные абзацы будет выскакивать и виден значок <br />, обозначающий конец абзаца и например текст:
«Проблемы множатся в геометрической прогрессии,
На сердце увеличивая груз,
Но не впадаю я от этого в депрессию,
В прострации, поскольку, нахожусь.»
будет выглядеть в окошке вот так:


Для того, чтобы код можно было писать прямо в тексте, без окошка, его надо обрамить так:
Отображается моноширным шрифтом Courier New в ОДНУ строку.
Поэтому в этот тег лучше заключать короткий код или другие теги, так как длинный код уйдет за пределы правого края страницы.


Текст в ФЛЕЙМЕ с прокруткой

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

Фразочки из интернета:
  • Чем больше знаешь, тем больше знаешь лишнего.
  • Умно отвечают только тому, кто умно спрашивает.
  • Ума будет больше, если его не расходовать.
  • Не ищите отговорок, они должны быть под руками.
  • Думает ли тот, кто говорит что думает?
  • Ваша борьба за показатели может кончиться борьбой врачей за вашу жизнь.
  • Коллектив единомышленников: каждый думает о себе.
  • Не обижайся на шутку - возьми шутника на заметку.
  • Чем хуже жизнь, тем прекраснее мечты.
  • Чтобы казаться умным, прикиньтесь дураком.
  • Чем ленивее человек, тем больше его труд похож на подвиг.
  • Мысли покидают голову, не выдерживая одиночества.
  • Всякое решение старых проблем порождает новые.
  • Книгу мы любим потому, что она самый молчаливый друг.
  • Прозаик пишет обдуманное, лирик - пережитое, программист - прочитанное.
  • Если у тебя есть совесть, то и сто способов не помогут тебе разбогатеть.
  • Как бы ты ни был скромен, людям все равно хочется, чтобы ты был еще скромнее.
  • Чтобы любить людей, нужно иметь большое больное сердце.
  • Будь самоучкой, не жди, пока жизнь научит.
  • Предпоследняя ошибка выявляется при демонстрации работы начальнику.
  • Скромность украшает человека, но плохо одевает.
  • Нужно бороться со старыми предрассудками, чтобы победили новые.
  • Подчиненные тоже люди и тоже не хотят думать.
  • Многое можно заставить человека сделать по собственному желанию.
  • Сделай словам тесно и мыслям не поздоровится.
  • Если ничто другое не помогает, прочтите, наконец, инструкцию!
  • Не тратьте силы, возьмите молоток побольше.
  • Шутки надо понимать быстро, хотя не обязательно правильно.





текст с прокруткой в флейме с переменным:
overflow-y: scroll; - прокрутка по высоте видна всегда
height: 100px; - высота блока видимого текста
border:1px solid black; - бордюр: тонкая, сплошная, черная линия



текст с прокруткой в флейме с переменным:
overflow: scroll; ; - прокрутка по высоте и ширине блока видна всегда
height: 130px; - высота блока видимого текста
width: 800px; - ширина блока видимого текста
border:1px solid black; - бордюр: тонкая, сплошная, черная линия
text-indent: 5pt; - устанавливает величину отступа первой строки блока текста
scrollbar-arrow-color: #660000; - цвет треугольника на верхнем и нижнем квадратах
text-align: left – выравнивание текста слева
font face="georgia" – вид шрифта текста
font size="3" – размер шрифта текста
font color="#000000" – цвет шрифта текста







текст с прокруткой в флейме с переменным:
overflow: scroll; - прокрутка по высоте и ширине блока видна всегда
style="width: 800px;" - ширина строки написанного текста
width: 800px; - ширина блока видимого текста
height: 130px; - высота блока видимого текста
border:1px solid black; - бордюр: тонкая, сплошная, черная линия
text-indent: 5pt; - устанавливает величину отступа первой строки блока текста
scrollbar-arrow-color: #660000; - цвет треугольника на верхнем и нижнем квадратах
text-align: left – выравнивание текста слева
font face="georgia" – вид шрифта текста
font size="3" – размер шрифта текста
font color="#000000" – цвет шрифта текста







текст с прокруткой в флейме с переменным:
теми же, кроме
overflow: auto; - полосы прокрутки отображаются при переполнении блока видимости




Запрет переноса строки.
Тег NOBR запрещает перенос строки.
В результате текст, заключенный в этот тег, будет размещаться в одной строке независимо от ее размера.
Это приводит к появлению полосы горизонтальной прокрутки.
Закрывающийся тег обязателен.

В результате текст будет размещаться в одной строке независимо от ее размера. Закрывающийся тег обязателен.




текст с прокруткой в флейме
с разными стилями (шрифтами)
написания текста




Атрибуты встречающиеся в кодах:
width: 100%; - ширина блока видимого текста, задается в % или px
height: 300px; - высота блока видимого текста
margin-top: 0px; - отступ сверху от начала сообщения
margin-left: 0px; - отступ с левой стороны
text-indent: 5pt; - устанавливает величину отступа первой строки блока текста (например, для абзаца < p >). Воздействия на все остальные строки не оказывается.
border:1px solid black; - обводка (бордюр) заданного блока в котором будет виден текст, если поставить 0px бордюра не видно.
overflow - управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую (заданную) длину/ширину.
overflow-x - управляет поведением блока при переполнении по ширине
overflow-y - управляет поведением блока при переполнении по высоте
overflow: auto - полоса прокрутки отображается (становится видимой) при переполнении блока видимости
overflow:scroll - полоса прокрутки видна всегда, даже если переполнения нет
style="width: 800px;" - ширина строки написания текста внутри блока
text-align: left – выравнивание текста: слева - left, справа – right, по центу – center, justify
font size="3" – размер шрифта текста
font color="#000000" – цвет шрифта текста
font face="georgia" – вид шрифта текста
Переменные прокрутки:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
#FFFFFF - это коды цвета, которые можно менять.
Не обязательно использовать все теги.


Рубрики:  001(2) ЛиРу: HTML коды шпаргалки
Метки:  

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

 

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

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

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

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