Aprendizado BR

Colocar Música no Blog: Escolher Rádio, Artista ou Criar Playlist

noreply@blogger.com (Dj Autentico) — Fri, 29 Nov 2013 03:47:00 -0800

Para alguns blogs é muito interessante um gadget com musicas tocando no blog automaticamente ou somente colocar musica no blog e deixar o visitante escolher se quer ou não ouvir a música enquanto visita sua pagina. Então você pode criar uma lista de músicas (playlist), selecionar uma radio para colocar no blog ou escolher as musicas de qual artista os visitantes do seu blog poderão ouvir online.

O site soongz.com tem musica para inserir no seu blog você tem as opções de criar
um playlist para colocar no blog ou selecionar por musica, artista ou radio e com isso começar a criar seu player de musica para o blog.

Conforme a opção que escolher aparecem algumas configurações como a musica iniciar automaticamente ao entrar no blog (não recomendamos essa opção, pois se quem entrar no seu blog quiser parar a música e não achar onde provavelmente sairá do seu site e aumentará sua Taxa de Rejeição).

Outras configurações como tocar as músicas mais populares de cada artista ou tocar musicas aleatoriamente também são disponíveis. Portanto faça suas escolhas e clique no botão visualizar.

Você verá o player e algumas opções de cores como também o tamanho deste gadget de musica então selecione as cores que combinam com o seu template e clique no botão criar meu player.

Agora copie esse código para colocar no seu blog. Se você usar o Tumblr verá que nesta pagina tem um link para um tutorial sobre como colocar musica no Tumblr ou tutorial sobre colocar musicas no WordPress.

Mas voltando ao Blogger você só precisa colocar esse código como um gadget de html/javascript, portanto entre no painel de controle do Blogger depois na pagina Layout > adicionar gadget > html/javascript e cole o código.

Agora já está pronto e já tem musica no seu blog!

Um aviso importante é que o site também fornece esse gadget em forma de barra de musica para colocar no topo ou rodapé da pagina, porém esse formato apresentou falhas fazendo que aparecesse somente a barra de música e ocultando seu blog, portanto não use essa opção por enquanto vamos aguardar que o site corrija esse problema.

Resolvemos publicar esse tutorial mesmo uma das opções de player apresentar problemas porque encontramos em alguns fóruns de ajuda sobre blogs perguntas sobre esse problema e assim alertamos os blogueiros para não usar esse formato. Além disso, o outro formato (gadget de música) funcionou muito bem e ter boas opções de personalização além de ser muito fácil de escolher as musicas para colocar no blog.

Personalizar Gadgets (Plugins) do Facebook para Blogs e Sites

noreply@blogger.com (Dj Autentico) — Fri, 29 Nov 2013 03:37:00 -0800

Existem muitos acessórios do Facebook para colocar no blog e você pode personalizar (alterar o layout, aparência) desses gadgets ou plugins apenas alterando o código HTML e colocando tags indicadas pelo próprio Facebook na mesma pagina onde você configura e pega o códigos dos gadgets (widgets) do Facebook para blogs e sites, ou seja, na pagina de plugins sociais.

►Personalizar Acessórios do Facebook para Blogs

O funcionamento destes códigos para editar os plugins do Facebook funcionam em todos os plugins, por exemplo: botão curtir, widgets de posts recomendados, caixa de fãs do Facebook e todos os outros acessórios. A diferença é que cada um permite alterações dependendo do seu conteúdo.

Quando estiver na pagina de desenvolvedores de plugins para sites do Facebook (pagina onde pegamos o código do Facebook para colocar no blog). Veja que logo abaixo do botão get code tem uma lista de tags e códigos HTML para personalizar.

Vamos usar como exemplo o plugin de Gadget de Posts Recomendados que por padrão abre os links em uma nova janela, mas podemos alterar isso para que ao clicar num link ele abra na mesma janela.

Veja esse trecho do código (isso é apenas uma parte do código para demonstração).

<div class="fb-recommendations" data-site="www.dicasparablogs.com.br" data-width="600" data-height="400" data-header="true"></div>

Para abrir os links na mesma janela temos que acrescentar o código:
data-linktarget="_top"

Então o código do Facebook modificado para abrir os links na mesma janela fica deste jeito:

<div class="fb-recommendations" data-site="www.dicasparablogs.com.br" data-width="600" data-height="400" data-header="true" data-linktarget="_top"> </div>

Com essa mudança simples no código está pronto e os não vão abrir em uma nova janela.

Efeito Estrelinhas Coloridas no Mouse

noreply@blogger.com (Dj Autentico) — Fri, 29 Nov 2013 02:51:00 -0800

Gadget com o efeito de estrelinhas coloridas caindo do mouse para enfeitar seu blog. Esse é um acessório muito simples de colocar no seu blog sem precisar editar códigos HTML e dependendo do layout, cores e publico alvo do seu blog, esse efeito dará um toque especial no seu template.

Entre na pagina layout > adicionar gadget > HTML/javascript e cole o código abaixo:

<script type="text/javascript" src="http://acessoriosparablogs.com.br/estrelinhas.js"></script>

E já está pronto! Isso é rápido e simples de fazer, além disso, você pode posicionar o gadget das estrelinhas coloridas em qualquer parte do seu template ou até mesmo em uma postagem ou pagina extra do blog

Adicionando o seu blog no mecanismo de pesquisa do Firefox

noreply@blogger.com (Dj Autentico) — Sun, 6 Jan 2013 17:19:00 -0800

Para quem usa o Firefox ou o IE7, existe um mecanismo de pesquisa com varias opções como google, yahoo, wikipedia, etc. E é possivel adicionar o seu blog a esse sistema, para que qualquer um possa pesquisar diretamente em seu site, com isso ao clicar na seta ao lado so sistema de pesquisa irá aparecer adicionar “Seu site”, como pode ser visto aqui no site.

