Поздравляем всех с переездом на новый сервер.

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

Topic locked
 
Author Message

-WhatTheFuck ®

Gender: Male

Longevity: 3 years 6 months

Posts: 6592

Location: CCCP

Post 17-Jul-2015 21:56

[Quote]

Инструкция по BB-code или секрет красивого оформления
Материал из википедии https://ru.wikipedia.org/wiki/BBCode
В статье описываются возможности 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
-
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) По середине[img]...[/img]4) Слева и справа (а текст будет между и под изображениями)
[img=left]...[/img][img=right]...[/img]
Текст (этот текст будет между и продолжится под изображениями)
Может понадобиться писать текст не между изображениями, а после. Тогда пользуемся тегом
[clear]
Текст (будет писаться ниже, а не между изображениями)
Этот тег отменит обтекание последующего текста изображений, которые были указаны выше с img=left или img=right.
Ниже показаны примеры, иллюстрирующие все описанные приемы.

Пример

[AmericanKittens.com] Daisy
[align=center][size=24][color=darkblue][AmericanKittens.com] Daisy[/color][/size]
[img]http://i1.fastpic.ru/big/2009/1022/74/932bf923393f734dea6ed83ec4e24674.jpg[/img][/align]
7578 Фото
48 Сетов
x*y: 2000*3000
~160 фото/сет
-Есть несколько nonude фотосетов!
А вообще очень эротичная подборка.

Можно ознакомиться со скринами далее: ( обратите внимание - этот текст не влез между изображениями, а оказался там, где нужно - прямо перед спойлером - благодаря тегу clear)

Скриншоты

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

Код примера

[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:
sdfsdfsdf

Тег code:
sdf                             dsda
sdf                                 sdfsdf
[сode] sdf dsda[/сode] (не копируйте текст из этого примера, он не сработает у вас)
[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://youadwork.com/forum/viewtopic.php?t=1680#style]Эту ссылку можно вставить в другом посте, и человек сразу будет направлен к разделу Стиль[/url]
[Profile] [PM]
Display posts:    
Topic locked

Current time is: 20-Sep 09:03

All times are UTC + 3



You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum