РАБОТА С ТЕКСТОМ. html коды для текста

Воскресенье, 20 Декабря 2015 г. 01:08 + в цитатник

Цитата сообщения Voldemar_1949

Прочитать целиком В свой цитатник или сообщество!

РАБОТА С ТЕКСТОМ. html коды для текста

ТЕКСТ_{ссылка ниже}

ОЧЕНЬ КРУПНЫЙ ТЕКСТ

<font size="+4">ВАШ ТЕКСТ</font>

КРУПНЫЙ ТЕКСТ

<font size="+3">ВАШ ТЕКСТ</font>

СРЕДНИЙ ТЕКСТ

<font size="+2">ВАШ ТЕКСТ</font>

Мелкий текст

ОЧЕНЬ МЕЛКИЙ ТЕКСТ

Супермелкий шрифт. Например: Я хочу тебе тихонько сказать Или: Я хочу тебе тихонько сказать

Минимальное значение font-size:1pt (самый мелкий)

Меняем вид шрифта:
КРАСИВЫЙ ПРОПИСНОЙ ШРИФТ

МЕНЯЕМ ЦВЕТ ШРИФТА

ВНИМАНИЕ. Таблица кодов цветов НАХОДИТСЯ ЗДЕСЬ

Для желающих поэкспериментировать с текстом есть очень интересный сайт typetester.org

МЕНЯЕМ ШРИФТА И ЦВЕТ ТЕКСТА

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ Цвета текста и линии можно менять.

Синий текст подчеркнут красной линией

Синий текст в красной рамкеЦвета текста и рамки можно менять.

Цветной текст с цветным фоном Цвета текста и фона можно менять.

РАБОТА С ТЕКСТОМ. html коды для текста

/img-fotki.yandex.ru/get/6442/65387414.33/0_c04b8_81a0b6c0_S" target="_blank">https://img-fotki.yandex.ru/get/6442/65387414.33/0_c04b8_81a0b6c0_S); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px rgb(128, 128, 128), 0px 0px 20px rgb(128, 128, 128);">

Сегодня мы поговорим о шрифтах, тексте, его основных формулах, и различном написании.

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

~~Перечеркнутый текст~~
<ВАШ ТЕКСТ</s>

Подчеркнутый текст
<u>ВАШ ТЕКСТ</u>

ЖИРНЫЙ ТЕКСТ
<b>ВАШ ТЕКСТ</b>

ТОНКИЙ ТЕКСТ
<samp>ВАШ ТЕКСТ</samp>

УВЕЛИЧЕННЫЙ ТЕКСТ

ТЕКСТ КУРСИВ

ЖИРНЫЙ КУРСИВ

ПОДЧЕРКНУТЫЙ КУРСИВ

СРЕДНИЙ ТЕКСТ

ТЕКСТ^{ссылка выше}

текст левой колонки

текст правой колонки

Незаметно исчезают друзья.
Реже встречи и короче звонки.
Изменить, наверно, это нельзя,
Если вы уже другие внутри.

И никто не виноват - просто жаль,
Что у всех такая разная жизнь.
Наше прошлое, летящее в даль,
Превращается легко в миражи.

Код:
<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки</table>

<div align=right><cite title="Информация">© АВТОР</cite></div>

Я
  Пешу
       Лесинкой!!!

C
     Днем 
               Рождения!

Сегодня мы поговорим о шрифтах, тексте, его основных формулах, и различном написании.

Томас Эдисон сказал: «У меня не было рабочих дней и дней отдыха. Я просто делал и получал от этого удовольствие».

Ваш текст

Посмотреть таблицу сочетаемость цветов

Все цвета меняйте по своему вкусу

Цветной текст с цветным фоном в цветной рамке

<span style="background-color:dodgerblue; color:white; padding:3px; border:3px solid red;">ВАШ ТЕКСТ</span>

Текст, подчеркнутый пунктиром

<span style="border-bottom: 2px dashed red;">ВАШ ТЕКСТ</span>

Текст, подчеркнутый точками

<span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый пунктиром</span>

