Loading...
Error

Руководство по BBCode

Тема закрыта

 | 

 
Автор Сообщение

admin

Изучаем основы создания сообщений с помощью языка BBCode

Здесь краткая версия данного материала: viewtopic.php?t=19091



Введение

Что такое BBcode ?
    BBcode это особое приложение HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста»), язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS) и форумах. Можете ли вы использовать BBcode в ваших сообщениях, определяется администратором сайта. Сам BBcode очень похож на HTML, теги также заключены в квадратные скобки [и], а не в угловые <и>, но предоставляет больше возможностей при показе данных. При использовании шаблонов вы можете добавлять BBcode в ваши сообщения c помощью простого, кликабельногo интерфейса, расположенного над областью для ввода текста. Однако, несмотря на простоту использования, вы можете найти в данном руководстве что-то новое для себя.



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

Как сделать текст полужирным, наклонным, подчёркнутым или зачеркнутым?
BBcode включает в себя теги для быстрого изменения стиля вашего текста. Это достигается следующими способами:

Для того, чтобы сделать текст полужирным, заключите его в тег [ b] [ /b]
Сделать это можно, выделив слово, нажать мышкой на кнопку или с клавиатуры,
удерживая клавишу Ctrl, нажимаем клавишу B (для сокращения в дальнейшем, буду писать Ctrl+B)
написали ( Код: ) / получили ( Цитата: )

Код:

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

Цитата:

Полужирный текст



Для получения наклонного текста используем тег [ i] [ /i]
Используем кнопку или с клавиатуры Ctrl+I
написали ( Код: ) / получили ( Цитата: )

Код:

[i]Наклонный текст[/i]

Цитата:

Наклонный текст



Для получения подчёркнутого текста используем тег [ u] [ /u]
Используем кнопку или с клавиатуры Ctrl+U
написали ( Код: ) / получили ( Цитата: )

Код:

[u]Подчеркнутый текст[/u]

Цитата:

Подчеркнутый текст



Для получения зачеркнутого текста используем тег [ s] [ /s]
Используем кнопку или с клавиатуры Ctrl+S
написали ( Код: ) / получили ( Цитата: )

Код:

[s]Зачеркнутый текст[/s]

Цитата:

Зачеркнутый текст



Как изменить цвет или размер текста?
Для изменения цвета или размера текста используйтся следующие теги:

Чтобы изменить цвет текста, окружите его тегом [color=] [ /color].
Вы можете использовать либо имя цвета (red, blue, green, и т.д.), либо шестнадцатиричую альтернативу (#FFFFFF, #000000)
Выбрать его мы можем, выделив текст, и выбрав необходимый в списке Цвет шрифта
Например, для создания красного текста вы можете использовать

Код:

[color=red]Цветной текст[/color]
или
[color=#FF0000]Цветной текст[/color]

Цитата:

Цветной текст
или
Цветной текст
Для изменения размера текста окружите его [size=] [/size].
Этот тег зависит от выбираемых пользователем шаблонов, но рекомендуемый формат - число,
показывающее размер текста в пикселях, начиная от 1(маленький) до 29(очень большой).
Для этого мы используем список
Например:

Код:

[size=9]Маленький текст[/size]

Цитата:

Маленький текст
В то время, как:

Код:

[size=29]Огромный текст![/size]

Цитата:

Огромный текст!



Могу я комбинировать теги?
Да, конечно можете. Например, чтобы привлечь к себе внимание можно написать

Код:

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

Цитата:

ПОСМОТРИ НА МЕНЯ!
Однако, мы не рекомендуем выводить таким образом большие тексты, хотя это выглядит красиво.
Помните, что теги должны быть корректно закрыты.

Например, в данном случае комбинирование тэгов сделано неправильно:

Код:

[b][u]Это неправильно[/b][/u]



Цитирование текста при ответе.
Имеется два способа цитирования текста: с указанием на автора текста и без него.
Если вы хотите процитировать чьё-то сообщение, окружите текст цитаты этим блоком [ quote=""] [ /quote]
Чтобы указать на текст как на цитируемый, выделите текст и нажмите на или Ctrl+Q
Например:

Код:

[quote]цитируемый текст[/quote]
позволяет выделить цитируемый текст без указания автора цитаты:

Цитата:

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

Код:

[quote="Автор цитаты"]цитируемый текст[/quote]

Автор цитаты писал(а):

цитируемый текст
Особое внимание обратите на то, что имя автора обязательно должно быть в кавычках ""


Вывод кода или данных фиксированной ширины
Если вы хотите вывести кусок кода или что-то, что требует шрифт фиксированной
ширины (самым известным является Courier), вы должны заключить текст в теги [ code] [ /code]
Для этого используем кнопку или Ctrl+K

Например:

Код:

Моноширинный текст
Чаще всего такой способ применяется для указания кода программы, или для указания на текст без форматирования.


Создание и указание списков.
BBcode поддерживает два типа списков, простой (неупорядоченный) и упорядоченный.
Они практически идентичны своим HTML-эквивалентам. В неупорядоченном списке все пункты выводятся по порядку с круглым символом-маркером. Чтобы создать неупорядоченный список используйте [ list] [ /list] и определите каждый элемент списка с помощью [*].
Чтобы указать на список, мы выделяем текст списка и кнопкой указываем что это список, а кнопкой указываем на элемент списка. С клавиатуры это соответственно комбинация Ctrl+L (список) и Ctrl+0 (элемент)

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

Код:

[list]
[*]Синий
[*]Зелёный
[*]Красный
[/list]
Получаем простой список:

  • Синий
  • Зелёный
  • Красный
 
Создание упорядоченного списка

Второй тип списка, упорядоченный, даёт возможность выбирать, что вводится перед каждым элементом.
Для создания нумерованного списка используйте [ list=1] [ /list], для списка с алфавитным перечислением примените [ list=a] [ /list]
Для упорядоченного списка используем тоже кнопку (Ctrl+L), но дополнительно к коду дописываем "=1" или "" для указания типа списка, и элементы списка указываются тегом [*] кнопкой (Ctrl+0).

Например:

Код:

[list=1]
[*]написать письмо
[*]запечатать в конверт
[*]отправить по почте
[/list]
Будет следующий список:

  1. написать письмо
  2. запечатать в конверт
  3. отправить по почте


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

Код:

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

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



Показ картинок в сообщениях.
phpBB BBcode включает в себя тег для добавления картинок в ваши сообщения. При этом помните две очень важные вещи, когда используете этот тег:
во-первых, многие пользователи не выносят большое количество картинок в сообщениях,
во-вторых, ваша картинка должна быть доступна в интернете (т.е. она не может быть только на вашем компьютере, если, конечно, вы не запустили вебсервер!).
Для показа картинки вы должны поставить её URL между тегами [img][/img].
Также сделать это можно, выделив URL-адрес картинки, нажать мышкой на кнопку или с клавиатуры комбинацией Ctrl+R

Например:

Код:

[img]http://posters.ec/img/librusec.png[/img]
 
получим:
 


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



Создание ссылок.
Ссылка на другой сайт
BBcode поддерживает несколько вариантов создания URL's (Uniform Resource Indicators).

Самый простой способ указать ссылку на нашем трекере - это написать её в сообщении используя тег [url][/url]
Делается это кнопкой или комбинацией клавиш Ctrl+W

Код:

Посетите [url]http://booktracker.org/[/url]
 
получим:
 
Посетите [url][/url]

Для того чтобы вместо адреса ссылки указать текстовое сообщение используем другую разновидность [url=][/url]
где после знака = указываем ссылку, заканчиваем ссылку закрывающей квадратной скобкой и пишем текст ссылки:

Код:

Посетите [url=http://booktracker.org/]Книжный трекер[/url]
 
получим:
 
Посетите [url=] Книжный трекер [/url]

Если же нам в качестве ссылки нужно указать картинку, то используем вместо текста - адрес картинки используя тег [ img][ /img].

Код:

[url=http://booktracker.org/][img]http://booktracker.org/images/logo/logo.gif[/img][/url]
 
получим картинку, нажав на которую, перейдём по указанной ссылке:
 
[url=] [/url]

phpBB поддерживает также так называемые Автоматические ссылки, эта функция позволяет переводить любой
правильный URL в ссылку без использования тегов и даже указания протокола http://.


Как скрыть текст под спойлер?
Спойлером называют скрывающийся (или показывающийся) объект (текст, картинка и т.д.). Чтобы сделать текст или часть документа невидимым, выделяем необходимый текст и нажимаем кнопку Spoiler , например:

Код:

[spoiler=""]Тут я скрываю скрытый текст[/spoiler]
получим специальную рамочку с кнопкой, нажав на которую, наш скрытый текст откроется для просмотра:
Тут я скрываю скрытый текст
А чтобы кратко описать что я скрываю под спойлером, слова "скрытый текст" можно изменить.
Для этого после слова [spoiler нужно добавить добавить знаки "=""" и добавить описание между кавычками "", вот так:

Код:

[spoiler="Дополнительная информация: "]Тут я спрячу дополнительную информацию[/spoiler]
и получается:
Тут я спрячу дополнительную информацию



Выравнивание текста по экрану
Здесь все очень просто. Для выравнивания текста существует тег [ align=] [ /align]

Код:

[align=left]Текст будет смещен влево [/align]
[align=right]Текст будет смещен вправо [/align]
[align=center]Текст будет расположен по центру экрана[/align]
[align=justify]Текст будет выравнен по ширине экрана. Выравнивание будет заметно, только если текст, заключенный в данный тэг достаточно большой ширины. [/align]
Результатом выполнения данного кода будет следующее:

Цитата:

Текст будет смещен влево
Текст будет смещен вправо
Текст будет расположен по центру экрана
Текст будет выравнен по ширине экрана. Выравнивание будет заметно, только если текст, заключенный в данный тэг достаточно большой ширины.
Этот же способ можно использовать для выравнивания изображений по центру экрана. Например:

Код:

[align=center][img]ссылка на картинку[/img][/align]



Произвольный цвет текста.
    Здесь тоже ничего сложного. Если Вы наблюдательны, то должны были заметить, что при редактировании текста в свойствах есть выпадающий список с небольшим набором цветов. Как то: красный=red, зеленый=green и т.д.
НО! Там еще есть цвета, которых в стандартной палитре цветов нет! А именно "Оранжевый" и "Темно-голубой". И если присмотреться к коду, который получается при выборе данных цветов, то можно увидеть, что эти цвета обозначены 16-ричным кодом 996600 и 006699 соответственно!
    А что нам мешает поступить также? Берем какой-нибудь приличный редактор, в котором можно просмотреть палитру цветов (Paint не подойдет!) или еще лучшее скачать программу, которая называется ColorPic. И нет границы Вашему воображению!

Например:

Код:

[color=#AA33EE]Вот такой будет цвет![/color]
Результат:

Цитата:

Вот такой будет цвет!



Дополнительные теги оформления.
К дополнительным тегам оформления можно отнести несколько удобных "плюшек", каждая из которых выполняет свою функцию украшения Вашего сообщения:

например тег [ hr] функция которого начертить сплошную бесконечную линию, вызывается этот тег комбинацией клавиш Ctrl+8, или кнопкой Например:

Код:

[hr]
будет прочерчена вот эта линия

Следующий тег, это [ tab] который вызывается нажатием клавиши "Табуляция" [ Tab -->], применение этого тега позволяет делать отступы первой строки в предложениях, Например:

Код:

[tab][tab]Слухи о людоедстве аборигенов сильно преувеличены. Во всяком случае, попавшего к ним старика, называвшего себя профессором, не убили и не съели. Он умер сам, не выдержав тяжелой жизни, но прежде чем он умер, жители материка узнали от него много нового, бесполезного для выживания, но любопытного...

Цитата:

    Слухи о людоедстве аборигенов сильно преувеличены. Во всяком случае, попавшего к ним старика, называвшего себя профессором, не убили и не съели. Он умер сам, не выдержав тяжелой жизни, но прежде чем он умер, жители материка узнали от него много нового, бесполезного для выживания, но любопытного...
При оформлении сообщений иногда приходится разделять один абзац от другого новой строкой, и для этого мы применяем тег [ br], который вызывается кнопкой (разрыв строки), Например:

Код:

Слухи о людоедстве аборигенов сильно преувеличены. Во всяком случае, попавшего к ним старика, называвшего себя профессором, не убили и не съели.[br] Он умер сам, не выдержав тяжелой жизни, но прежде чем он умер, жители материка узнали от него много нового, бесполезного для выживания, но любопытного...

Цитата:

Слухи о людоедстве аборигенов сильно преувеличены. Во всяком случае, попавшего к ним старика, называвшего себя профессором, не убили и не съели.
Он умер сам, не выдержав тяжелой жизни, но прежде чем он умер, жители материка узнали от него много нового, бесполезного для выживания, но любопытного...
Тег [ nbsp] позволяет вставлять дополнительные пробелы в текст (по аналогии с &nbsp; в HTML). Без этого - все лишние пробелы выбрасываются, вызывается этот тег кнопкой nbsp
Зато тег [ pre] [ /pre], вызываемый кнопкой позволяет сохранить исходное форматирование текста, не отбрасывает в тексте лишние пробелы и служебные символы (напр. для *.nfo, логов EAC, в этом случае используется внутри тега спойлера [ spoiler] [ /spoiler]).

 
 
Источникwww.phpBB.com
Показать сообщения:    
Тема закрыта