[Tutorial] Usando as Cores na Net

por **Bakujirou** Seg Jan 23 2012, 20:14

Definições e Usos da Coloração de Textos

A coloração de textos na web, faz parte de noções básicas sobre o HTML.

As tags das cores (neste e em qualquer outro fórum) segue a seguinte forma:

Código:: [color=?][/color]

Como podem ver, a tag desencadeia o efeito da cor que você deseja, apenas alterando o "?" dentro do espaço da tag citada anteriormente.

Pra que elas sejam aproveitadas, você precisa usar apenas UMA vez, dentro de qualquer fórum do forumeiros. Digo isso, porque em alguns outros fóruns, a tag da cor pode ficar inativa, se usada com o advento de outras tags selecionadas.

EXAMPLE:

Se você conhece ou já foi cadastrado no fórum da PokéPlus (que é no formato phpBB, não sei qual a versão dela...), deve saber que, ali, sempre que você inicia uma tag de cor, você vai precisar encerrá-la, antes de usar a próxima tag (quote/ code/ color). Se não fizer isso, haverá um conflito entre elas.

Código:: [color=deepskyblue] [color=black][b][PMD: Blue Rescue]:[/b][/color] Não fiz muita coisa nova. Fiz umas missions aleatórias, esvaziava a caixa de correio, comprava itens e depois verificava o Job Bulletin pra conferir se algumas missions batiam com as que eu tinha reservado.[/color] ...

.

Por isso, você deve ficar atento. Em alguns fóruns, as tags podem funcionar diferentemente do que você está acostumado, então, trate de editar mais vezes os seus posts...

Código:: [quote="Sir Bakujirou S."][color=deepskyblue][b][PMD: Blue Rescue]:[/b][/color][color=black] Fui pra Mt. Faraway... Peguei meu time semi-formado, Kawaku (Grovyle), Poliwhirl e o meu Slowpoke. Atravessei com folga os 40 Andares de lá... Esperava conseguir recrutar o Ho-oh, mas não consegui (deixei o Poliwhirl na Friend Area dele pra conseguir reservar um espaço a mais, pro Ho-oh entrar na equipe). Algo me diz, que devo fazer uma tarefa antes de ir na dungeon de Lugia... Mas o quê seria? [/color][/quote]

.

Outra coisa a ser comentada, é a cor padrão da fonte do fórum. Geralmente, ela sempre muda, conforme o gosto dos Administradores. Só pra dar exemplos rápidos, neste fórum, a cor padrão pros textos é a Gray (cinza). Já no fórum da PokéPlus, a cor padrão é Black (negra).

Outro exemplo:

Código:: [quote="Spicer"]Diamond=estou treinando meu Ho-Oh na rota 226[/quote]

.

Pra conhecer mais como se utiliza as tags de cores em documentos de HTML, procure em alguns tutores de CSS.

Curiosidades escreveu:Sobre as tags de coloração

As tags de coloração seguem a regra do sistema RGB de cores.

(O sistema RGB é usado comumente em isntrumentos que emitem luzes. O verde, azul e vermelho são também conhecidos como "as cores primárias da luz")

Na codificação das cores em HTML/BBCode são usados 6 números. Destes 6, os dois primeiros representam a cor vermelha (Red), os dois seguintes a cor verde (Green), e o último par de números simbolizam a cor azul (Blue).

Todos estes números sempre variam de 0 a 9 (10 números) e de A a F (6 letras), somando um total de dezesseis caracteres. Este sistema de números é conhecido como o Sistema Hexadecimal.

Pra representar uma cor somente vermelha use #FF0000, o primeiro par representa o Vermelho (R) e os dois pares de zeros à direita, são a ausência do Verde (G) e do Azul (B).

O branco e o preto, neste caso, será representado por #FFFFFF (todas as cores presentes no máximo) e por #000000 (ausência total das cores).

Existem diferenças pras tags de HTML e de Fórum?

Não muito. Por si só, o BBCode é um tipo de linguagem de HTML apropriada pros fóruns.

O BBCode é a abreviação de Bulletin Board Code.

A activação do uso do BBCode é determinado pelo administrador. Você pode desativar o BBCode em uma mensagem no momento da elaboração da mensagem. O BBCode é, nele mesmo, similar ao estilo HTML, os seus elementos, balisas, são delimitados por colchetes [ e ] , ao invés de < e >, e oferecem um melhor controle sobre como a informação será visualizada.

De acordo com o modelo de documento que você lê, você pode adicionar BBCode às suas mensagens através de uma interface de botões clicáveis acima da caixa de texto.

