Инструкция по BB-code или секрет красивого оформления

Страницы:  1

Тема закрыта
Pornolab рекомендует: Женские попки!
Автор Сообщение

GXN



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

Немного о BB-коде

BB-code (далее бб-код) - специальный язык разметки, с помощью которого на форуме создается оформление текста в сообщениях.
ББ-код основан на тегах, которые представляют из себя специальные слова, заключенные в символы "[" и "]". Теги бывают парные - в таком случае требуется открывающий тег вида [тег] , так и закрывающий, который представляет из себя имя открывающего с добавлением косой черты: [/тег]. Непарные теги не требуют закрывающего.
Часть тегов можно добавлять автоматически используя кнопки интерфейса, однако часть в виде кнопок не присутствует, и их нужно писать вручную.
-2. Стили текста

Стили

Жирный
Курсив
Подчеркнутый
Зачеркнутый
Код:
[b]Жирный[/b]
[i]Курсив[/i]
[u]Подчеркнутый[/u]
[s]Зачеркнутый[/s]
-3. Чередование и смешение тегов

Чередование тегов

Теги можно смешивать, путем вложения
Жирный текст, внутри которого подчеркнутое слово
Код:
[b]Жирный текст, внутри которого [u]подчеркнутое[/u] слово[/b]
Внимание! Ошибкой является неверное размещение тегов, когда закрытие вложенного тега находится после закрытия внешнего тега, пример:
[тег1] текст текст [тег2] еще текст [/тег1] [/тег2] Не верно!
Так делать не стоит. Следует заменить это на:
[тег1] текст текст [тег2] еще текст [/тег2] [/тег1] Верно!
-4. Работа с цветом, размером и шрифтами

Цвет, размеры и шрифты

Цвет:
За цвет отвечает тег color. В качестве параметра он принимает именованное или шестнадцетиричное значение цвета.
Красный цвет
Цвет заданный цифровым способом
Код:
[color=red]Красный цвет[/color]
[color=#123456]Цвет заданный цифровым способом[/color]

Таблица «безопасных» цветов

Резерв

Источник: www.artlebedev.ru/tools/colors/
Размер:
Маленький размер (размер 10)
Размер побольше (размер 16)
А этот для заголовков (размер 24)
Код:
[size=10]Маленький размер (размер 10)[/size]
[size=16]Размер побольше (размер 16)[/size]
[size=24]А этот для заголовков (размер 24)[/size]
Шрифты (используйте интерфейс):
Шрифт: Tahoma
Шрифт: Cursive
Шрифт: Monospace
Код:
[font="Tahoma"]Шрифт: Tahoma[/font]
[font="cursive"]Шрифт: Cursive[/font]
[font="monospace"]Шрифт: Monospace[/font]
-5. Цитаты

Цитаты

Цитата
Цитата с указанием автора
Код:
[quote]Цитата[/quote]
[quote="Автор"]Цитата с указанием автора[/quote]
-6. Спойлеры

Спойлеры

Содержимое спойлера

Спойлер с заголовком

Содержимое спойлера
Код:
[spoiler]Содержимое спойлера[/spoiler]
[spoiler="Спойлер с заголовком"]Содержимое спойлера[/spoiler]
-7. Выравнивание текста, переводы строк и линии

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

За выравнивание отвечает тег align.
СлеваСправапо центруЭтот выравнен по ширине экрана. Выравнивание будет заметно, только если текст, заключенный в данный тэг достаточно большой ширины. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана. Этот выравнен по ширине экрана.
Код:
[align=left]Слева[/align]
[align=right]Справа[/align]
[align=center]по центру[/align]
[align=justify]Этот выравнен по ширине экрана. Выравнивание будет заметно, только если текст, заключенный в данный тэг достаточно большой ширины. ... [/align]
Новый абзац можно начать используя тег br, от обычного перевода строки путем нажатия кнопки Enter клавиатуры отличается большим разрывом между строками. Горизонтальную линию рисует тег hr
Пример:
Строка1
Строка2
Строка3-
Код:
Строка1
Строка2[br]
Строка3
[hr]
-8. Работа со ссылками

Ссылки

Ссылки делаются так:
http://ru.wikipedia.org
Ссылка поверх текста
Код:
[url]http://ru.wikipedia.org[/url]
[url=http://ru.wikipedia.org]Ссылка поверх текста[/url]
Обратите внимание - после знака равенства не нужно ставить кавычки!
Все ссылки следует размещать именно с тегом url, в противном случае она может быть не правильно обработана форумом - и не появиться вообще, или не будет работать верно.
Можно заключить внутрь тега ссылки тег изображения:
Код:
[url=http://somesite.com][img]http://picsite.com/img.jpg[/img][/url]
Именно этим способом делаются превью скриншотов.
Адрес электронной почты можно разместить при помощи тега email:
Код:
[email][email protected][/email]
-9. Работа с изображениями

Изображения

За изображения отвечает тег img, внутри которого должен быть размещен URL адрес изображения.
Код:
[img]http://somesite.com/img.jpg[/img]
В раздачах постеры можно размещать более интересным образом, нежели просто справа(как это делает шаблон оформления):
1) Картинка справа от текста
Код:
[img=right]...[/img]
2) Картинка слева от текста
Код:
[img=left]...[/img]
3) По середине
Код:
[align=center][img]...[/img][/align]
4) Слева и справа (а текст будет между и под изображениями)
Код:
[img=left]...[/img][img=right]...[/img]
Текст (этот текст будет между и продолжится под изображениями)
Может понадобиться писать текст не между изображениями, а после. Тогда пользуемся тегом
Код:
[clear]
Текст (будет писаться ниже, а не между изображениями)
Этот тег отменит обтекание последующего текста изображений, которые были указаны выше с img=left или img=right.
Ниже показаны примеры, иллюстрирующие все описанные приемы.