Isso irá funcionar em qualquer sistema CMS, que tenha um sistema de busca interna

Crie um arquivo, use o seu editor de texto preferido, como por exemplo o bloco de notas, chamado de pesquisa.xml, contendo as seguintes informações:

Altere os itens em negrito para os do seu site

<?xml version=”1.0″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”>
<ShortName>Titulodoseusite</ShortName>
<Description>Descrição do sistema de pesquisa</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image height=”16″ width=”16″ type=”image/x-icon”>http://clubepc.org/favicon.ico</Image>
<Url type=”application/x-suggestions+json” method=”GET” template=”http://seusite.com/?s={searchTerms}”/>
<Url type=”text/html” method=”get” template=”http://seusite.com/?s={searchTerms}”/>
</OpenSearchDescription>

Vou explicar um pouco para que serve os campos, que devem ser alterados

ShortName: Texto que irá aparecer no mecanismo de pesquisa.

Description: Descrição curta sobre o mecanismo de busca. ~~não sei onde isso é usado~~

Image: Imagem que irá aparecer no mecanismo de pesquisa, deve ser um favicon e com tamanho de 16×16

Url: Aqui são as urls para o mecanismo de busca de seu site

Atenção: Só altere os itens que estão em negritos para não dar erro.

Com o arquivo salvo envie ele para a mesma pasta onde se encontra o seu site,

Agora adicione o seguinte, alterando os itens em negrito para ficar de acordo com o do seu site, no header do seu site(no wordpress isso fica no arquivo header.php de seu template).

Bem simples não?

Adicionando o efeito de neve ao seu site

noreply@blogger.com (Dj Autentico) — Sun, 6 Jan 2013 16:45:00 -0800

--> -->

Para entrar no espírito de natal é legal adicionar algo no site, mudar o layout ou criar um logo de natal, mas isso pode dar trabalho, algo bem facil de se fazer é colocar um efeito de neve caindo. Por isso vou postar um script em javascript que faz isso.

Ele usa uma imagem de neve então copie essa imagem aqui(ou qualquer uma a sua escolha)

o link para essa imagem é http://i12.tinypic.com/6uscqjq.gif

para usa-lo é bem simples simplesmente copie todo o conteudo a seguir e cole após o <body> de seu site.

[code="javascript"][/code]

para ele funcionar é preciso alterar:

//Configure below to change URL path to the snow image
var snowsrc=”snow.gif”

para o endereço de onde se encontra a imagem, caso ela esteja na mesma pasta que a pagina pode deixar como está.

Também é possivel alterar os seguintes itens
// Configure below to change number of snow to render
var no = 10;
Irá alterar o numero de “flocos” de neve que irão aparecer

// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;

Irá alterar o tempo que o “flocos” seram exibidos na tela, 0 é infinito(ele irá até o fim da sua pagina e comecará do topo novamente)

// Configure how much snow should drop down before fading (“windowheight” or “pageheight”)
var snowdistance = “pageheight”;

Altera o tempo que os flocos iram cair, pageheight é até o fim da sua pagina(se tiver uma pagina grade isso não será bom), e windowheight é até o fim da tela(resolução domonitor).

Para manter a organizaçãse o do codigo fonte de seu site você pode salvar esse script em um arquivo .js como snow.js e em seu codigo fonte(também depois do <body>) colocar apenas

<script src=”snow.js” type=”text/javascript”></script>

alterando o src=”" para o local do arquivo no caso dele não estar na mesma pasta.

Um aviso importante: esse efeito de neve, usa bastante o processador!!!, com 5 abas dele abertas no firefox, ele estava usando 70% do meu processador(turion 64 – 2Ghz), então é melhor, colocar esse efeito, só na pagina inicial de seu site, para que ele não apareça em todas as paginas.

Se alguem quizer um outro script que não usa imagem(irá aparecer pontos) pode pedir que eu disponibilizo.

Update: olhando as origens das visitas achei no sitehttp://www.agitonoite.com/index.php algo muito interessante, ao invez de usar a imagem de neve, colocaram um gif de fogos de artificios, ficou muito legal.

Fica ai a ideia pra quem quizer usar esse efeito agora depois do natal =D

Tornar o texto de um radio/checkbox clicavel

noreply@blogger.com (Dj Autentico) — Sun, 6 Jan 2013 16:37:00 -0800

A tag <label> serve para criar um relacionamento entre o texto (rótulo descritivo) e o campo. Essa tag é muito usada para tornar o site acessivel a leitores de tela(para deficientes visuais).

Mas ela também faz com que ao ser clicado no texto o campo receba o foco(o cursor), com isso podemos tornar o texto de um checkbox clicavel.

Para usa-lo, é só adicionar um for=”nomedocampo” no label, e o nomedocampo deve ser definido no id do input, lembrando que o id deve ser unico em todo o formulario.

Aqui um codigo de exemplo:

[code="html"]

[/code]

Exemplo, clique nos textos:

Legal né ?, e pode ser usado em qualquer formulário, e com certeza os usuarios iram agradecer já que fica bem mais facil de se clicar, só é preciso que os usuarios saibam dessa funcionalidade

Tabela de cores em html

noreply@blogger.com (Dj Autentico) — Sun, 6 Jan 2013 16:11:00 -0800

Cor	Código Java	Código HTML
Snow	255 250 250	#FFFAFA
GhostWhite	248 248 255	#F8F8FF
WhiteSmoke	245 245 245	#F5F5F5
Gainsboro	220 220 220	#DCDCDC
FloralWhite	255 250 240	#FFFAF0
OldLace	253 245 230	#FDF5E6
Linen	250 240 230	#FAF0E6
AntiqueWhite	250 235 215	#FAEBD7
PapayaWhip	255 239 213	#FFEFD5
BlanchedAlmond	255 235 205	#FFEBCD
Bisque	255 228 196	#FFE4C4
PeachPuff	255 218 185	#FFDAB9
NavajoWhite	255 222 173	#FFDEAD
Moccasin	255 228 181	#FFE4B5
Cornsilk	255 248 220	#FFF8DC
Ivory	255 255 240	#FFFFF0
LemonChiffon	255 250 205	#FFFACD
Seashell	255 245 238	#FFF5EE
Honeydew	240 255 240	#F0FFF0
MintCream	245 255 250	#F5FFFA
Azure	240 255 255	#F0FFFF
AliceBlue	240 248 255	#F0F8FF
lavender	230 230 250	#E6E6FA
LavenderBlush	255 240 245	#FFF0F5
MistyRose	255 228 225	#FFE4E1
White	255 255 255	#FFFFFF
Black	0 0 0	#000000
DarkSlateGray	47 79 79	#2F4F4F
DimGrey	105 105 105	#696969
SlateGrey	112 128 144	#708090
LightSlateGray	119 136 153	#778899
Grey	190 190 190	#BEBEBE
LightGray	211 211 211	#D3D3D3
MidnightBlue	25 25 112	#191970
NavyBlue	0 0 128	#000080
CornflowerBlue	100 149 237	#6495ED
DarkSlateBlue	72 61 139	#483D8B
SlateBlue	106 90 205	#6A5ACD
MediumSlateBlue	123 104 238	#7B68EE
LightSlateBlue	132 112 255	#8470FF
MediumBlue	0 0 205	#0000CD
RoyalBlue	65 105 225	#4169E1
Blue	0 0 255	#0000FF

Cor	Código Java	Código HTML
DodgerBlue	30 144 255	#1E90FF
DeepSkyBlue	0 191 255	#00BFFF
SkyBlue	135 206 235	#87CEEB
LightSkyBlue	135 206 250	#87CEFA
SteelBlue	70 130 180	#4682B4
LightSteelBlue	176 196 222	#B0C4DE
LightBlue	173 216 230	#ADD8E6
PowderBlue	176 224 230	#B0E0E6
PaleTurquoise	175 238 238	#AFEEEE
DarkTurquoise	0 206 209	#00CED1
MediumTurquoise	72 209 204	#48D1CC
Turquoise	64 224 208	#40E0D0
Cyan	0 255 255	#00FFFF
LightCyan	224 255 255	#E0FFFF
CadetBlue	95 158 160	#5F9EA0
MediumAquamarine	102 205 170	#66CDAA
Aquamarine	127 255 212	#7FFFD4
DarkGreen	0 100 0	#006400
DarkOliveGreen	85 107 47	#556B2F
DarkSeaGreen	143 188 143	#8FBC8F
SeaGreen	46 139 87	#2E8B57
MediumSeaGreen	60 179 113	#3CB371
LightSeaGreen	32 178 170	#20B2AA
PaleGreen	152 251 152	#98FB98
SpringGreen	0 255 127	#00FF7F
LawnGreen	124 252 0	#7CFC00
Green	0 255 0	#00FF00
Chartreuse	127 255 0	#7FFF00
MedSpringGreen	0 250 154	#00FA9A
GreenYellow	173 255 47	#ADFF2F
LimeGreen	50 205 50	#32CD32
YellowGreen	154 205 50	#9ACD32
ForestGreen	34 139 34	#228B22
OliveDrab	107 142 35	#6B8E23
DarkKhaki	189 183 107	#BDB76B
PaleGoldenrod	238 232 170	#EEE8AA
LtGoldenrodYello	250 250 210	#FAFAD2
LightYellow	255 255 224	#FFFFE0
Yellow	255 255 0	#FFFF00
Gold	255 215 0	#FFD700
LightGoldenrod	238 221 130	#EEDD82
goldenrod	218 165 32	#DAA520
DarkGoldenrod	184 134 11	#B8860B

Cor	Código Java	Código HTML
RosyBrown	188 143 143	#BC8F8F
IndianRed	205 92 92	#CD5C5C
SaddleBrown	139 69 19	#8B4513
Sienna	160 82 45	#A0522D
Peru	205 133 63	#CD853F
Burlywood	222 184 135	#DEB887
Beige	245 245 220	#F5F5DC
Wheat	245 222 179	#F5DEB3
SandyBrown	244 164 96	#F4A460
Tan	210 180 140	#D2B48C
Chocolate	210 105 30	#D2691E
Firebrick	178 34 34	#B22222
Brown	165 42 42	#A52A2A
DarkSalmon	233 150 122	#E9967A
Salmon	250 128 114	#FA8072
LightSalmon	255 160 122	#FFA07A
Orange	255 165 0	#FFA500
DarkOrange	255 140 0	#FF8C00
Coral	255 127 80	#FF7F50
LightCoral	240 128 128	#F08080
Tomato	255 99 71	#FF6347
OrangeRed	255 69 0	#FF4500
Red	255 0 0	#FF0000
HotPink	255 105 180	#FF69B4
DeepPink	255 20 147	#FF1493
Pink	255 192 203	#FFC0CB
LightPink	255 182 193	#FFB6C1
PaleVioletRed	219 112 147	#DB7093
Maroon	176 48 96	#B03060
MediumVioletRed	199 21 133	#C71585
VioletRed	208 32 144	#D02090
Magenta	255 0 255	#FF00FF
Violet	238 130 238	#EE82EE
Plum	221 160 221	#DDA0DD
Orchid	218 112 214	#DA70D6
MediumOrchid	186 85 211	#BA55D3
DarkOrchid	153 50 204	#9932CC
DarkViolet	148 0 211	#9400D3
BlueViolet	138 43 226	#8A2BE2
Purple	160 32 240	#A020F0
MediumPurple	147 112 219	#9370DB
Thistle	216 191 216	#D8BFD8
Snow1	255 250 250	#FFFAFA

