BB-коды, и с чем их едят

BB-коды. Инструкция по использованию.

 
Данный гайд был создан в помощь тем, для кого использование подобных возможностей форума в новинку, или кому нужна помощь в порядке действий при их применении. 
 
Содержание:
Введение
Порядок открытия и закрытия тегов

Блок 6 - Свитки

 

 

 

F.A.Q:

Введение.

 

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

Режим редактирования кода
Позволяет увидеть ВСЕ специальные коды, которыми вы выделяли текст, делали ссылки, вставляли видео и т.д. Вам он понадобится в первую очередь для того, чтобы проверить, не появилось ли что-то лишнее среди этих элементов.
 
Удаление форматирования
Крайне полезная кнопка. Откуда бы вы не копировали текст, но после вставки в поле для ввода текста, лучше выделить весь текст комбинацией клавиш ctrl+a и нажать на кнопку удаления форматирования. Так вы сможете избежать ненужной горы скрытых от глаз специальных кодов, например font, color или size (а иногда и все вместе). Визуально вы вряд ли почувствуете разницу, но поверьте, чем проще код, тем лучше и для вас, и для форума. Тем более, что вы всегда сможете вернуть необходимые выделения текста вручную. 
 
Специальные BB-коды
Так же их называют тегами / тэгами / кодами. Под этой кнопкой прячутся те вспомогательные элементы, которые НЕ вынесены на основную верхнюю панель редактора текста. Как раз о них и пойдет речь дальше.
Для справки: наш форум поддерживает два вида этих кодов. 

 

 
При нажатии на кнопку специальных кодов, вы увидите такое окошко:

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

Порядок открытия и закрытия тегов.

 
За исключением одиночных тегов, есть одно важное правило:
 

Любой открытый тег должен быть закрыт.

Закрывать теги нужно в обратной открытию последовательности.

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

 

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

Блок 1. Взаимодействие с текстом.

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

 
В выпадающем меню специальных bb-кодов выбираете нужный пункт и заполняете поля. Если текста много, то после начала заполнения можете нажать "Ок" и продолжить писать текст уже в редакторе.

 
Акроним
По сути это тот же всплывающий текст при наведении мышью на определенное слово. Отличаются только более привычным для некоторых пользователей написанием тега и двойным подчеркиванием текста.

 
Действия с окошком специальных bb-кодов остается тем же, что и в первом случае, но для этого варианта выбираете именно "Акроним".
 
Выравнивание по ширине
Растягивает текст максимально по возможной ширине поля сообщения. При выборе данного пункта в окне Специальных bb-кодов или при нажатии на кнопку  в верхней панели редактора текста, вы увидите такое окно:

 
И вот здесь у вас есть возможность выбрать как именно поступить:
а. В поле "Текст" вы можете написать/вставить тот текст, который вы хотите и нажать "Ок"
б. Просто нажать "Ок", и между появившимися тегами вставить текст.

в. Если у вас уже есть текст, который вы хотите оформить выравниванием по ширине, то выделите уже вставленный текст комбинацией клавиш Ctrl+A и выберете один из двух способов вставки этого bb-кода

 
Горизонтальная черта
Необходима для того, чтобы визуально отделить блоки текста (если вам это, конечно, нужно). 

 
Красная строка
Нужен для добавления отступа у первого предложения в абзаце. Принцип действия такой же как и при выравнивании по ширине. Выделив весь текст комбинацией клавиш Ctrl+A, вы можете либо нажать на кнопку  на панели редактирования или найти необходимый пункт в выпадающем списке специальных bb-кодов. Вы так же увидите окошко, и возможностей действия с ним будет так же два.
Стоит отметить, что перенос строки (то, что вы делаете нажатием клавиши Enter на клавиатуре) будет выделять первое предложение небольшим отступом. Из примера на картинке ниже - весь текст находится между тегами, а посередине сделан самый простой перенос строки Enter'ом.

 
Перенос строки
В крайне редких случаях, когда что-то идет не так, как вам нужно, или нужно сделать большой отступ, допустим, после картинки, чтобы ненужный текст не "заползал" на ненужную область, вместо привычного переноса строки Enter'ом можно использовать этот тег. Есть возможность поставить в одну строчку сразу несколько таких тегов, и каждый из них будет равен одному нажатию на Enter.


Спойлер
Один из способов делать сноски, давать пояснения и любую другую информацию, которую вы хотите скрыть под отдельно раскрываемое окошко. На нашем форуме есть два вида спойлеров, которые отличаются только внешним видом (в зависимости от предпочтений). Функционал остается тем же.
 
В окне специальных bb-кодов выбираем пункт "Спойлер", и видим такое окошко:

 

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

Текст, спрятанный под спойлером - из названия, думаю и так всё понятно.

 

Спойлер (минимализм)
Суть та же, читайте описание обычного спойлера.

 

В окне специальных bb-кодов выбираем пункт "Спойлер (минимализм)", и видим такое окошко: 

 

Основное отличие между этими спойлерами - только внешнее оформление и название самого тега (отличие в одну цифру).

 

Блок 2. Взаимодействие с изображениями

и рамками для них.

Размещение изображения
Для того, чтобы расположить в сообщении картинку, нажмите кнопку  на верхней части панели редактирования текста. Перед вами появится вот такое окно:

В поле URL нужно вставить ссылку на изображение.
ВНИМАНИЕ! Форум адекватно принимает ссылки, у которых в конце имеется одно из таких окончаний: .gif .jpg .jpeg .png
В случаях, когда подобных окончаний в ссылке нет, редактор может отказаться отправлять сообщение, ссылаясь на не поддерживаемый формат.

 
Такие ссылки на картинки поддаются изменению положения на странице посредством кнопок . Текст будет идти ДО картинки и ПОСЛЕ неё, иногда даже на одной строке, если вы там размещаете изображение.

 
Изображение СЛЕВА, текст СПРАВА
Располагает изображение СЛЕВА, а текст располагается СПРАВА от него. Текст как бы обтекает изображение с правой стороны.
Вызываем окошко Специальных bb-кодов, находим пункт "Изображение СЛЕВА, текст справа":

Вставляем ссылку на изображение, и нажимаем ОК.

 
Изображение СПРАВА, текст СЛЕВА
Располагает изображение СПРАВА, а текст располагается СЛЕВА от него. Текст как бы обтекает изображение с левой стороны.
Вызываем окошко Специальных bb-кодов, находим пункт "Изображение СПРАВА, текст слева":

Вставляем ссылку на изображение, и нажимаем ОК.

 
Рамка для изображения
Данный тег используется для того, чтобы поставить рамку той кртинке, которую вы хотите вставить в свой пост. Расположение текста будет отличаться от обычной вставки изображения тем, что текст будет располагаться выше и ниже изображения. На одной строчке с картинкой НЕ БУДЕТ никакого текста.
Через окно Специальных bb-кодов находим пункт "Рамка для Изображений":

Здесь есть один важный момент - от слова, которое вы впишите в первую доступную строку будет зависеть положение картинки.

left - слева

center - по центру

right - справа

Нужно вставить или написать только одно слово без заглавных букв, пробелов и дополнительных символов.
Во вторую строчку нужно вставить ссылку на картинку.
 
Далее будут варианты по расположению картинки в рамке:

 
Рамка для изображения с текстом рядом
Действует по аналогии со вставкой изображения с обтеканием текстом по правой или левой стороне, но добавляет картинке обычную рамку.
Через окно Специальных bb-кодов находим пункт "Рамка для изображения с текстом рядом":

Здесь важный момент тот же, что и в предыдущем случае - от слова, которое вы впишите в первую доступную строку будет зависеть положение картинки.

left - слева

right - справа

Нужно вставить или написать только одно слово без заглавных букв, пробелов и дополнительных символов.
Во вторую строчку нужно вставить ссылку на картинку.
Далее будут варианты по расположению картинки в рамке:

 
Рамка для эпизодов
Это специальная рамка с виньеткой на верхней или нижней грани рамки для картинки. Этот тег был создан специально для оформления Вами первых постов с картинками для эпизодов. Где его использовать, конечно, дело ваше, но рекомендуем использовать его по основному назначению.
У этого тега вшита функция обтекания текстом с правой или левой стороны, если вы хотите расположить картинку с одной из сторон поста. При расположении картинки в такой рамке по центру текст будет идти до (сверху) и после (снизу) картинки.
В окошке Специальных bb-кодов выбираем пункт "Рамка для эпизодов":

