-
Коды электронной доски объявлений, или теги (ярлыки) BBCode (Bulletin Board Code), являются одним из способов форматирования текста посланий в SMF и во многих других форумах и электронных досках объявлений.
Рис.1 Список BBCode (доступных на момент написания урока)
Перечень BBCode и их краткое описание (более подробно остановимся на каждом далее)
- Жирный - выделение жирным.
- Курсив - выделение курсивом.
- Подчеркнутый - подчеркивание текста.
- Зачеркнутый - перечеркивание текста.
- Выровненный текст - выравнивание текста сообщения вручную.
- Выровнять слева - выровнять текст по левому краю.
- По центру - выровнять текст по центру.
- Выровнять справа - выровнять текст по правому краю.
- Шрифт - поменять шрифт текста (из списка доступных).
- Размер шрифта - установить размер шрифта (из списка доступных).
- Цвет текста - установить цвет тексту (из списка доступных).
- Вставить изображение - вставить картинку в текст.
- Гиперссылка - вставить ссылку на страничку.
- E-mail - вставить ссылку на email.
- Вставить ссылку FTP - вставить ссылку на FTP-хранилище.
- С обрамлением - выделить текст обрамлением.
- С тенью - добавить к тексту тень.
- Бегущая строка - переделать текст в бегущую строку.
- Надстрочный - приподнять текст над строкой.
- Подстрочный - опустить текст чуть ниже строки.
- Телетайп - "моноширинный" или "телетайпный" вывод текста.
- Вставить таблицу - возможность вставить таблицу в текст.
- Код - возможность отредактировать текст как фрагмент кода.
- Insert No BBC - отключение BBCode в фрагменте текста.
- Цитата - вставка цитат в текст.
- Неупорядоченный список - список с метками.
- Упорядоченный список - список с нумерацией.
- Горизонтальная линия - вставка в текст разделительной горизонтальной линии.
- Спойлер - вставка спойлера в текст.
- Убрать форматирование - убрать все BBCode из выделенного текста (не путать с Insert No BBC)
- Переключить вид - переключение на расширенный редактор текста и обратно.
-
Теперь более подробно остановимся на порядке чередования тегов (BBCode)
Все теги имеют два вида:
- открывающий - например [b]
- закрывающий - например [/b]
Закрывающие всегда начинаются с "/"
Если необходимо сделать несколько "вложенных" тегов, то их порядок должен быть следующий:
- открывающие в обычной последовательности: [1][2][3]
- закрывающиеся в обратной последовательности: [/3][/2][/1]
Примеры:
- Какой-то текст с жирным, курсивом и подчеркиванием
Выглядеть будет так:
[u][i][b]Какой-то текст с жирным, курсивом и подчеркиванием[/b][/i][/u] - Текст весь жирный, но курсив и подчеркивание у разных частей
Выглядит так:
[b]Текст весь жирный, [i]но курсив[/i] и [u]подчеркивание[/u] у разных частей[/b] - Более сложно сочетание жирного, курсива и подчеркивания[/b]
Выглядит так:
[b]Более сложно [u]сочетание жирного[/u][/b][i][u], курсива[/u] и подчеркивания[/i][/b]
Более сложные сочетания тегов рассмотрим позже.
-
Теги выделения текста (№№ 1, 2, 3, 4)
Данные теги позволяют выделить фрагменты текста жирным, курсивом, подчеркиванием или перечеркиванием.
- Выделение жирным осуществляется тегами [b]текст[/b]
- Выделение курсивом осуществляется тегами [i]текст[/i]
- Подчеркивание осуществляется тегами [u]текст[/u]
- Перечеркивание осуществляется тегами [s]текст[/s]
Эти теги могут располагаться свободно внутри любых других тегов почти без ограничений.
-
Теги выравнивания текста (№№ 5, 6, 7, 8 )
Выравнивание текста возможно по центру, слева и справа. Так же есть возможность публиковать выровненный вручную текст.
Примеры:
Вот так будет выглядеть выровненный текст:
Встречаются два людоеда:
- Ты знаешь, а я студента поймал. Сейчас пойду сварю его и съем.
- Ты что, с ума сошел?! Выбрось немедленно! Я тоже недавно студента поймал. Бросил его в котел. Так он, пока варился, всю картошку у меня съел.
Выглядит это так:
[pre]Вот так будет выглядеть выровненный текст:...[/pre]
Выравнивание по левому краю все знакомо - так публикуются тексты в сообщениях по-умолчанию. Но иногда и такое выравнивание надо использовать. Примеры смогу привести когда будем разбираться с таблицами.
Вот так выглядит:
[left]Выравнивание по левому краю все знакомо...[/left]
А вот выравнивание по центру:
Встречаются два людоеда:
- Ты знаешь, а я студента поймал. Сейчас пойду сварю его и съем.
- Ты что, с ума сошел?! Выбрось немедленно! Я тоже недавно студента поймал. Бросил его в котел. Так он, пока варился, всю картошку у меня съел.
Выглядит так:
[center]А вот выравнивание по центру:...[/center]
Ну и выравнивание по правому краю:
Встречаются два людоеда:
- Ты знаешь, а я студента поймал. Сейчас пойду сварю его и съем.
- Ты что, с ума сошел?! Выбрось немедленно! Я тоже недавно студента поймал. Бросил его в котел. Так он, пока варился, всю картошку у меня съел.
Делается так:
[right]Ну и выравнивание по правому краю:...[/right]
Теги выравнивания текста надо применять к абзацам. Если попробовать вставить выравнивание внутри текста - текст разобьется на 3 части: до тегов, внутри тегов и после тегов.
Например:
Текст до выравнивания, текст с выравниванием по центру
, текст после выравнивания.
Здесь тег выравнивания по центру вставлен прямо внутри текста:
Текст до выравнивания, [center]текст с выравниванием по центру[/center], текст после выравнивания.
Что и привело к такому "неприятному" результату.
Самое "оптимальное" использование тегов выравнивания - применять их последними к тексту. Исключение, пожалуй, составят теги таблицы. Но к ним мы вернемся позже.
-
Изменение шрифтов (№№ 9, 10, 11)
Тексту так же можно поменять шрифт, размер и цвет.
Примеры использования шрифтов:
Courier | - | [font=courier]Courier[/font] |
Arial | - | [font=arial]Arial[/font] |
Arial Black | - | [font=arial black]Arial Black[/font] |
Impact | - | [font=impact]Impact[/font] |
Verdana | - | [font=verdana]Verdana[/font] |
Times New Roman | - | [font=times new roman]Times New Roman[/font] |
Georgia | - | [font=georgia]Georgia[/font] |
Andale Mono | - | [font=andale mono]Andale Mono[/font] |
Trebuchet MS | - | [font=trebuchet ms]Trebuchet MS[/font] |
Comic Sans MS | - | [font=comic sans ms]Comic Sans MS[/font] |
А вот как можно изменять размеры шрифта:
Шрифт 8pt | - | [size=8pt]Шрифт 8pt[/size] |
Шрифт 10pt | - | [size=10pt]Шрифт 10pt[/size] |
Шрифт 12pt | - | [size=12pt]Шрифт 12pt[/size] |
Шрифт 14pt | - | [size=14pt]Шрифт 14pt[/size] |
Шрифт 18pt | - | [size=18pt]Шрифт 18pt[/size] |
Шрифт 24pt | - | [size=24pt]Шрифт 24pt[/size] |
Шрифт 36pt | - | [size=36pt]Шрифт 36pt[/size] |
Так же можно установить размер шрифта вручную просто указав его самому:
Шрифт 20pt
Делается это исправив следующие цифры в теге:
[size=20pt]Шрифт 20pt[/size]
И "на закуску" рассмотрим использование различных цветов в тексте. По-умолчанию форум предлагает следующие стандартные цвета:
Черный | - | [color=black]Черный[/color] |
Красный | - | [color=red]Красный[/color] |
Желтый | - | [color=yellow]Желтый[/color] |
Розовый | - | [color=pink]Розовый[/color] |
Зеленый | - | [color=green]Зеленый[/color] |
Оранжевый | - | [color=orange]Оранжевый[/color] |
Пурпурный | - | [color=purple]Пурпурный[/color] |
Синий | - | [color=blue]Синий[/color] |
Бежевый | - | [color=beige]Бежевый[/color] |
Коричневый | - | [color=brown]Коричневый[/color] |
Бирюзовый | - | [color=teal]Бирюзовый[/color] |
Фиолетовый | - | [color=navy]Фиолетовый[/color] |
Темно-красный | - | [color=maroon]Темно-красный[/color] |
Светло-зеленый | - | [color=limegreen]Светло-зеленый[/color] |
Белый | - | [color=white]Белый[/color] |
Так же есть возможность указывать текст вручную, но для этого надо знать их общепринятое название или шестнадцатеричное значение.
Например:
светло-серый будет выглядеть так: [color=#cccccc]светло-серый[/color]
Рекомендуемый порядок применения тегов шрифтов:
- Если надо применить такое форматирование к отдельным элементам текста - после применения выделения (жирным и т.д.), но перед использованием выравнивания текста (по центру и т.п.)
- Если же надо применить форматирование ко всему сообщению - используйте эти теги уже после того, как закончите полностью оформлять все остальное форматирование.
-
Вставка ссылок и картинок в текст (№№ 12, 13, 14, 15)
Форум позволяет вставлять в сообщения изображения и ссылки с помощью следующих тегов:
- Для вставки изображения используется тег [img]ссылка на картинку[/img]
- Для вставки ссылки на другую страничку в интернете используется тег [url]ссылка[/url]
Его использование возможно в двух вариантах - с подписью ссылки и без:
- Если надо просто вставить ссылку, то используем вариант: [url]здесь пишем ссылку[/url]. Выглядеть это будет вот так, например: http://tuft.rigma.biz/ (http://tuft.rigma.biz/)
- Если мы хотим "скрыть" сам текст ссылки за подписью, то используем такой вариант: [url=здесь пишем саму ссылку]тут пишем описание ссылки[/url]. В результате увидим что-то такое: Форум Василис (http://tuft.rigma.biz/)
- Если мы хотим выделить email так, что бы почтовая программа (если она настроена) автоматически подхватывала указанный адрес и подставляла его в поле Кому, то рекомендуется публиковать email следующим образом: [email]адрес почты[/email]. Будет это выглядеть так: admin@rigma.biz
- Так же если необходимо вставить ссылку на папку или файл, расположенный на FTP-сервере (хранилище файлов) можно воспользоваться тегом [ftp]ссылка на FTP[/ftp]. Будет что-то похожее на: ftp://mirror.yandex.ru/fedora/ (ftp://mirror.yandex.ru/fedora/)
Использование другого форматирования внутри данных тегов не допускается (кроме описания ссылки в теге [url][/url]).
-
Добавление эффектов к тексту (№№ 16, 17, 18)
Форум позволяет применить следующие эффекты к тексту сообщения:
1. Обрамление.
Тег обрамления использует три параметра и позволяет "обвести" контуром текст:
[glow=цвет,толщина,300]Обрамление[/glow]
- цвет может быть указан по аналогии с изменением цвета текста,
- толщина показывает толщину обрамления текста в пикселях,
- назначение третьего параметра я так и не понял :D
Пример:
Красным 2 пикселя | - | [glow=red,2,300]Красным 2 пикселя[/glow] |
Зеленым 3 пикселя | - | [glow=green,3,300]Зеленым 3 пикселя[/glow] |
2. Тень
Тег тени создает иллюзию тени к тексту указанного цвета с указанной стороны:
[shadow=цвет,сторона]Тень[/shadow]
- цвет мы используем так же, как и в обрамлении, цвете текста,
- сторона может быть левая (left) или правая (right)
Примеры:
Красная слева | - | [shadow=red,left]Красная слева[/shadow] |
Красная справа | - | [shadow=red,right]Красная справа[/shadow] |
Бирюзовая слева | - | [shadow=teal,left]Бирюзовая слева[/shadow] |
3. И еще один интересный эффект:
Бегущая строка
Позволяет вставить строчку текста, которая будет перемещаться справа налево по кругу.
Используется следующим образом:
[move]Бегущая строка[/move]
Внутри данных тегов можно спокойно использовать практически любой другой тег оформления.
-
Дополнительное форматирование (№№ 19, 20, 21)
Рассмотрим следующие варианты форматирования текста:
- Надстрочный текст
- Подстрочный текст
- Телетайпный текст
В основном надстрочный и подстрочный тексты используют для "рисования" формул в тексте.
Например:
E=mc2 сделано вот так: E=mc[sup]2[/sup]
a4 - b4 = (a - b)(a + b)(a2 + b2) реализовано так: a[sup]4[/sup] - b[sup]4[/sup] = (a - b)(a + b)(a[sup]2[/sup] + b[sup]2[/sup])
loga 1 = 0 получилось так: log[sub]a[/sub] 1 = 0
Телетайпный формат текста реализует внешний вид по аналогии с старыми телетайпными/телеграфными аппаратами
Оформляется в теги [tt]текст[/tt]
Данные теги можно спокойно сочетать с другими вариантами оформления (выделение, цвет и т.п.).
-
Работа с таблицами (№22)
Пожалуй самое сложно в тегах - это работа с таблицами. При их форматировании надо помнить много нюансов и быть очень внимательным.
Таблица состоит из трет тегов:- Сама таблица берется в теги [table][/table]
- Каждая строка таблицы "оборачивается" в теги [tr][/tr]
- Каждая ячейка заключена в теги [td][/td]
Из простых правил надо помнить, что:- Текст в таблице может размещаться только внутри тегов ячейки [td][/td]
- Число столбцов в каждой строке должно быть одинаковым
Пример простенькой таблицы из 2 строк и 3 столбцов реализовывается так:
[table]
[tr][td]Строка 1 - Столбец 1[/td][td]Строка 1 - Столбец 2[/td][td]Строка 1 - Столбец 3[/td][/tr]
[tr][td]Строка 2 - Столбец 1[/td][td]Строка 2 - Столбец 2[/td][td]Строка 2 - Столбец 3[/td][/tr]
[/table]
Результат будет выглядеть так:
Строка 1 - Столбец 1 | Строка 1 - Столбец 2 | Строка 1 - Столбец 3 |
Строка 2 - Столбец 1 | Строка 2 - Столбец 2 | Строка 2 - Столбец 3 |
Сочетание тегов внутри и снаружи таблицы позволяет отформатировать текст в читаемый вид. Пожалуй проще всего это показать на следующем примере:
[center][table]
[tr][td][center][b]№ п/п[/b][/center][/td][td][center][b]Фамилия[/b][/center][/td][td][center][b]Средний бал[/b][/center][/td][/tr]
[tr][td][center][b]1[/b][/center][/td][td][left]Иванов[/left][/td][td][right]23,5[/right][/td][/tr]
[tr][td][center][b]2[/b][/center][/td][td][left]Петров[/left][/td][td][right]18,1[/right][/td][/tr]
[tr][td][center][b]3[/b][/center][/td][td][left]Сидоров[/left][/td][td][right]22,7[/right][/td][/tr]
[/table][/center]
Результат выглядит так:
№ п/п | Фамилия | Средний бал |
1 | Иванов | 23,5 |
2 | Петров | 18,1 |
3 | Сидоров | 22,7 |
Рассмотрим его подробнее.
- Всю таблицу мы взяли в теги [center][/center] для её выравнивания по центру сообщения.
- Первую строку таблицы считаем "шапкой" и к каждой ячейке применяем теги [b][/b] и [center][/center] для выделения жирным и выравнивания по центру в ячейках.
- Аналогично применяем теги для первого столбца.
- Фамилии лучше размещать выровненными по левому краю, для чего и используем теги [left][/left].
- А вот цифры (особенно с одинаковым количеством знаков после запятой) лучше выровнять по правому краю с помощью тегов [right][/right]
- Повторюсь, но все форматирования обязательно применяются к каждой ячейке отдельно если их не надо применить ко всей таблице сразу (например сделать цвет шрифта в таблице синим и т.п.)
По тегам таблицы могут и будут возникать вопросы, которые можно будет обсудить потом на живых примерах.
-
Дополнительное форматирование №2 (№№ 23, 24, 25)
Рассмотрим теперь такие элементы форматирования как "вставка кода", "вставка цитаты" и "отключение тегов BBcode".
Эти элементы будут на форуме использоваться реже (кроме цитаты), но вдруг понадобятся кому-то.
Вставка кода осуществляется тегами [code]вставляемый код[/code]. Примеры использования можно увидеть в описании создания таблицы - очень удобно форматировать в наглядный вид. Так же используется для вставки каких-либо "служебных" текстов на странице (сейчас начну страшно материться), например вот кусок кода из одного моего проекта:
<?php
// brief Работа с MySQL
// author Dark Dayver
// version 0.2.0
// details Содержит класс по работе с БД MySQL.
if (IN_GALLERY !== TRUE)
{
die('HACK!');
}
class db
{
private $link;
var $txt_query;
var $res_query;
var $result = FALSE;
var $aff_rows = FALSE;
var $insert_id = FALSE;
var $error;
function db($dbhost, $dbuser, $dbpass, $dbname)
{
$this->link = @mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connect DB: ' . mysql_errno($this->link) . ' - ' . mysql_error($this->link));
@mysql_select_db($dbname, $this->link) or die ('Error select DB: ' . mysql_errno($this->link) . ' - ' . mysql_error($this->link));
@mysql_query("SET CHARACTER SET utf8", $this->link);
@mysql_query("SET NAMES 'utf8'", $this->link);
}
private function query()
{
$this->aff_rows = FALSE;
$this->insert_id = FALSE;
$this->res_query = @mysql_query($this->txt_query, $this->link);
if ($this->res_query === FALSE)
{
$this->error = 'Error DB: ' . mysql_errno($this->link) . ' - ' . mysql_error($this->link) . ' - SQL: ' . $this->txt_query;
return FALSE;
}
else
{
$this->aff_rows = @mysql_affected_rows($this->link);
$this->insert_id = @mysql_insert_id($this->link);
return TRUE;
}
}
function select($select, $from_tbl, $where = FALSE, $order = FALSE, $group = FALSE, $limit = FALSE)
{
if (strlen($this->txt_query) > 0) $this->clean();
$this->txt_query = 'SELECT ';
if (!is_array($select))
{
$select = array($select);
}
$selects = '';
foreach ($select as $tmp)
{
if ($tmp == '*' || $tmp[0] == '`' || $tmp[strlen($tmp) - 1] == '`')
{
$selects .= ', ' . $tmp;
}
else
{
$selects .= ', `' . $tmp . '`';
}
}
$selects = substr($selects, 2);
$this->txt_query .= $selects . ' FROM `' . $from_tbl . '`';
if ($where != FALSE) $this->where($where);
if ($order != FALSE) $this->order($order);
if ($group != FALSE) $this->group($group);
if ($limit != FALSE) $this->limit($limit);
return $this->query();
}
function delete($from_tbl, $where = FALSE, $order = FALSE, $limit = FALSE)
{
if (strlen($this->txt_query) > 0) $this->clean();
$this->txt_query = 'DELETE FROM `' . $from_tbl . '`';
if ($where != FALSE) $this->where($where);
if ($order != FALSE) $this->order($order);
if ($limit != FALSE) $this->limit($limit);
return $this->query();
}
function truncate($tbl)
{
if (strlen($this->txt_query) > 0) $this->clean();
$this->txt_query = 'TRUNCATE TABLE `' . $tbl . '`';
return $this->query();
}
function update($update, $to_tbl, $where = FALSE, $order = FALSE, $limit = FALSE)
{
if (strlen($this->txt_query) > 0) $this->clean();
$this->txt_query = 'UPDATE `' . $to_tbl . '` SET ';
$updates = '';
foreach ($update as $key => $value)
{
if ($value === NULL)
{
$updates .= ', `' . $key . '` = NULL';
}
else
{
$updates .= ', `' . $key . "` = '" . $value . "'";
}
}
$this->txt_query .= substr($updates, 2);
if ($where != FALSE) $this->where($where);
if ($order != FALSE) $this->order($order);
if ($limit != FALSE) $this->limit($limit);
return $this->query();
}
function insert($insert, $to_tbl, $type = FALSE)
{
if (strlen($this->txt_query) > 0) $this->clean();
if ($type == 'ignore')
{
$this->txt_query = 'INSERT IGNORE INTO ';
}
else if ($type == 'replace')
{
$this->txt_query = 'REPLACE INTO ';
}
else
{
$this->txt_query = 'INSERT INTO ';
}
$keys = '';
$values = '';
foreach ($insert as $key => $value)
{
$keys .= ', `' . $key . '`';
$values .= ", '" . $value . "'";
}
$this->txt_query .= '`' . $to_tbl . '` (' . substr($keys, 2) . ') VALUES (' . substr($values, 2) . ')';
return $this->query();
}
private function where($where)
{
if (strlen($this->txt_query) > 0)
{
$this->txt_query .= ' WHERE ' . $where;
}
}
private function order($order, $sort = FALSE)
{
if (is_array($order)) list($order, $sort) = each($order);
if (strlen($this->txt_query) > 0)
{
if ($order !== 'rand()')
{
$this->txt_query .= ' ORDER BY `' . $order . '`';
if ($sort == 'down') $this->txt_query .= ' DESC';
else if ($sort == 'up') $this->txt_query .= ' ASC';
}
else $this->txt_query .= ' ORDER BY rand()';
}
}
private function group($group, $sort = FALSE)
{
if (is_array($group)) list($group, $sort) = each($group);
if (strlen($this->txt_query) > 0)
{
$this->txt_query .= ' GROUP BY `' . $group . '`';
if ($sort == 'down')
{
$this->txt_query .= ' DESC';
}
else if ($sort == 'up')
{
$this->txt_query .= ' ASC';
}
}
}
private function limit($limit, $start = 0)
{
if (is_array($limit)) list($limit, $start) = each($limit);
if (strlen($this->txt_query) > 0 && $limit > 0)
{
$this->txt_query .= ' LIMIT ' . $start . ', ' . $limit;
}
}
function res_row()
{
if ($this->res_query)
{
$this->result = @mysql_fetch_assoc($this->res_query);
}
else
{
$this->result = FALSE;
}
return $this->result;
}
function res_arr()
{
if ($this->res_query)
{
$i = 0;
$this->result = array();
while ($tmp = @mysql_fetch_assoc($this->res_query))
{
$this->result[$i] = $tmp;
$i++;
}
if ($i = 0)
{
$this->result = FALSE;
}
}
else
{
$this->result = FALSE;
}
return $this->result;
}
private function clean()
{
$this->txt_query = '';
$this->res_query = FALSE;
$this->result = FALSE;
$this->aff_rows = FALSE;
$this->insert_id = FALSE;
$this->error = '';
}
}
?>
;D Код вставлен просто для показа того, как форум сам раскрасил код в зависимости от назначения его элементов.
Цитаты могут использовать как для цитирования фрагментов инструкций, книг и т.п., так и для цитирования пользователей. Пример цитирования пользователей:
Работа с таблицами (№22)
Выглядит оно так:
[quote author=ДД link=topic=40.msg1239#msg1239 date=1427209923]
...цитируемый текст...
[/quote]
- author=автор - здесь можно указать автора цитаты (можно использовать самому)
- link=ссылка - здесь ссылку на саму цитату (автоматически вставляет форум)
- date=дата в внутреннем формате (автоматически вставляет форум)
Вот пример того, как можно оформить цитату с указанием автора и источника:
[quote author=Алистер Кроули]
[size=14pt]Нетерпимость есть признак бессилия.[/size]
[right][i](с) [url=http://citaty.info/quote/319062]Citaty.Info[/url][/i][/right]
[/quote]
Результат будет выглядеть так:
Нетерпимость есть признак бессилия.
(с) Citaty.Info ([url]http://citaty.info/quote/319062[/url])
Отключение тегов было добавлено на форум как раз для возможности показать в тексте как эти теги следует писать.
Используется оно следующим образом:
[nobbc][b]текст[/b] [u]с[/u] [s]разными[/s] [u]тегами[/u][/nobbc]
-
Создание списков (№№ 26, 27)
Так же на форуме есть возможность создавать форматированные списки с маркерами или нумерацией.
Как и с таблицей, при форматировании списков, надо быть очень внимательным и помнить о том, что каждый пункт списка должен форматироваться отдельно (если нужен разный внешний вид внутри пунктов).
Рассмотрим пример простого маркированного списка
[list]
[li][b]первая строка списка[/b][/li]
[li][i]вторая строка списка[/i][/li]
[li][u]третья строка списка[/u][/li]
[/list]
Результат будет выглядеть так:
- первая строка списка
- вторая строка списка
- третья строка списка
А вот то же самое в виде нумерованного списка
[list type=decimal]
[li][b]первая строка списка[/b][/li]
[li][i]вторая строка списка[/i][/li]
[li][u]третья строка списка[/u][/li]
[/list]
Результат будет выглядеть так:
- первая строка списка
- вторая строка списка
- третья строка списка
Как видим из указанных примеров, отличие состоит в добавлении в тег самого списка [list][/list] указания типа списка type=decimal следующим образом: [list type=decimal][/list]
Каждая строка списка обязательно заключается в теги [li][/li].
Можно сочетать данные списки и создавать вложенные один в один, но это требует еще большей внимательности при оформлении. Вот пример многоуровневого списка (3 уровня, первый - цифровой, остальные - маркированные):
- Уровень 1
- Уровень 1
- Уровень 1
Сделан список следующим образом:
[list type=decimal]
[li]Уровень 1[/li]
[li]Уровень 1
[list]
[li]Подуровень 2[/li]
[li]Подуровень 2
[list]
[li]Подуровень 3[/li]
[li]Подуровень 3[/li]
[/list][/li]
[/list][/li]
[li]Уровень 1
[list]
[li]Подуровень 2[/li]
[li]Подуровень 2[/li]
[/list][/li]
[/list]
-
Дополнительное форматирование №3 (№№ 28, 29)
Из еще одних элементов форматирования можно отметить вставку горизонтальной линии и скрытие текста под спойлер.
Тег горизонтальной линии является одним из исключений и не требует закрывающего тега: [hr]
Очень удобный тег для разделения сообщения на отдельные фрагменты. Его примеры использования уже неоднократно можно было увидеть в этих уроках. Помните, что тег [hr] надо вставлять между абзацами, так как он разделит текст на две части и нарисует между ними горизонтальную линию.
Тег спойлера используется для скрытия большого фрагмента текста и выглядит так:
[spoiler=описание]скрываемый текст[/spoiler]
- Описание - здесь можно написать краткую аннотацию к скрытому тексту или, если ничего не писать, форум автоматически вставит слово "Спойлер".
- Скрываемый текст будет по-умолчанию свернут (так же в настройках форума стоит не показывать текст под спойлером гостям - что можно использовать для скрытия сообщения или его части от гостей).
Пример использования спойлера без описания
[spoiler]Какой-то скрытый текст[/spoiler]
Извините, вам запрещён просмотр содержимого спойлеров.
Тоже самое, но с описанием
[spoiler=Здесь спрятан текст]Другой скрытый текст[/spoiler]
Извините, вам запрещён просмотр содержимого спойлеров.
-
Удаление форматирования (№30)
Данная кнопка позволяет удалить все теги из выделенного фрагмента текста.
Работает она следующим образом:
- Выделяем фрагмент сообщения из которого надо удалить все теги:
- Нажимаем кнопку "Убрать форматирование":
- Получаем текст с удаленными тегами:
-
Переключение между видами (№31)
Во время публикации сообщения можно переключить вид вводимого сообщения на "отформатированный" и обратно. В отформатированном можно даже редактировать свое сообщение, но есть одно маленькое НО (куда ж без него).
Если в "отформатированном" виде допустить ошибку в форматировании, то найти и устранить её уже может не получиться. По данной кнопке много расписывать не буду, могу только посоветовать не использовать её без особой на то нужды.
-
ДД, Саша, спасибо за краткий, но ёмкий и очень доступный для понимания курс
начинающего хакера продвинутого участника форума! Извините, вам запрещён просмотр содержимого спойлеров.
на досуге обязательно поиграюсь с использованием BBcode
-
Не во что ;)
на досуге обязательно поиграюсь с использованием BBcode
Практика - очень полезная вещь. Есть еще много нюансов по использованию разных тегов, но описать их кратко уже не получится. А так на практике если будет что-то не получаться - можно будет попинать меня и вместе разобраться что не так :)
-
Спасибо большое !!!!!!Очень доступно и познавательно ,особенно для таких чайников ,как я .Спасибо за форум ,два дня полного удовольствия !!!!!!
-
Здесь вы за очень короткое время превратитесь из чайников как минимум в кофейники со свистком, а потом со временем МНОГИМ нос утрете ;)
-
Ригма Гольдман, А я сейчас видео выставила в спойлер ,понравилось !!!!!!
-
Это круто.. надо учиться по настоящему, а то всё познаю методом тыка ??? Спасибо, Саша!
-
ДД, Саша вы золото , очень доступно и понятно Всегда хотела знать хотя бы минимум , мой муж к сожалению совсем не стремиться знать компы поглубже ,только на уровне пользователя Спасибо !!
И отдельное спасибо за форум , здесь комфортно
-
да не выкай на него, он малолетка ;D ;D ;D
-
Ригма Гольдман, если только здесь ВСЕ на ты , то я не против ::) может его спросим ;D
-
ну спроси, ВДРУГ он и правда для тебя сделает исключение и великодушно разрешит выкать ;D ;D ;D
-
Ригма Гольдман, я тебя абажаю ;D ;D ;D
-
;D Как говорил Задорнов:
Обратное «Ура!» - «увы». «Вы» - это «тьма». Как всегда говорили: «Иду на вы!». «Вый» - царь тьмы. Поэтому никогда в русском языке Бога не называли на «Вы». Только на «Ты»! И всех святых - на «Ты». Свет нельзя оскорблять тьмой. А к кому обращались на «Вы»? Вспоминайте классиков. «Вы, свинья, батенька!».
;D Я и подчиненным не разрешаю меня на Вы называть. И по отчеству.
Саша, Ты (на работе)
ДД, ты (в интернете)
А еще есть такая фраза:
"Там где в интернете переходят на Вы - в реальности уже бьют морду" (с) не мое
-
ДД, интересная трактовка , в любом случае я тоже люблю на Ты
-
ДД, спасибо за уроки. Многое не знала, но буду изучать.
-
Если мы хотим "скрыть" сам текст ссылки за подписью, то используем такой вариант: тут пишем описание ссылки (http://здесь пишем саму ссылку). В результате увидим что-то такое: Форум Василис
Как хочется поклянчить отдельную кнопку для "тайной" ссылки! Для особо ленивых. ;)
-
Если совсем тайную, то тогда еще и под спойлер прятать ;)
А вообще я обычно набираю текст, который будет ссылкой, выделяю его, нажимаю "вставить ссылку". А потом дописываю внутри первого тега =ссылка.
-
А вообще я обычно набираю текст, который будет ссылкой, выделяю его, нажимаю "вставить ссылку". А потом дописываю внутри первого тега =ссылка.
Спасибо! Я так и делала.
-
Сейчас распишу подробнее про вставку картинки из интернета (самая левая кнопка второго ряда). Как выяснилось, многие с ней не разобрались.
1. Находим картинку в инете.
2. В адресной строке выделяем ссылку на картинку, копируем ее.
3. Нажимаем кнопочку, между тегами "имг" вставляем нашу скопированную ссылку:
[ img ]http://1den.ru/uploads/images/9/5/a/3/3152/f563e30b5b.jpg[ /img ]
Любуемся на результат:
(https://tuft.rigma.biz/proxy.php?request=http%3A%2F%2F1den.ru%2Fuploads%2Fimages%2F9%2F5%2Fa%2F3%2F3152%2Ff563e30b5b.jpg&hash=081c6cc4b2881fb844656a64d30fa375e16f48b8)
Нас не всегда устраивают размеры выбранной картинки. Часто требуется ее уменьшить.
height - высота изображения,
width - ширина изображения.
Вот с этими параметрами и поиграемся.
Нам достаточно изменить один из параметров, второй автоматически изменится абсолютно пропорционально.
(https://tuft.rigma.biz/proxy.php?request=http%3A%2F%2F1den.ru%2Fuploads%2Fimages%2F9%2F5%2Fa%2F3%2F3152%2Ff563e30b5b.jpg&hash=081c6cc4b2881fb844656a64d30fa375e16f48b8)
[ img height=150 ]http://1den.ru/uploads/images/9/5/a/3/3152/f563e30b5b.jpg[ /img ]
img height=150
Здесь мы выбрали высоту 150 пикселов. Нажали на кнопочку "предварительный просмотр, показалось, что маловато - изменим на 250, например:
(https://tuft.rigma.biz/proxy.php?request=http%3A%2F%2F1den.ru%2Fuploads%2Fimages%2F9%2F5%2Fa%2F3%2F3152%2Ff563e30b5b.jpg&hash=081c6cc4b2881fb844656a64d30fa375e16f48b8)
[ img height=250 ]http://1den.ru/uploads/images/9/5/a/3/3152/f563e30b5b.jpg[ /img ]
img height=250
Опять нажмем на "предварительный просмотр" и посмотрим, что у нас получилось.
Вот так экспериментальным путем и подберем нужный нам размер картинки. После чего со спокойной совестью нажимаем на "отправить" и радуемся, какие мы умнички :give_heart:
-
Ригма Гольдман, Вика, спасибо!!!! :give_rose:
-
Многоуровневый список и его расширение
Рассмотрим для примера вот такой список:
- Первый уровень
- Второй уровень
- Второй уровень
- Первый уровень
- Второй уровень
- Второй уровень
[list type=decimal]
[li]Первый уровень
[list type=decimal]
[li]Второй уровень[/li]
[li]Второй уровень[/li]
[/list]
[/li]
[li]Первый уровень
[list type=decimal]
[li]Второй уровень[/li]
[li]Второй уровень[/li]
[/list]
[/li]
[/list]
Для удобства чтения можно сделать "верстку" (отступы пробелами для каждого "уровня" списка).
Что дает каждый тег:
- Теги [list][/list] показывают, что дальше внутри будет идти список из 1 и более строк.
- А каждый пункт списка должен обязательно быть внутри тегов [li][/li].
- Между тегами одного уровня списка [list] и [li], [/li] и [li], [/li] и [/list] не должно быть никакого текста.
- Если нам надо вставить следующий уровень списка, то мы его размещаем между тегами [li][/li] предыдущего уровня.
- Если нам надо добавить еще один пункт в список, то находим последний закрывающий тег [/list] и вставляем перед ним строку [li][/li] внутри которой и будет размещаться текст и/или следующий уровень списка.
Шаг 1
[list type=decimal]
[li]Первый уровень
[list type=decimal]
[li]Второй уровень[/li]
[li]Второй уровень[/li]
[/list]
[/li]
[li]Первый уровень
[list type=decimal]
[li]Второй уровень[/li]
[li]Второй уровень[/li]
[/list]
[/li]
[li]Первый уровень[/li] - добавляем новый пункт меню в конец списка
[/list]
Шаг 2
[list type=decimal]
[li]Первый уровень
[list type=decimal]
[li]Второй уровень[/li]
[li]Второй уровень[/li]
[/list]
[/li]
[li]Первый уровень
[list type=decimal]
[li]Второй уровень[/li]
[li]Второй уровень[/li]
[/list]
[/li]
[li]Первый уровень
[list type=decimal] - вставляем,
[li]Второй уровень[/li] - при необходимости
[li]Второй уровень[/li] - следующий уровень
[/list] - списка
[/li]
[/list]
Следующий фрагмент списка готов:
- Первый уровень
- Второй уровень
- Второй уровень
- Первый уровень
- Второй уровень
- Второй уровень
- Первый уровень
- Второй уровень
- Второй уровень
-
Ригма Гольдман, Спасибо! Попробую