Руководство по оформлению текста (использование BBCode)

[lirik]

Вступление

Что такое BBCode?
BBCode — это специальный вариант HTML. BBCode по стилю похож на HTML, теги заключены в квадратные скобки [ i ], а не в треугольные < i >; он даёт больше возможностей управления тем, как выводятся данные. При использовании некоторых шаблонов вы сможете добавлять BBCode в ваши сообщения, пользуясь простым интерфейсом, расположенным над полем для ввода текста (синие кнопки над полем ввода текста).
Но даже в этом случае данное руководство может оказаться полезным.

Содержание

Форматирование текста
Как сделать текст жирным, наклонным или подчёркнутым
Как изменить цвет или размер текста
Можно ли комбинировать теги?
Ссылки на другой сайт
Показ изображений и видео в сообщениях
Добавление изображения в сообщение
Добавление видео в сообщение
Цитирование и вывод текста фиксированной ширины
Цитирование при ответах
Вывод кода или данных фиксированной ширины
Создание списков
Создание маркированного списка
Создание нумерованного списка
Вставка таблиц
Спойлер

[lirik]

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

Как сделать текст жирным, наклонным или подчёркнутым

BBCode включает теги для быстрого изменения стиля шрифта, сделать это можно следующими способами:

• Чтобы сделать текст жирным, заключите его в

Код: Выделить всё

[b][/b]

, например:

Код: Выделить всё

[b]Привет[/b]

Результат - Привет

• Для подчёркивания используйте

Код: Выделить всё

[u][/u]

, например:

Код: Выделить всё

[u]Доброе утро[/u]

Результат - Доброе утро

• Курсив делается тегами

Код: Выделить всё

[i][/i]

, например:

Код: Выделить всё

Это [i]здорово![/i]

Результат - Это здорово!


Как изменить цвет или размер текста

Для изменения цвета или размера шрифта могут быть использованы следующие теги (окончательный вид будет зависеть от системы и браузера пользователя):

• Цвет текста можно изменить, окружив его тегами

Код: Выделить всё

[color=][/color]

Вы можете указать либо известное имя цвета (red, blue, yellow и т. п.), или шестнадцатеричное представление, например #FFFFFF, #000000. Таким образом, для создания красного текста вы можете использовать:

Код: Выделить всё

[color=red]Привет![/color]

или

Код: Выделить всё

