1. Введение
2. Форматирование шрифта
3. Выравнивание текста и форматирование параграфов
4. Отступы объектов
5. Списки
6. Картинки
7. Ссылки на другие страницы
8. Cсылки для перехода к тексту внутри страницы
9. Таблицы
10. Специальные тэги
11. Специальные символы
12. Тэги и стили в LiveJournal.com

Памятка призвана помочь начинающим web-разработчикам и блогерам. Предлагаемые инструменты — это тэги HTML (HyperText Markup Language или «язык гипертекстовой разметки», стандартный язык разметки документов в Интернет) и параметры форматирования CSS (каскадные таблицы стилей, формальный язык описания внешнего вида документа, написанного с использованием языка разметки). Параметры форматирования CSS страиваются в тэги HTML с помощью атрибута STYLE.

Если данной памятки для Вас не достаточно, рекомендуем воспользоваться справочниками HTML и CSS.

* В основу памятки легли материалы alex_inside.

Базовые тэги для работы с текстом:
<p> Обычный абзац с отступом снизу. </p>
* С тэгами <p> </p> можно использовать другие тэги, такие как <b>, <i>, <s> и т.д.
* Внутри тэга <p> можно использовать атрибуты для изменения свойств, такие align, style и т.д.

<span> Текст, которому с помощью стиля можно менять свойства. </span>

<div> Ограниченная область, которой можно менять свойства (положение, границы, отступы, свойства содержимого и т.д.). </div>
* По умолчанию границы областей не видны. На одной странице может быть сразу несколько областей <div>.

Форматирование текста:

<b> Полужирный текст </b>

<i> Выделение текста курсивом </i>

<u> Подчёркнутый текст </u>

<s> Зачёркнутый текст </s>

<small> Маленький шрифт </small>

<big> Большой шрифт </big>

Знак сноски ^{^сверху} или индекс _{_снизу} от текста

<acronym title="Всплывающая подсказка"> Текст c подсказкой </acronym>

Размеры шрифта:

<font style="font-size:13pt;"> Шрифт размером 13 пунктов </font>

<font style="font-size:15pt;"> Шрифт размером 15 пунктов </font>

<font style="font-size:9px;"> Шрифт размером 9 пикселей </font>

<font style="font-size:12px;"> Шрифт размером 12 пикселей </font>

<font style="font-size:15px;"> Шрифт размером 15 пикселей </font>

<font size="2"> Шрифт 2-го размера (может быть от 1-го до 7-го) </font>

<font size="4"> Шрифт 4-го размера </font>

<font size="+1"> Шрифт на 1 размер больше обычного </font>

Заголовки:

<h1> Заголовок 1-го уровня </h1>

<h2> Заголовок 2-го уровня </h2>

<h3> Заголовок 3-го уровня </h3>

<h4> Заголовок 4-го уровня </h4>

<h5> Заголовок 5-го уровня </h5>

<h6> Заголовок 6-го уровня </h6>

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

Оформление текста с помощью шрифтов:

<font style="font-family:Comic Sans Ms;"> Шрифт Comic Sans Ms </font>

<font style="font-family:Monotype Corsiva;"> Шрифт Monotype Corsiva </font>

<font style="font-family:Tahoma; font-size:13pt;"> Tahoma, 13 пикселей </font>

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

Оформление текста с помощью цвета:

<font color="#0000ff"> Синий текст </font>
* Цифра #0000ff означает синий цвет в RGB палитре.

<font color="red"> Красный текст </font>
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

<div style="background-color:#eeeeff;"> Голубой фон </div>
* У фона тоже можно менять цвет. Обратите внимание, что атрибут style использует синтаксис CSS.

<div style="background-color:lightgray; color:#0000ff;"> Синий текст, серый фон </div>

Некоторые предопределённые цвета:

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RRGGBB):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Возможные варианты палитры цветов и их кодов/наименований доступны здесь.

Оформление текста с использованием тени/подсветки:

Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет.
X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».

Примеры использования:

<font style="text-shadow: black 0 0 10px; color:white;">
Только тень </font>

<font style="text-shadow: 1px 1px 1px #000; color: #f9f5ed;">
Tahoma с тенью </font>

<font style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;">
Tahoma с контуром </font>

<font style="text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;">
Tahoma вдавленный </font>

<font style="text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;">
Tahoma объёмный </font>

<font style="text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; color:DarkGray;">
Tahoma неоновый </font>

<font style="text-shadow: 0 0 0.2em #8F7; color:DarkGray;">
Tahoma неоновый </font>

<font style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F; color:Black;">
Tahoma неоновый </font>

<font style="text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;">
Tahoma, много оттенков </font>

Выравнивание текста:

<p align="left"> Выравнивание текста по левой стороне </p>

<p align="center"> Выравнивание текста по центру </p>

<p align="right"> Выравнивание текста по правой стороне </p>

<p align="justify"> Выравнивание текстов по обеим сторонам — для текстов, имеющих длину более одной строки </p>

<p style="text-align:justify;"> Вариант выравнивания текстов по обеим сторонам с использованием параметра форматирования CSS </p>

Оформление сносок (комментариев) с отступом абзаца:

<blockquote>
Процитированый в отдельном блоке текст
у которого будет небольшой отступ слева.
</blockquote>

Форматирование параграфов и областей:

<p style="text-indent:40px;">

</p>

<pre>

   Преформатированый текст
   сохраняет отступы слева и   между   словами
             и устанавливает те отступы, что вы укажите пробелами.
     Предупреждение! Тэг не делает переноса строки автоматом!

</pre>

<marquee> Бегущая влево строка. </marquee>

<marquee direction="right"> Бегущая вправо строка. </marquee>

<marquee behavior="alternate"> Бегущая от края к краю строка. </marquee>

<marquee direction="up" scrollamount="1" scrolldelay="0" height="32">

Скролящийся вверх
текст с полезной
информацией.
</marquee>

<marquee direction="down" scrollamount="1" scrolldelay="0" height="32">

Скролящийся вниз
текст с полезной
информацией.
</marquee>

Вертикальная перемотка большого текста:

<div style="overflow:auto; height:80px; width:450px; padding:8px; border:1px solid #ccc;">

</div >

Вертикальная перемотка большого текста c HTML-кодом:

<textarea cols="55" rows="5">
</p> <p>Текст без html, шириной в 55 символов и высотой в 5 строк.</p> <p>Даже скролить можно, круто, да!? <b>А html не работает.</b></p> <p>Но лучше используйте div из предыдущего примера, если нужна просто прокрутка…</p> <p>
</textarea>

Интерлиньяж (межстрочный интервал) текста:

<p style="line-height: 1.5;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. </p>

<p style="line-height: 1.2;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. </p>

<p style="line-height: 90%;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. </p>

Границы областей в разделе сделаны видимыми (пунктиром) для оценки отступов.

* Отступы style="margin: сверху справа снизу слева;"

Используем тэг <ul> для маркированных списков:

<ul>
      <li> Один из пунктов списка </li>
      <li> Другой такой пункт </li>
      <li> Ещё один пункт. </li>
</ul>

Заменяем тэг <ul> на <ol> и список становится пронумерованным, автоматически:

<ol>
      <li> Один из пунктов списка </li>
      <li> Другой такой пункт </li>
      <li> Ещё один пункт. </li>
</ol>
* Закрывающий тэг </li> не обязателен для использования.

Также можно выбирать разные виды списков через стиль:

<ol style="list-style-type: upper-alpha;">
      <li> Один из пунктов списка </li>
      <li> Другой такой пункт </li>
      <li> Ещё один пункт. </li>
</ol>

Значения list-style-type для списков:
 • circle — маркер в виде кружка
 • disc — маркер в виде точки
 • square — маркер в виде квадрата
 • decimal — арабские числа (1, 2, 3, 4,…)
 • decimal-leading-zero — арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…)
 • lower-alpha — строчные латинские буквы (a, b, c, d,…)
 • upper-alpha — заглавные латинские буквы (A, B, C, D,…)
 • lower-greek — строчные греческие буквы (α, β, γ, δ,…)
 • lower-roman — римские числа в нижнем регистре (i, ii, iii, iv, v,…)
 • upper-roman — римские числа в верхнем регистре (I, II, III, IV, V,…)
 • none — отменяет маркеры для списка.

<img src="http://img.cx/img/primer.jpg"> — пример вставки картинки.

<img src="http://img.cx/img/primer.jpg" width="200px"> — размер картинки по ширине.

<img src="http://img.cx/img/primer.jpg" height="500px"> — размер картинки по высоте.

Изображение со всплывающим текстом при наведении на него курсора:
<img src="http://img.cx/img/primer.jpg" title="Этот текст появится при наведении курсора на картинку!" alt="А этот при её отсутствии">

Изображение слева, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
<img src="http://img.cx/img/primer.jpg" style="float:left; margin:0 6px 6px 0">текст

Картинка в выделенной области, с прокруткой:

<div style="overflow: scroll; width:495px;"><img src="http://www.hdsw.ru/pics/IMG_1734.jpg"></div>
Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.

<a href="http://www.hdsw.ru"> Линк на HD Systems Worldwide </a>

Открыть ссылку в новом окне:
<a href="http://www.hdsw.ru" target="_blank"> Линк на HD Systems Worldwide </a>

Всплывающая подсказка, отображающаяся при наведении курсора на ссылку:
<a href="http://www.hdsw.ru" title="HD Systems Worldwide"> Ссылка на сайт </a>

Картинка-ссылка (баннер):

<a href="http://www.hdsw.ru" title="HD Systems Worldwide"><img src="http://www.hdsw.ru/wp-content/uploads/hdsw_ban_88_31.png"></a>

Кнопка-ссылка (форма):

<form action="http://www.hdsw.ru/" target="_blank"><input type=submit value="Зайти на www.hdsw.ru"></form>

<a name="oglavlenie"></a> Демо-Оглавление
(Нажмите на название, чтобы проскролить вниз к главе:)
↓ <a href="#vstuplenie">Вступление</a> — (тут мы ставим ссылку # на якорь «vstuplenie»)
↓ <a href="#interes">Интересная глава</a>
↓ <a href="#ssylki">Заключение и ссылки</a>

<a name="vstuplenie"></a> Наше клёвое вступление. — (тут якорь «vstuplenie» перед нужным текстом)
<a name="interes"></a> Текст интересной главы.
↑ <a name="ssylki" href="#oglavlenie">Перейти в оглавление</a>   — (тут ссылка является одновременно и якорем)

Если нужно дать ссылку на другой сайт, то # идёт в конце строки линка URL. Например, ссылка на якорь oglavlenie на данной странице: http://www.hdsw.ru/?p=33#oglavlenie

Пример простейшей таблицы:

<table border="1">
    <tr>
        <td>Строка 1, колонка 1</td>
        <td>Строка 1, колонка 2</td>
    </tr>
    <tr>
        <td>Строка 2, колонка 1</td>
        <td>Строка 2, колонка 2</td>
    </tr>
</table>
* При использовании параметра border="0" границы таблицы становятся невидимыми.

Другой пример таблицы:

<table width="100%" border="1" cellspacing="0" cellpadding="4">
   <tr align="center" style="background-color:#AFEEEE;">
        <td><b>#</b></td>
        <td><b>Заголовок в колонке 2</b></td>
        <td><b>Заголовок в колонке 3</b></td>
    </tr>
    <tr>
        <td align="center">1</td>
        <td>Строка 2, колонка 2</td>
        <td>Строка 2, колонка 3</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td>Строка 3, колонка 2</td>
        <td>Строка 3, колонка 3</td>
    </tr>
</table>

Таблица с применением стилей:

<table style="width: 190px; background: white; color: white; border-spacing: 1px;">
<tbody align="center" style="background: maroon; padding: 7px;">
    <tr><td>Заголовок 1</td><td>Заголовок 2</td></tr>
    <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
    <tr><td>Ячейка 5</td><td>Ячейка 6</td></tr>
</tbody>
</table>

<nobr> Этот текст будет всегда в одну строку, без переносов. </nobr>

<blink> Мерцающий текст </blink>

<br> — тэг переноса строки.

<hr> — тэг вставки линии на всю ширину доступной области:

^* — Зажмите кнопку ALT, наберите код, отпустите ALT. Работает в Windows.
^** — Вставьте подряд несколько таких пробелов чтобы они не сливались в один:
&nbsp; &nbsp; &nbsp; — теперь слева отступ в шесть пробелов!

Кстати, чтобы HTML код был как обычный текст, перед тем как писать, откройте Windows Notepad, вставьте ваш HTML-код, выберите автозамену (Ctrl+H) и замените все < на &lt;, а также все > на &gt;.
Получится  &lt;b&gt;полужирный&lt;/b&gt;  вместо <b>полужирный</b>.

Если нужно, чтобы ссылка на какую-то страницу не была активной, например http://www.hdsw.ru, то можно написать следующим образом: http:/&#0047;www.hdsw.ru
В этом случае ссылка на странице будет отображаться верно, но не будет активной.

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

ЖЖ-юзер gonza03 <lj user=gonza03>

ЖЖ-общество wp-pictures <lj comm=wp-pictures>

ЖЖ-кат. Этот текст увидят в френдленте. <lj-cut>А этот текст будет под катом</lj-cut>
Ещё вариант: <lj-cut text="Загляни под кат!">Этот текст будет под катом</lj-cut>

ЖЖ-спойлер <lj-spoiler title="Видимый текст ссылки на спойлер">Этот текст будет скрыт</lj-spoiler>

ЖЖ-карта <lj-map url="http://maps.yandex.ru/?ll=37.625207%2C55.699252&spn=0.022016%2C0.006677&z=16&l=map" width="425" height="350" /> — отображает карту нужного размера прямо в записи.

ЖЖ-лайки <lj-like buttons="repost,facebook,twitter,google,vkontakte,surfingbird,odnoklassniki,tumblr,livejournal" /> — позволяют установить кнопки репоста и лайков в социальных сетях. В ЖЖ есть следующие лайки:
 • репост в ЖЖ — repost
 • «Я рекомендую» для Facebook — facebook или fb
 • «Твитнуть» для Twitter — twitter или tw
 • «+1» для Google+ — google или go
 • лайк для ВКонтакте — vkontakte или vk
 • лайк для Surfingbird — surfingbird
 • лайк для Tumbrl — tumblr
 • «+10 жетонов» — livejournal или lj

<lj-raw>Этот текст не будет автоматически форматироваться<br>А это уже новая строка.</lj-raw>

С помощью <a name="lj-embed"> можно вставлять видео, flash, разные онлайн-плееры и так далее:
<lj-embed> тут код на object и/или embed </lj-embed>

Для того, чтобы изменить стиль оформления блога, или сделать невидимыми блоки с рекламой, в разделе ЖЖ «Настроить стиль журнала» можно перейти в подменю «Custom CSS» и использовать стили. Это можно делать как применительно ко всему блогу, так и для каждой записи в отдельности (каждая запись имеет свой ID, который можно увидеть в исходном коде страницы).

Специфические разметки CSS для LiveJournal можно увидеть здесь.