Форматирование постов
    Все картинки темы
Список форумов -> Обратная связь -> Правила и документация
Все картинки темы

| Форматирование постов

Общие сведения

Текст в форумных сообщениях форматируется с помощью специальных тегов bbCode.
Обычно они имеют такую конструкцию:
открывающий тег [ буква или слово ]
закрывающий тег [ / те же буква или слово ]
нужная информация (текст или ссылка) находится между открывающим и закрывающим тегами.

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

На нашем форуме все теги bbCode кроме [ more] (читать дальше) имеют такую конструкцию.

Обратите, пожалуйста, на это внимание. Потому что самая распространенная ошибка форматирования текста - это потеря части тегов. Удаление даже одной скобки повлечет за собой некорректное отображение вашего поста.
Поэтому, если в предварительном просмотре пост выглядит не так как вы хотели, или часть строк выделено желтым, или в правом верхнем углу поста вы видите желтый треугольник с восклицательным знаком - проверьте правильность всех тегов:
[ буква или слово ] [ / те же буква или слово ]
- для каждого, в том числе вложенных друг в друга, например

[color=blue][b][i][/i][/b][/color]

Форматировать текст можно двумя способами (результат, естественно, будет одинаковым).
1. Если Вы заранее решили, что сейчас начнете писать жирно или вставите заголовок или цитату - нажимаете соответствующую кнопку, и пишите желаемый текст.

2. Если Вы уже все написали текст, а потом решили его отформатировать - выделите нужный кусок текста мышкой (держа нажатой левую ее кнопку) и затем нажмите соответствующую кнопку форматирования.


Потренироваться в форматировании текста

можно здесь.

Формат шрифта

Жирный шрифт.

Кнопка В - преобразует выделенный шрифт в жирный. (Тэг [ b] [ /b] )

Пример:

[b]Жирный шрифт.[/b]

Жирный шрифт

Кнопка

Курсив.

i - преобразует выделенный шрифт в курсив. (Тэг [ i] [ /i] )

Пример:

[i]Курсив[/i]

Курсив

Кнопка

Подчеркивание.

u - преобразует выделенный шрифт в подчеркнутый. (Тэг [ u] [ /u] )

Пример:

[u]Подчеркивание[/u]

Подчеркивание

Кнопка

Зачеркивание.

s - преобразует выделенный шрифт в зачеркнутый. (Тэг [ s] [ /s] )

Пример:

[s]Зачеркивание[/s]

Зачеркивание

Цветной текст

Выпадающий список позволяет выбрать желаемый цвет текста. (Тэг [ color=выбранный цвет] [ /color] )
Цветом по умолчанию является черный.

Пример:

[color=green]Зеленый[/color]

Зеленый

Согласно нашим правилам изменять цвет шрифта в сообщениях без явной причины запрещено.


Все виды форматирования можно совмещать, последовательно нажимая нужные кнопки.

Пример:
В + s

[b][s]Жирный и зачеркнутый[/s][/b]

Жирный и зачеркнутый

Работа с цитатами

Получить в тексте цитату можно с помощью кнопки
Цитата в набираемом тексте ограничена тегами [ quote] [ / quote].
Если вы хотите указать автора цитаты, то добавьте в конец первого тега ="имя".

Например, [ quote="Katunja"] [ / quote] - это будет цитата моего текста Smile)

Чтобы цитата корректно отображалась, не меняйте символы в квадратных скобках, и не удаляйте сами скобки.


Пример.

[quote]Цитата в набираемом тексте ограничена тегами [/quote]

Цитата в набираемом тексте ограничена тегами

[quote="Katunja"]Цитата в набираемом тексте ограничена тегами [/quote]
Katunja

Цитата в набираемом тексте ограничена тегами

Как процитировать часть сообщения.

1 вариант.
Процитируйте сообщение полностью как описано в предыдущем посте.
И удалите лишний текст или фотографии.

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

2 вариант.
Скопируйте нужный для цитирования кусок текста.
Откройте окно ответа и нажмите кнопку "Quote", между появившимися тегами вставьте скопированный текст.
Добавьте автора процитированного поста как описано в первом посте темы.


Обязательно проверьте, что у вас получилось с помощью предварительного просмотра!

Как добавить в пост несколько цитат.

