Edición de «BBCode»

{{Ficha de formato de archivo
|nombre          = BBCode (''Bulletin Board Code'')
|icono           = 
|logo            = 
|captura         = 
|pie             = 
|desarrollador   = [[PhpBB]]
|extensión       = 
|MIME            = text/html
|type_code       = TEXT
|uniform_type    = 
|género          = [[Lenguaje de marcado]]
|contenedor_para = 
|contenido_por   = 
|extendido_de    = [[HTML]]
|extendido_a     = [[XBBCode]]
|estándar        = No existe un documento estandarizador
}}
'''BBCode''', proveniente del inglés ''Bulletin Board Code,'' es un [[lenguaje de marcas ligero]] utilizado preferentemente en [[Foro (Internet)|foros]] de discusión y [[correo electrónico|correos electrónicos]] para embellecer la forma en que un mensaje o ''post'' es presentado.

Los BBCodes no pueden ser interpretados directamente por un [[navegador web]], por lo que es el propio sistema del foro el que se encarga de traducir el contenido marcado en BBCode hacia un lenguaje que los navegadores web puedan entender, ya sea [[HTML]] o [[XHTML]].

No se encuentra oficialmente regulado, pero debido a su amplia utilización se ha convertido en un [[estándar de facto]], así como en un estándar de ''mejor práctica actual''.

== Historia ==

BBCode fue creado por [[PhpBB]] para sus propios foros e introducido por primera vez en 1998 con el software de foros [[Ultimate Bulletin Board]] en su versión 3. Es por eso que a veces es también denominado UBBCode. Finalmente, gracias a su sencillez, potencia y funcionalidad se ha difundido en la gran mayoría de los foros web y hasta en los correos electrónicos.

=== Propósito ===
BBCode fue ideado para proporcionar un mecanismo que permitiera a los usuarios mejorar la presentación de sus mensajes de una manera más segura, más sencilla y más limitada. Previamente muchos foros permitían el uso de HTML, con el efecto colateral de que si había HTML mal escrito se trastornaba toda la distribución de la página, o el HTML podía ser usado para incluir [[JavaScript]] lo que causa graves problemas de seguridad al permitir [[ataque XSS|ataques XSS]].

Sin embargo algunas implementaciones de BBCode han sufrido problemas relacionados con el modo en que traducen el BBCode a HTML, lo que podría contradecir la seguridad que se intentaba dar con BBCode. Una alternativa es un filtro HTML correctamente escrito (muchos de los cuales están libremente disponibles).

A pesar de que las etiquetas básicas de BBCode son similares en la mayoría del software para foros de Internet, de hecho no existe un documento que estandarice los BBCode y como consecuencia hay muchas variantes muchas veces incompatibles entre sí. Algunas variantes distinguen entre mayúsculas y minúsculas en los nombres de las etiquetas, mientras que otras no. Algunas variantes tienen etiquetas que ponen de relieve el formato HTML, ASP, PHP, SQL y otros lenguajes de marcas y lenguajes de programación. Etc.

== Estructura y sintaxis ==

BBCode se encuentra basado en el lenguaje [[HTML]], y es muy similar a este en estructura y sintaxis. BBCode cuenta con ''elementos'' y ''atributos'' como el HTML, aunque al ser una versión simplificada del mismo resulta mucho más sencillo de aprender y utilizar.

Los elementos son la estructura básica del lenguaje, cada elemento tiene dos propiedades esenciales: contenido y atributos.

=== Elementos ===

Los elementos en BBCode por lo general poseen una etiqueta de inicio y una etiqueta de cierre, el contenido queda enmarcado entre ambas etiquetas. En BBCode el nombre de una etiqueta se encuentra delimitada por corchetes '''[''' ''']''', a diferencia de HTML, donde se utilizan los símbolos de desigualdad '''<''' '''>'''. Algunas etiquetas contienen un modificador, también conocido como atributo, cuyo valor se asigna a la propia etiqueta con el símbolo '''='''.

=== Atributos ===

