BB коды или моё первое сообщение на форуме

Тема в разделе "FAQ", создана пользователем AcIIuPuH, 26 июн 2010.

  1. AcIIuPuH Активный участник

    Регистрация:
    29 дек 2009
    Сообщения:
    221
    Симпатии:
    162
    Провайдер:
    Мультинекс
    Данный мануал написан специально для новичков, которые только начинают пользоваться Нашим форумом и не имеют опыта пользования другими подобными ресурсами. Я постараюсь подробно описать, что такое BB коды и как их использовать для форматирования текста Ваших сообщений, как вставлять в Ваши сообщения изображения, ссылки и многое другое, используя BB коды.

    Итак, начнем.

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

    Для того, чтобы написать сообщение (или иначе его называют "пост") на форуме, нужно в интересующей Вас теме нажать кнопку [​IMG] Далее откроется страница, содержащая вот такую форму:

    [​IMG]

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

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

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

    1.1 Полужирный текст

    Сделаем напечатанный Вами текст сообщения полужирным. Для этого выделим напечатанный текст мышкой:

    [​IMG]

    и на верхней панели формы нажмем вот эту кнопочку:

    [​IMG]

    Вы увидите, что напечатанный Вами текст в прямоугольной белой области примет вот такой вид:
    Код:
    [В]Моё сообщение[/В]
    Вот Вы впервые и увидели теги. Речь идет о символах [В] и [/В]. Любой текст заключенный между этими символами будет отображен в Вашем сообщении полужирным. Несколько слов о конструкции тегов. Все теги используются парами, т.е. имеют открывающий ([В] к примеру) и закрывающий ([/В]) тег. Внимание! Открывающий тег всегда должен заканчиваться парным ему закрывающим, т.е. другого одиночного тега между ними быть не должно.

    Теперь, если вы нажмете на кнопочку "Ответить", находящаяся внизу формы, то увидите, что текст Вашего сообщения отображается полужирным, в нашем примере он будет выглядеть вот так:

    Моё сообщение

    1.2 Наклонный текст

    Для того, чтобы сделать напечатанный Вами текст сообщения наклонным, необходимо также выделить его мышкой и нажать на панели кнопочку:

    [​IMG]

    В итоге напечатанный Вами текст примет вид:
    Код:
    [noparse][I]Моё сообщение[/I][/noparse]
    а само сообщение будет выглядеть вот так:

    Моё сообщение

    1.3 Подчеркнутый текст

    Для того, чтобы сделать напечатанный Вами текст сообщения подчеркнутым, необходимо также выделить его мышкой и нажать на панели кнопочку:

    [​IMG]

    В итоге напечатанный Вами текст примет вид:
    Код:
    [noparse][U]Моё сообщение[/U][/noparse]
    а само сообщение будет выглядеть вот так:

    Моё сообщение

    1.4 Изменение шрифта текста

    Для изменения стандартного шрифта напечатанного Вами текста нужно: также выделить текст мышкой, нажать на панели кнопочку "Шрифты" и выбрать из выпадающего списка интересующий Вас шрифт. К примеру, мне нужен шрифт "Century Gothic". Для этого следуем по вышеописанной инструкции:

    [​IMG]

    В итоге напечатанный мною текст примет вид:
    Код:
    [noparse][FONT="Century Gothic"]Моё сообщение[/FONT][/noparse]
    а само сообщение будет выглядеть вот так:

    Моё сообщение

    1.5 Изменение размера текста

    Для изменения стандартного размера напечатанного Вами текста нужно: выделить текст мышкой, нажать на панели кнопочку "Размер" и также, как и в случае с изменением шрифта, выбрать из выпадающего списка интересующий Вас размер. Например, я сейчас напечатаю текст 5 размера:
    Код:
    [noparse][SIZE="5"]Моё сообщение[/SIZE][/noparse]
    Моё сообщение

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

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

    [​IMG]

    В итоге напечатанный Вами текст примет вид:
    Код:
    [noparse][COLOR="Green"]Моё сообщение[/COLOR][/noparse]
    а само сообщение будет выглядеть вот так:

    Моё сообщение

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

    Текст Вашего сообщения можно выровнять по левому краю, по центру и по правому краю. Для этого используется следующая группа кнопок на панели:

    [​IMG]

    Для примера выровняем текст сообщения по правому краю страницы. Для этого опять же выделим напечатанный текст мышкой и нажмем соответствующую кнопку из группы на панели (в нашем случае это третья кнопочка). В итоге напечатанный Вами текст примет вид:
    Код:
    [noparse][RIGHT]Моё сообщение[/RIGHT][/noparse]
    а само сообщение будет выглядеть вот так:

    Моё сообщение​

    1.8 Комбинированное форматирование текста

    До этого мы с Вами разбирали простейшее форматирование текста. Но довольно часто возникает необходимость комбинированного форматирования. Чтобы понять, о чем идет речь, сразу перейдем к примеру. Предположим, что мы хотим, чтобы текст сообщения был полужирным, подчеркнутым, оранжевого цвета, 4 размера, имел шрифт Tahoma и был выровнен по центру. Для этого нужно также выделить напечатанный Вами текст мышкой и по порядку нажать нужные кнопки на панели, описанные ранее. В итоге напечатанный нами текст примет вид:
    Код:
    [noparse][B][U][FONT="Tahoma"][SIZE="4"][COLOR="DarkOrange"][CENTER]Я научился форматировать текст[/CENTER][/COLOR][/SIZE][/FONT][/U][/B][/noparse]
    а само сообщение будет выглядеть вот так:

    Я научился форматировать текст​


    Обратите внимание на конструкцию
    Код:
    [noparse][B][U][FONT="Tahoma"][SIZE="4"][COLOR="DarkOrange"][CENTER]Я научился форматировать текст[/CENTER][/COLOR][/SIZE][/FONT][/U][/B][/noparse]
    Здесь Вы видите уже знакомые нам теги, но на первый взгляд в странном порядке. Чтобы сразу закрепить изученное и избежать путаницы в дальнейшем, разберем конструкцию подробней. Найдите в этой конструкции собственно сам текст сообщения. В нашем примере это "Я научился форматировать текст". А теперь двигаясь в разные стороны по порядку от текста находим теги:

    Я научился форматировать текст - текст сообщения

    [noparse]
    Я научился форматировать текст​
    [/noparse]
    - выравниваем текст по центру

    [noparse]
    Я научился форматировать текст​
    [/noparse]
    - выровненный текст делаем оранжевого цвета

    [noparse]
    Я научился форматировать текст​
    [/noparse]
    - выровненный текст оранжевого цвета делаем 4 размера

    [noparse]
    Я научился форматировать текст​
    [/noparse]
    - задаем шрифт Tahoma выровненному тексту оранжевого цвета 4 размера

    [noparse]
    Я научился форматировать текст​
    [/noparse]
    - выровненный текст оранжевого цвета 4 размера шрифтом Tahoma делаем подчеркнутым

    [noparse]
    Я научился форматировать текст​
    [/noparse]
    - подчеркнутый выровненный текст оранжевого цвета 4 размера шрифтом Tahoma делаем полужирным

    Как Вы наверняка заметили, все теги используются парами, причем каждая следующая пара тегов содержит в себе предыдущие пары. Примечание! Порядок использования пар тегов может быть произвольным, т.е. конструкция вида:
    Код:
    [noparse][SIZE="4"][B][U][FONT="Tahoma"][CENTER][COLOR="DarkOrange"]Я научился форматировать текст[/COLOR][/CENTER][/FONT][/U][/B][/SIZE][/noparse]
    будет означать тоже самое.

    Самая распространенная ошибка новичков при форматировании текста, возникающая обычно при ручном редактировании сообщений - именно непонимание конструкции тегов. Поэтому запомните два простых правила:

    1. Все теги парные, т.е. имеют конструкцию [тег] [/тег], более сложные конструкции имеют вид: [тег2][тег1] [/тег1][/тег2]
    2. Наш форум корректно отображает простейшие конструкции с нарушенной парностью, но более сложные конструкции отображает не правильно, поэтому соблюдение парности тегов просто необходимо.

    2. Списки

    В обычном виде списки можно представить вот так:

    1. Элемент списка 1
    2. Элемент списка 2
    3. Элемент списка 3

    или вот так:

    - Элемент списка
    - Элемент списка
    - Элемент списка

    Но для большей наглядности на Нашем форуме есть возможность форматирования Ваших списков.

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

    Для создания нумерованного списка нужно на панели нажать вот эту кнопку:

    [​IMG]

    Далее откроется форма для ввода элементов списка, в браузере Opera она выглядит вот так:

    [​IMG]

    Теперь начинаем вводить в эту форму элементы Вашего списка. К примеру, нам нужно создать вот такой список:

    1. Красный
    2. Зеленый
    3. Синий

    Для этого в форме вводим первый элемент списка, а именно текст "Красный", нажимаем ОК, далее вводим второй элемент списка (текст "Зеленый"), нажимаем ОК, вводим третий элемент списка (текст "Синий"), нажимаем ОК. В нашем случае все элементы списка закончились, поэтому форму оставляем пустую и нажимаем ОК (или же можно просто нажать "Отмена"). В итоге мы увидим вот такую конструкцию:
    Код:
    [noparse][LIST=1][*]Красный[*]Зеленый[*]Синий[/LIST][/noparse]
    а сам список будет выглядеть вот так:
    1. Красный
    2. Зеленый
    3. Синий

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

    Для создания ненумерованного списка нужно на панели нажать вот эту кнопку:

    [​IMG]

    Далее повторяем все действия, что и в случае с нумерованными списками. В итоге мы увидим вот такую конструкцию:
    Код:
    [noparse][LIST][*]Красный[*]Зеленый[*]Синий[/LIST][/noparse]
    а сам список будет выглядеть вот так:

    • Красный
    • Зеленый
    • Синий

    2.3 Форматирование элементов списка

    Элементы списка также можно форматировать по правилам форматирования обычного текста (смотрите Раздел 1 "Форматирование текста"). Для примера отформатируем элементы ранее созданного списка, а именно сделаем их полужирными, цветными и 3 размера. Как и в случае с форматированием обычного текста достаточно выделить элемент списка мышкой и нажать нужные кнопки на панели. В итоге получаем конструкцию вида:
    Код:
    [noparse][LIST=1][*][SIZE="3"][COLOR="Red"][B]Красный[/B][/COLOR][/SIZE][*][SIZE="3"][COLOR="Green"][B]Зеленый[/B][/COLOR][/SIZE][*][SIZE="3"][COLOR="Blue"][B]Синий[/B][/COLOR][/SIZE][/LIST][/noparse]
    а сам список будет выглядеть вот так:

    1. Красный
    2. Зеленый
    3. Синий

    3. Ссылки

    Очень часто в сообщениях Вам придется использовать ссылки, поэтому я решил уделить побольше внимания этому вопросу. Многие новички, не зная как правильно разместить ссылку в сообщении, выкладывают просто адрес страницы, к примеру:
    Код:
    Здесь выкладываются объявления, связанные с работой Нашего форума
    http://62live.ru/rabota-foruma-i-portala/6105-obuyavleniya-svyazannye-s-rabotoi-foruma.html
    Согласитесь, что наглядность и удобство таких постов оставляет желать лучшего, поэтому сейчас подробно объясню, как правильно оформлять ссылки в сообщениях.

    3.1 Ссылки с описанием и без

    Итак, чтобы научиться правильно оформлять ссылки на Нашем форуме и познакомиться с используемыми тегами, сделаем, к примеру, ссылку на поисковую систему Google. Для этого нужно на панели нажать вот эту кнопку:

    [​IMG]

    Далее откроется форма, в которую нужно ввести адрес страницы, на которую делаем ссылку (достаточно просто скопировать из адресной строки браузера), в нашем случае это адрес [noparse]http://www.google.ru[/noparse], вводим адрес и нажимаем ОК. В области для ввода текста сообщения мы увидим вот такую конструкцию:

    [​IMG]

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

    http://www.google.ru

    Небольшое отступление! Такая конструкция называется ссылкой с описанием и Наш форум использует именно такую конструкцию. Но, для справки, есть более простая конструкция, её вид: [noparse][/noparse][/B] адрес страницы [B][noparse][/noparse]. Описанием такой ссылки служит адрес страницы и его поменять нельзя, в отличии от раннее рассмотренной конструкции, чем мы сейчас и займемся. Вернемся к ранее рассмотренной конструкции с выделенным вторым адресом страницы, т.е. с выделенным описанием ссылки. Описанием ссылки может служить любой текст, поэтому стираем выделенный адрес и напишем, в нашем примере, слово Google. Теперь конструкция будет выглядеть вот так:
    Код:
    [noparse][url=http://www.google.ru]Google[/url][/noparse]
    А ссылка в сообщении будет выглядеть вот так:

    Google

    Как уже говорилось, описанием ссылки может служить любой текст, поэтому хочу отметить, что ссылки можно форматировать, а если точнее, то форматировать описание ссылок по правилам форматирования обычного текста. Для примера, сделаем нашу ссылку на Google полужирной, 4 размера и зеленым цветом. Для этого выделяем описание ссылки мышкой и нажимаем нужные кнопки на панели. В итоге мы увидим вот такую конструкцию:
    Код:
    [noparse][URL="http://www.google.ru"][SIZE="4"][COLOR="Green"][B]Google[/B][/COLOR][/SIZE][/URL][/noparse]
    а сама ссылка будет выглядеть вот так:

    Google

    3.2 Ссылка на сообщение

    Иногда возникает необходимость сделать ссылку на отдельное сообщение пользователя. Для этого находим интересующий нас пост (для примера я возьму сообщение, в котором изображено, как вставлять таблицы в сообщение) и обращаем внимание на верхнюю панель поста:

    [​IMG] (кликнуть для увеличения)

    Теперь, чтобы сделать ссылку на этот пост, нужно нажать на элемент 1 или 2, скопировать адрес из адресной строки браузера и оформить как обычную ссылку (пункт 3.1).

    Если был нажат элемент 1, то пост по ссылке будет выглядеть вот так:

    Как постить таблицы

    Если был нажат элемент 2, то пост по ссылке будет выглядеть вот так:

    Как постить таблицы

    Мануал не закончен и будет постепенно расширяться. Просьба не удалять :)
     
    8 пользователям это понравилось.
  2. Predtecha Администратор Команда форума

    Регистрация:
    28 июл 2007
    Сообщения:
    2.739
    Симпатии:
    1.219
    Провайдер:
    МТС
    Продолжай, мы только "За".
     
  3. ncux псих

    Регистрация:
    12 фев 2008
    Сообщения:
    69
    Симпатии:
    17
    Провайдер:
    Мультинекс
    спасибо, вот научусь и буду оформлять посты на форуме. пока не умею:sad:
     
    1 человеку нравится это.
  4. WTakET Местный

    Регистрация:
    13 июл 2009
    Сообщения:
    1.761
    Симпатии:
    817
    Провайдер:
    Энлинк
    Leshiy62, вот в пункте 1.2 у вас курсив, а пункт 1.1 - полужирный, а не полужирный курсив.
     
  5. AcIIuPuH Активный участник

    Регистрация:
    29 дек 2009
    Сообщения:
    221
    Симпатии:
    162
    Провайдер:
    Мультинекс
    WTakET, да, спасибо, исправил, будут еще замечания по содержанию, пишем - не стесняемся :)
     
  6. Devil Местный

    Регистрация:
    7 мар 2007
    Сообщения:
    6.229
    Симпатии:
    1.411
    Провайдер:
    Билайн
    А может каждый пункт сделать отдельным сообщением? По-моему так будет наглядней.
     
  7. DarkFell Гость

    ВырОвненный, а не вырАвненный
     
  8. Devil Местный

    Регистрация:
    7 мар 2007
    Сообщения:
    6.229
    Симпатии:
    1.411
    Провайдер:
    Билайн
    Это ты про это
    ?
     
  9. Predtecha Администратор Команда форума

    Регистрация:
    28 июл 2007
    Сообщения:
    2.739
    Симпатии:
    1.219
    Провайдер:
    МТС
    Скорее всего автор уже всё исправил.
    Автору: если что-то исправляешь по замечаниям, отписывайся пожалуйста.

    P.S. Позже ветку почистим, поэтому благодарность в репутации подсказывающего лучше изменять в другом его посту.
     
  10. AcIIuPuH Активный участник

    Регистрация:
    29 дек 2009
    Сообщения:
    221
    Симпатии:
    162
    Провайдер:
    Мультинекс
    Хорошо
     
  11. DarkFell Гость

    Да были косяки, сейчас исправили)
     
  12. Vasiliy 62RUS Новичок

    Регистрация:
    29 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    Провайдер:
    WestCall
    Всем привет ! Я новичок , буду потихоньку осваиваться ...
     

Пользователи просматривающие тему (Пользователей: 0, Гостей: 0)