Откройте все страницы, на которых расположены посты, которые вы хотите использовать для цитирования.
Откройте окно ответа.
Далее используйте вариант 2 из предыдущего поста для создания каждой цитаты. Между цитатами впишите свой текст.


Пример.

[quote="Katunja"]Цитата в набираемом тексте ограничена тегами [/quote]
Теги - это слова или буквы в квадратных скобочках.
[quote="Katunja"]Будьте очень аккуратны, и не удалите части тегов [/quote]
Почти все теги двойные - открывающий и закрывающий.
Katunja

Цитата в набираемом тексте ограничена тегами

Теги - это слова или буквы в квадратных скобочках.

Katunja

Будьте очень аккуратны, и не удалите части тегов

Почти все теги двойные - открывающий и закрывающий.

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

Текст цитаты тоже можно форматировать, выделяя наиболее важные ее части.
Делать их жирными

Процитируйте сообщение полностью как описано в предыдущем посте.
И удалите лишний текст или фотографии.

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

Или цветными

Процитируйте сообщение полностью как описано в предыдущем посте.
И удалите лишний текст или фотографии.

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

Правила хорошего тона при цитировании.

Используйте для цитаты только то, что действительно нужно.
Не ленитесь убрать лишние картинки или полкилометра текста - и ваши читатели будут вам благодарны!

Будьте особенно внимательны при использовании вложенных цитат - часто люди неверно ставят (или случайно стирают) теги, и получается, что слова одного человека цитатой приписываются другому, зачастую имеющему мнение прямо противоположное.
Обязательно проверяйте правильность оформления таких цитат!


Всеми вышеописанными способами можно добавлять цитаты в письма личной почты.

Скрытый текст

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

Пример:

[hide]Скрытый текст[/hide]

Скрытый текст

Помните, что избыточное использование этого инструмента затруднит чтение ваших постов, применяйте его только в случае необходимости.


Тег "hide" не предназначен для скрытия больших блоков (цитат, картинок и т.п.) -- расценивайте его как способ оставить "заметки на полях" или "комментарии в тексте". Этот тег отлично подходит для написания части сообщения, которая не по теме переписки (offtopic)

Кодировка текста.

Прежде всего хочу обратить внимание на то, что это чисто техническая функция. Она не изменяет текст каким-либо образом и не скрывает его от поисковиков.

Кодировка - это такая специфическая функция для форума, которая позволяет показать форматированный тэгами текст без работы этих тэгов.
Например, если я пользуюсь тэгом жирности шрифта [ b] [ /b] и напишу Жирный шрифт - вы видите результат работы тэга, но не видите механизм. Если же теперь я напишу то же самое, но использую кодирование - результата вы как раз не увидите, зато механизм будет очевиден.

[b]Жирный шрифт[/b]

Создание списков

Инструкция от Osinka

В своем сообщении можно создавать нумерованные и ненумерованные списки, практически как в программе Word. Поскольку их оформление неочевидно, публикуем небольшую инструкцию. Oppa!

За оформление текста в организованный список отвечает тег list, расположенный над полем для сообщения в ряду остальных кнопочек - b, i и т.д. Весь список должен быть заключен между тегами list (в начале списка) и /list (в конце списка). Перед каждым элементом списка нужно поставить звездочку в квадратных скобках [ * ] .

Маркированный список

[list][*]шитье[*]вязание[*]рукоделие[/list]:

Результат:

  • шитье
  • вязание
  • рукоделие

Для создания нумерованных и алфавитных списков способ маркирования указывается через знак равенства у открывающего тега list: для нумерованного списка - list=1, для алфавитного - list=a.

Нумерованный список

[list=1][*]молоко[*]хлеб[*]яйца[/list]:

Результат:

  1. молоко
  2. хлеб
  3. яйца

Алфавитный список

[list=a][*]пуговицы[*]клей[*]стразы[/list]:

Результат:

  1. пуговицы
  2. клей
  3. стразы

После закрывающего тега /list продолжение вашего текста можно писать сразу же, то есть не оставляя пустую строку как при разделении абзацев и даже можно не делать перевод строки. Компьютер сам сделает достаточный отступ после списка.

Добавление изображения

Вставить картинку из интернета