Snow2	238 233 233	#EEE9E9
Snow3	205 201 201	#CDC9C9
Snow4	139 137 137	#8B8989
Seashell1	255 245 238	#FFF5EE
Seashell2	238 229 222	#EEE5DE
Seashell3	205 197 191	#CDC5BF
Seashell4	139 134 130	#8B8682
AntiqueWhite1	255 239 219	#FFEFDB
AntiqueWhite2	238 223 204	#EEDFCC
AntiqueWhite3	205 192 176	#CDC0B0
AntiqueWhite4	139 131 120	#8B8378
Bisque1	255 228 196	#FFE4C4
Bisque2	238 213 183	#EED5B7
Bisque3	205 183 158	#CDB79E
Bisque4	139 125 107	#8B7D6B
PeachPuff1	255 218 185	#FFDAB9
PeachPuff2	238 203 173	#EECBAD
PeachPuff3	205 175 149	#CDAF95
PeachPuff4	139 119 101	#8B7765
NavajoWhite1	255 222 173	#FFDEAD
NavajoWhite2	238 207 161	#EECFA1
NavajoWhite3	205 179 139	#CDB38B
NavajoWhite4	139 121 94	#8B795E
LemonChiffon1	255 250 205	#FFFACD
LemonChiffon2	238 233 191	#EEE9BF
LemonChiffon3	205 201 165	#CDC9A5
LemonChiffon4	139 137 112	#8B8970
Cornsilk1	255 248 220	#FFF8DC
Cornsilk2	238 232 205	#EEE8CD
Cornsilk3	205 200 177	#CDC8B1
Cornsilk4	139 136 120	#8B8878
Ivory1	255 255 240	#FFFFF0
Ivory2	238 238 224	#EEEEE0
Ivory3	205 205 193	#CDCDC1
Ivory4	139 139 131	#8B8B83
Honeydew1	240 255 240	#F0FFF0
Honeydew2	224 238 224	#E0EEE0
Honeydew3	193 205 193	#C1CDC1
Honeydew4	131 139 131	#838B83
LavenderBlush1	255 240 245	#FFF0F5
LavenderBlush2	238 224 229	#EEE0E5
LavenderBlush3	205 193 197	#CDC1C5
LavenderBlush4	139 131 134	#8B8386

Snow2	238 233 233	#EEE9E9
Snow3	205 201 201	#CDC9C9
Snow4	139 137 137	#8B8989
Seashell1	255 245 238	#FFF5EE
Seashell2	238 229 222	#EEE5DE
Seashell3	205 197 191	#CDC5BF
Seashell4	139 134 130	#8B8682
AntiqueWhite1	255 239 219	#FFEFDB
AntiqueWhite2	238 223 204	#EEDFCC
AntiqueWhite3	205 192 176	#CDC0B0
AntiqueWhite4	139 131 120	#8B8378
Bisque1	255 228 196	#FFE4C4
Bisque2	238 213 183	#EED5B7
Bisque3	205 183 158	#CDB79E
Bisque4	139 125 107	#8B7D6B
PeachPuff1	255 218 185	#FFDAB9
PeachPuff2	238 203 173	#EECBAD
PeachPuff3	205 175 149	#CDAF95
PeachPuff4	139 119 101	#8B7765
NavajoWhite1	255 222 173	#FFDEAD
NavajoWhite2	238 207 161	#EECFA1
NavajoWhite3	205 179 139	#CDB38B
NavajoWhite4	139 121 94	#8B795E
LemonChiffon1	255 250 205	#FFFACD
LemonChiffon2	238 233 191	#EEE9BF
LemonChiffon3	205 201 165	#CDC9A5
LemonChiffon4	139 137 112	#8B8970
Cornsilk1	255 248 220	#FFF8DC
Cornsilk2	238 232 205	#EEE8CD
Cornsilk3	205 200 177	#CDC8B1
Cornsilk4	139 136 120	#8B8878
Ivory1	255 255 240	#FFFFF0
Ivory2	238 238 224	#EEEEE0
Ivory3	205 205 193	#CDCDC1
Ivory4	139 139 131	#8B8B83
Honeydew1	240 255 240	#F0FFF0
Honeydew2	224 238 224	#E0EEE0
Honeydew3	193 205 193	#C1CDC1
Honeydew4	131 139 131	#838B83
LavenderBlush1	255 240 245	#FFF0F5
LavenderBlush2	238 224 229	#EEE0E5
LavenderBlush3	205 193 197	#CDC1C5
LavenderBlush4	139 131 134	#8B8386

SlateGray4	108 123 139	#6C7B8B
LightSteelBlue1	202 225 255	#CAE1FF
LightSteelBlue2	188 210 238	#BCD2EE
LightSteelBlue3	162 181 205	#A2B5CD
LightSteelBlue4	110 123 139	#6E7B8B
LightBlue1	191 239 255	#BFEFFF
LightBlue2	178 223 238	#B2DFEE
LightBlue3	154 192 205	#9AC0CD
LightBlue4	104 131 139	#68838B
LightCyan1	224 255 255	#E0FFFF
LightCyan2	209 238 238	#D1EEEE
LightCyan3	180 205 205	#B4CDCD
LightCyan4	122 139 139	#7A8B8B
PaleTurquoise1	187 255 255	#BBFFFF
PaleTurquoise2	174 238 238	#AEEEEE
PaleTurquoise3	150 205 205	#96CDCD
PaleTurquoise4	102 139 139	#668B8B
CadetBlue1	152 245 255	#98F5FF
CadetBlue2	142 229 238	#8EE5EE
CadetBlue3	122 197 205	#7AC5CD
CadetBlue4	83 134 139	#53868B
Turquoise1	0 245 255	#00F5FF
Turquoise2	0 229 238	#00E5EE
Turquoise3	0 197 205	#00C5CD
Turquoise4	0 134 139	#00868B
Cyan1	0 255 255	#00FFFF
Cyan2	0 238 238	#00EEEE
Cyan3	0 205 205	#00CDCD
Cyan4	0 139 139	#008B8B
DarkSlateGray1	151 255 255	#97FFFF
DarkSlateGray2	141 238 238	#8DEEEE
DarkSlateGray3	121 205 205	#79CDCD
DarkSlateGray4	82 139 139	#528B8B
Aquamarine1	127 255 212	#7FFFD4
Aquamarine2	118 238 198	#76EEC6
Aquamarine3	102 205 170	#66CDAA
Aquamarine4	69 139 116	#458B74
DarkSeaGreen1	193 255 193	#C1FFC1
DarkSeaGreen2	180 238 180	#B4EEB4
DarkSeaGreen3	155 205 155	#9BCD9B
DarkSeaGreen4	105 139 105	#698B69
SeaGreen1	84 255 159	#54FF9F
SeaGreen2	78 238 148	#4EEE94

MistyRose1	255 228 225	#FFE4E1
MistyRose2	238 213 210	#EED5D2
MistyRose3	205 183 181	#CDB7B5
MistyRose4	139 125 123	#8B7D7B
Azure1	240 255 255	#F0FFFF
Azure2	224 238 238	#E0EEEE
Azure3	193 205 205	#C1CDCD
Azure4	131 139 139	#838B8B
SlateBlue1	131 111 255	#836FFF
SlateBlue2	122 103 238	#7A67EE
SlateBlue3	105 89 205	#6959CD
SlateBlue4	71 60 139	#473C8B
RoyalBlue1	72 118 255	#4876FF
RoyalBlue2	67 110 238	#436EEE
RoyalBlue3	58 95 205	#3A5FCD
RoyalBlue4	39 64 139	#27408B
Blue1	0 0 255	#0000FF
Blue2	0 0 238	#0000EE
Blue3	0 0 205	#0000CD
Blue4	0 0 139	#00008B
DodgerBlue1	30 144 255	#1E90FF
DodgerBlue2	28 134 238	#1C86EE
DodgerBlue3	24 116 205	#1874CD
DodgerBlue4	16 78 139	#104E8B
SteelBlue1	99 184 255	#63B8FF
SteelBlue2	92 172 238	#5CACEE
SteelBlue3	79 148 205	#4F94CD
SteelBlue4	54 100 139	#36648B
DeepSkyBlue1	0 191 255	#00BFFF
DeepSkyBlue2	0 178 238	#00B2EE
DeepSkyBlue3	0 154 205	#009ACD
DeepSkyBlue4	0 104 139	#00688B
SkyBlue1	135 206 255	#87CEFF
SkyBlue2	126 192 238	#7EC0EE
SkyBlue3	108 166 205	#6CA6CD
SkyBlue4	74 112 139	#4A708B
LightSkyBlue1	176 226 255	#B0E2FF
LightSkyBlue2	164 211 238	#A4D3EE
LightSkyBlue3	141 182 205	#8DB6CD
LightSkyBlue4	96 123 139	#607B8B
SlateGray1	198 226 255	#C6E2FF
SlateGray2	185 211 238	#B9D3EE
SlateGray3	159 182 205	#9FB6CD

Firebrick4	139 26 26	#8B1A1A
Brown1	255 64 64	#FF4040
Brown2	238 59 59	#EE3B3B
Brown3	205 51 51	#CD3333
Brown4	139 35 35	#8B2323
Salmon1	255 140 105	#FF8C69
Salmon2	238 130 98	#EE8262
Salmon3	205 112 84	#CD7054
Salmon4	139 76 57	#8B4C39
LightSalmon1	255 160 122	#FFA07A
LightSalmon2	238 149 114	#EE9572
LightSalmon3	205 129 98	#CD8162
LightSalmon4	139 87 66	#8B5742
Orange1	255 165 0	#FFA500
Orange2	238 154 0	#EE9A00
Orange3	205 133 0	#CD8500
Orange4	139 90 0	#8B5A00
DarkOrange1	255 127 0	#FF7F00
DarkOrange2	238 118 0	#EE7600
DarkOrange3	205 102 0	#CD6600
DarkOrange4	139 69 0	#8B4500
Coral1	255 114 86	#FF7256
Coral2	238 106 80	#EE6A50
Coral3	205 91 69	#CD5B45
Coral4	139 62 47	#8B3E2F
Tomato1	255 99 71	#FF6347
Tomato2	238 92 66	#EE5C42
Tomato3	205 79 57	#CD4F39
Tomato4	139 54 38	#8B3626
OrangeRed1	255 69 0	#FF4500
OrangeRed2	238 64 0	#EE4000
OrangeRed3	205 55 0	#CD3700
OrangeRed4	139 37 0	#8B2500
Red1	255 0 0	#FF0000
Red2	238 0 0	#EE0000
Red3	205 0 0	#CD0000
Red4	139 0 0	#8B0000
DeepPink1	255 20 147	#FF1493
DeepPink2	238 18 137	#EE1289
DeepPink3	205 16 118	#CD1076
DeepPink4	139 10 80	#8B0A50
HotPink1	255 110 180	#FF6EB4
HotPink2	238 106 167	#EE6AA7
Gold2	238 201 0	#EEC900