La mayoría de los atributos de un elemento en BBCode son simplemente valores, escritos en la etiqueta de comienzo de un elemento y asignados a la misma por un signo de igual '''=''', después del nombre de esta. El valor puede estar rodeado por comillas dobles o no, la mayoría de los sistemas de foros son tolerantes a estas modificaciones. Sin embargo, dejar los valores sin comillas es considerado una práctica poco segura.

La sintaxis general es entonces:

<div align="center"><code>'''[nombre_etiqueta="''atributo''"]''' Contenido '''[/nombre_etiqueta]'''</code></div>

== Parsing ==

BBCode como tal, sería interpretado por un navegador sólo como texto. Para que no aparezca como tal, sino que muestre un formato especial, en primer lugar debe ser procesado por un script de análisis o '''''[[parser]]''''' del lado del servidor en el que se encuentra contenido el programa del foro. El parser analiza el texto introducido por el usuario antes de entregarlo al navegador con un formato adecuado para que este pueda interpretarlo. Un parser BBCode busca específicamente las etiquetas de BBCode y las reemplaza con las correspondientes etiquetas de HTML, haciendo primero un análisis de sintaxis para comprobar que no haya errores.

Por ejemplo, el elemento BBCode '''[b] [/b]''' para negrita, se puede escribir sustituido por el elemento HTML '''< b> </ b>''', pero no sería correcto hacerlo para una única etiqueta '''[b]''', de modo que después de que el parser ha efectuado el análisis de error de sintaxis entrega el código HTML de salida.

Como regla general, el parsing se hace "one way", es decir, un mensaje en el foro se guarda en la base de datos del foro junto con el BBCode de manera estable, y cada vez que un navegador accede a ese post en particular, el parser del foro traduce el BBCode antes de presentárselo al navegador.

Los scripts de parsing pueden ser escritos en diferentes lenguajes de programación del lado del servidor algunos muy populares son por ejemplo [[PHP]] y [[Perl]].

Un ejemplo de un parser muy básico escrito en PHP, sería:

<syntaxhighlight lang="PHP">
<?php 
$text = preg_replace("/\[b\](.*)\[\/b\]/Usi", "<b>\\1</b>", $text);
$text = preg_replace("/\[i\](.*)\[\/i\]/Usi", "<i>\\1</i>", $text);
$text = preg_replace("/\[u\](.*)\[\/u\]/Usi", "<u>\\1</u>", $text);
$text = preg_replace("/\[color=(.*)\](.*)\[\/color\]/Usi", "<span style=\"color:\\1\">\\2</span>", $text);
$text = preg_replace("/\[email=(.*)\](.*)\[\/email\]/Usi", "<a href=\"mailto:\\1\">\\2</a>", $text);
?> 
</syntaxhighlight>

== Uso del BBCode ==

El lenguaje BBCode presenta elementos que pueden ser agrupados en cinco grandes categorías:

* Modificadores de la apariencia del texto
* Presentación de imágenes
* Hipervínculos
* Estructuras ordenadas
* Bloques de texto de utilidad especial

=== Modificadores de la apariencia del texto ===

Los siguientes marcadores sencillos pueden ser utilizados para modificar la apariencia del texto, la mayoría de estos marcadores proviene del HTML y su uso está ampliamente distribuido en diferentes versiones de BBCode:

<br />
{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3"
|'''Formato'''
|'''Significado'''
|'''Aspecto'''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[b]'''Negrita'''[/b]'''</code>
|  Texto en negrita
|  '''Negrita'''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[u]'''Subrayado'''[/u]'''</code> 
|  Texto subrayado
|  <u>Subrayado</u>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[i]'''Cursiva'''[/i]'''</code>
|  Texto en itálica o cursiva
|  ''Cursiva''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[s]'''Tachado'''[/s]'''</code>
|  Texto tachado
|  <s>Tachado</s>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[size=''18'']'''Tamaño 18'''[/size]'''</code>
|  Amplía el tamaño del texto hasta 18 puntos<ref group="Nota">''"Size" se puede usar hasta el tamaño 30. También hay foros que tienen un tamaño por defecto asignado y unos límites. Esos casos se utiliza otro tipo de código. Ejemplo: [size=+3]Tamaño por defecto 19, tamaño mostrado 22[/size]''</ref>
|  <span style="font-size:5px;">Tamaño 18</span>

|}
<div style="clear:both;">
{{listaref|group="Nota"}}

==== Modificadores de alineación ====

El uso de marcadores de alineación en BBCode puede ser más o menos similar al del HTML dependiendo del sistema de foros utilizado, existen dos mecanismos principales para alinear ya sea texto, tablas o imágenes.

* [align=''alineación'']Contenido a alinear[/align] donde el atributo ''alineación'' puede tomar los siguientes valores:
::''left'': para alinear contenido a la izquierda.
::''right'': para alinear contenido a la derecha.
::''center'': para centrar el contenido.
::''justify'': para justificar el contenido.
* [''Alineación'']Contenido a alinear[/''alineación''], donde el atributo sustituye al nombre de la etiqueta.

<br />
{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3"
|'''Formato'''
|'''Significado'''
|'''Aspecto'''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[align="''left''"]'''Contenido a alinear'''[/align]'''</code>
|  Alinea a la izquierda
|  <div align="left">Contenido a alinear</div>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[align="''right''"]'''Contenido a alinear'''[/align]'''</code>
|  Alinea a la derecha
|  <div align="right">Contenido a alinear</div>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[align="''center''"]'''Contenido a alinear'''[/align]'''</code>
|  Alinea al <br />centro
|  Contenido a alinear
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[align="''justify''"]'''Pequeño párrafo que demuestra el texto contenido justificado'''[/align]'''</code>
|  Justifica el texto contenido
|  <div align="justify">Pequeño párrafo que demuestra el texto contenido justificado</div>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[left]'''Contenido a alinear'''[/left]'''</code>
|  Alinea a la izquierda
|  <div align="left">Contenido a alinear</div>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[right]'''Contenido a alinear'''[/right]'''</code> 
|  Alinea a la derecha
|  <div align="right">Contenido a alinear</div>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[center]'''Contenido a alinear'''[/center]'''</code>
|  Alinea al <br />centro
|  Contenido a alinear
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[justify]'''Pequeño párrafo que demuestra el texto contenido justificado'''[/justify]'''</code>
|  Justifica el texto contenido
|  <div align="justify">Pequeño párrafo que demuestra el texto contenido justificado</div>
|}
<div style="clear:both;">

==== Colores ====
{{AP|Colores HTML}}
BBCode permite modificar el color del texto mostrado, ya sea utilizando el nombre de alguno de los colores predefinidos en el estándar HTML, o introduciendo directamente el color deseado en código [[Modelo de color RGB|RGB]] hexadecimal. Este último método aunque un poco más complicado, permite trabajar con una mayor variedad de colores, el único requisito es saber cómo generarlos. Existen utilidades que se encargan de esto, por ejemplo, la extensión ColorZilla para el navegador [[Mozilla Firefox]].

Ciertos programas de foros admiten el uso de una variante acotada de 3 dígitos del [[Sistema hexadecimal]] RGB (siendo '''R''' el valor del color rojo, '''G''' el del color verde y '''B''' el del color azul) este sistema resulta más simple de utilizar a costa de poseer menos matices de colores. Sin embargo, generalmente se utiliza el sistema de 6 dígitos hexadecimales (RRGGBB, donde '''RR''' representa el valor perteneciente al color rojo, '''GG''' al color verde y '''BB''' al color azul) este sistema permite en teoría representar 16.777.216 colores.

Una pequeña lista de algunos ejemplos de colores disponibles en BBCode provenientes del estándar HTML. Para más colores consultar el [[Colores HTML|artículo principal]]:

<br />
{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3"
|'''Formato'''
|'''Significado'''
|'''Aspecto'''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''black''"]'''Negro'''[/color]'''</code>
|  Texto en color Negro
|  <span style="color:black;">Negro</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''brown''"]'''Marrón'''[/color]'''</code>
|  Texto en color Marrón
|  <span style="color:brown;">Marrón</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''maroon''"]'''Granate'''[/color]'''</code>
|  Texto en color Granate
|  <span style="color:maroon;">Granate</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''red''"]'''Rojo'''[/color]'''</code>
|  Texto en color Rojo
|  <span style="color:red;">Rojo</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''coral''"]'''Coral'''[/color]'''</code>
|  Texto en color Coral
|  <span style="color:coral;">Coral</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''orange''"]'''Naranja'''[/color]'''</code>
|  Texto en color Naranja
|  <span style="color:orange;">Naranja</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''yellow''"]'''Amarillo'''[/color]'''</code>
|  Texto en color Amarillo
|  <span style="color:yellow;">Amarillo</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''olive''"]'''Oliva'''[/color]'''</code>
|  Texto en color Oliva
|  <span style="color:olive;">Oliva</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''lime''"]'''Verde lima'''[/color]'''</code>
|  Texto en color Verde lima
|  <span style="color:lime;">Verde lima</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''limegreen''"]'''Verde claro'''[/color]'''</code>
|  Texto en color Verde claro
|  <span style="color:limegreen;">Verde claro</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''green''"]'''Verde'''[/color]'''</code>
|  Texto en color Verde
|  <span style="color:green;">Verde</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''darkgreen''"]'''Verde oscuro'''[/color]'''</code>
|  Texto en color Verde oscuro
|  <span style="color:darkgreen;">Verde oscuro</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''teal''"]'''Cerceta'''[/color]'''</code>
|  Texto en color Cerceta
|  <span style="color:teal;">Cerceta</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''cyan''"]'''Cian'''[/color]'''</code>
|  Texto en color Cian
|  <span style="color:cyan;">Cian</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''lightskyblue''"]'''Azul cielo claro'''[/color]'''</code>
|  Texto en color Azul cielo claro
|  <span style="color:LightSkyBlue;">Azul cielo claro</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''blue''"]'''Azul marino'''[/color]'''</code>
|  Texto en color Azul marino
|  <span style="color:blue;">Azul marino</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''navy''"]'''Azul naval'''[/color]'''</code>
|  Texto en color Azul naval
|  <span style="color:navy;">Azul naval</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''pink''"]'''Rosa'''[/color]'''</code>
|  Texto en color Rosa
|  <span style="color:pink;">Rosa</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''magenta''"]'''Magenta'''[/color]'''</code>
|  Texto en color Magenta
|  <span style="color:magenta;">Magenta</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''purple''"]'''Púrpura'''[/color]'''</code>
|  Texto en color Púrpura
|  <span style="color:purple;">Púrpura</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''gray''"]'''Gris'''[/color]'''</code>
|  Texto en color Gris
|  <span style="color:gray;">Gris</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''silver''"]'''Plata'''[/color]'''</code>
|  Texto en color Plata
|  <span style="color:silver;">Plata</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color="''white''"]'''Blanco'''[/color]'''</code>
|  Texto en color Blanco
|  <div style="background:black"><span style="color:white;">'''Blanco'''</span></div>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[color=''#B0C4DE'']'''#B0C4DE'''[/color]'''</code>
|  Texto en color [[Modelo de color RGB|RGB #B0C4DE]]
|  <div style="background:black"><span style="color:#B0C4DE;">'''#B0C4DE'''</span></div>
|}
<div style="clear:both;">

==== Fuentes ====

BBCode también permite la opción de cambiar la fuente del texto, sin embargo es conveniente tener en cuenta que no todas las fuentes serán visibles para todo el mundo, ya que para que una fuente pueda ser presentada en un navegador, debe estar instalada en el sistema operativo sobre el que el navegador está funcionando. Aquí algunos ejemplos de las más comunes:

<br />
{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3"
|'''Formato'''
|'''Significado'''
|'''Aspecto'''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Arial"]'''Arial'''[/font]'''</code>
|  Texto con fuente [[Arial]]
|  <span style="font-family:Arial;">Arial</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Wingdings"]'''Wingdings'''[/font]'''</code>
|  Texto con fuente [[Wingdings]]
|  <span style="font-family:Wingdings;">Wingdings</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Comic Sans MS"]'''Comic Sans MS'''[/font]'''</code>
|  Texto con fuente [[Comic Sans MS]]
|  <span style="font-family:Comic Sans MS;">Comic Sans MS</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Century Gothic"]'''Century Gothic'''[/font]'''</code>
|  Texto con fuente [[Century Gothic]]
|  <span style="font-family:Century Gothic;">Century Gothic</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
| <code>'''[font="Courier"]'''Courier'''[/font]'''</code>
|  Texto con fuente [[Courier]]
|  <span style="font-family:Courier;">Courier</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Fixedsys"]'''Fixedsys'''[/font]'''</code>
|  Texto con fuente [[Fixedsys]]
|  <span style="font-family:Fixedsys;">Fixedsys</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Georgia"]'''Georgia'''[/font]'''</code>
|  Texto con fuente [[Georgia (tipografía)|Georgia]]
|  <span style="font-family:Georgia;">Georgia</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Lucida Sans"]'''Lucida Sans'''[/font]'''</code>
|  Texto con fuente [[Lucida Sans]]
|  <span style="font-family:Lucida Sans;">Lucida Sans</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Monotype Corsiva"]'''Monotype Corsiva'''[/font]'''</code>
|  Texto con fuente [[Monotype Corsiva]]
|  <span style="font-family:Monotype Corsiva;">Monotype Corsiva</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Times New Roman"]'''Times New Roman'''[/font]'''</code>
|  Texto con fuente [[Times New Roman]]
|  <span style="font-family:Times New Roman;">Times New Roman</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Trebuchet MS"]'''Trebuchet MS'''[/font]'''</code>
|  Texto con fuente [[Trebuchet MS]]
|  <span style="font-family:Trebuchet MS;">Trebuchet MS</span>
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[font="Verdana"]'''Verdana'''[/font]'''</code>
|  Texto con fuente [[Verdana]]
|  <span style="font-family:Verdana;">Verdana</span>
|}
<div style="clear:both;">

=== Presentación de imágenes ===

Para mostrar una imagen BBCode dispone del marcador img. El formato general de este elemento es:

<div align="center"><code>'''[img]'''Ruta de la imagen'''[/img]'''</code></div>

Por ejemplo el siguiente código:

<code>'''[img]'''<nowiki>http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg</nowiki>'''[/img]'''</code>

Mostraría el siguiente resultado

[[Archivo:Laser Towards Milky Ways Centre.jpg|{{{1|660px}}}]]

<br />
En muchos foros es posible modificar el tamaño de la imagen, utilizando los atributos ''width'' (ancho) y ''height'' (alto). Por defecto ambos atributos indican el tamaño en [[píxel]]es con que será mostrada la imagen, aunque puede ser adaptado utilizando el modificador "'''%'''" (porcentaje) para indicar que porcentaje del área visible será ocupada.

Por ejemplo el código:

<code>'''[img width=''264'' height=''240'']'''<nowiki>http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg</nowiki>'''[/img]'''</code>

Mostraría este resultado:
<br />
[[Archivo:Laser Towards Milky Ways Centre.jpg|{{{1|264px}}}]]

=== Hipervínculos ===

Como lenguaje derivado del HTML, uno de los elementos más poderosos con los que cuenta BBCode es el [[hipervínculo]], en general representado por la etiqueta '''URL'''. Existen dos maneras directas de crear hipervínculos de texto en BBCode utilizando la etiqueta '''URL''':

<br />
{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3"
|'''Formato'''
|'''Significado'''
|'''Aspecto'''
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[url]'''<nowiki>http://www.google.com</nowiki>'''[/url]'''</code>
|  Muestra el hipervínculo sobre la dirección de destino
|  http://www.google.com
|- style="background:white; color:black; border: 1px solid #333333;" align="center" 
|  <code>'''[url="''<nowiki>http://www.google.com</nowiki>''"]'''Google'''[/url]'''</code>
|  Muestra el hipervínculo sobre una palabra a elección
|  [http://www.google.com Google]
|}
<div style="clear:both;">

=== Estructuras ordenadas ===

BBCode cuenta con dos tipos principales de estructuras ordenadas, las listas y las tablas. Estas últimas no son universalmente aceptadas y sólo algunos sistemas de foros permiten trabajar con ellas. A su vez existen dos tipos de listas, las listas simples y las listas ordenadas. Todas las estructuras ordenadas en BBCode son esencialmente similares a sus pares de HTML.

==== Listas simples o desordenadas ====
Una lista desordenada muestra a cada ítem en forma secuencial, uno detrás de otro indentando cada comienzo de ítem con un carácter bala. Para crear una lista desordenada se utilizan las etiquetas '''[list] [/list]''' y se define cada ítem de la lista con la etiqueta especial '''[*]'''.

Por ejemplo el siguiente código

<code>
'''[list]'''

'''[*]'''Primer ítem

'''[*]'''Segundo ítem

'''[*]'''Tercer ítem

'''[/list]'''
</code>

Generaría el siguiente resultado:

:* Primer ítem
:* Segundo ítem
:* Tercer ítem

==== Listas ordenadas ====
El segundo tipo de lista, la lista ordenada, brinda la posibilidad de decidir que se va a mostrar como indicador de orden antes de cada ítem.

Para crear una lista ordenada se puede utilizar por ejemplo '''[list=1] [/list]''' para crear una lista numerada, o alternativamente se puede utilizar por ejemplo '''[list=a] [/list]''' para crear una lista alfabética. Adicionalmente se puede comenzar la lista ordenada por cualquier otro número o letra. Como con las listas desordenadas, los ítems se especifican utilizando '''[*]'''.

Por ejemplo el código

<code>
'''[list=1]'''

'''[*]'''Ir a la tienda

'''[*]'''Comprar una nueva PC

'''[*]'''Insultar a la PC cuando se cuelgue

'''[/list]'''
</code>

Generaría el siguiente resultado:

:'''1.''' Ir a la tienda
:'''2.''' Comprar una nueva PC
:'''3.''' Insultar a la PC cuando se cuelgue

O si se utilizara una lista alfabética:

<code>
'''[list=a]'''

'''[*]'''Ir a la tienda

'''[*]'''Comprar una nueva PC

'''[*]'''Insultar a la PC cuando se cuelgue

'''[/list]'''
</code>

Generaría el siguiente resultado:

:'''a.''' Ir a la tienda
:'''b.''' Comprar una nueva PC
:'''c.''' Insultar a la PC cuando se cuelgue

==== Tablas ====
La gestión de tablas en BBCode es muy similar a aquellas de HTML, y se hace por medio del elemento '''[table] [/table]''' el cual cuenta además con las etiquetas '''[tr] [/tr]''' que sirven para delimitar cada línea, y las etiquetas '''[td][/td]''' con las que se delimita cada celda. Un ejemplo de código de una tabla de tres líneas y cuatro columnas sería:

<code>
'''[table border="''1''"]'''

'''[tr] [td]'''Celda 1.1'''[/td] [td]'''Celda 1.2'''[/td] [td]'''Celda 1.3'''[/td] [td]'''Celda 1.4'''[/td] [/tr]

'''[tr] [td]'''Celda 2.1'''[/td] [td]'''Celda 2.2'''[/td] [td]'''Celda 2.3'''[/td] [td]'''Celda 2.4'''[/td] [/tr]'''

'''[tr] [td]'''Celda 3.1'''[/td] [td]'''Celda 3.2'''[/td] [td]'''Celda 3.3'''[/td] [td]'''Celda 3.4'''[/td] [/tr]'''

'''[/table]'''
</code>

El atributo '''''border=" "''''' sirve para indicar el ancho en píxeles de los bordes de la tabla; si se iguala a 0 los bordes no se muestran. Por lo general la etiqueta también admite los atributos '''''width=" %"''''' para indicar el ancho en porcentaje que debe ocupar la tabla, y '''''align=" "''''' donde se indica la alineación de la tabla como bloque, no del contenido de las celdas, eso debe hacerse dentro de cada etiqueta '''[tr]''', si se desea alinear el contenido de una línea, o dentro de cada etiqueta '''[td]''' si se desea alinear cada celda en particular.

El anterior código entregaría un resultado como el que sigue:

<table border="1">
<tr> <td>Celda 1.1</td> <td>Celda 1.2</td> <td>Celda 1.3</td> <td>Celda 1.4</td> </tr>
<tr> <td>Celda 2.1</td> <td>Celda 2.2</td> <td>Celda 2.3</td> <td>Celda 2.4</td> </tr>
<tr> <td>Celda 3.1</td> <td>Celda 3.2</td> <td>Celda 3.3</td> <td>Celda 3.4</td> </tr>
</table>

Y al modificar la primera línea por:

<code> '''[table border="''1''" align="''center''" width="''90%''"]'''</code>

Se obtiene:

<table border="1" align="center" width="90%">
<tr> <td>Celda 1.1</td> <td>Celda 1.2</td> <td>Celda 1.3</td> <td>Celda 1.4</td> </tr>
<tr> <td>Celda 2.1</td> <td>Celda 2.2</td> <td>Celda 2.3</td> <td>Celda 2.4</td> </tr>
<tr> <td>Celda 3.1</td> <td>Celda 3.2</td> <td>Celda 3.3</td> <td>Celda 3.4</td> </tr>
</table>

=== Bloques de texto de utilidad especial ===

BBCodes permite el manejo de bloques de texto con características especiales utilizados en general para diferentes tipos de citas o referencias. En concreto la mayoría de los foros permite el uso de tres bloques de texto de utilidad especial. Las citas, las referencias a código fuente, y los spoilers.

==== Citas ====
Los bloques de citas se utilizan para transcribir los dichos de otras personas, referenciando de manera adecuada quién fue el autor de tales dichos. El marcador utilizado es '''[quote]'''.

Ejemplo de código:

<center><code>'''[quote="''James''"]'''Éste es el texto que quiero citar.'''[/quote]'''</code></center>

Mostraría algo similar a esto:

{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="left" cellpadding="2" cellspacing="3"
|'''''James'' dijo:'''
|- style="background:white; color:black; border: 1px solid #333333;" align="left" 
| Éste es el texto que quiero citar.
|}

Por otra parte si no se quiere citar a nadie en particular, se puede utilizar el marcador quote sin especificar ningún nombre:

<center><code>'''[quote]'''Éste es el texto que quiero citar.'''[/quote]'''</code></center>

==== Códigos fuente ====

Cuando es necesario citar código fuente de algún lenguaje de programación o de marcado, es una buena costumbre el utilizar el marcador code. El marcador code cumple una doble función, por una parte lo que queda contenido dentro de las etiquetas '''[code] [/code]''' no es interpretado por el programa del foro, lo que evita que se puedan producir accidentes en la presentación de formato al hacer uso de expresiones o palabras reservadas, y por otro lado hace más legible el código fuente en si, ya que se utiliza un tipo especial de letra [[monospace]] en la que todos los caracteres, incluyendo el espacio, tienen el mismo ancho y en la que existe la misma separación entre todos los caracteres. Como consecuencia el código fuente permanece horizontal y verticalmente ordenado en diferentes líneas.

Ejemplo de código:

<code>
'''[code]'''

int main()

{

:printf("hola");

}

'''[/code]'''
</code>

Se vería así

{|style="background:#ccccaa; color:#333333; width:90%;  padding:2px; border: 1px solid #333333;" align="center" cellpadding="2" cellspacing="3" bgcolor="#ccccaa"
|-style="background:#bbbbaa; color:black; border: 1px solid #333333;" align="left" cellpadding="0" cellspacing="0"
|'''Código:'''
|- style="background:white; color:black; border: 1px solid #333333;" align="left" cellpadding="0" cellspacing="0"
| <span style="font-family:courier;">
<pre>
int main()
{
    printf("hola");
}</pre>
</span>
|}

==== Spoilers ====
El elemento '''[spoiler] [/spoiler]''' se utiliza para ocultar contenido sensible que puede molestar a otros usuarios, dejando a cada quién la opción de revisar este contenido o no. Otro uso frecuente es para reducir el tamaño vertical de un post, para que no resulte demasiado cansado recorrer todo el tablero.

El contenido de un spoiler puede mostrarse pinchando sobre un botón usualmente titulado "''spoiler''", "''mostrar''" o "''desplegar''".

Por ejemplo el siguiente código:

<div align="center"><code>'''[spoiler]'''Este es el contenido que debe permanecer oculto'''[/spoiler]'''</code></div>

Mostraría un resultado similar a este:

<div align="center">
 <div class="NavFrame collapsed" style="border:1px solid #333333; padding: 1; width:90%; background-color:#ccccaa;">
   <div class="NavHead" style="width:100%;  background:transparent; background-color:#bbbbaa; padding: 3;" align="left">

SPOILER

       </div><div class="NavContent" style="text-align:left; ">

{| style="width:100%"
|- style="background:white; color:black; border: 1px solid #333333;"
| Este es el contenido que debe permanecer oculto
|}

       </div>
 </div>
</div>

Mientras que el siguiente código:

<div align="center"><code>'''[spoiler="''Título del Spoiler''"]'''Este es el contenido que debe permanecer oculto'''[/spoiler]'''</code></div>

Mostraría un resultado similar a este:

<div align="center">
 <div class="NavFrame collapsed" style="border:1px solid #333333; padding: 1; width:90%; background-color:#ccccaa;">
   <div class="NavHead" style="width:100%;  background:transparent; background-color:#bbbbaa; padding: 3;" align="left">

Título del Spoiler

       </div><div class="NavContent" style="text-align:left;">

{| style="width:100%"
|- style="background:white; color:black; border: 1px solid #333333;"
| Este es el contenido que debe permanecer oculto
|}

       </div>
 </div>
</div>

<!-- === Tablas ===

-->

=== Usos más complejos ===

==== Anidado de elementos ====
BBCodes permite anidar elementos, para obtener resultados mucho más vistosos, un ejemplo típico sería por ejemplo crear un enlace sobre una imagen y no sobre una línea de texto.

El código para esto sería:

<div align="center"><code>'''[url="''ruta del enlace''"][img]''' ruta de la imagen '''[/img][/url]'''</code></div>

Otros ejemplos son por ejemplo cambiar el tamaño, color y fuente de un texto o párrafo, cambiar el color de un enlace, etc.

Prácticamente no existen límites para las posibles combinaciones, sin embargo y para evitar resultados inesperados debidos a errores de parsing, siempre es conveniente cerrar las etiquetas exactamente en orden contrario a como fueron abiertas.

Por ejemplo esta sería una forma correcta:

<div align="center"><code>'''[font="''Comic Sans Ms''"][color="''orange''"][size=''18'']''' Texto a formatear '''[/size][/color][/font]'''</code></div>

Y esta una forma incorrecta:

<div align="center"><code>'''[font="''Comic Sans Ms''"][color="''orange''"][size=''18'']''' Texto a formatear '''[/font][/color][/size]'''</code></div>

<!-- === BBCodes en la web 2.0 === -->

== Enlaces externos ==
* [http://www.phpbb-es.com/foro/faq.php Explicación del BBCode (desde phpBB-Es.COM)]
* [http://www.phpbb.com/phpBB/faq.php?mode=bbcode Explicación en inglés (Web de phpBB, creadora del lenguaje)]
* [https://web.archive.org/web/20111005205726/http://www.kyrsoft.com/downloads/downloads.html#Bbed Editor multiplataforma off-line de BBCode]
* [https://pear.php.net/package/HTML_BBCodeParser/docs Pear: Package Information: HTML_BBCodeParser]

{{Control de autoridades}}

[[Categoría:Acrónimos de informática]]
[[Categoría:Lenguajes de marcado ligero]]