Кнопка Img создает теги [ img] [ /img], которые позволяют вставить фотографию/картинку из интернета в тело поста.
Для этого между открывающим и закрывающим тегом надо вставить URL изображения, которое можно получить:

в FireFox - кликнуть на картинку правой кнопкой, выбрать строку Копировать ссылку на изображение;
в Google Chrome - кликнуть на картинку правой кнопкой, выбрать строку Копировать URL изображения;
в Opera - кликнуть на картинку правой кнопкой, выбрать строку Копировать адрес изображения.

Для примера вставим первую картинку с этой страницы

http://www.osinka.ru/Sewing/Dekor/About/Freeform.html

Ссылка на изображение -

http://www.osinka.ru/Sewing/Dekor/About/Img/Freeform/00.jpg

Используем кнопку добавления изображения

[img]http://www.osinka.ru/Sewing/Dekor/About/Img/Freeform/00.jpg[/img]

Картинка с подписью

Также к картинке вы можете добавить подпись. Картинки с подписью отображаются на страницах форума в рамочке и подпись собственно под картинкой. Эти подписи будут видны не только на страницах форума, но также при поиске по картинкам.

Чтобы получить картинку с подписью, нужно создать следующую конструкцию

[img=ссылка_на_картинку]подпись к картинке[/img]

Попробуем добавить подпись Фриформ. Фрагмент работы. Автор работы - Димарина. к картинке из первой части поста.

