Guía BBCode

Introducción

¿Qué es el código BBCode?
BBCode es una implementación especial del HTML, y la forma en la que se usa BBCode está determinada por La Administración. Además se puede deshabilitar la opción de BBCode en un mensaje, desactivando la casilla correspondiente en el formulario de mensajes. BBCode asimismo es similar en estilo al HTML, pero las etiquetas se encuentran encerradas entre corchetes [ y ] en lugar de < y > y ofrece un gran control sobre qué y cómo se visualiza algo. Dependiendo del estilo que utilice en su foro, verá que es mucho más fácil añadir BBCodes a sus mensajes desde el área superior de la interfaz del formulario de publicación. Seguramente encontrará la siguiente guía muy útil.
Arriba

Formato de texto

¿Cómo crear texto en negritas, cursiva o subrayado?
BBCode incluye etiquetas que le permitirán cambiar el estilo de los textos rápidamente. Esto se puede lograr del siguiente modo:
  • Para crear un texto en negrita debe encerrarlo entre [b][/b], ej.

    [b]Hola[/b]

    se convierte en Hola
  • Para subrayar hay que usar [u][/u], por ejemplo:

    [u]Buenos Días[/u]

    se convierte en Buenos Días
  • Para escribir en cursiva utilice [i][/i], ej.

    Esto es [i]¡Genial![/i]

    se convierte en Esto es ¡Genial!