Posso combinar as balisas na formatação?

Sim, claro que você pode, por exemplo, para atrair a atenção de alguém, você pode escrever:

Código:
[size=18][color=red][b]OLHA PRA MIM ![/b][/color][/size]
para ter: OLHA PRA MIM!

Porém, nós não aconselhamos escrever muito texto como aqui acima!

Lembre-se de que é você o responsável em garantir a boa abertura e fechamento das balisas. Por exemplo, isso é correto:
Código:
[b][u]Isto é normal[/b][/u]
(Fechar todas as tags abertas, na ordem de aparecimento)

Mas a melhor forma de fechá-las é por aninhamento:
Código:
[b][u]isso é correto[/u][/b]
(Reunir as tags pelas pontas extremas ou por ordens reversas.
Ex:
[x][y][z]TEXTO[/z][/y][/x])

Lista das Cores

A lista de cores a seguir, são um pequeno resumo das várias formas de chamar as colorações. Por ter seu nome em inglês, elas podem ser sintetizadas pelo forumeiros e serão transmitidas através das tags pra você.

Por haver um número muito grande de cores, elas não estão listadas nas cores padrão dentro do botão de cores ([img] deste fórum de forumeiros. Aqui vai a lista com bons exemplos: (Clique no spoiler pra que ele se abra)

Spoiler:

Código:: [color=Snow]Snow[/color] [color=GhostWhite]GhostWhite[/color] [color=WhiteSmoke]WhiteSmoke[/color] [color=Gainsboro]Gainsboro[/color] [color=FloralWhite]FloralWhite[/color] [color=OldLace]OldLace[/color] [color=Linen]Linen[/color] [color=AntiqueWhite]AntiqueWhite[/color] [color=PapayaWhip]PapayaWhip[/color] [color=Bisque]Bisque[/color] [color=PeachPuff]PeachPuff[/color] [color=NavajoWhite]NavajoWhite[/color] [color=Moccasin]Moccasin[/color] [color=Cornsilk]Cornsilk[/color] [color=Ivory]Ivory[/color] [color=LemonChiffon]LemonChiffon[/color] [color=Seashell]Seashell[/color] [color=Honeydew]Honeydew[/color] [color=MintCream]MintCream[/color] [color=Azure]Azure[/color] [color=AliceBlue]AliceBlue[/color] [color=Lavender]Lavender[/color] [color=LavenderBlush]LavenderBlush[/color] [color=MistyRose]MistyRose[/color] [color=DarkSlateGray]DarkSlateGray[/color] [color=DimGray]DimGray[/color] [color=SlateGray]SlateGray[/color] [color=LightSlateGray]LightSlateGray[/color] [color=Gray]Gray[/color] [color=LightGray]LightGray[/color] [color=DarkGray]DarkGray[/color] [color=MidnightBlue]MidnightBlue[/color] [color=NavyBlue]NavyBlue[/color] [color=CornFlowerBlue]CornFlowerBlue[/color] [color=DarkSlateBlue]DarkSlateBlue[/color] [color=SlateBlue]SlateBlue[/color] [color=LightSlateBlue]LightSlateBlue[/color] [color=MediumBlue]MediumBlue[/color] [color=RoyalBlue]RoyalBlue[/color] [color=DarkBlue]DarkBlue[/color] [color=DodgerBlue]DodgerBlue[/color] [color=DeepSkyBlue]DeepSkyBlue[/color] [color=SkyBlue]SkyBlue[/color] [color=LightSkyBlue]LightSkyBlue[/color] [color=SteelBlue]SteelBlue[/color] [color=LightSteelBlue]LightSteelBlue[/color] [color=LightBlue]LightBlue[/color] [color=PowderBlue]PowderBlue[/color] [color=PaleTurquoise]PaleTurquoise[/color] [color=Turquoise]Turquoise[/color] [color=Cyan]Cyan[/color] [color=LightCyan]LightCyan[/color] [color=DarkCyan]DarkCyan[/color] [color=CadetBlue]CadetBlue[/color] [color=MediumAquamarine]MediumAquamarine[/color] [color=Aquamarine]Aquamarine[/color] [color=LightGreen]LightGreen[/color] [color=DarkGreen]DarkGreen[/color] [color=DarkOliveGreen]DarkOliveGreen[/color] [color=DarkSeagreen]DarkSeaGreen[/color] [color=SeaGreen]SeaGreen[/color] [color=MediumSeaGreen]MediumSeaGreen[/color] [color=LightSeaGreen]LightSeaGreen[/color] [color=PaleGreen]PaleGreen[/color] [color=SpringGreen]SpringGreen[/color] [color=LawnGreen]LawnGreen[/color] [color=Chartreuse]Chartreuse[/color] [color=MediumSpringGreen]MediumSpringGreen[/color] [color=GreenYellow]GreenYellow[/color] [color=LimeGreen]LimeGreen[/color] [color=YellowGreen]YellowGreen[/color] [color=ForestGreen]ForestGreen[/color] [color=OliveDrab]OliveDrab[/color] [color=DarkKhaki]DarkKhaki[/color] [color=PaleGoldenrod]PaleGoldenrod[/color] [color=LtGoldenrodYellow]LtGoldenrodYellow[/color] [color=LightYellow]LightYellow[/color] [color=Yellow]Yellow[/color] [color=Gold]Gold[/color] [color=LightGoldenrod]LightGoldenrod[/color] [color=Goldenrod]Goldenrod[/color] [color=DarkGoldenrod]DarkGoldenrod[/color] [color=RosyBrown]RosyBrown[/color] [color=IndianRed]IndianRed[/color] [color=SaddleBrown]SaddleBrown[/color] [color=Sienna]Sienna[/color] [color=Peru]Peru[/color] [color=Burlywood]Burlywood[/color] [color=Beige]Beige[/color] [color=Wheat]Wheat[/color] [color=SandyBrown]SandyBrown[/color] [color=Tan]Tan[/color] [color=Chocolate]Chocolate[/color] [color=FireBrick]FireBrick[/color] [color=Brown]Brown[/color] [color=DarkSalmon]DarkSalmon[/color] [color=Salmon]Salmon[/color] [color=LightSalmon]LightSalmon[/color] [color=Orange]Orange[/color] [color=DarkOrange]DarkOrange[/color] [color=Coral]Coral[/color] [color=LightCoral]LightCoral[/color] [color=Tomato]Tomato[/color] [color=OrangeRed]OrangeRed[/color] [color=DarkRed]DarkRed[/color] [color=HotPink]HotPink[/color] [color=DeepPink]DeepPink[/color] [color=Pink]Pink[/color] [color=LightPink]LightPink[/color] [color=PaleVioletRed]PaleVioletRed[/color] [color=Maroon]Maroon[/color] [color=MediumVioletRed]MediumVioletRed[/color] [color=VioletRed]VioletRed[/color] [color=Magenta]Magenta[/color] [color=DarkMagenta]DarkMagenta[/color] [color=Violet]Violet[/color] [color=Plum]Plum[/color] [color=Orchid]Orchid[/color] [color=MediumOrchid]MediumOrchid[/color] [color=DarkOrchid]DarkOrchid[/color] [color=DarkViolet]DarkViolet[/color] [color=BlueViolet]BlueViolet[/color] [color=Purple]Purple[/color] [color=MediumPurple]MediumPurple[/color] [color=Thistle]Thistle[/color] [color=Silver]Silver[/color] [color=OliveDrab]OliveDrab[/color] [color=DarkKhaki]DarkKhaki[/color] [color=BlueViolet]BlueViolet[/color] [color=PowderBlue]PowderBlue[/color] [color=PaleTurquoise]PaleTurquoise[/color] [color=Turquoise]Turquoise[/color] [color=MediumTurquoise]Mediumturquoise[/color] [color=Teal]Teal[/color] [color=Cyan]Cyan[/color] [color=LightCyan]LightCyan[/color] [color=DarkCyan]DarkCyan[/color] [color=CadetBlue]CadetBlue[/color] [color=MediumAquamarine]MediumAquamarine[/color] [color=Chartreuse]Chartreuse[/color] [color=DarkSeagreen]DarkSeaGreen[/color] [color=SeaGreen]SeaGreen[/color] [color=MediumSeaGreen]MediumSeaGreen[/color] [color=LightSeaGreen]LightSeaGreen[/color] [color=RosyBrown]RosyBrown[/color] [color=IndianRed]IndianRed[/color] [color=SaddleBrown]SaddleBrown[/color] [color=Sienna]Sienna[/color]

Obs: Existem algumas destas cores que não são sintetizadas no forumeiros. Por isso, algumas cores podem não funcionar direito. Então, basta fazer passar a usar a linguagem em HTML delas (clique em uma nova página). Ali, você pode memorizar ou até mesmo, copiar uma das várias codificações em HTML, como no exemplo abaixo:

#66cc99
#00cc99
#669999

Código:: [color=#66cc99]#66cc99[/color] [color=#00cc99]#00cc99[/color] [color=#669999]#669999[/color]

Fonte:

Spoiler: