:: Guia do iniciante - BBCode ::

Versão 1.0 - 20/12/2008

Este Guia foi escrito com exclusividade para a Power Maker, é PROIBIDA a re-publicação sem autorização prévia do autor! Não seje noob, respeite os direitos autorias =D



:: Guia do iniciante - BBCode ::


Bom pessoal, é muito comum os usuários novatos terem dúvidas quanto à "formatação" de um post, como adição de imagens, links, colorização do texto, etc...

...para quem não sabe, nos sistemas de Fórum isto é feito através do BBCode... mas afinal, o que é BBCode?

BBCode (abreviação de Bulletin Board Code) é uma pequena linguagem criada pelos fóruns phpBB, e que atualmente está presente na maioria dos sistemas de Fórum... ele utiliza "tags" para formatar ou adicionar efeitos nas mensagens (posts).
Sua principal vantagem é a simplicidade de utilização, o que proporciona maior facilidade no aprendizado dos usuários;

As tags são estruturas de linguagem de marcação, que consistem em breves instruções escritas em forma de bloco (geralmente usando "colchetes" [ ]).
A abertura da tag utiliza o código entre colchetes, ex:


Formatando seu texto:

À seguir irei explicar e exemplificar a funcionalidade das principais tags do sistema Forumeiros...

Bold (Negrito) - Representada pela letra "b":
A tag "b" é utilizada para deixar o texto em negrito, ex:

Código:

[b]Texto em negrito[/b]

...o código acima irá resultar em:
Texto em negrito


Italic (Itálico) - Representada pela letra "i":
A tag "i" é utilizada para deixar o texto em itálico, ex:

Código:

[i]Texto em itálico[/i]

...o código acima irá resultar em:
Texto em itálico


Underline (Sublinhado) - Representada pela letra "u":
A tag "u" é utilizada para deixar o texto sublinhado, ex:

Código:

[u]Texto sublinhado[/u]

...o código acima irá resultar em:
Texto sublinhado


Strike (Tachado) - Representada pela palavra "strike":
A tag "strike" é utilizada para deixar o texto tachado, ex:

Código:

[strike]Texto tachado[/strike]

...o código acima irá resultar em:
Texto tachado


Left (Esquerda) - Representada pela palavra "left":
A tag "left" é utilizada para deixar o texto alinhado pelo lado esquerdo, ex:

Código:

Texto alinhado pelo lado esquerdo

...o código acima irá resultar em:
Texto alinhado pelo lado esquerdo


Center (Centralizado) - Representada pela palavra "center":
A tag "center" é utilizada para deixar o texto alinhado pelo ponto central, ex:

Código:

[center]Texto alinhado pelo ponto central[/center]


...o código acima irá resultar em:



Right (Direita) - Representada pela palavra "right":
A tag "right" é utilizada para deixar o texto alinhado pelo lado direito, ex:

Código:

[right]Texto alinhado pelo lado direito[/right]


...o código acima irá resultar em:



Justify (Justificado) - Representada pela palavra "justify":
A tag "justify" é utilizada para deixar o texto justificado, ex:

Código:

[justify]BBCode (abreviação de Bulletin Board Code) é uma pequena linguagem criada pelos fóruns phpBB[/justify]


...o código acima irá resultar em:

Sem o modo justificado ficaria:
BBCode (abreviação de Bulletin Board Code) é uma pequena linguagem criada pelos fóruns phpBB


List (Lista) - Representada pela palavra "list":
A tag "list" é utilizada para organizar tópicos (do texto) em forma de lista, ex:

Código:


[list]- Introdução
- Capítulo 1
- Capítulo 2
- ...
[/list]

...o código acima irá resultar em:

- Introdução
- Capítulo 1
- Capítulo 2
- ...

Ranking list (Lista ordenada) - Representada pela palavra "list=":
A tag "list=" é utilizada para organizar tópicos (do texto) em forma de lista ordenada, ex:

Código:

[list=1]
[*]- Introdução
[*]- Capítulo 1
[*]- Capítulo 2
[*]- ...
[/list]

...o código acima irá resultar em:

1. - Introdução
   
2. - Capítulo 1
   
3. - Capítulo 2
   
4. - ...
   

Line (Linha) - Representada pela palavra "hr":
A tag "hr" é utilizada para inserir uma linha de separação, ex:

Código:

Parte 1Parte 2

...o código acima irá resultar em:
Parte 1Parte 2


Font (Fonte) - Representada pela palavra "font=":
A tag "font=" é utilizada para selecionar uma fonte diferente para o texto, ex:

Código:

[font=book antiqua]Texto com outra fonte[/font]

...o código acima irá resultar em:
Texto com outra fonte


Size (Tamanho) - Representada pela palavra "size=":
A tag "size=" é utilizada para selecionar o tamanho do texto, ex:

Código:

[size=16]Texto com tamanho 16[/size]

...o código acima irá resultar em:
Texto com tamanho 16


Color (Cor) - Representada pela palavra "color=":
A tag "color=" é utilizada para selecionar a cor do texto, ex:

Código:

[color=blue]Texto em azul[/color]

...o código acima irá resultar em:
Texto em azul

Lista de cores básicas:
Preto = black
Cinza = Gray
Azul = blue
Vermelho = red
Verde = green
Amarelo = yellow
Laranja = orange
Roxo = purple


Quote (Citação) - Representada pela palavra "quote":
A tag "quote" é utilizada para exibir uma citação à uma frase/texto de outro usuário/etc., ex:

Código:

[quote]Texto postado pelo fulano[/quote]

...o código acima irá resultar em:

Texto postado pelo fulano

Para identificar o autor da citação:

Código:

[quote="Fulano"]Texto postado pelo fulano[/quote]

...o código acima irá resultar em:

fulano escreveu:Texto postado pelo fulano

Image (Imagem) - Representada pela palavra "img":
A tag "img" é utilizada para exibir uma imagem no post, ex:

Código:

[img]http://www.google.com.br/intl/pt-BR_br/images/logo.gif[/img]

...o código acima irá resultar em:


OBS: As imagens devem estar hospedadas na Internet para exibição no post, não é possível anexar imagens diretamente!


Link (Ligação) - Representada pela palavra "url":
A tag "url" é utilizada para exibir uma ligação para outra página (link) no post, ex:

Código:

[url]http://www.google.com.br[/url]

...o código acima irá resultar em:
http://www.google.com.br


Image link (Imagem com ligação) - Combinação das tags "img" e "url":
A combinação de tags "img" + "url" é utilizada para exibir uma imagem com ligação para outra página (imagem-link) no post, ex:

Código:

[url=http://www.google.com.br][img]http://www.google.com.br/intl/pt-BR_br/images/logo.gif[/img][/url]

...o código acima irá resultar em:



Code (Código) - Representada pela palavra "code":
A tag "code" é muito utilizada em comunidades sobre programação e etc. pois permite que o navegador exiba o código puro, ou seja, sem interpretá-lo, ex:

Código:

[code][b]Texto em negrito[/b][/code]

...o código acima irá resultar em:

Código:

[b]Texto em negrito[/b]

...reparem que a tag "bold" no código acima não foi interpretada, o texto é exibido sem formatação e é possível ver a estrutura do BBCode; Isso pode ser muito útil quando se deseja que os usuários "vejam" o código e não o texto formatado, como no caso deste Guia!


Combinação de várias tags:
Para obter determinados tipos de formatação é necessário combinar várias tags; Para isto basta abrir e fechar os blocos respeitando a ordem correta, ex:

Código:

[b][i][u]Texto em negrito, itálico e sublinhado[/u][/i][/b]

...o código acima irá resultar em:
Texto em negrito, itálico e sublinhado

...reparem na forma em que os blocos são interpretados, como em um código de programação:

Código:

[b]
    [i]
        [u]
            Texto em negrito, itálico e sublinhado
        [/u]
    [/i]
[/b]

Tags especiais:
São tags menos utilizadas que possuem funcionalidades mais específicas;

Spoiler ("Estraga-prazeres") - Representada pela palavra "spoiler":
A tag "spoiler" é geralmente utilizada quando postamos um texto que trás revelações sobre enredos de filmes, séries, etc., ou seja, um conteúdo que algumas pessoas podem não estar dispostas a ler, ex:

Código:

[spoiler]Texto com revelações sobre enredo[/spoiler]

...o código acima irá resultar em:

Spoiler:

OBS: Para exibir/ocultar o texto baixa clicar na caixa;


Youtube - Representada pela palavra "youtube":
A tag "youtube" é utilizada para exibir um vídeo do Youtube no post, ex:

Código:

[flash(425,350)]http://www.youtube.com/v/Uch2asSil_s[/flash]

...o código acima irá resultar em:



Flash - Representada pela palavra "flash(width,height)":
A tag "flash" é utilizada para exibir uma animação/jogo/etc. em Flash no post, ex:

Código:

[flash(500,375)]http://www.addictinggames.com/D78AQSAKQLQWI9/2817.swf[/flash]

...o código acima irá resultar em:


OBS: Os valores entre parênteses após a tag são respectivamente a largura e a altura da janela de exibição do arq., que pode variar de acordo com a necessidade!

---

Espero que o Guia ajude bastante os que ainda não dominam muito bem a formatação em BBCode =D

Qualquer dúvida e/ou sugestão basta postar aqui mesmo no tópico!

flw

t+

uau irado,muuuuuuuito massa mesmo mfmana cara parabens vc mesmo q fez tudo isso sosinho??

nooossa q cautela q paciencia mi ajudoumuito e tnehu certeza q vai ajudar a todos,eu n sabia como q colocava video nem flash agora eu sei... vlw...

Grande coisa! O cara pegou um por um e usou, qualquer um faz isso.