BBCode - Una guía básica

lunes, noviembre 15, 2010

Introducción - Lenguaje de Etiquetas

Un lenguaje de etiquetas o marcas, en general es un conjunto de instrucciones principal mente enfocadas a dar presentación a un texto simple o plano (el que escribirías usando el bloc de notas), a diferencia de un lenguaje de programación, un lenguaje de etiquetas no maneja variables ni algún tipo de operación. La estructura de una etiqueta es:

Carácter_de_inicio_etiquetaNombre_EtiquetaCarácter_de_fin_etiqueta

Por ejemplo

[Etiqueta]

Casi siempre existe una etiqueta de cierre, esta es similar a la de apertura, tal y como la etiqueta del ejemplo anterior, solo que se distingue porque contiene una barra inclinada(que puede ser \ ó /). La estructura genérica de la etiqueta de cierre es:

Carácter_de_inicio_etiqueta/Nombre_EtiquetaCarácter_de_inicio_etiqueta

Por ejemplo

[/Etiqueta]

Dependiendo del lenguaje, los caracteres que delimitan la etiqueta pueden varar.

BBCode

Es un lenguaje nacido en los foros de Internet como respuesta a la necesidad de dar formato al texto que se publica, sin tener conocimientos previos de HTML. En mi opinión es similar al HTML, aunque en ciertas tareas como insertar un video o un enlace, el código se simplifica bastante.

No todos los sitios Web soportan todas las etiquetas de BBCode que existen, así que enlistaré las más usadas:

[b] y [/b] - Negrilla (bold)

[b]soy negrilla[/b]
Soy negrilla

[i] y [/i] - Cursiva (Italic)

[i]Soy cursiva[/i]
Soy cursiva

[u] y [/u] - Subrayado (Underline)

[u]Soy subrayado[/u]
Soy subrayado

[s] y [/s] - Tachado (Strike)

[s]Soy tachado[/s]
~~Soy tachado~~

[url="URL"] ó [url] y [/url] - Agregar un enlace

[url="http://www.google.com"]Google[/url]
Google
[url]http://www.google.com[/url]
http://www.google.com

[img="URL"] ó [img] y [/img] Insertar imágen

[img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAlaq6Ntvv0v-uop98MniUQ3X9k_92T1EPPEnrTrKhxsXgKcvhd0B0ZXZsJ1CsLjXZZJgyuyQSlxlza3Q5xD_lAf7IrV1LXJozkssmjUxB_CEiBemGde91El06I_ckwAwIE3n4K6j2hA/"]
ó
[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAlaq6Ntvv0v-uop98MniUQ3X9k_92T1EPPEnrTrKhxsXgKcvhd0B0ZXZsJ1CsLjXZZJgyuyQSlxlza3Q5xD_lAf7IrV1LXJozkssmjUxB_CEiBemGde91El06I_ckwAwIE3n4K6j2hA/ [/img]

[swf="URL"] ó [swf] y [/swf] Insertar archivos flash (juegos, videos Youtube, etc.)

[swf="http://www.youtube.com/watch?v=ft3wGg6WbPQ"] ó
[swf]http://www.youtube.com/watch?v=ft3wGg6WbPQ[/swf]

[align="Alineación"] y [align] Alinear un párrafo,imagen, etc..

Nota: en alineación solo acepta left,right,center

[align="left"]estoy alineado a la izquierda[/align]

estoy alineado a la izquierda

[align="center"]estoy alineado al centro[/align]

estoy alineado al centro

[align="right"]estoy alineado a la derecha[/align]

estoy alineado a la derecha

Jerarquía
Las etiquetas tienen cierta jerarquía, esta es:

align (va antes que cualquier otra etiqueta, y se cierra al final de cada párrafo).
img , swf y url tienen la misma jerarquía. De estas, solo img y url se deberían de combinar.
b , i, u, s tienen la misma jerarquía, se pueden combinar de cualquier forma, pero se recomienda que se abran en el siguiente orden [b] [i] [u] [s]

Consejos

Se puede omitir el uso de la etiqueta [align="left"] [/align] puesto que la alineación por defecto está a la derecha.
Se recomienda que las etiquetas que abras, las cierres en orden inverso al que las abres, por ejemplo : [b] [u]Soy negrilla y subrayado[/u] [/b] como puedes ver, se escribe primero la etiqueta [b] y se cierra con [/b]
Se puede omitir el uso de comillas adentro de las etiquetas, ejemplo: [url=htt://www.google.com]Google[/url] es lo mismo que [url="htt://www.google.com"]Google[/url]
Para agregar un enlace a una imagen [url= URL_DEL_ENLACE ] [img= URL_DE_LA_IMAGEN ] [ /url]