Здесь важный момент тот же, что и в предыдущем случае - от слова, которое вы впишите в первую доступную строку будет зависеть положение картинки.

left - слева

center - по центру

right - справа

Нужно вставить или написать только одно слово без заглавных букв, пробелов и дополнительных символов.
Во вторую строчку нужно вставить ссылку на картинку.
Далее будут варианты по расположению картинки в рамке:

Блок 3. Таблицы.

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

 
Если разбирать на примерах, то получится такая аналогия:
table - это шкаф (или стеллаж) - сама таблица
tr - это длинная горизонтальная полка - строка
td - это коробка, лежащая на этой полке. - ячейка
 


Но у каждого объекта есть начало и конец. Здесь есть смысл обратиться к части гайда о последовательном открытии и закрытии тегов, но здесь мы более подробно рассмотрим этот вопрос.
 
Если принять во внимание, что эти теги - описанные выше предметы, то логическая картинка выстраивается более чем ясно. Полка внутри шкафа не может вылезать за его пределы, как и коробка не может лежать на полке, но заканчиваться дальше, чем того позволяет длина полки и стенка шкафа. Физически это не возможно.

Вот так вышеупомянутая картинка со шкафом будет выглядеть в коде:

 

 

Между тегами td, которые обозначают ячейки на строке, можно располагать многое, в том числе и картинки, текст с аббревиатурой, ссылки, но самое главное - не забывать порядок открытия и закрытия тегов, иначе попытка создать более сложную конструкцию из таблицы закончится лишними нервами и потраченным временем.

 

ВНИМАНИЕ! Очень важные пункты!

 

1. Количество ячеек на каждой строке должно быть ОДИНАКОВЫМ. Даже если вы не хотите что-то вписывать в пустую ячейку, обозначить её тегами НЕОБХОДИМО.

 

2. Так же напоминаем, что на данный момент функционал наших таблиц КРАЙНЕ ОГРАНИЧЕН. Пока у нас нет возможности вводить более сложные конструкции с объединением ячеек по горизонтали или по вертикали.

 

3. Все изменения с положением текста в ячейке лучше прописывать вручную, даже находясь в обычном режиме редактирования сообщения. Так у вас будет меньше проблем с расположением ВСЕГО текста сообщения.

 

4. Если вы вставляете ссылки, картинки, или меняете расположение текста, то при повторном редактировании после сохранения сообщения, некоторые настройки могут "слететь". Рекомендуем прежде чем сохранять или отправлять сообщение переходить в режим редактирования кода  и только после этого сохранять сообщение.

Блок 4. Навыки. Оформление уровней умения.

 
При открытии окошка специальных BB-кодов, опускаемся до цифры 4 в начале названия тега. Здесь все теги, кроме последнего пункта, представлены блоком из ТОЛЬКО ОДИНОЧНЫХ тегов. 

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

 

Улучшения в анкете

Последний пункт блока - стандартный закрывающийся тег, необходимый для оформления в едином стиле расовых навыков или улучшений в анкете.

 

В окне специальных bb-кодов выбираем последний пункт блока "4. Навык - Улучшения в анкете | расовая способность"

 

В поле для ввода текста пишем то, что нужно (примеры указаны над полем), и нажимаем ОК. 

Блок 5. Ссылки

Ссылки, а точнее гиперссылки - объекты, при нажатии на которые вас переносит на ту или иную часть страницы, на другую страницу, или вообще на другой сайт-ресурс (в зависимости от того, что вам нужно). На нашем форуме используются в первую очередь для создания легкого перехода к важным частям, касающихся персонажа - анкеты, инвентаря, хроники, книги заклинаний. Так же они используются для создания перехода между локациями, если вы играете в локационной части форума. Ссылками можно оформлять и хронику, создавая ссылки на отыгранные сюжеты.
 