[img=http://www.osinka.ru/Sewing/Dekor/About/Img/Freeform/00.jpg]Фриформ. Фрагмент работы. Автор работы - Димарина.[/img]

Фриформ. Фрагмент работы. Автор работы - Димарина.
Фриформ. Фрагмент работы. Автор работы - Димарина.

Картинка со ссылкой в подписи

Как сделать к фотографии подпись, идентичную имеющейся? Фриформ. Фрагмент работы. Автор работы - Димарина.

Действуем последовательно и внимательно!!!

Нам нужны три вещи:
1. Ссылка на изображение
2. Текст подписи
3. Ссылка, на которую переходит подпись (в нашем случае это профиль автора работы).

Имеем:
1.

http://www.osinka.ru/Sewing/Dekor/About/Img/Freeform/00.jpg

2. Фриформ. Фрагмент работы. Автор работы - Димарина.
3.

http://club.osinka.ru/profile.php?mode=viewprofile&u=54066

Составляем искомую конструкцию.

[img=http://www.osinka.ru/Sewing/Dekor/About/Img/Freeform/00.jpg] Фриформ. Фрагмент работы. Автор работы -  [url=http://club.osinka.ru/profile.php?mode=viewprofile&u=54066]Димарина.[/url][/img]

Фриформ. Фрагмент работы. Автор работы - Димарина.
Фриформ. Фрагмент работы. Автор работы - Димарина.


Видеоурок

http://www.osinka.ru/Adv/e-video.html#04

Работа со ссылками

Добавить ссылку

Не просто, а очень просто!
Скопируйте нужную вам ссылку в адресной строке браузера (если хотите сослаться на открытую вами страницу) или в тексте, где она указана.
Нажмите кнопку URL и вставьте скопированное.

Пример:

[url]http://club.osinka.ru/topic-163704?p=14509731#14509731[/url]

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

Как сделать ссылку словом/фразой

Конструкция такова:
[ url = ссылка ] желаемый текст [ /url]
То есть нажимаете кнопку URL, помещаете курсор после букв в первом, открывающем теге, печатаете знак = и вставляете свою ссылку. Затем помещаете курсор между тегами и печатаете желаемый текст.

Пример:

[url=http://club.osinka.ru/topic-163704?p=14509731#14509731]Работа со ссылками[/url]

Работа со ссылками

Текст можно также форматировать - делать жирным, цветным и т.п.
Пример:

[url=http://club.osinka.ru/topic-163704?p=14509731#14509731][i]Работа[/i] [b]со[/b] [color=brown]ссылками[/color][/url]

Работа со ссылками

Заголовки

Для выделения частей текста используйте заголовки. Чтобы создать заголовок, используются кнопки H1, H2, H3.
У нас существуют заголовки трех уровней:

[h1]Большой заголовок[/h1]

[h2]Заголовок поменьше[/h2]

[h3]Маленький заголовок[/h3]

Все заголовки являются адресуемыми - вы можете получить ссылку в точности на заголовок, если наведете на него мышь и нажмете на появившийся знак

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

Отсюда логичный вывод - не злоупотребляйте заголовками, используйте их для выделения действительно важной информации.

Разделительная линия

Для отделения блоков текста в одном посте используйте разделительную линию - горизонтальную черту. Горизонтальная черта позволит вам отделить одну смысловую часть текста от другой в том случае, если заголовок вам не нужен.
Способов поставить горизонтальную черту масса -- это любое сочетание минусов, знаков равенства, подчеркиваний или звездочек (не менее 3!), которое встречается на отдельной строке само по себе:

----
или
===
или
***
или даже
=-*-=

либо использование кнопки в форме ответа или написания личного письма.

Спойлер

Иногда хочется написать большое сообщение, например вставить интересную статью или показать полтора десятка фотографий новой работы, но при этом не выставлять огромный пост.
Можно, конечно, использовать функцию скрытого текста, а можно воспользоваться спойлером/катом/читать далее.

Для этого используется кнопка more, которая генерирует тег [ more] - единственный на нашем форуме одиночный (не требующий закрывания) тег.

[more]
читать дальше

Добавить Google-таблицу в пост

Бобик

В форумные сообщения можно вставлять таблицы Google Docs. Чтобы воспользоваться этой возможностью, вам надо
(1) иметь аккаунт в google,
(2) зайти на http://docs.google.com, зарегистрироваться там и создать таблицу.

Дальше делаем ее доступной как веб-страница:

Берем ссылку из появившегося окна и жмем "Закрыть" :

Ссылку смело вставляем в сообщение на форуме. Получаем на странице:

Таблицу можно редактировать в Google Docs независимо от сообщения на форуме.


Обратите внимание, что таблица появится в посте
- в виде таблицы, если вы просто вставите скопированную ссылку
- в виде ссылки, если скопированную ссылку вы заключите в теги [ url] [ /url].


Если вы предварительно в настройках доступа документа указали "всем в Интренете" или "всем у кого есть ссылка", вашу таблицу смогут редактировать все желающие.

Добавить видеоролик в пост

Форум понимает ссылки на видео, расположенное на Youtube и Vimeo, для этого достаточно взять ссылку на ролик из адресной строки браузера и вставить в сообщение. Youtube также дает ссылку, если нажать на кнопку "Отправить":

Вы также можете вставлять видео с Yandex, Mail.ru и других сайтов через HTML код вида

<object>...<embed></object>

На Youtube такой код можно получить по кнопке "встроить", однако вам надо будет отметить "использовать старый код встраивания":

Также поддерживается <iframe> код. Ранее можно было использовать только код <object>, теперь работают оба варианта.

Для обеспечения безопасности форум раскрывает видео только с youtube.com, video.yandex.ru, vimeo.com, vk.com


Также обратите внимание, что на форуме можно размещать видеоролики произвольного размера, для этого нужно вставить в пост тот код, который youtube/rutube предлагает для встраивания на сайты. Это позволяет размещать видеоролик того размера и с теми параметрами, которые были выбраны в youtube/rutube


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

http://youtu.be/1jY26PzHCDI

Если вы вставите ссылку через [ url ], форум оставит в сообщении ссылку:

[url]http://youtu.be/1jY26PzHCDI[/url]

Раскрытие ссылок

На Осинке поддерживается раскрытие следующих ссылок:

  • Ссылки на видео: Youtube, Vimeo
  • Ссылки на Pinterest: на сами пины, на "доски" (boards)
  • На карты: Google Maps, Яндекс.Карты
  • На документы Google: презентации, текст, таблицы и формы

Примечание.
Гугл теперь разрешает встраивать только те документы, для которых ссылка была получена через меню "Файл" -> "Опубликовать в интернете", там надо выбрать "встроить" (и можно выбрать определенный лист). Соответственно, мы будем раскрывать только такие ссылки либо непосредственно код <iframe> полученный из этого меню.

Мы планируем добавлять другие виды ссылок, которые было бы полезно раскрывать непосредственно на страницах Осинки.


 
 
 

 
Авторы
Теги
Упоминания