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

Среда, 21 Октября 2015 г. 17:42 + в цитатник

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

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

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

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

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

УВЕЛИЧЕННЫЙ ТЕКСТ
<big>ВАШ ТЕКСТ</big>

ТЕКСТ КУРСИВ
<i>ВАШ ТЕКСТ</i>

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

ПОДЧЕРКНУТЫЙ КУРСИВ
<u><b><i>ВАШ ТЕКСТ</i></b></u>

СРЕДНИЙ ТЕКСТ
<small>Your text</small>

ТЕКСТ^{ссылка выше}
ВАШ<sup>ТЕКСТ</sup>

ТЕКСТ_{ссылка ниже}
ВАШ<sub>ТЕКСТ</sub>

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

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

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

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

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

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

Мелкий текст

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

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

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

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

<font style="font-size:7pt;">ТЕКСТ</font>
Минимальное значение font-size:1pt (самый мелкий)

Меняем вид шрифта:
КРАСИВЫЙ ПРОПИСНОЙ ШРИФТ
<font face="Monotype Corsiva">ВАШ ТЕКСТ</font>

МЕНЯЕМ ЦВЕТ ШРИФТА
<font color="FF0000">ВАШ ТЕКСТ</font>

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

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

МЕНЯЕМ ШРИФТА И ЦВЕТ ТЕКСТА
<font face="Monotype Corsiva" size="+2" color="FF0000">ВАШ ТЕКСТ</font>

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ Цвета текста и линии можно менять.
<span style="color:red;text-decoration:line-through;"><span style="color:blue">ВАШ ТЕКСТ</span></span>

Синий текст подчеркнут красной линией
<span style="color:red;text-decoration:underline;"><span style="color:blue">ВАШ ТЕКСТ</span></span>

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

<span style="border:2px solid red; padding:3px;"><span style="color:blue;">ВАШ ТЕКСТ</span></span>

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

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

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

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

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

<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>

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

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

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

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

Правильное (и уважительное) указание автора под скопированным текстом (цитатой) с всплывающей доп. информацией при наведении курсора на имя автора
Пример

© J.Shaffer 1928

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

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

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

<pre>ваш текст</pre>

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым «моноширинным» шрифтом. Обычно в качестве такого шрифта используется Courier New. Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

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

<pre style="font-family:'Arial Black'">ваш текст</pre>

Текст, обтекаемый другим текстом:

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

<p style="padding-right: 15px; margin-top: 0px; float: left; margin-bottom: 3px; width: 30%; color: blue;">Текст внутри</p> Обтекающий текст

Написать текст, имея фоном картинку:

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

<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: red; padding: 8px; background-image: url('Адрес картинки');">ВАШ ТЕКСТ</div>

Выравнивание текста HTML-кодом

Исходный код для выравнивания текста по левому краю:
<div align="left"> Текст выровнен по левому краю </div>

Исходный код для выравнивания текста по правому краю:
<div align="right"> Текст выровнен по правому краю </div>

Исходный код для выравнивания текста по центру:
<div align="center"> Текст выровнен по центру</div>

Выравнивание текста по обеим сторонам:

Ваш текст

<div align="justify">Ваш текст</div>

Все о бегущем тексте СМОТРИМ ЗДЕСЬ

Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 10 - Все о бегущем тексте. Примеры и коды.
Часть 11 - Все о ссылках, оформление и коды.
Часть 12 - РАБОТА С ТЕКСТОМ. html коды для текста
Часть 13 - Он-лайн графические редакторы
Часть 14 - Бродилка по РУБРИКАМ моего дневника.
...
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников