[Tutorial] Usando as Cores na Net

uma conta · por **Bakujirou** Ter 30 Mar 2010 - 17:38

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] ...

Exemplo1 do post, no fórum da PokéPlus.

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]

Exemplo2 do post, no fórum da PokéPlus.

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]

Post exemplo3.

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 ([Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]) 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 neste link (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:

por Dewloren Ter 30 Mar 2010 - 20:19

Nossa! Nem sabia que existia esse monte de cores que a forumeiros possibilitava.
Gostei do tutô.

See you later.

uma conta · por Swift Ter 30 Mar 2010 - 20:49

Adorei,nossa quantas cores diferentes...
Valeu Baku pelo ótimo tutorial,que com certeza deixará nossos posts mais divertidos!

por gbsfrts Ter 30 Mar 2010 - 21:23

SnowValew kra mt massa mais onde pego o codigo das cores ?

por -Rodrigo Ter 30 Mar 2010 - 21:37

Finalmente descobrimos um jeito para usar a cor que quisermos aqui pelo Forumeiros. Já estou com essa aqui, MediumVioletRed *-*.

uma conta · por Sth. Phoenix - Meks Ter 30 Mar 2010 - 22:07

Boa Noite Baku!
Que dica esplêndida! Finalmente posso usar um parente do Amarelo (Não sendo o laranja) em meus posts!
Agora, o fórum será um Íris ambulante! Colorido e divertido *-*
Gamei <3
Uma Ótima Noite para todos! :*

uma conta · por ~Luxy Ter 30 Mar 2010 - 22:35

Muito útil, sabia que tinha mais, não sabia os nomes.Listinha que vai para o meu Tutorial de HTML.

por Raphiow Ter 30 Mar 2010 - 22:42

Gostei dessa cor!

Esse tutorial vai ser bem útil para os fanfiqueiros (assim como eu) que utilizam cores nas falas dos personagens...

Eu sabia que existiam mais cores, mas não sabia como ativar...²

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

uma conta · por **Bakujirou** Qua 31 Mar 2010 - 12:40

Agradeço pelos posts/comments...

gbsfrts escreveu:SnowValew kra mt massa mas, onde pego o codigo das cores ?

Tá se referindo a estes códigos como este: (#ffcc33)?

Bem... Você deve ter uma conta no site da PM, logar e o PokéBox e a caixa dos comentários de cada post/news do site vai estar habilitado. Então, aperte no botão de cores e uma lista bem seleta, se abrirá. De lá, passe o ponteiro do mouse na cor que desejar, anote o número da cor e então, insira ela na tag de cores, assim:

Código:: [color=#330099]#330099[/color]

O resultado, será a cor sintetizada, aqui mesmo, no fórum do forumeiros... A fonte da lista, foi de uma pequena pesquisa, que eu fiz, navegando em outros fóruns que eu conheci por aí/ me cadastrei/ whatever...

Já alterei várias vezes as cores dos meus posts... Quase Rindo

Só ontem, tive coragem pra poder postar uma dica. TUTORIAL mesmo, eu não fiz... Até porque as cores e o funcionamento de tags, fazem parte de tutos de HTML, como o Luxy Ray citou ali...

uma conta · por caioloko Sáb 10 Abr 2010 - 18:14

Hello!

Gostei do tutorial, ficou bem explicativo, parabéns Baku.

Eu recentemente estou interessado nos conceitos de HTML, mas não especificamente os de fóruns. Aquelas Tags, como por exemplo:

Código:: <TITLE><b>Rick Martin assume a homossexualidade</b><TITLE> </br> <BODY></BODY>

por Fredgrotle Dom 11 Abr 2010 - 0:47

Legal esse tutoria lvai deixar o forum mais colorido

uma conta · por **Bakujirou** Dom 11 Abr 2010 - 1:18

Nuevo Upgrade! As minhas pesquisas sobre HTML, me renderam mais infos sobre as tags do fórum (BBCode) e das de HTML.

por -SM Dom 11 Abr 2010 - 11:22

Ótimo Tutorial Baku! ^^

Tutorial Fixado e Adicionado na listas dos Melhores Tutoriais concerteza! ^^

uma conta · por Turt Dom 11 Abr 2010 - 11:42

Legal, essa é minha nova cor, graças ao baku(e ao forumeiros tmb xD), valew pelo tuto!

por Raphiow Dom 11 Abr 2010 - 13:02

turt_blast escreveu:Legal, essa é minha nova cor, graças ao baku(e ao forumeiros tmb xD), valew pelo tuto!

Eu já estou usando essa... '-' Poderia trocar?

por Conteúdo patrocinado

[Tutorial] Usando as Cores na Net

[Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net

Re: [Tutorial] Usando as Cores na Net