Оформление текста

Перечёркнутый текст: ТЕКСТ
<s> ваш текст </s>
Подчёркнутый текст: ТЕКСТ
<u> ваш текст </u>
Полужирный текст: ТЕКСТ
<b> ваш текст </b>
Полужирный крупный: ТЕКСТ
<big> ваш текст </big>
Курсивный текст: ТЕКСТ
<i> ваш текст </i>
Маленький текст: текст
<small> ваш текст </small>
Неразрывный пробел:
&nbsp;
Центрирование:

<center>ваш текст (картинка) </center>
Выравнивание текста по правому краю поста:
<div align=right> ваш текст </div>
Равномерное выравнивание текста по всей ширине поста:
<div align=justify> ваш текст </div>
Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>
Бегущая строка (рекомендую Бегущая строка):

<marquee> ваша бегущая строка</marquee>
Вместо текста можно вставить картинку:

Код этой картинки:
<marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

Сноска вверху: ТЕКСТ^сноска
^{ваша сноска}

Сноска внизу: ТЕКСТ_сноска
_{ваша сноска}

Линия:

ее код:<hr>
Ударение:
Cтавим после нужной буквы:
&#769;
“Закрепитель” (фиксирует текст так, как и расположите его в поле поста):

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

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

РАЗМЕР ШРИФТА:
Уменьшить текст: текст - 2
<font size="-2"> уменьшенный текст </font>
Увеличить текст на 1 пункт: текст
<font size="+1"> увеличить текст на 1 пункт </font>

Увеличить текст на 2 пункта: текст

<font size="+2"> увеличить текст на 2 пункта </font>

Увеличить текст на 3 пункта: текст

<font size="+3"> увеличить текст на 3 пункта </font>

Увеличить текст на 4 пункта: текст

<font size="+4"> увеличить текст на 4 пункта </font>

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст
<font color="red"> красный текст </font>
ЖЕЛТЫЙ: желтый текст
<font color="yellow"> желтый текст </font>
ФИОЛЕТОВЫЙ: фиолетовый текст
<font color="purple"> фиолетовый текст </font>
ЗЕЛЕНЫЙ: зеленый текст
<font color="lime"> зеленый текст </font>
СИНИЙ: синий текст
<font color="navy"> синий текст </font>
ФУКСИЯ: фуксия текст
<font color="fuchsia"> фуксия текст </font>

Таблица “базовых” цветов (вводим “Имя” или “Код”):

• Посмотреть сочетаемость цветов
• Таблица безопасных цветов
• Все цвета Интернета

  ВИД ШРИФТА:
  Шрифт этого текста “Monotype Corsiva”
  <font face="Monotype Corsiva"> текст </font>
  Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
  Шрифт этого текста “Monotype Corsiva”
  код этого текста:
  <font face="Monotype Corsiva" size="+2" color="fuchsia"> текст </font>

  Оформление ссылок (рекомендую спец. страницу Ссылки):

  Как вставить ссылку на веб-страницу:
  <a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>
  Как сделать, чтобы картинка была ссылкой на веб-страницу:
  <a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a>
  Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
  <a href="АДРЕС СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a>

  ---

  Спец. теги ЖЖ:

  Элементарный жж-кат (с “Read more”):
  <lj-cut> ТЕКСТ </lj-cut>
  жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:
  <lj-cut text="ПОДЗАГОЛОВОК"> ТЕКСТ </lj-cut>
  Работу ката не видно в режиме “ПРОСМОТР”
  Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale
  <lj user="wildmale">
  Сссылка на сообщество, например: aforism
  делается точно так же:
  <lj user="aforism">
  Если надо так:wildmale
  или так: comm - идем СЮДА

  Вместо wildmale пишем Дикий самец:
  <a href="lj://user/wildmale/">Дикий самец</a>
  Ежели надо с “человечком”: Дикий самец:
  <lj user="wildmale" title="Дикий самец">
  Скопировав код, не забудьте поменять реквизиты.
  Вставка МЕДИА-файлов:
  Видео, флеш и проч. в ЖЖ вставляются так:
  <lj-embed> код вашей вставки</lj-embed>

  ---

  Публикация картинок:

  Код любой картинки в сети в простом варианте выглядит так:
  <img src="http://…/…jpg">
  Уникальный URL (http://…/…jpg) выдает картинке хостинг, куда ее необходимо закачать с компа.
  “Чайникам” рекомендую такой путь:
  1.Открываешь ljplus.ru
  2. Регистрируешься
  3. Жмешь: КАРТИНКИ-ЗАГРУЗИТЬ-ОБЗОР-ЖМИ УЖЕ!
  4.Смотришь на HTML-коды и копируешь нужный в поле поста или каммента
  5. Постишь. Становишься знаменитым.

  Прим.: в каменты картинки ставятся также, но кат не работает.

  Как сделать, чтобы текст «обтекал» картинку?
  Легко - картинка слева, текст справа:
  добавляем в код картинки:
  align=left hspace=20
  Код картинки примет вид:
  <img src="http:…" align=left hspace=20>
  Помни:
  align=left – картинка слева, текст справа
  align=right - картинка справа, текст слева
  hspace=20 - расстояние между текстом и картинкой 20 пиксел по горизонтали
  vspace=20 - расстояние между текстом и картинкой 20 пиксел по вертикали
  Код картинки с плавным обтеканием текстом справа и снизу (или сверху) может иметь вид:
  <img src="http:…" align=left hspace=20 vspace=15>

  Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
  Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
  <br><br><br> - три пустые строки.

  Вставить две и более картинки горизонтально:
  <nobr>Текст (картинки)</nobr> - все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

  Регулируем расстояние меж картинками по-горизонтали:
  С помощью “неразрывного пробела”:  &nbsp;
  Расстояние, равное 8 пробелам будет выглядеть так:
  &nbsp; &nbsp; &nbsp; &nbsp;
  Вставляется меж кодов картинок, есс-но

  Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: - введите в код картинки title="ТЕКСТ"

  Если надо цветную рамку , добавьте в код картинки: style="border:5px solid red;" - задана красная рамка толщиной 5 пикселей

  Чтоб быстро вставить картинку с другого сайта, вставьте в пост:
  <img src="">
  затем войдите в “Свойства” картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

  Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)
  

  ---

  Окошечко для вставки кода, типа:
  ВАШ КОД
  получаем так:
  <textarea rows="2" cols="60"> ВАШ КОД </textarea>
  где rows и cols определяют площадь окна

  Можно сделать это окошечко покрасивше:

  <textarea>ВАШ КОД</textarea>

  <textarea style="border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;">КОДЫ </textarea>

  Кнопка-ссылка на веб-страничку
  Например, на эту:

  <form action="<a href="<a _fcksavedurl="<a _fcksavedurl="<a _fcksavedurl="<a _fcksavedurl="<a href="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://htmlka.com"""" target="_blank">http://htmlka.com"""</a> target="_blank"><a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://htmlka.com""</a>" target="_blank">http://htmlka.com""</a></a> target="_blank"><a href="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://htmlka.com"</a>"" target="_blank">http://htmlka.com"</a>"</a> target="_blank"><a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://htmlka.com"</a></a>" target="_blank">http://htmlka.com"</a></a></a> target="_blank" method="get"><input type="submit" value="htmlka"></form>

  Некоторые спецсимволы:

  Спецсимвол	Вид в браузере
  &lt;	<
  &gt;	>
  &amp;	&
  &quot;	"
  &reg;	®
  &trade;	™
  &copy;	©
  &hearts;	♥
  &times;	×
  &asymp;	≈
  &bull;	•
  &deg;	° (градус)
  много символов

  Если вы видите это: ★, ☠, ☭ - есть смысл посмотреть “Прочие” спецсимволы HTML, пока редко включаемые в официальные таблицы спецсимволов

Фотохостинги
не все, более-менее знакомые:

• gallery.ru
• imagebam.com
• xmages.net
• imageshack.us
• keep4u.ru
• tinypic.com
• pict.com
• foto.radikal.ru
• photobucket.com

  Хостинги для флеш (swf)

• petaimg.com - также можно хостить *.raw, *.psd, *.tiff, *.swf, *.svg, *.pdf и др.
• megaswf.com
  Подробнее про флеш: Вставка Flash

  Видеохостинги
  вставка видео аналогична вставке картинок - размещаем видеофайл на видеохостинге и получаем код для вставки в блог:

• youtube.com
• rutube.ru
• smotri.com

  Файлообменники
  выложить друзьям файлы можно на:

• zalil.ru (50Мб без регистрации, оч простой)
• sendspace.com (300Мб без регистрации)
• megaupload.com/ru/ (1 Гб без регистрации)
• filedropper.com (до 5Гб без регистрации)
• wikiupload.com (до 5Гб без регистрации)
• narod.yandex.ru (до 5Гб, регистрация)
• s4ve.as (анлим, без регистрации)

  Он-лайн аудио-плееры
  Вставить мр3 с компа:
  
  
  - читайте Вставка Медиа-файлов

  Полезно:

• Счетчики статистики (для ЖЖ и не только)
• Советы по работе с html
• Хитрости в ЖЖ и не только
• Как заработать на своем блоге
  

  ---

  Кнопка на этот сайт:
  код для вставки:
  <a href=http://htmlka.com/><img src=http://htmlka.com/wp-content/uploads/2009/07/butto.png border=0 alt="Помощь блогеру" title="Помощь блогеру" target=_blank></a>

  ---

  В начало ↑

Текст

Your text

<font size="+4">Your text</font>

Your text

<font size="+3">Your text</font>

Your text

<font size="+2">Your text</font>
Your text
<font size="+1">Your text</font>
Your text
<font size="-2">Your text</font>
Your very intresting text
<font face="Monotype Corsiva">Your very intresting text </font>
Your very intresting text
<font color="FF0000">Your very intresting text</font>

Your very intresting text

<font face="Monotype Corsiva" size="+2" color="FF0000">TEXT</font>

<span style="color:red;text-decoration:underline;"><span style="color:blue">Your text</span></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>

  ---

  Таблицы для подбора цвета:
   ТАБЛИЦА “БЕЗОПАСНЫХ” ЦВЕТОВ |  “КОЛЕСО” ЦВЕТОВ |  ЕЩЕ ТАБЛИЦА
  

  ---

  Аббревиатура: 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>

  ---

  Расстояние между буквами

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

  ---

  А здесь задано расстояние между строками по вертикали пятьдесят пикселов

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

  ---

  Невидимый фрагмент записи (интересно, что невидим даже в OperaMini, хотя мобильные браузеры игнорируют многие стилевые настройки):
  опаньки!
  Невидимый фрагмент записи

  <div style="visibility: hidden;">Невидимый фрагмент записи</div>

  ---

  Еще способ скрыть текст:

  <!– Ваша служебная невидимая пометка –>

  ---

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

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

  ---

  Опустить одну фразу на 5 пикселей ниже текста

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

  ---

  Повернуть текст на 90 градусов (работает только в IE):

  Раз, два, три, четыре, пять, шесть, семь

  <span style=writing-mode:tb-rl;>Текст</span>

  ---

  Следующий трюк, напротив, работает только в Opera и Mozilla FF:

  Раз, два, три, четыре, пять, шесть

  <span style=text-decoration:blink;>TEXT</span>

  ---

  Выделение цитаты в тексте.
  Пример:
  Еще поэт-романтик Новалис писал в Средние Века:
  Любимая! Ты - аббревиатура Вселенной.

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

  ---

  Написать текст, имея фоном картинку: /img527.imageshack.us/img527/7710/black41hj8.gif" target="_blank">http://img527.imageshack.us/img527/7710/black41hj8.gif);">Светить всегда, светить везде - до дней последних донца! Светить - и никаких гвоздей!
   

<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: white; padding: 8px; background-image:url("URL картинки");"> ТЕКСТ</div>

Лучше брать маленькую картинку - она будет автоматом повторяться, пока продолжается текст. Атрибутами width и height в % или px (пикселах) можно задать определенный размер фоновой области

МОЙ ЗАМЕЧАТЕЛЬНЫЙ И КРЕАТИВНЫЙ ТЕКСТ

<font onmouseover="style.backgroundColor='pink'; style.cursor='hand'" onMouseOut="style.backgroundColor='silver';">МОЙ ТЕКСТ</font>

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

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

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

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

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

Быстро написать так: Мои поздравления!!!
Можно ЗДЕСЬ