Содержание
1. Введение
2. Форматирование шрифта
3. Выравнивание текста и форматирование параграфов
4 .Форматирование списков
5. Картинки
6. Ссылки на другие страницы, FTP, E-Mail и др.
7. Таблицы
8. Специальные тэги
9. Работа с терминами
10. Вставка видео и других flash-объектов
11. Отображение примеров различных кодов
12. Специальные символы
Введение
bbCode — Bulletin Board Code, или язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS) и форумах. Для форматирования текста используются теги, подобные тегам HTML. В отличие от тегов HTML, теги bbCode заключают в квадратные скобки. Перед отображением страницы движок форума производит разбор текста и преобразовывает bbCode в HTML-код.
На многих форумах возможность использования BB-кодов настраивается администратором индивидуально на каждый раздел форума. Поэтому, прежде чем использовать BB-коды в сообщениях, необходимо убедиться, что они разрешены.
Форматирование шрифта
Базовые тэги для работы с текстом:
Код
[p] Обычный абзац с отступом. [/p]
[p=стиль] Абзац, которому можно задавать стиль. [/p]
* Здесь и далее «стиль» — это аналог style в HTML.
[p=стиль]текст[/p] аналогично в HTML <p style="стиль">текст</p>
** С тэгами [p] [/p] можно использовать другие тэги, такие как [b], [i], [s] и т.д.
[span=стиль] Текст, которому с помощью стиля можно менять свойства. [/span]
[div=стиль] Ограниченная область, которой с помощью стиля можно менять свойства (положение, границы, отступы, свойства содержимого и т.д.). [/div]
* По умолчанию границы областей не видны. На одной странице может быть сразу несколько областей
.
Форматирование текста:
Важный текст, полужирный
Важный текст, курсив
[bold] Просто полужирный [/bold]
[italic] Просто курсив [/italic]
Подчёркнутый текст
Зачёркнутый текст — аналогично варианту [strike] [/strike]
[small] Уменьшенный шрифт [/small]
Знак сноски сверху или индекс снизу от текста
[ins] Добавленный текст [/ins]
[del] Удалённый текст [/del]
Код
[b] Важный текст, полужирный [/b]
[i] Важный текст, курсив [/i]
[bold] Просто полужирный [/bold]
[italic] Просто курсив [/italic]
[u] Подчёркнутый текст [/u]
[s] Зачёркнутый текст [/s] — аналогично варианту [strike] [/strike]
[small] Уменьшенный шрифт [/small]
Знак сноски [sup] сверху [/sup] или индекс [sub] снизу [/sub] от текста
[ins] Добавленный текст [/ins]
[del] Удалённый текст [/del]
Размеры шрифта:
[size=13pt] Шрифт размером 13 пунктов [size]
[size=15pt] Шрифт размером 15 пунктов [size]
[size=9px] Шрифт размером 9 пикселей [size]
[size=12px] Шрифт размером 12 пикселей [size]
[size=15px] Шрифт размером 15 пикселей [size]
[size=0] Размер 0 [size]
[size=+1] Размер +1 [size]
[size=+2] Размер +2 [size]
Код
[size=13pt] Шрифт размером 13 пунктов [size]
[size=15pt] Шрифт размером 15 пунктов [size]
[size=9px] Шрифт размером 9 пикселей [size]
[size=12px] Шрифт размером 12 пикселей [size]
[size=15px] Шрифт размером 15 пикселей [size]
[size=0] Размер 0 [size]
[size=+1] Размер +1 [size]
[size=+2] Размер +2 [size]
Заголовки:
[h1] Заголовок 1-го уровня [/h1]
[h2] Заголовок 2-го уровня [/h2]
[h3] Заголовок 3-го уровня [/h3]
[h4] Заголовок 4-го уровня [/h4]
[h5] Заголовок 5-го уровня [/h5]
[h6] Заголовок 6-го уровня [/h6]
Код
[h1] Заголовок 1-го уровня [/h1]
[h2] Заголовок 2-го уровня [/h2]
[h3] Заголовок 3-го уровня [/h3]
[h4] Заголовок 4-го уровня [/h4]
[h5] Заголовок 5-го уровня [/h5]
[h6] Заголовок 6-го уровня [/h6]
Оформление текста с помощью шрифтов:
Шрифт Comic Sans Ms
Шрифт Monotype Corsiva
Шрифт Tahoma
Код
[font=Times New Roman] Шрифт Comic Sans Ms [/font]
[font=Monotype Corsiva] Шрифт Monotype Corsiva [/font]
[font=Tahoma] Шрифт Tahoma [/font]
Оформление текста с помощью цвета:
Красный текст
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.
Синий текст
* Цифра #0000ff означает синий цвет в RGB палитре.
[bg=#eeeeff] Голубой фон [/bg]
* У фона тоже можно менять цвет.
[bg=lightgray] Синий текст, серый фон [/bg]
Код
[color=Red] Красный текст [/color]
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.
[color=#0000ff] Синий текст [/color]
* Цифра #0000ff означает синий цвет в RGB палитре.
[bg=#eeeeff] Голубой фон [/bg]
* У фона тоже можно менять цвет.
[color=#0000ff] [bg=lightgray] Синий текст, серый фон [/bg] [/color]
Некоторые предопределённые цвета:
White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff
Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RRGGBB):
#FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FFA500
Возможные варианты палитры цветов и их кодов/наименований доступны здесь.
Выравнивание текста и форматирование параграфов
Выравнивание текста:
[left] Выравнивание текста по левой стороне [/left]
[left стиль] Выравнивание по левой стороне со стилем [/left]
[pleft] Выравнивание в абзаце влево [/pleft]
Код
[left] Выравнивание текста по левой стороне [/left]
[left стиль] Выравнивание по левой стороне со стилем [/left]
[pleft] Выравнивание в абзаце влево [/pleft]
[center] Выравнивание текста по центру [/center]
[center стиль] Выравнивание по центру со стилем [/center]
[pcenter] Выравнивание в абзаце по центру [/pcenter]
Код
[center] Выравнивание текста по центру [/center]
[center стиль] Выравнивание по центру со стилем [/center]
[pcenter] Выравнивание в абзаце по центру [/pcenter]
[right] Выравнивание текста по правой стороне [/right]
[right стиль] Выравнивание по правой стороне со стилем [/right]
[pright] Выравнивание в абзаце справа [/pright]
Код
[right] Выравнивание текста по правой стороне [/right]
[right стиль] Выравнивание по правой стороне со стилем [/right]
[pright] Выравнивание в абзаце справа [/pright]
[justify] Выравнивание текста по обеим сторонам [/justify]
[justify стиль] Выравнивание по обеим сторонам со стилем [/justify]
[pjustify] Выравнивание в абзаце по обеим сторонам [/pjustify]
Код
[justify] Выравнивание текста по обеим сторонам [/justify]
[justify стиль] Выравнивание по обеим сторонам со стилем [/justify]
[pjustify] Выравнивание в абзаце по обеим сторонам [/pjustify]
* Выравнивание текстов по обеим сторонам отображается для текстов, имеющих длину более одной строки.
Форматирование параграфов и областей:
[indent]
Привет! В этом абзаце первое предложение будет с "красной" строки, т.е. с отступом. Прямо как в книгопечати. Правда, в Интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.
[/indent]
Код
[indent]
Привет! В этом абзаце первое предложение будет с "красной" строки, т.е. с отступом. Прямо как в книгопечати. Правда, в Интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.
[/indent]
[pre]
Преформатированый текст
сохраняет отступы слева и между словами
и устанавливает те отступы, что вы укажите пробелами.
Предупреждение! Тэг не делает переноса строки автоматом!
[/pre]
Код
[pre]
Преформатированый текст
сохраняет отступы слева и между словами
и устанавливает те отступы, что вы укажите пробелами.
Предупреждение! Тэг не делает переноса строки автоматом!
[/pre]
Форматирование списков
Используем тэг [ ul ] или [ list ] для маркированных списков:
[ul]
Один из пунктов списка </li>
Другой такой пункт </li>
Ещё один пункт. </li>
[/ul]
Код
[ul]
[*] Один из пунктов списка [/*]
[*] Другой такой пункт [/*]
[*] Ещё один пункт. [/*]
[/ul]
Для пронумерованных списков используем тэг [ ol ]:
[ol]
Один из пунктов списка </li>
Другой такой пункт </li>
Ещё один пункт. </li>
[/ol]
Код
[ol]
[*] Один из пунктов списка [/*]
[*] Другой такой пункт [/*]
[*] Ещё один пункт. [/*]
[/ol]
Закрывающий тэг [ /* ] не обязателен для использования:
- Один из пунктов списка
- Другой такой пункт
- Ещё один пункт.
Код
[list]
[*] Один из пунктов списка
[*] Другой такой пункт
[*] Ещё один пункт.
[/list]
Также возможно прямое указания вида списка:
[list=1] — пронумерованный список
[list=a] — алфавитный список
[list=i] — список, пронумерованный римскими цифрами
Картинки
[img] http://kf.at.ua/img/banner160x238.jpg [/img] — пример вставки картинки.
[imgleft] http://kf.at.ua/img/banner160x238.jpg [/imgleft] — картинка слева.
* Данный код аналогичен коду в HTML:
Код
<img src="http://kf.at.ua/img/banner160x238.jpg" style="float: left; margin: 0 10px 0 0;">
[imgright] http://kf.at.ua/img/banner160x238.jpg [/imgright] — картинка справа.
* Данный код аналогичен коду в HTML:
Код
<img src="http://kf.at.ua/img/banner160x238.jpg" style="float: right; margin: 0 0 0 10px;">
[imgcenter] http://kf.at.ua/img/banner160x238.jpg [/imgcenter] — картинка по центру.
* Данный код аналогичен коду в HTML:
Код
<div style="text-align: center"><img src="http://kf.at.ua/img/banner160x238.jpg"></div>
Аналогичные тэги с названиями и всплывающими подсказками:
Важно! В названии картинки нельзя использовать кавычки!
[img Название] http://kf.at.ua/img/banner160x238.jpg [/img] — пример вставки картинки.
[imgleft Название] http://kf.at.ua/img/banner160x238.jpg [/imgleft] — картинка слева.
[imgright Название] http://kf.at.ua/img/banner160x238.jpg [/imgright] — картинка справа.
[imgcenter Название] http://kf.at.ua/img/banner160x238.jpg [/imgcenter] — картинка по центру.
Картинки с указанными размерами:
[img=300×500] http://kf.at.ua/img/banner160x238.jpg [/img] — пример картинки с размером.
* Данный код аналогичен коду в HTML:
Код
<img src="http://kf.at.ua/img/banner160x238.jpg" style="width: 300px; height: 500px">
[imgleft=300×500] http://kf.at.ua/img/banner160x238.jpg [/imgleft] — картинка слева, с размером.
[imgright=300×500] http://kf.at.ua/img/banner160x238.jpg [/imgright] — картинка справа, с размером.
Вставка больших изображений с полосами прокрутки:
[image] http://kf.at.ua/img/banner160x238.jpg [/image] — картинка в выделенной области, если она больше доступного размера отображения на форуме.