|
|
|
Введение
bbCode — Bulletin Board Code, или язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS) и форумах. Для форматирования текста используются теги, подобные тегам HTML. В отличие от тегов HTML, теги bbCode заключают в квадратные скобки. Перед отображением страницы движок форума производит разбор текста и преобразовывает bbCode в HTML-код.
На многих форумах возможность использования BB-кодов настраивается администратором индивидуально на каждый раздел форума. Поэтому, прежде чем использовать BB-коды в сообщениях, необходимо убедиться, что они разрешены.
Форматирование шрифта
Базовые тэги для работы с текстом:
[p]
Обычный абзац с отступом.
Абзац, которому можно задавать стиль.
* Здесь и далее «стиль» — это аналог style в HTML.
текст аналогично в HTML
текст
** С тэгами [p] можно использовать другие тэги, такие как [b], [i], [s] и т.д.
Текст, которому с помощью стиля можно менять свойства.
Ограниченная область, которой с помощью стиля можно менять свойства (положение, границы, отступы, свойства содержимого и т.д.).
* По умолчанию границы областей не видны. На одной странице может быть сразу несколько областей .
Форматирование текста:
[b]
Важный текст, полужирный
[i]
Важный текст, курсив
Просто полужирный
Просто курсив
[u]
Подчёркнутый текст
[s]
Зачёркнутый текст
— аналогично варианту
Уменьшенный шрифт
Знак сноски сверху
или индекс снизу
от текста
Удалённый текст
Размеры шрифта:
Шрифт размером 13 пунктов
Шрифт размером 15 пунктов
Шрифт размером 9 пикселей
Шрифт размером 12 пикселей
Шрифт размером 15 пикселей
Размер 0
Размер +1
Размер +2
Возможные варианты размеров шрифтов (визуальная оценка) доступны .
Заголовки:
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
Оформление текста с помощью шрифтов:
Шрифт Comic Sans Ms
Шрифт Monotype Corsiva
Шрифт Tahoma
Возможные варианты типов шрифтов (наименования и визуальная оценка) доступны .
Оформление текста с помощью цвета:
Красный текст
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.
Синий текст
* Цифра #0000ff означает синий цвет в RGB палитре.
Голубой фон
* У фона тоже можно менять цвет.
Синий текст, серый фон
Некоторые предопределённые цвета:
Black
White
Red
Green
Blue
Purple
Firebrick
Maroon
OrangeRed
MidnightBlue
CornflowerBlue
Cyan
Yellow
Magenta
DarkGreen
DarkGoldenrod
Gold
Orchid
BlueViolet
Burlywood
PeachPuff
Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RR
GG
BB
):
#000000
#FFFFFF
#FF0000
#00FF00
#0000FF
#FF00FF
#FF4444
#FF9999
#FFCCCC
#9999FF
#FF99FF
#DDDDDD
#FFE4C4
#CCCC99
#FF8DC
#FA8072
#990000
#FF3030
#000080
#000066
#0000CD
#AFEEEE
#006400
#66FF00
#00B800
#DAA520
#FFCC33
#FFA500
#C71585
#8B008B
#CC33FF
Возможные варианты палитры цветов и их кодов/наименований доступны .
Выравнивание текста и форматирование параграфов
Выравнивание текста:
Выравнивание текста по левой стороне
Выравнивание по левой стороне со стилем
Выравнивание в абзаце влево
Выравнивание текста по центру
Выравнивание по центру со стилем
Выравнивание в абзаце по центру
Выравнивание текста по правой стороне
Выравнивание по правой стороне со стилем
Выравнивание в абзаце справа
Выравнивание текста по обеим сторонам
Выравнивание по обеим сторонам со стилем
Выравнивание в абзаце по обеим сторонам
* Выравнивание текстов по обеим сторонам отображается для текстов, имеющих длину более одной строки.
Оформление сносок (комментариев) с отступом абзаца:
[q]
Цитата в строке
Цитата в строке со свойствами
Процитированный в отдельном блоке текст, у которого будет
небольшой отступ слева и особое оформление (стиль форума).
Примеры:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Форматирование параграфов и областей:
Привет! В этом абзаце первое предложение будет с "красной" строки, т.е. с отступом. Прямо как в книгопечати. Правда, в Интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.
Преформатированый текст
сохраняет отступы слева и между словами
и устанавливает те отступы, что вы укажите пробелами.
Предупреждение! Тэг не делает переноса строки автоматом!
Форматирование списков
Используем тэг или для маркированных списков:
- Один из пунктов списка
- Другой такой пункт
- Ещё один пункт.
[*]
Другой такой пункт
[*]
Ещё один пункт.
Для пронумерованных списков используем тэг :
Один из пунктов списка
Другой такой пункт
Ещё один пункт.
[*]
Один из пунктов списка
[*]
Другой такой пункт
[*]
Ещё один пункт.
Закрывающий тэг не обязателен для использования:
- Один из пунктов списка
- Другой такой пункт
- Ещё один пункт.
[*]
Один из пунктов списка
[*]
Другой такой пункт
[*]
Ещё один пункт.
Также возможно прямое указания вида списка:
— пронумерованный список
— алфавитный список
— список, пронумерованный римскими цифрами
Картинки
Http://img.cx/img/primer.jpg
- пример вставки картинки.
Http://img.cx/img/primer.jpg
- картинка слева.
Http://img.cx/img/primer.jpg
- картинка справа.
* Данный код аналогичен коду в HTML:
Http://img.cx/img/primer.jpg
- картинка по центру.
* Данный код аналогичен коду в HTML:
Аналогичные тэги с названиями и всплывающими подсказками:
Важно! В названии картинки нельзя использовать кавычки!
Http://img.cx/img/primer.jpg
- пример вставки картинки.
Http://img.cx/img/primer.jpg
- картинка слева.
Http://img.cx/img/primer.jpg
- картинка справа.
Http://img.cx/img/primer.jpg
- картинка по центру.
Картинки с указанными размерами:
Http://img.cx/img/primer.jpg
- пример картинки с размером.
* Данный код аналогичен коду в HTML:
Http://img.cx/img/primer.jpg
- картинка слева, с размером.
Http://img.cx/img/primer.jpg
- картинка справа, с размером.
Вставка больших изображений с полосами прокрутки:
Http://www..jpg
— картинка в выделенной области, если она больше доступного размера отображения на форуме.
Адрес
- открыть изображение в новом окне.
* Данный код аналогичен коду в HTML:
Адрес
- открыть изображение в том же окне.
* Данный код аналогичен коду в HTML:
Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов
,
и
. Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.
Тег
Тег
— cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем учебное пособие по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом
Тег
служит для ввода текста без форматирования, то есть с сохранением всех пробелов, табуляций и переносов строк. Внутри этого элемента можно применять большинство элементов форматирования текста.
Внимание:
В языке HTML переносы строк, идущие подряд пробелы и табуляции игнорируются. Несколько пробелов подряд воспринимаются как один пробел.
Пример: использования элементов
и
Внутри элемента Браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.
If (document.getElementsByClassName) {
x = document.getElementsByClassName("pagination")
if (x.length>y) {
x.style.visibility = "hidden";
}
Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.
if (document.getElementsByClassName) {
x = document.getElementsByClassName("pagination")
if (x.length>y) {
x.style.visibility = "hidden";
}
Теги
и
Тег
отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст дополнительным фоном.
Тег
применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как
,
,
.
Пример: элементы
и
Текст, который пользователь должен ввести с клавиатуры поместите в
элемент-контейнер «kbd».
Введите текст: Это — текст, вводимый с клавиатуры
Это — текст, который помещен в контейнер «samp»
Тег
Тег
используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.
Пример: элементы
Кинетическая энергия тела:
Кинетическая энергия тела:
Wк = mv2/2
Задачи
Итоговое задание
На этом уроке вы познакомились с тегами, которые выводит свое содержимое моноширинным шрифтом, выделяют в коде переменные и тегом предварительного форматирования. Все они важны при работе с матаматическими выражениями и программным кодом.
Пришло время повторить изученное и выполнить три несложных задания:
Переменная
Используя html-элементы обозначте в приведенном уравнении литеру y как переменную.
Переменная
Уравнение параболы y = Nx2
Переменная
Уравнение параболы y = Nx2
Предварительно отформатированный текст
Используя элемент HTML сделайте так, чтобы текст, помещенный в элемент code, отображался браузером с сохранением всех пробелов и переносов строк как есть.
В связи с ведением данного блога, периодически приходится вставлять на сайт фрагменты html и css кода. В процессе реализации нормального решения, выяснилось что адекватного описания готовых решений на русском языке почему-то не найти, так что восполнить пробел придётся самостоятельно.
Начнём с простого:
Как вставить в текст html-код?
Для вставки в текст на сайте одного - двух тегов можно использовать html символы < для вставки < и символ > для вставки > таким образом, тег В html коде пишется как
Вставка больших фрагментов кода на сайт.
Для вставки самого html-кода на сайт, существуют три тега:
И и
Тег Обозначает блок предварительно отформатированного текста. То есть текста, в котором уже расставлены все пробелы, и переносы. По дефолту в браузере содержимое тега Отображается моноширинным (monospace) шрифтом и со всеми пробелами между словами. В теге Отображаются все пробелы, и учитываются все переносы строки (html по умолчанию не учитывает несколько пробелов, преобразуя их в один). Внутри контейнера Можно применять любые теги кроме следующих: , , , , и .
Следующий тег — специально предназначен для экранированного отображения программного кода. По дефолту в браузере содержимое тега отображается мелким моноширинным текстом. Тег не учитывает дополнительные проблелы и переносы текста, в результате чего для переноса строки необходимо использовать теги
и
Тег Не является валидным с точки зрения стандарта html, однако, на данный момент поддерживается всеми браузерами. Тег отображает содержимое контейнера как обычный текст со всеми пробелами и переносами. До момента «канонизации» тега, использование его считается некошерным и еретическим.
Правильным на текущий момент решением является использование тега С вложенными в него тегами в местах, где это необходимо. Технически, тег нам необходим для экранирования фрагментов кода, которые по той или иной причине выпадают из тега
Как красиво оформить html-код посредством Jquery?
На нашем сайте мы используем скрипт Snippet . Сниппет предназначен для упрощения визуального оформления примеров программного кода. Работа скрипта выглядит следующим образом:
Div.blog_right h2 {
font-size: 24px;
color: #ff9933;
margin-bottom: 9px;
line-height: 44px;
font-family: "arial", "verdana", sans-serif, "Lucida Sans";
font-weight: 100;
margin-top: 0.83em;
}
Подключение скрипта оформления кода:
2) Подключаем файлы js и css. Так же, понадобится подключенная библиотека Jquery.
3) Настраиваем скрипт:
$(document).ready(function(){
$("pre.htmlCode").snippet("html",{style:"acid"});
// Ищем тэги С классом "htmlCode"
// и подключаем к этим элементам стиль acid и обработку html
$("pre.styles").snippet("css",{style:"acid"});
// Ищем тэги С классом "styles"
// и подключаем к этим элементам стиль acid и обработку для CSS кода
$("pre.js").snippet("javascript",{style:"acid"});
// Ищем тэги С классом "js"
// и подключаем к этим элементам стиль acid и обработку для
});
4) Более навороченная документация для скрипта есть на сайте разработчиков . Скрипт может менять оформление на лету, выделять необходимые куски кода в рамочки, выносить мусор и готовить еду.
Рекомендуем почитать
Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
На сегодняшний день ценность внутриигровых вещей в Counter-Strike: Global...
Статьи и ЛайфхакиВопрос о том, как установить дату и время на Nokia
, волнует...
Наверх