Создание простой ссылки
Есть два варианта создания простой ссылки. Если вы хотите просто вставить ссылку, не делая привязку к определенному слову, то нажмите на кнопку  в верхней части панели редактирования. Такое окошко вы увидите:

 
В строку URL вставьте ранее скопированную ссылку, и нажмите ОК.
В тексте вашего сообщения появится тот самый адрес-ссылка. Если же вы хотите привязать ссылку к какому-либо слову,то для начала напишите это слово, выделите его, и нажмите на ту же кнопку, которую мы упомянули ранее. Дальнейшие действия будут идентичны. Или вы можете вручную прописать тег и вставить туда ссылку.


 
Удаление простой ссылки
Чтобы удалить ссылку с того слова или части текста, к которой вы её привязали, выделите слово/часть текста с ссылкой, и нажмите на кнопку  в верхней части панели редактирования, которая станет активной при выделении ссылки.
Либо через режим редактирования кода просто удалите открывающий и закрывающий тег ссылки. 

Ссылка на пользователя
Это НЕ обращение к пользователю, это только ссылка на его профиль.
Нажав на кнопку специальных bb-кодов, и выбрав пункт "Ссылка на пользователя", вы увидите такое окно: 

 
В строке "Имя пользователя" важно правильно написать имя того, ссылку на чей профиль хотите добавить в текст сообщения. Правильно - значит написать имя пользователя таким, под каким он зарегистрирован на форуме. Далее по имени система сама найдет профиль, и привяжет ссылку.
 


Ссылка на тему
Ссылку на тему вы можете оформить либо первым способом, либо этим - разницу вы особо не ощутите, но код ссылки в вашем сообщении будет значительно короче.
В окне специальных bb-кодов находим пункт "Ссылка на тему", и видим вот такое окошко, название полей в котором нам нужно прочитать ВНИМАТЕЛЬНО:

 
В строку "Введите ID темы (ТОЛЬКО цифры после topic/ в ссылке)" вам нужно ввести ТОЛЬКО вот эту часть ссылки, а остальное, что идет перед ней и после, стереть:

 
В строку "Введите название для данной ссылки" введите название темы, на которую ссылаетесь, или любое другое слово/предложение, при нажатии на которое будет совершен "прыжок" в тему по ссылке. 
 


Ссылка на сообщение

Ссылка на сообщение переносит вас не только в саму тему, где этот пост находится, но и открывает именно начало того сообщения, на которое вы ссылаетесь. 

У каждого поста есть своя маленькая "шапка", в которой вы можете найти ссылку именно на это сообщение. Она находится вот здесь:

Нажав правой кнопкой мыши по названию темы в посте, и выбрав пункт "Копировать адрес ссылки", у вас будет заготовлен текст ссылки на сообщение.
В окне специальных bb-кодов находим пункт "Ссылка на сообщение", и видим вот такое окошко, название полей в котором нам нужно прочитать ВНИМАТЕЛЬНО:
 
В строку "Введите ID сообщения (Последние цифры в ссылке на пост)" вам нужно ввести ТОЛЬКО вот эту часть ссылки, а остальное, что идет перед ней, стереть:

 
В строку "Введите название для данной ссылки" введите название темы, на которую ссылаетесь, просто слово "Пост" или любое другое слово/предложение, при нажатии на которое будет совершен "прыжок" к сообщению по ссылке. 
 


Медиа
На данный момент это тег актуален ТОЛЬКО для того, чтобы вставлять в сообщение видео из YouTube. 
В окне специальных bb-кодов находим пункт "Медиа", и видим вот такое окошко:

 
В строку "Ссылка" необходимо вставить ссылку на видео, скопированную из адресной строки браузера, а не с помощью кнопки "поделиться" - укороченная ссылка, предоставляемая сайтом не сможет открыться на нашем форуме.

 
Поэтому берем и копируем полный адрес ссылки, вставляем его в поле и нажимаем ОК.
Или прописываем тег вручную.

Блок 6. Свитки

 

Блок ОДИНОЧНЫХ тегов, для вставки в заявка на списание (для получения бонуса к атаке/защите, а так же получения/улучшения навыков) в теме "Золотой Парась".

Подробнее о свитках можно прочитать в ЭТОЙ теме. 

 

В окне специальных bb-кодов находим блок "6.Свитки", нажимаем на нужный, и подтверждаем нажатием на кнопку ОК.

 

 

 
Вернуться в Начало страницы