Форматирование текста
Сейчас мы рассмотрим существующие у нас теги, которые позволяют форматировать текст.| Описание | Тег BBnobb | Результат |
|---|---|---|
| Жирный текст | [b]Жирный текст[/b] | Жирный текст |
| Наклонный текст (курсив) | [i]Наклонный текст[/i] | Наклонный текст |
| Подчеркнутый текст | [u]Подчеркнутый текст[/u] | Подчеркнутый текст |
| Зачеркнутый текст | [s]Зачеркнутый текст[/s] | |
| Изменение размера текста По-умолчанию размера текста составляет 14 пикселей | [size=12]Уменьшенный текст[/size] [size=14]Обычный текст[/size] [size=16]Увеличенный текст[/size] | Уменьшенный текст Обычный текст Увеличенный текст |
| Изменение цвета текста | [color=green]Зеленый текст[/color] [color=#FF6900]Текст с цветом #FF6900[/color] | Зеленый текст Текст с цветом #FF6900 |
| Изменение шрифта | [font=Arial]Шрифт Arial[/font] [font=Courier color=red size=16]Увеличенный красный текст, выполненный шрифтом Courier[/font] | Шрифт Arial Увеличенный красный текст, выполненный шрифтом Courier |
| Моноширинный шрифт | [tt]Моноширинный шрифт[/tt] | Моноширинный шрифт |
| Крупный заголовок | [h1]Крупный заголовок[/h1] | Крупный заголовок |
| Средний заголовок | [h2]Средний заголовок[/h2] | Средний заголовок |
| Малый заголовок | [h3]Малый заголовок[/h3] | Малый заголовок |
| Нижний индекс | Вода - H[sub]2[/sub]O | Вода - H2O |
| Верхний индекс | SMARTYcraft[sup]3[/sup] | SMARTYcraft3 |
| Неформатируемый текст Теги внутри этого тега будут отображаться как текст | [nobb]Вода - H[sub]2[/sub]O[/nobb] | Вода - H[sub]2[/sub]O |
Вставка ссылок и контента
Самым основным элементом любой веб-страницы является ссылка. BBCode имеет достаточно много способов ее вставки на страницу. Сейчас мы их рассмотрим:- Любой текст, начинающийся на http:// или www. автоматически преобразуется в ссылку, например http://www.smartycraft.ru или www.smartycraft.ru
- Текст, заключенный в тег [url][/url] также становится ссылкой, например [url]vk.com/smartycraft[/url] превращается в vk.com/smartycraft
- Если Вы хотите скрыть длинный адрес ссылки (т.к. это может портить эстетический вид страницы) или сделать кликабельный текст, воспользуйтесь такой конструкцией [url=vk.com/smartycraft]наша группа ВКонтакте[/url], получится следующее: наша группа ВКонтакте
- Если Вы хотите сделать ссылку внутри нашего сайта, то нет необходимости начинать ее с http://www.smartycraft.ru/..., можно опустить это начало и сократить ссылку, например используйте [url=rules]ссылка на правила[/url] вместо [url=http://www.smartycraft.ru/rules]ссылка на правила[/url], результат будет один и тот же: ссылка на правила.
- Для вставки адреса электронной почты можно использовать тег [email], например admin@smartycraft.ru.
- Для вставки ссылки на поисковые результаты Google используйте тег [google]поисковый запрос[/google], например [google=smartycraft]сервер Minecraft[/google] будет выглядеть так: сервер Minecraft.
Вставка изображений
Для вставки изображений существует тег [img]ссылка на изображение[/img]. Вы можете вставить изображение из интернета или с хостинга картинок, который часто уже сразу предлагает разместить ссылку на изображение в формате BBCode. Например[img]https://camo.githubusercontent.com/747d1a53ed34124c5ab7fb9007f4ccda8da37398/687474703a2f2f692e696d6775722e636f6d2f776b4747576b4e2e706e67[/img]
Следует отметить, что изображение займет всю "строку", т.е., если изображение небольшое, текст не будет ее обтекать и разместить в ряд несколько картинок (без использования таблицы) не получится.
Вставка видео с YouTube
Вставка видео с популярного видеохостинга YouTube осуществляется с помощью тега [youtube]ссылка на страницу с видео[/youtube]. Для тега можно указать необязательные атрибуты width и height, которые устанавливают ширину и высоту области видеоплеера, например [youtube width=480 height=270]ссылка на видео[/youtube], если Вы вдруг захотите уменьшить или увеличить область просмотра.Блочное форматирование
Создание списков
Для создания списка существует тег [list], который может содержать указатель типа списка, пункты в списке обозначаются тегом [*], выглядит это так:| Обычный список | Нумерованный список | Нумерация по алфавиту | Нумерация римскими цифрами |
| [list] [*]Пункт 1. [*]Пункт 2. [*]Пункт 3. [/list] | [list=1] [*]Пункт 1. [*]Пункт 2. [*]Пункт 3. [/list] | [list=A] [*]Пункт 1. [*]Пункт 2. [*]Пункт 3. [/list] | [list=I] [*]Пункт 1. [*]Пункт 2. [*]Пункт 3. [/list] |
|
|
|
|
Вставка кода, лога и т.п.
Для оформления кода существует тег [code]. Он создает визуальный фон, устанавливает моноширинный шрифт и полосу прокрутки для длинных документов.
Пример вставки кода.
.wiki-header {
font-size:24px;
font-weight: 300;
color: #356272;
border-bottom: 1px solid #356272;
margin-bottom: 10px;
}
.wiki-body {
font-size: 14px;
}
.wiki-body h1 {
font-size: 24px;
}
.wiki-body h2 {
font-size: 20px;
}
.wiki-body h3 {
font-size: 18px;
}
.wiki-body ul {
padding-left: 40px;
}
.wiki-footer {
background-color:#ECF0F1;
color: #BDC3C7;
font-size:12px;
padding: 5px;
margin-top: 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wiki-footer a {
color: #BDC3C7;
border-bottom: 1px dashed #BDC3C7;
}
.wiki-footer a:hover, .wiki-footer a:active, .wiki-footer a:visited {
color: #95A5A6;
border-bottom: 1px dashed #95A5A6;
}
Вставка цитаты
Для визуального оформления цитат используйте тег [quote]. В теге можно указать источник цитаты в качестве атрибута (Если источник цитаты совпадет с именем одного из наших игроков, то в блоке цитаты появится изображение его аватара). Например:[quote]Простая цитата[/quote]
Цитата:
Простая цитата
Простая цитата
Serafim писал:
Цитата с указанием автора
Цитата с указанием автора
Вставка блока скрытого текста
Иногда появляется необходимости скрыть менее важные участки текста (длинные пояснения, сборники ссылок и т.п.). Для этого существует тег [off], который также имеет атрибут-пояснение, например:[off]Скрытый текст без пояснения[/off]
Показать скрытый текст
Скрытый текст без пояснения
Свернуть
Пояснение к тексту
Скрытый текст с пояснением
Свернуть
align
| th | th | td | td | td | td |
|---|
Оглавление