HotPink3	205 96 144	#CD6090
HotPink4	139 58 98	#8B3A62
Pink1	255 181 197	#FFB5C5
Pink2	238 169 184	#EEA9B8
Pink3	205 145 158	#CD919E
Pink4	139 99 108	#8B636C
LightPink1	255 174 185	#FFAEB9
LightPink2	238 162 173	#EEA2AD
LightPink3	205 140 149	#CD8C95
LightPink4	139 95 101	#8B5F65
PaleVioletRed1	255 130 171	#FF82AB
PaleVioletRed2	238 121 159	#EE799F
PaleVioletRed3	205 104 137	#CD6889
PaleVioletRed4	139 71 93	#8B475D
Maroon1	255 52 179	#FF34B3
Maroon2	238 48 167	#EE30A7
Maroon3	205 41 144	#CD2990
Maroon4	139 28 98	#8B1C62
VioletRed1	255 62 150	#FF3E96
VioletRed2	238 58 140	#EE3A8C
VioletRed3	205 50 120	#CD3278
VioletRed4	139 34 82	#8B2252
Magenta1	255 0 255	#FF00FF
Magenta2	238 0 238	#EE00EE
Magenta3	205 0 205	#CD00CD
Magenta4	139 0 139	#8B008B
Orchid1	255 131 250	#FF83FA
Orchid2	238 122 233	#EE7AE9
Orchid3	205 105 201	#CD69C9
Orchid4	139 71 137	#8B4789
Plum1	255 187 255	#FFBBFF
Plum2	238 174 238	#EEAEEE
Plum3	205 150 205	#CD96CD
Plum4	139 102 139	#8B668B
MediumOrchid1	224 102 255	#E066FF
MediumOrchid2	209 95 238	#D15FEE
MediumOrchid3	180 82 205	#B452CD
MediumOrchid4	122 55 139	#7A378B
DarkOrchid1	191 62 255	#BF3EFF
DarkOrchid2	178 58 238	#B23AEE
DarkOrchid3	154 50 205	#9A32CD
DarkOrchid4	104 34 139	#68228B
Purple1	155 48 255	#9B30FF
Purple2	145 44 238	#912CEE

SeaGreen3	67 205 128	#43CD80
SeaGreen4	46 139 87	#2E8B57
PaleGreen1	154 255 154	#9AFF9A
PaleGreen2	144 238 144	#90EE90
PaleGreen3	124 205 124	#7CCD7C
PaleGreen4	84 139 84	#548B54
SpringGreen1	0 255 127	#00FF7F
SpringGreen2	0 238 118	#00EE76
SpringGreen3	0 205 102	#00CD66
SpringGreen4	0 139 69	#008B45
Green1	0 255 0	#00FF00
Green2	0 238 0	#00EE00
Green3	0 205 0	#00CD00
Green4	0 139 0	#008B00
Chartreuse1	127 255 0	#7FFF00
Chartreuse2	118 238 0	#76EE00
Chartreuse3	102 205 0	#66CD00
Chartreuse4	69 139 0	#458B00
OliveDrab1	192 255 62	#C0FF3E
OliveDrab2	179 238 58	#B3EE3A
OliveDrab3	154 205 50	#9ACD32
OliveDrab4	105 139 34	#698B22
DarkOliveGreen1	202 255 112	#CAFF70
DarkOliveGreen2	188 238 104	#BCEE68
DarkOliveGreen3	162 205 90	#A2CD5A
DarkOliveGreen4	110 139 61	#6E8B3D
Khaki1	255 246 143	#FFF68F
Khaki2	238 230 133	#EEE685
Khaki3	205 198 115	#CDC673
Khaki4	139 134 78	#8B864E
LightGoldenrod1	255 236 139	#FFEC8B
LightGoldenrod2	238 220 130	#EEDC82
LightGoldenrod3	205 190 112	#CDBE70
LightGoldenrod4	139 129 76	#8B814C
LightYellow1	255 255 224	#FFFFE0
LightYellow2	238 238 209	#EEEED1
LightYellow3	205 205 180	#CDCDB4
LightYellow4	139 139 122	#8B8B7A
Yellow1	255 255 0	#FFFF00
Yellow2	238 238 0	#EEEE00
Yellow3	205 205 0	#CDCD00
Yellow4	139 139 0	#8B8B00
Gold1	255 215 0	#FFD700
Gold3	205 173 0	#CDAD00

Gold4	139 117 0	#8B7500
Goldenrod1	255 193 37	#FFC125
Goldenrod2	238 180 34	#EEB422
Goldenrod3	205 155 29	#CD9B1D
Goldenrod4	139 105 20	#8B6914
DarkGoldenrod1	255 185 15	#FFB90F
DarkGoldenrod2	238 173 14	#EEAD0E
DarkGoldenrod3	205 149 12	#CD950C
DarkGoldenrod4	139 101 8	#8B658B
RosyBrown1	255 193 193	#FFC1C1
RosyBrown2	238 180 180	#EEB4B4
RosyBrown3	205 155 155	#CD9B9B
RosyBrown4	139 105 105	#8B6969
IndianRed1	255 106 106	#FF6A6A
IndianRed2	238 99 99	#EE6363
IndianRed3	205 85 85	#CD5555
IndianRed4	139 58 58	#8B3A3A
Sienna1	255 130 71	#FF8247
Sienna2	238 121 66	#EE7942
Sienna3	205 104 57	#CD6839
Sienna4	139 71 38	#8B4726
Burlywood1	255 211 155	#FFD39B
Burlywood2	238 197 145	#EEC591
Burlywood3	205 170 125	#CDAA7D
Burlywood4	139 115 85	#8B7355
Wheat1	255 231 186	#FFE7BA
Wheat2	238 216 174	#EED8AE
Wheat3	205 186 150	#CDBA96
Wheat4	139 126 102	#8B7E66
Tan1	255 165 79	#FFA54F

Purple3	125 38 205	#7D26CD
Purple4	85 26 139	#551A8B
MediumPurple1	171 130 255	#AB82FF
MediumPurple2	159 121 238	#9F79EE
MediumPurple3	137 104 205	#8968CD
MediumPurple4	93 71 139	#5D478B
Thistle1	255 225 255	#FFE1FF
Thistle2	238 210 238	#EED2EE
Thistle3	205 181 205	#CDB5CD
Thistle4	139 123 139	#8B7B8B
grey11	28 28 28	#1C1C1C
grey21	54 54 54	#363636
grey31	79 79 79	#4F4F4F
grey41	105 105 105	#696969
grey51	130 130 130	#828282
grey61	156 156 156	#9C9C9C
grey71	181 181 181	#B5B5B5
gray81	207 207 207	#CFCFCF
gray91	232 232 232	#E8E8E8
DarkGrey	169 169 169	#A9A9A9
DarkBlue	0 0 139	#00008B
DarkCyan	0 139 139	#008B8B
DarkMagenta	139 0 139	#8B008B
DarkRed	139 0 0	#8B0000
LightGreen	144 238 144	#90EE90
Chocolate3	205 102 29	#CD661D
Chocolate4	139 69 19	#8B4513
Firebrick1	255 48 48	#FF3030
Firebrick2	238 44 44	#EE2C2C
Firebrick3	205 38 38	#CD2626

Gold4	139 117 0	#8B7500
Goldenrod1	255 193 37	#FFC125
Goldenrod2	238 180 34	#EEB422
Goldenrod3	205 155 29	#CD9B1D
Goldenrod4	139 105 20	#8B6914
DarkGoldenrod1	255 185 15	#FFB90F
DarkGoldenrod2	238 173 14	#EEAD0E
DarkGoldenrod3	205 149 12	#CD950C
DarkGoldenrod4	139 101 8	#8B658B
RosyBrown1	255 193 193	#FFC1C1
RosyBrown2	238 180 180	#EEB4B4
RosyBrown3	205 155 155	#CD9B9B
RosyBrown4	139 105 105	#8B6969
IndianRed1	255 106 106	#FF6A6A
IndianRed2	238 99 99	#EE6363
IndianRed3	205 85 85	#CD5555
IndianRed4	139 58 58	#8B3A3A
Sienna1	255 130 71	#FF8247
Sienna2	238 121 66	#EE7942
Sienna3	205 104 57	#CD6839
Sienna4	139 71 38	#8B4726
Burlywood1	255 211 155	#FFD39B
Burlywood2	238 197 145	#EEC591
Burlywood3	205 170 125	#CDAA7D
Burlywood4	139 115 85	#8B7355
Tan2	238 154 73	#EE9A49
Tan3	205 133 63	#CD853F
Tan4	139 90 43	#8B5A2B
Chocolate1	255 127 36	#FF7F24
Chocolate2	238 118 33	#EE7621

Listagem de comandos do HTML

noreply@blogger.com (Dj Autentico) — Sun, 6 Jan 2013 16:07:00 -0800

Aqui no blog "Aprendeu Aqui" postamos uma lista com quase todos os comandos HTMLs existentes elas estao divididas por funcionalidade para facilitar :

As TAGs Principais