Пример

[AmericanKittens.com] Daisy
7578 Фото
48 Сетов
x*y: 2000*3000
~160 фото/сет
-Есть несколько nonude фотосетов!
А вообще очень эротичная подборка.
 
Можно ознакомиться со скринами далее: ( обратите внимание - этот текст не влез между изображениями, а оказался там, где нужно - прямо перед спойлером - благодаря тегу clear)

Скриншоты

Код примера

Код:
[align=center][color=darkblue][font="Tahoma"][size=24][AmericanKittens.com] Daisy[/size][/font][/color][/align]
[align=center][img]http://i1.fastpic.ru/big/2009/1022/74/932bf923393f734dea6ed83ec4e24674.jpg[/img][/align]
[img=right]http://i1.fastpic.ru/big/2009/1022/09/6067b85e4b0c3f97c084592ea8456109.jpg[/img]
[img=left]http://i1.fastpic.ru/big/2009/1022/7c/14566561e69ff65fb5f8b1358fe78d7c.jpg[/img]
[color=#006699][b][font="Tahoma"]
[color=darkgreen]7578[/color] Фото
[color=darkgreen]48[/color] Сетов
[b]x*y[/b]: [color=darkgreen]2000*3000[/color]
[color=darkgreen]~160[/color] фото/сет[/font][/b][/color]
[hr]
[color=indigo][align=center]Есть несколько [u]nonude[/u] фотосетов!
А вообще очень эротичная подборка.[/align][/color]
[clear]
Можно ознакомиться со скринами далее: ( :!: обратите внимание - этот текст не влез между изображениями, а оказался там, где нужно - прямо перед спойлером - благодаря тегу clear)
[spoiler="Скриншоты"]
[/spoiler]
-10. Списки

Списки

  • Строка 1
  • Строка 2
  • Строка 3
Код:
[list]
[*]Строка 1
[*]Строка 2
[*]Строка 3
[/list]
  • Строка 1
  • Строка 2
  • Строка 3
Код:
[list=1]
[*]Строка 1
[*]Строка 2
[*]Строка 3
[/list]
  • Строка 1
  • Строка 2
  • Строка 3
Код:
[list=a]
[*]Строка 1
[*]Строка 2
[*]Строка 3
[/list]
  • Строка 1
  • Строка 2
  • Строка 3
Код:
[list=i]
[*]Строка 1
[*]Строка 2
[*]Строка 3
[/list]
-Если нужно начать НЕ с первой цифры/буквы:
  • Строка 1
  • Строка 2
  • Строка 3
Код:
[list=1]
[*=3]Строка 1
[*]Строка 2
[*]Строка 3
[/list]
  • Строка 1
  • Строка 2
  • Строка 3
Код:
[list=a]
[*=3]Строка 1
[*]Строка 2
[*]Строка 3
[/list]
-11. Размещение текста с псевдографикой и кода

Псевдографика и код

Для размещения различных списков или текста, в котором необходима одинаковая ширина для всех символов и регулируемое число отступов (пробелов) можно пользоваться тегами pre или code - они сохранят все пробельные сиволы между словами. Тег code отменяет автоформатинование, и сохраняет вложенный в него код в неизменном виде (именно при помощи code в этой статье показаны примеры использования других тегов в виде кодов).
Тег pre:
sdf                                 sdfsdf
Тег code:
Код:
sdf                             dsda
Код:
[pre]sdf                                 sdfsdf [/pre]
[сode] sdf                             dsda[/сode] (не копируйте текст из этого примера, он не сработает у вас)
Преимущество тега pre в том, что внутри него можно выделять текст стилями, цветом и тд.

Пример реального использования - cписок файлов, структура каталогов

Используется тег code
Код:
├───hardcore
│   ├───anal
│   ├───blowjob
│   │   └───1
│   ├───creampie
│   ├───cum
│   ├───hardcore
│   │   └───1
│   ├───multi
│   └───titfuck
├───lesbians
├───other
└───softcore
    ├───ass
    │   └───1
    └───boobs
        ├───1
        └───2
или тоже самое с pre:
├───hardcore
│ ├───anal
│ ├───blowjob
│ │ └───1
│ ├───creampie
│ ├───cum
│ ├───hardcore
│ │ └───1
│ ├───multi
│ └───titfuck
├───lesbians
├───other
└───softcore
├───ass
│ └───1
└───boobs
├───1
└───2
-12. Ссылки на подразделы (расширенная работа со ссылками)

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

Возможно создание относительных (внутри темы) и абсолютных (внутри всего форума) ссылок с использованием якоря.
Якорь - строка в тексте, на которую мы будем ссылаться, помечается тегом [name] с параметром в виде имени якоря. Имя якоря задается цифрами и/или латинскими буквами.
Например,
Код:
[name=0]
[name=style]
[name=list]
Якорь помещается непосредственно перед строкой, на которую требуется сослаться.
Относительная ссылка делается тегом [url], в параметре которого используется url=#имя якоря с именем ранее созданного якоря.
Абсолютная ссылка делается тегом [url], в параметре которого используется url=http://адрес_страницы#имя_якоря
Т.е. в начале указан url темы, затем имя ранее созданного в этой теме якоря.
Пример:
К оглавлению
Раздел стили текста
Раздел списки и псевдографика
Эту ссылку можно вставить в другом посте, и человек сразу будет направлен к разделу Стиль
Код:
Это вставлено в коде в нужных местах:
[name=0]
[name=style]
[name=list]
А это ссылки - каждый к своему якорю:
[url=#0]К оглавлению[/url]
[url=#style]Раздел стили текста[/url]
[url=#list]Раздел списки и псевдографика[/url]
[url=http://pornolab.net/forum/viewtopic.php?t=1088260#style]Эту ссылку можно вставить в другом посте, и человек сразу будет направлен к разделу Стиль[/url]
-К оглавлению-

(с)

Оригинальная инструкция от разработчиков PHP2BB.
Автор - GXN
Также приняли участие:
Amiga - помощь, проверка текста и написание главы "Ссылки на подразделы (расширенная работа со ссылками)"
Leobret - глава "Списки", проверка и правка текста, финальный аппрувмент
Softor и finesse86 - их статья "Мастер-класс по недокументированным функциям BBCODE" была частично использована здесь.
 
Loading...
Error