Arriba
¿Cómo cambiar el color o tamaño de texto?
Para cambiar el color o tamaño de un texto se pueden utilizar las siguientes etiquetas. Hay que tener en cuenta que la apariencia final del texto va a depender del sistema y navegador que esté usando:
  • Para cambiar el color de un texto debe colocarlo entre [color=][/color]. Puede especificar el color utilizando su nombre (ej. rojo, azul, amarillo, etc.) o su código hexadecimal, ej. #FFFFFF, #000000. Por ejemplo, para crear un texto en color rojo puede usar:

    [color=red]¡Hola![/color]

    o

    [color=#FF0000]¡Hola![/color]

    ambos se convierten en ¡Hola!
  • Para cambiar el tamaño del texto se debe seguir un camino similar utilizando [size=][/size]. Esta etiqueta depende de la plantilla utilizada por el foro y/o seleccionada por el usuario, pero lo recomendable es escribir el valor numérico del tamaño de texto en porcentaje, empezando por 20 hasta llegar a 200 (muy grande). Por ejemplo:

    [size=30]Pequeño[/size]

    será Pequeño

    mientras que:

    [size=200]¡Grande![/size]

    será ¡Grande!
Arriba
¿Puedo combinar las etiquetas de formato?
Sí, por supuesto, por ejemplo para llamar la atención de alguien puede escribir:

[size=200][color=red][b]¡MIREME![/b][/color][/size]

se convierte en ¡MIREME!

¡Recomendamos no escribir demasiados textos como el del ejemplo! Recuerde que, como usuario, debe usted asegurarse de que las etiquetas se encuentren correctamente cerradas. Por ejemplo, lo siguiente es incorrecto:

[b][u]Esto está mal[/b][/u]
Arriba

Citando texto o código

Citar texto en las respuestas
Hay dos formas de citar un texto, haciendo o no haciendo referencia.
  • Cuando utiliza la función Citar para responder un tema, fíjese en que el texto es agregado a la ventana de respuesta, encerrado entre las etiquetas [quote=""][/quote]. ¡Este método le permite citar textos haciendo referencia al autor! Por ejemplo para citar un trozo de texto que ha redactado Mr. Blobby debe escribir:

    [quote="Mr. Blobby"]El texto que redactó Mr. Blobby va aquí[/quote]

    El texto resultante añadirá automáticamente, "Mr. Blobby escribió:" antes del texto actual. Recuerde que es imprescindible incluir las comillas "" para encerrar el nombre del usuario citado. No es opcional.
  • El segundo método le permite citar un texto ocultando su autor. Para hacerlo debe encerrar el texto entre las etiquetas [quote][/quote]. En el mensaje verá que solamente se muestra el mensaje sin hacer referencia al autor.
Arriba
Escribiendo código o texto de otro tamaño
Si desea incluir alguna clase de código dentro de sus textos debe encasillarlo entre las etiquetas [code][/code], ej.

[code]"Esto es un código"[/code]

Todos los formatos incluidos entre las etiquetas [code][/code] son conservados al visualizar el mensaje. Se puede resaltar sintaxis PHP usando [code=php][/code] y es recomendable cuando se publican ejemplos de códigos en PHP, para mejorar su lectura.
Arriba

Creando listas

Creando una lista desordenada
BBCode soporta dos tipos de listas, ordenas y desordenadas. Son esencialmente iguales a las listas HTML. Una lista desordenada muestra cada ítem uno despúes del otro identificado con una viñeta. Para crear una lista desordenada debes utilizar [list][/list] definiendo cada item usando [*]. Por ejemplo, para crear una lista de tus colores favoritos, debes escribir:

[list]
[*]Rojo
[*]Azul
[*]Amarillo
[/list]

Se generará la siguiente lista:
  • Rojo
  • Azul
  • Amarillo

Como alternativa, puedes especificar el estilo de lista de viñetas utilizando [list=disc][/list], [list=circle][/list], o [list=square][/list].
Arriba
Creando una lista ordenada
El segundo tipo de lista, la ordenada, le permite controlar qué va detrás de cada ítem (elemento). Para crear una lista ordenada debe usar [list=1][/list] para crear una lista numérica o en su caso [list=a][/list] una lista alfabética. Como en las listas desordenadas, los ítems deben ser identificados usando [*]. Por ejemplo:

[list=1]
[*]Ir de compras
[*]Comprar un PC nuevo
[*]Llevar el PC a arreglar cuando se rompe
[/list]

generará lo siguiente:
  1. Ir de compras
  2. Comprar un PC nuevo
  3. Insultar al PC cuando se rompe
Y para una lista alfabética usaría:

[list=a]
[*]Primera respuesta posible
[*]Segunda respuesta posible
[*]Tercera respuesta posible
[/list]

creando:
  1. Primera respuesta posible
  2. Segunda respuesta posible
  3. Tercera respuesta posible

[list=A]
[*]Primera respuesta posible
[*]Segunda respuesta posible
[*]Tercera respuesta posible
[/list]

creando
  1. Primera respuesta posible
  2. Segunda respuesta posible
  3. Tercera respuesta posible

[list=i]
[*]Primera respuesta posible
[*]Segunda respuesta posible
[*]Tercera respuesta posible
[/list]

creando
  1. Primera respuesta posible
  2. Segunda respuesta posible
  3. Tercera respuesta posible

[list=I]
[*]Primera respuesta posible
[*]Segunda respuesta posible
[*]Tercera possible answer
[/list]

creando
  1. Primera respuesta posible
  2. Segunda respuesta posible
  3. Tercera respuesta posible
Arriba

Creando enlaces

Creando un hipervínculo a otro sitio
phpBB BBCode soporta muchas maneras de crear enlaces a otro sitio.
  • La primera de ella es utilizando las etiquetas [url=][/url], cualquier cosa que escriba después del signo = será interpretado por el BBCode como una dirección URL. Por ejemplo para crear un enlace a phpBB.com puede escribir:

    [url=https://www.phpbb.com/]¡Visite phpBB![/url]

    Se generará el siguiente enlace, Visite phpBB! El enlace se abrirá en una nueva ventana o no, dependiendo de la configuración del navegador.
  • Si prefiere que el enlace aparezca como una simple dirección URL debe usar:

    [url]https://www.phpbb.com/[/url]

    Se generará de esta forma lo siguiente, https://www.phpbb.com/
  • phpBB incluye una característica llamada Links Mágicos, con lo que se convertirá el enlace en una dirección URL automáticamente sin necesidad de utilizar ninguna etiqueta. Por ejemplo, escribiendo www.phpbb.com en su mensaje aparecerá www.phpbb.com cuando lo publique.
  • Lo mismo ocurre con las direcciones de e-mail, puede utilizar las etiquetas:

    [email]no.one@domain.adr[/email]

    lo cual se visualizará no.one@domain.adr o puede simplemente escribir no.one@domain.adr dentro de su mensaje, convirtiéndose en un enlace.
Puede incluir direcciones URL dentro de los demás BBCodes, como en [img][/img] (ver próxima explicación), [b][/b], etc. Recuerde que debe asegurarse de que todas las etiquetas estén cerradas y ordenadas correctamente, por ejemplo:

[url=https://www.phpbb.com/][img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/url][/img]

no es correcto ya que puede llevar a que su mensaje sea eliminado, así que tenga cuidado.
Arriba

Publicando imágenes y archivos en mensajes

Agregando una imagen al mensaje
phpBB BBCode incluye una etiqueta para poder incorporar imágenes en los mensajes. Dos cosas importantes para cuando utilice esta etiqueta son: a muchos usuarios les molesta ver un exceso de imágenes dentro de un mensaje y, segundo, éstas deben estar disponibles en Internet (no pueden existir solo en su PC, ¡a menos que se trate de un servidor web!). Para publicar una imagen debe encerrar su dirección URL entre las etiquetas [img][/img]. Por ejemplo:

[img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img]

También puede incluir la dirección URL de una imagen entre las etiquetas [url][/url] si así lo desea, ej.

[url=https://www.phpbb.com/][img]https://www.phpbb.com/theme/images/logos/blue/160x52.png[/img][/url]

se convierte en:

Arriba
Agregando archivos adjuntos al mensaje
Los archivos adjuntos ahora pueden ser ubicados en cualquier parte de un mensaje utilizando el nuevo BBCode [attachment=][/attachment], si la función está habilitada por La Administración del foro y si posee los permisos necesarios. Dentro de la pantalla donde escriba los mensajes encontrará un botón para incluir los archivos adjuntados en el mismo.
Arriba

Creando Spoilers

Agregando un spoiler en un mensaje
Un spoiler básico consiste en texto encapsulado entre las etiquetas [spoiler][/spoiler]. Por ejemplo:

[spoiler]Detalles de la narrativa de la película[/spoiler]

Esto generará:
[spoiler]Detalles de la narrativa de la película[/spoiler]
Arriba
Agregando un spoiler con título en un mensaje
Un spoiler opcionalmente puedemostrar un título personalizado, para hacerlo el texto necesita ser encapsulado entre las etiquetas [spoiler title=][/spoiler]. Por ejemplo:

[spoiler title=Resumen de la trama]Detalles de la narrativa de la película[/spoiler]

Esto generará:
[spoiler title=Resumen de la trama]Detalles de la narrativa de la película[/spoiler]
Arriba

Incrustación de Medios

Cómo insertar medios de otros sitios en los mensajes
Los usuarios pueden incorporar contenido como videos y audio desde sitios permitidos usando las etiquetas [media][/media], o simplemente publicando una URL soportada en texto plano. Por ejemplo:

[media]https://youtu.be/QH2-TGUlwu4[/media]

Como se indicó anteriormente, el enlace también podría utilizarse sin las etiquetas [media].

El ejemplo mostrado aquí generaría:

https://youtu.be/QH2-TGUlwu4

Los siguientes sitios son compatibles:
abcnews, amazon, audioboom, audiomack, bandcamp, bbcnews, bleacherreport, brightcove, cbsnews, cnbc, cnn, cnnmoney, comedycentral, coub, dailymotion, democracynow, dumpert, eighttracks, espn, facebook, flickr, foxnews, funnyordie, gamespot, getty, gfycat, gifs, gist, globalnews, gofundme, googledrive, googleplus, googlesheets, hudl, hulu, ign, imdb, imgur, indiegogo, instagram, internetarchive, izlesene, jwplatform, khl, kickstarter, libsyn, liveleak, livestream, mailru, medium, metacafe, mixcloud, mlb, mrctv, msnbc, natgeochannel, natgeovideo, nbcnews, nbcsports, nhl, npr, nytimes, orfium, pastebin, pinterest, podbean, prezi, reddit, rutube, scribd, slideshare, sportsnet, spotify, steamstore, stitcher, strawpoll, streamable, teamcoco, ted, theatlantic, theguardian, theonion, tmz, traileraddict, tumblr, twitch, twitter, ustream, vbox7, veoh, vevo, videodetective, vimeo, vine, vk, vocaroo, vox, washingtonpost, wshh, wsj, xboxclips, xboxdvr, youku.

Para obtener una documentación completa sobre los sitios admitidos, y las URL de ejemplo, visite la Documentación del PlugIn MediaEmbed.
Arriba

Otros

¿Puedo agregar mis propias etiquetas?
Si pertenece a La Administración de este foro y posee los permisos apropiados, puede agregar nuevos BBCodes desde el Panel del Administrador.
Arriba

BBCodes de la Caja Avanzada de BBCode

Tipo de fuente
[font=Comic Sans MS]texto[/font]

Ejemplo:
[font=Comic Sans MS]El zorro marrón rápido salta sobre el perro perezoso[/font]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto resaltado
[highlight=yellow]texto[/highlight] Tip: Puedes usar código de color=#FF0000

Ejemplo:
[highlight=yellow]El zorro marrón rápido salta sobre el perro perezoso[/highlight]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Alinear texto
[align=center|left|right|justify]texto[/align]

Ejemplo:
[align=center]El zorro marrón rápido salta sobre el perro perezoso[/align]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Flotador texto
[float=left|right]texto[/float]

Ejemplo:
[float=right]El zorro marrón rápido salta sobre el perro perezoso[/float]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto tachado
[s]texto[/s]

Ejemplo:
[s]El zorro marrón rápido salta sobre el perro perezoso[/s]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto subíndice
[sub]texto[/sub]

Ejemplo:
[sub]El zorro marrón rápido salta sobre el perro perezoso[/sub] El zorro marrón rápido salta sobre el perro perezoso

Resultado:
El zorro marrón rápido salta sobre el perro perezoso El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto superíndice
[sup]texto[/sup]

Ejemplo:
[sup]El zorro marrón rápido salta sobre el perro perezoso[/sup] El zorro marrón rápido salta sobre el perro perezoso

Resultado:
El zorro marrón rápido salta sobre el perro perezoso El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto con resplandor
[glow=color]texto[/glow]

Ejemplo:
[glow=red]El zorro marrón rápido salta sobre el perro perezoso[/glow]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto sombreado
[shadow=color]texto[/shadow]

Ejemplo:
[shadow=blue]El zorro marrón rápido salta sobre el perro perezoso[/shadow]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto con sombra
[dropshadow=color]texto[/dropshadow]

Ejemplo:
[dropshadow=blue]El zorro marrón rápido salta sobre el perro perezoso[/dropshadow]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto esfumado
[blur=color]texto[/blur]

Ejemplo:
[blur=blue]El zorro marrón rápido salta sobre el perro perezoso[/blur]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto descolorido
[fade]texto[/fade]

Ejemplo:
[fade]El zorro marrón rápido salta sobre el perro perezoso[/fade]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto preformateado
[pre]texto[/pre]

Ejemplo:
[pre]El zorro marrón rápido salta sobre el perro perezoso El zorro marrón rápido salta sobre el perro perezoso[/pre]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
	El zorro marrón rápido salta sobre el perro perezoso
Arriba
Dirección del texto
[dir=ltr|rtl]texto[/dir]

Ejemplo:
[dir=rtl]El zorro marrón rápido salta sobre el perro perezoso[/dir]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto marquesina
[marq=up|down|left|right]texto[/marq]

Ejemplo:
[marq=left]El zorro marrón rápido salta sobre el perro perezoso[/marq]

Resultado:
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Ocultar texto
[spoil]texto[/spoil]

Ejemplo:
[spoil]El zorro marrón rápido salta sobre el perro perezoso[/spoil]

Resultado:
► Mostrar Spoiler
Arriba
Ocultar texto para invitados
[hidden]texto[/hidden]

Ejemplo:
[hidden]El zorro marrón rápido salta sobre el perro perezoso[/hidden]

Resultado:
Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.
Arriba
Texto de alerta
[mod=username]texto[/mod]

Ejemplo:
[mod=Nombre de Usuario]El zorro marrón rápido salta sobre el perro perezoso[/mod]

Resultado:
 ! Mensaje de: Nombre de Usuario
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto Off Topic
[offtopic]texto[/offtopic]

Ejemplo:
[offtopic]El zorro marrón rápido salta sobre el perro perezoso[/offtopic]

Resultado:
Off Topic
El zorro marrón rápido salta sobre el perro perezoso
Arriba
Texto NFO ASCII
[nfo]NFO texto[/nfo]

Ejemplo:
[nfo]༼ つ ◕_◕ ༽つ ʕ•ᴥ•ʔ ¯\_(ツ)_/¯[/nfo]

Resultado:
༼ つ ◕_◕ ༽つ    ʕ•ᴥ•ʔ   ¯\_(ツ)_/¯
Arriba
Incrustar cualquier URL de sitios web de videos
[bbvideo]http://video_url[/bbvideo]

Ejemplo:
[bbvideo]http://www.youtube.com/watch?v=sP4NMoJcFd4[/bbvideo]

Resultado:
[bbvideo]http://www.youtube.com/watch?v=sP4NMoJcFd4[/bbvideo]
Arriba