<html> </html> tags de inicio e fim de um doc html;
<head> </head> Identificadores do cabeçalho ;
<meta> Meta informação (reside entre os tags <head> </head>;
<meta http-equiv=”refresh” content=”x”> atualiza a pag corrente a cada X segundos;
<meta http-equiv=”refresh” content =”x url=proxima.htm”> atualiza a pag corrente a cada X segundos e vai para uma próxima página ;
<meta name=”palavras chave” content=”x”>comunica as palavras chaves e envia para os mecanismos de busca;
<meta name=”descrição” content=”x”> comunica a descrição para os mecanismos de busca;
<title> </title> Identifica o título da página ;
<body> </body> inicia e finaliza o corpo do documento html;
<body background =”imagem.gif” > coloca um fundo em uma pagina;
<body bgcolor=”#cccccc”> coloca uma cor de fundo na página;

<body text=”#000000″> especifica a cor padrão de um texto ;
<body link=”#000000″> especifica a cor padrão de um link;
<body vlink=”#000000″> especifica a cor padrão de um link visitado;
<body alink=”#000000″> especifica a cor padrão de um link ativo;
<body leftmargin=”0″ topmargin=”10″ rightmargin=”10″> especifica distância da margem esquerda, direita e topo da página ;
<body marginwidth=”0″ marginheight=”0″ > coloca as margens esquerda e superior em 0 no Netscape 4.0 + ;
<body onload=”x()”> especifica a iniciação de um evento do script quando o doc html é carregado

As Tags de fontes e tipos

<basefont size=”x”> Estabelece um tamanho padrão de fonte de 1-7 onde size o padrão é 3;

<h></h> Cabeçalho de 1-6 ( em outras palavras <h1>texto</h1> ou <h2>texto</h2>;

<b> </b> Negrita um texto;

<strong></strong> Similar ao negrito;

<i></i> Itálico;

<u></u> Sublinhado;

<strike></strike> texto tachado;

<sub></sub> texto subscrito;

<sup></sup> texto sobrescrito;

<tt></tt> Texto teletipo (largura fixa);

<small></small> texto menor;

<big></big> texto maior;

<font size=”x”> tamanho da font onde x tamanho;

<font face=”nome da fonte”> Especifica o nome da fonte, exemplo, verdana, arial etc…;

<font color=”#000000″> Atribui cor a uma fonte.

As Tags de Layout

<blockquote></blockquote> desloca o bloco de texto;

<br clear=left/right/all> insere qubra de linha que limpa;

<center></center> centraliza objetos;

<div> Divide página em seções lógicas;

<div align=left/center/right> Alinha os dados dentro de uma seção div;

<div class=classname> atribui uma class a uma seção div;

<hr> Insere uma régua horizontal ao longo da página

<hr size=”x”> especifica o tamanho de espessura horizontal da régua em px;

<hr width=”x”> especifica o tamanho da largura da régua em px;

<hr noshade> especifica uma régua em preto;

<nobr> evita quebra de linha;

<p> Cria parágrafos;

<p align=left/center/right> alinha texto do paragrafo;

As Tags de Link

<a href=”URL”>Teste</a> Faz um link de texto ou imagem com uma url;

<a href=”URL” target=”_blank”>Teste</a> Faz um link de texto ou imagem com uma url dentro de uma nova janela do navegador totalmente nova;

<a href=”URL” target=”nome_frame”>Teste</a> Faz um link de texto ou imagem com uma url dentro de um frame;

<a href=”URL” target=”_self”>Teste</a> Faz um link de texto ou imagem com uma url dentro do frame que o link foi acionado ou seja, nele mesmo;

<a href=”URL” target=”_parent”>Teste</a> Faz um link de texto ou imagem com uma url dentro de um FRAMESET gerador do documento;

<a href=”URL” target=”_top”>Teste</a> Faz um link eliminando o frameset dentro da mesma janela do browser.

As Tags de Imagens

<IMG src=”URL”> Apresenta uma imagem;

<IMG src=”URL” align=top/middle/bottom> Alinha a imagem em relação a base do texto;

<IMG src=”URL”align=left/right> Alinha imagem em relação a página ou frame;

<IMG src=”URL” alt=”texto”> mostra descritivo;

<IMG src=”URL” width=”X” height=”Y”> especifica largura e altura;

<IMG src=”URL” border=”0″> retira as bordas da imagem;

<IMG src=”URL” hspace=”X” vspace=”Y”> especifica espaçamentos vertical e horizontal;

<IMG LOWsrc=”URL” src=”URL”> especifica o carregamento inicial de uma imagem de baixa resolução antes da imagem verdadeira seja carregada;

<IMG NAME=”X” src=”URL”> Nomeia a imagem para uso com JavaScript.

As Tags de Listas

<DL> </DL> Inicia / termina um título de definição;

<DD> </DD> Inicia / termina definição;

<DT> </DT> Inicia / termina termo de definição;

<OL> </OL> Inicia / termina lista ordenada;

<OL compact></OL> Cria uma lista ordenada compactada;

<OL TYPE=A/a/I/i/1></OL> Cria uma lista ordenada, especifica por tipo(A para letras maiúsculas ,a para minúsculas, I para numerais romanos, i para numerais romanos pequenos e1 para números padrão;

<LI></LI> Item de lista padrão;

<LI TYPE=A/a/I/i/1>></LI> controla o formato de uma lista;

<UL> </UL> inicia /termina Lista não ordenada;

<UL COMPACT></UL> cria lista não ordenada compactada;

<UL TYPE=DISC/CIRCLE/SQUARE> Especifica o tipo do bullet.

As Tags de Tabela

<table></table> Inicia e finaliza uma tabela;

<table border=”x”> define a borda de uma tabela;

<table cellspacing=”x”> define o espaçamento entre celulas;

<table cellpadding=”x”> defeina espessura de bordas;

<table width=”x”> define o tamanho da tabela em pixels;

<table width=”%”> define o tamanho da tabela em porcentagem;

<tr></tr> abre uma linha fecha uma linha;

<td></td> abre uma celula fecha uma celula;

<tr align=left/center/right valign=”top/middle/bottom > define o alinhamento horizontal e vertical da linha;

<TD NOWRAP> evita quebra de linha dentro de uma celula;

<TD COLSPAN=”x”> especifica o numero de colunas;

<TD ROWSPAN=”x”> especifica o número de linhas;

<TD width=”x”> especifica o tamanho da celula ;

<TH></TH> define o cabeçalho da tabela;

Tags de Frames

<frameset></frameset> Define os elementos do frame;

<frameset cols=”x,x”> Define as colunas dos frames em px ou %;

<frameset rows=”x,x”> Define as linhas dos frames em px ou %;

<frameset border=”x”> define a borda 1,2,3 quando valor “0″ desligada;

<frameset framespacing=”1/0″> define espaçamento entre frames;

<frame src=”url”> especifica a url a ser carregada;

<frame name=”name”> especifica nome do frame;

<frame noresize> não permite que o frame seja redimensionado;

<frame scrolling=”auto” > determina se vai ter barra de rolagem ou não

Finalmente as Tags de Formulários

<form action =”url” Method=”get/post> Inicia term form e define parâmetros;

</form>

<input type=”text/password/checkbox/radio/submit/reset/image”> Especifica campos de entrada. senha, caixa de marcação, rádio, envio, limpa imagem;

<input type=”HIDDEN”> Campo oculto;

<input name=”nomedocampo”> define o nome de um campo no form;

<input checked> Marca de seleção ativada;

<input size=x> tamanho do campo;

<option> Cria opções podem ser selecionadas;

<option selected=”selected”> especifica uma opção selecionada;

<option value=”value”> especifica um valor ;

<select> </select> cria um menu no form ;

<select name=”name”> </select> Identifica os dados reunidos no menu;

<textarea </textarea> Cria uma caixa de entrada

<textarea wrap></textarea> especifica o retorno automático de um texto.