Текст, подчеркнутый двойной чертой

<span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span>

Текст, окаймленный разноцветным пунктиром Все цвета можно менять.

<span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>

Текст в двойной рамке

<span style="border-style: double; padding:3px;">Текст в двойной рамке</span>

Цветной текст в двойной цветной рамке Цвета меняйте по своему вкусу

<span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>

Ваш текст в объемной 3D-рамке

<span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>

На заметку:
Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и тогда получим рамку во всю ширину поста.

Ваш текст в объемной 3D-рамке

Что бы получить рамку с определенными размерами, то используем следующие теги:
Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где ">width:200px; — ширина блока 200 пикселей,
height:50px; — высота блока 50 пикселей
Если проставить ширину и высоту, то получим рамку с нужными размерами:

Ваш текст в объемной 3D-рамке

<div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст </div>

Лучшие сервисы для подбора цвета:

ПЕРВАЯ ССЫЛКА - Таблица «безопасных» цветов
ВТОРАЯ ССЫЛКА - 4096 Цветовых Колеса
ТРЕТЬЯ ССЫЛКА - Таблица html кодов цветов, буквенное написание и коды цветов в RGB

Аббревиатура: HTML
<acronym title="Hiper Text Markup Language">HTML</acronym>

Так называемый «спойлерный» текст, проявляющийся при его выделении (закрашивании) мышкой. Например:
Загадка видна всем, а отгадку увидим только при выделении - «Зимой белый, летом серый ответ ЗАЙЧИК«

<span style="background-color:#FFFFFF; color:#FFFFFF">спойлерный текст</span>

Выделение первой буквы в предложении, или так называемая «буквица»:
Ж или были дед да баба…
<font size="+4" face="Monotype Corsiva" color="#0000FF">Ж</font> <i>или были дед да баба…</i>

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш основной текст текст
<p title="Пояснительный текст">Основной текст</p>

Текст «наоборот»:
Перевернуть текст задом-наперед
<bdo dir="rtl">Перевернуть текст задом-наперед</bdo>

Увеличиваем расстояние между словами
Значения можно менять
<div style="word-spacing: 20px;">ВАШ ТЕКСТ</div>

Больше расстояние между словами

<div style="word-spacing: 40px;">Больше расстояние между словами</div>

Расстояние между буквами
Значение 10px можно менять

<div style="letter-spacing: 10px;">Расстояние между буквами</div>

А здесь задано расстояние между строками (по вертикали) пятьдесят пикселов, как видите растояние между строчками сразу увеличилось. Значение пикселей можно менять

<div style="line-height:50px;">Расстояние между строками</div>

Приподнять ^фразу на 5 пикселей над текстом (значение можно менять)

Приподнять <sup style="position: relative; top:-5px;">фразу</sup>

Опустить _фразу (значение можно менять)

Опустить <sub style="position: relative; bottom:-5px;">фразу</sub>

Выделение цитаты в тексте.
Пример:
Выделяем следующую фразу:

Внимание, это пояснение очень важное

<div style="border-right: #000080 1px solid; padding-right: 4px; border-top: #000080 1px solid; padding-left: 3px; font-size: 92%; padding-bottom: 4px; border-left: #000080 1px solid; color: #000080; padding-top: 2px; border-bottom: #000080 1px solid; background-color: #f0f0ff"> ТЕКСТ ЦИТАТЫ</div>

Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ (наведите курсор на текст):

<button type="submit">ТЕКСТ С ЭФФЕКТОМ ПОДСВЕТКИ</button>

Разбить текст на две колонки:

Серия сообщений ""Для ЛиРу":":

Часть 1 - КАК НА ЛиРу СМЕНИТЬ email?
Часть 2 - Разные советы по ЛиРу
...
Часть 27 - Перенос дневника LiveInternet на WordPress.
Часть 28 - КАК СОХРАНИТЬ ДНЕВНИК НА КОМПЬЮТЕР
Часть 29 - РАБОТА С ТЕКСТОМ. html коды для текста
Часть 30 - Уровень доступа к блогу на ЛиРу