[color=#FF0000]Привет![/color]

оба способа дадут в результате Привет!!

• Изменение размера достигается аналогичным образом при использовании тегов

Код: Выделить всё

[size=][/size]

. Этот тег зависит от используемых шаблонов, рекомендуемый формат — число, показывающее размер текста в процентах, от 20% (очень маленький) до 200% (очень большой) от размера по умолчанию. Например:

Код: Выделить всё

[size=30]МАЛЕНЬКИЙ[/size]

скорее всего будет МАЛЕНЬКИЙ

в то время как:

Код: Выделить всё

[size=200]ОГРОМНЫЙ![/size]

будет ОГРОМНЫЙ!


Можно ли комбинировать теги?

Да, конечно, можно. Например, для привлечения чьего-то внимания вы можете написать:

Код: Выделить всё

[size=200][color=red][b]ПОСМОТРИТЕ НА МЕНЯ![/b][/color][/size]

что выдаст ПОСМОТРИТЕ НА МЕНЯ!

Не выводите таким образом длинные тексты!
Учтите, что вы, автор сообщения, должны позаботиться о том, чтобы теги были правильно вложены (то есть соблюдалась их последовательность). Вот этот BBCode, например, неправилен:

Код: Выделить всё

[b][u]Это неверно[/b][/u]

Правильно так -

Код: Выделить всё

[b][u]Это верно[/u][/b]

[lirik]

Создание ссылок

Ссылки на другой сайт

В BBCode поддерживается несколько способов создания ссылок.

• Первый из них использует тег

Код: Выделить всё

[url=][/url]

, после знака = должен идти нужный URL адрес. Например, для ссылки на chronologia.org вы могли бы использовать:

Код: Выделить всё

[url=https://chronologia.org/]Сайт Новой Хронологии[/url]

Это создаст следующую ссылку: Сайт Новой Хронологии.
Учтите, что ссылка будет открываться в том же или в новом окне, в зависимости от настроек браузера пользователя.

• Если вы хотите, чтобы в качестве текста ссылки показывался сам URL, вы можете просто сделать следующее:

Код: Выделить всё

[url]https://chronologia.org/[/url]

Это выдаст следующую ссылку: https://chronologia.org/

• Кроме того, форум поддерживает возможность, называемую Автоматические ссылки, это переведёт любой синтаксически правильный URL в ссылку без необходимости указания тегов и даже префикса http://. Например, ввод www.chronologia.org в ваше сообщение приведёт к автоматической выдаче ссылки www.chronologia.org при просмотре сообщения.

• То же самое относится и к адресам email, вы можете либо указать адрес в явном виде:

Код: Выделить всё

[email]example@mail.com[/email]

или просто ввести example@mail.com в ваше сообщение, и адрес будет автоматически преобразован при просмотре в example@mail.com.

Как и со всеми прочими тегами BBCode, вы можете заключать в URL'ы любые другие теги, например

Код: Выделить всё

[img][/img]

(см. далее),

Код: Выделить всё

[b][/b]

и т. д. Как и с тегами форматирования, правильная вложенность тегов зависит от вас, например:

Код: Выделить всё

[url=https://chronologia.org/][img]https://chronologia.org/im/nx242.jpg[/url][/img]

неверно, что может привести к последующему удалению вашего сообщения, так что будьте аккуратнее.

[lirik]

Показ изображений и видео в сообщениях

Добавление изображения в сообщение

BBCode включает тег для добавления картинки в ваше сообщение. При этом следует помнить две очень важные вещи: во-первых, многих пользователей раздражает большое количество изображений, во-вторых, ваше изображение уже должно быть размещено в интернете (т. е. оно не может быть расположено только на вашем компьютере, если, конечно, вы не запустили на нём веб-сервер!). Изображение также может быть загружено на форум, как вложение к вашему сообщению.

Для вывода изображения вы должны окружить его URL тегами

Код: Выделить всё

[img][/img]

Например:

Код: Выделить всё

[img]https://chronologia.org/im/nx242.jpg[/img]

Как указано в предыдущем пункте, вы можете заключить изображение в теги

Код: Выделить всё

[url][/url]

,
тогда при клике на картинку посетитель будет перенаправлен по адресу URL. То есть

Код: Выделить всё

[url=https://chronologia.org][img]https://chronologia.org/im/nx242.jpg[/img][/url]

выдаст:


Также на форуме включена возможность упрощенной вставки картинок без использования тега [img] - просто вставьте ссылку на картинку в текст.

Код: Выделить всё

текст текст
https://chronologia.org/im/nx242.jpg
текст текст

Добавление видео в сообщение

На форуме поддерживается вставка видео с видеохостинга youtube. Для вставки видео следует использовать тег

Код: Выделить всё

[youtube]идентификатор видео[/youtube]

Где идентификатор видео - это код видео, который надо скопировать из URL ссылки на видео.
Пример идентификаторов в ссылках видеохостинга -
youtube.com/watch?v=3JfCsKAfFhg
youtu.be/3JfCsKAfFhg
Пример вставки видео -

[lirik]

Цитирование и вывод текста фиксированной ширины

Цитирование при ответах

Существует два способа цитирования текста: с обращением и без.

• При использовании кнопки цитирования для ответа на сообщение, в окно ответа добавляется текст цитируемого сообщения, обрамлённый тегами

Код: Выделить всё

[quote=""][/quote]

Этот способ позволяет цитировать с обращением к пользователю или к кому-то (чему-то) ещё, по выбору. Например, чтобы процитировать текст, написанный пользователем Mr. Blobby, можно ввести:

Код: Выделить всё

[quote="Mr. Blobby"]Здесь находится текст, написанный пользователем Mr. Blobby[/quote]

В результате перед текстом будут вставлены слова «Mr. Blobby писал(а):». Помните, что обязательно заключать обращение в кавычки "", они не могут быть пропущены.

Результат -

Здесь находится текст, написанный пользователем Mr. Blobby

• Второй способ позволяет создавать простые цитаты. Для этого необходимо заключить текст в теги

Код: Выделить всё

[quote][/quote]

При просмотре сообщения будет просто показан текст в блоке цитирования.

Пример -

Код: Выделить всё

[quote]Здесь находится текст[/quote]

Результат -

Здесь находится текст

Вывод кода или данных фиксированной ширины

Если нужно вывести часть программного кода или другие данные фиксированной ширины, такие, как шрифт Courier, необходимо заключать текст в теги (без пробелов внутри квадратных скобок [])

Код: Выделить всё

[code][/ code]

Пример -

Код: Выделить всё

[code]echo "Здесь находится код";[/ code]

Результат -

Код: Выделить всё

echo "Здесь находится код";

Всё форматирование, используемое внутри тегов, будет сохранено.

[lirik]

Создание списков
BBCode поддерживает два вида списков: маркированные и нумерованные. Они практически идентичны своим эквивалентам из HTML.

Создание маркированного списка

В маркированном списке все элементы выводятся последовательно, каждый отмечается символом-маркером. Для создания маркированного списка используйте

Код: Выделить всё

[list][/list]

и определите каждый элемент при помощи [*]. Например, чтобы вывести свои любимые цвета, вы можете использовать:

Код: Выделить всё

[list]
[*]Красный
[*]Синий
[*]Жёлтый
[/list]

Это выдаст такой список:

• Красный
• Синий
• Жёлтый

Также можно указать стиль маркера списка, используя

Код: Выделить всё

[list=тип][/list]

где тип = disc, circle или square.


Создание нумерованного списка

Второй тип списка, нумерованный, позволяет выбрать, что именно будет выводиться перед каждым элементом. Для создания нумерованного списка используйте

Код: Выделить всё

[list=1][/list]

или

Код: Выделить всё

[list=a][/list]

для создания алфавитного списка. Как и в случае маркированного списка, элементы определяются с помощью [*]. Например:

Код: Выделить всё

[list=1]
[*]Пойти в магазин
[*]Купить новый компьютер
[*]Обругать компьютер, когда случится ошибка
[/list]

выдаст следующее:

1. Пойти в магазин
2. Купить новый компьютер
3. Обругать компьютер, когда случится ошибка

Для алфавитного списка используйте:

Код: Выделить всё

[list=a]
[*]Первый возможный ответ
[*]Второй возможный ответ
[*]Третий возможный ответ
[/list]

что выдаст

1. Первый возможный ответ
2. Второй возможный ответ
3. Третий возможный ответ

[lirik]

Вставка таблиц

Можно вставить таблицу несколькими способами - простой (1), с указанием ширины ячейки (2), с указанием ширины таблицы (3).

• 1 вариант - без ширины

Код: Выделить всё

[tab]
[tr][td]phpbb 3[/td][td]Модификации[/td][td]BBcode[/td][/tr]
[tr][td]BBCode[/td][td]Стили - phpbb3[/td][td]Таблица в сообщении[/td][/tr]
[tr][td]BBCode[/td][td]BBCode  - Таблица в сообщении[/td][td]Стили - phpbb3[/td][/tr]
[/tab]

Результат -

phpbb 3	Модификации	BBcode
BBCode	Стили - phpbb3	Таблица в сообщении
BBCode	BBCode - Таблица в сообщении	Стили - phpbb3

• 2 вариант - указана ширина первой ячейки 200 пикселей

Код: Выделить всё

[tab]
[tr][td=200]phpbb 3[/td][td]Модификации[/td][td]BBcode[/td][/tr]
[tr][td]BBCode[/td][td]Стили - phpbb3[/td][td]Таблица в сообщении[/td][/tr]
[tr][td]BBCode[/td][td]BBCode  - Таблица в сообщении[/td][td]Стили - phpbb3[/td][/tr]
[/tab]

Результат -

phpbb 3	Модификации	BBcode
BBCode	Стили - phpbb3	Таблица в сообщении
BBCode	BBCode - Таблица в сообщении	Стили - phpbb3

• 3 вариант - указана ширина таблицы 100%

Код: Выделить всё

[tab=100]
[tr][td]phpbb 3[/td][td]Модификации[/td][td]BBcode[/td][/tr]
[tr][td]BBCode[/td][td]Стили - phpbb3[/td][td]Таблица в сообщении[/td][/tr]
[tr][td]BBCode[/td][td]BBCode  - Таблица в сообщении[/td][td]Стили - phpbb3[/td][/tr]
[/tab]

Результат -

phpbb 3	Модификации	BBcode
BBCode	Стили - phpbb3	Таблица в сообщении
BBCode	BBCode - Таблица в сообщении	Стили - phpbb3

[lirik]

Спойлер

Спойлером называют скрывающийся / показывающийся объект (текст, картинка и т.д.). Например, в спойлер прячут информацию, не относящуюся напрямую в обсуждаемому вопросу, пояснения, или просто длинный скучный текст.

Также в спойлер можно помещать изображения (особенно если их много), видео, ссылки, таблицы и другие объекты.

Спойлер можно использовать как с изменением стандартного заголовка, так и не изменяя его.

Пример 1 -

Код: Выделить всё

[spoiler]Здесь заголовок спойлера не меняем[/spoiler]

Результат -

Спойлер

Здесь заголовок спойлера не меняем

Пример 2 -

Код: Выделить всё

[spoiler="Нажми сюда"]Здесь стандартный заголовок спойлера изменен на "Нажми сюда"[/spoiler]

Результат -

Нажми сюда

Здесь стандартный заголовок спойлера изменен на "Нажми сюда"