Total de visualizações de página

2 de abr. de 2012

dicas em html

Creditos :  td Para Orkut e MSN

TEXTO CENTRALIZADO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div align="center"> SEU TEXTO AQUI <*/div>

Seu texto ficará centralizado no seu post. Use <*center> como tag rápido.
TEXTO À DIREITA.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div align="right"> SEU TEXTO AQUI <*/div>

Seu texto ficará à direita do seu post.
NEGRITO, SUBLINHADO, ITÁLICO E TACHADO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*b> SEU TEXTO EM NEGRITO <*/b>
<*u> SEU TEXTO SUBLINHADO <*/u>
<*i> SEU TEXTO EM ITÁLICO <*/i>
<*s> SEU TEXTO TACHADO <*/s>

Seu texto ficará negrito, sublinhado, itálico ou tachado de acordo com as tags b, u, i, s.
TEXTO QUE PISCA.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div style=text-decoration:blink> SEU TEXTO AQUI <*/div>

Seu texto ficará piscando. (O codigo não funciona no navegador Google Chrome)
TEXTO EM EXPOENTE E ÍNDICE.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*sup> SEU TEXTO AQUI (EXPOENTE) <*/sup>
<*sub> SEU TEXTO AQUI (ÍNDICE) <*/sub>

Seu texto ficará em estilo expoente se usar as tags <*sup> ou ficará em estilo índice se usar as tags <*sub>.
PULAR LINHAS.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*br> ou <*p>

Às vezes, quando postamos um código HTML, a gente tenta dar vários enter para poder "pular" de linha. Não importa o tanto que fazemos, o proprio codigo HTML impede isso. Então, quanto mais linhas quiser pular, só colocar essa tag quanta vezes quiser. É simples.
FONTE.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*face=NOME_DA_FONTE> SEU TEXTO AQUI <*/font>

Com este codigo você pode mudar a fonte do texto. Válido somente com fontes originais do windows.
COR.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*font color="CÓDIGO HTML DA COR"> SEU TEXTO AQUI <*/font>

Com este codigo você muda as cores do texto, lembrando que o mesmo só aceita codigos de cores em hexadecimal, você pode consultar o codigo de cada cor nesse site de tabelas de cores em html !
TAMANHO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*font size="TAMANHO"> SEU TEXTO AQUI <*/font>

Com este codigo você muda o tamanho do texto. Os tamanhos variam de 1 á 7.
DIMINUINDO TEXTO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*small> SEU TEXTO AQUI <*/small>

Usando essa tag fácil e rápida, seu texto ficará menor. Use quantas vezes quiser até diminuir ao tamanho desejado - lembrando sempre de fechar todas as tags.
AUMENTANDO TEXTO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*big> SEU TEXTO AQUI <*big>

Usando essa tag fácil e rápida, seu texto ficará maior. Use quantas vezes quiser até aumentar ao tamanho desejado - lembrando sempre de fechar todas as tags.
CITAÇÃO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*blockquote> SEU TEXTO AQUI <*/blockquote>

Blockquote é uma tag onde se cria margem em ambos os lados do seu texto. funciona quase como a ferramenta "Récuo" de programas como Microsoft Office Word.
CITAÇÃO 2.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*blockquote><*table cellspacing="5"><*tr valign="top" align="left"><*td width="6" bgcolor="COR_HTML"><*BR><*/td><*td width="500" valign="top" align="left"><*p> SEU_TEXTO_AQUI <*/span><*/p><*/td><*/tr><*/table><*/blockquote>

Blockquote é uma tag onde se cria margem em ambos os lados do seu texto. funciona quase como a ferramenta "Récuo" de programas como Microsoft Office Word. Coloque seu texto em SEU_TEXTO_AQUI e mude a cor da tag de citação em COR_HTML , que citamos no topico COR , logo ali em cima !
BARRA DE SEPARAÇÃO HORIZONTALㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*span style="font-size:11px"><*font color=#363636> <*hr size="TAMANHO" width="LARGURA_EM_PIXEL" align="center" color="COR_HTML">

Você pode mudar a cor (color), o alinhamento (align), o tamanho (size) e a largura (width). Na parte da cor, consulte o tópico de cores html; No alinhamento, você pode colocar right (direita), left (esquerda) ou center(central); Na largura, podes colocar o tamanho em porcentagem (100% é tamanho máximo) ou se quiser, tire o sinal de porcentagem (%) para definir largura em pixel; Na parte tamanho, você coloca o numero de pixel que quiser de tamanho.
FUNDO COLORIDO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*table bgcolor="COR HTML"> SEU TEXTO AQUI <*/table>

Seu fundo ficará colorido. Para quem não sabe, bgcolor é a cor do fundo.
BORDA E FUNDO COLORIDOS.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*table border="1" bgcolor="COR HTML"> SEU TEXTO AQUI <*/table>

Seu texto ficará com a borda e o fundo coloridos. Para quem não sabe, bgcolor é a cor do fundo. Você pode mudar também a espessura da borda que é 1 para um número maior.
BORDA NO TEXTO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*table border="1"> SEU TEXTO AQUI <*/table>

Seu texto ficará com uma borda. Se quiser, pode mudar o 1 para o tamanho que quiser de borda. Pode se usar o código para imagens, se quiser.
BORDA E FUNDO DE CORES DIFERENTES.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*table border="1" bgcolor="COR DA BORDA"><*td bgcolor="COR DO FUNDO"> SEU TEXTO AQUI <*/td><*/table>

Seu texto ficará com a borda de uma cor e o fundo de outra cor, de acordo como preferir. A parte table border="ESPESSURA_DA_BORDA" é a parte onde é a formatação da borda e na parte bgcolor="COR_DO_FUNDO" é a cor da borda. Na parte td color="COR_DE_FUNDO" é a parte da cor do fundo da caixa.
LETRA DE MÃO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*span style="font-family:FRENCH SCRIPT MT; font-size:30"> SEU TEXTO AQUI <*/span style>
TEXTO TRANSPARENTE.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*font color=#F0F6FF> SEU TEXTO AQUI <*/font>
ESTILO MAQUINA DE ESCREVER.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*tt> SEU TEXTO AQUI <*/tt>
LINHA HORIZONTAL.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*hr>

Use a tag acima para criar uma linha horizontal.
SOMBREAMENTO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div style="color: COR_DO_TEXTO; text-shadow: COR_DA_SOMBRA 1px 3px 2px;"> SEU TEXTO AQUI <*/div>

Os números 1px = A distância horizontal (X) entre o texto e a sombra, 2px - A distância vertical (Y) entre o texto e a sombra e 0px - Efeito blur (borrado). Você pode mudar a cor do texto onde está marcado, e a cor da sombra.
PALAVRA MÁGICA.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*span title="ESPEROU, HAHA"> PASSE O MOUSE E ESPERE <*/span>

Ao deixar o mouse parado no texto, revelará uma mensagem. Podes mudar a mensagem (title) e o texto onde as pessoas passarão o mouse.
TEXTO LADO A LADO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*table><*tr><*td> DIGITE O TEXTO 1 AQUI <*/td><*td> DIGITE O TEXTO 2 AQUI <*/td><*/tr><*/table>

Com esse código, você poderá colocar seus textos lado a lado, como páginas de livro. 
BORDAS VARIADAS.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

<*div style="border-width:TAMANHO_DA_BORDA; width: LARGURA; height: ALTURA; border-color: COR_DA_BORDA; border-style: ESTILO_DA_BORDA"> SEU_TEXTO <*/div>

Em TAMANHO_DA_BORDA mude o tamanho dela em pixels (1, 2, 3 etc). Em LARGURA e ALTURA coloque o respectivo valor de cada um deles em forma de pixels (200, 300, 400 etc). Em COR_DA_BORDA mude a cor dela. Em ESTILO_DA_BORDA mude o estilo dela de acordo com sua vontade. 
BARRA DE ROLAGEM.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*pre><*div style="border: 1px solid rgb(205, 211, 218); padding: 5px; overflow: auto; background-color: rgb(247, 248, 249);"> ESCREVA AQUI UM TEXTO LONGO <*/div><*/pre>

Escreva um texto longo (pode usar cores e fontes) para que apareça a barra de rolagem, e pode também conter imagens. Você pode mudar as cores da caixa. Para mudar, consulte a tabela de cores, e apenas substitua os valores rgb (como no exemplo 205, 211, 218 e 247, 248, 249). Os códigos dessas cores são JAVA, então pegue o Código Java da cor escolhida na tabela de cores e separe os valores por vígula. Podes definir o tamanho da borda em pixel, na parte border: 1px, e/ou colocar no lugar de solid, a palavra dashed para ficar pontilhada a borda. E podes também tirar a tag <*pre> se quiser tirar a barra para ficar somente um quadrado legalzinho. 
BARRA DE ROLAGEM VERTICAL.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div style="overflow:auto; color:#000000; width:350px; text-align:center; font-family:arial; font-size:20px; line-height:100%"> Seu texto aqui, seu texto aqui, seu texto aqui, seu texto aqui, seu texto aqui.

Explicando:
 #000000 = Cor do teu texto.
 350px = Largura da caixa com a barrinha de rolagem vertical.
 center = Como o texto ficará. Pode colocar "right", "center", "normal" ou "justify".
 arial = Nome da sua fonte dentro daquela caixa.
• 20px = Tamanho da sua fonte.
 100% = Espaço entre as linhas.
TEXTO JUSTIFICADO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div align="justify"> SEU TEXTO AQUI <*/div>

Seu texto ficará justificado no seu post. 
BORDA E FUNDO DE CORES DIFERENTES II ATUALIZADO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div style="border:xpx solid rgb(0, 0, 0);padding:xpx;width:xpx;background-color:rgb(0, 0, 0)"> SEU TEXTO <*/div>

Onde esta border:xpx basta alterar o x por um número maior, assim seu fundo terá uma borda. Onde está solid rgb(0, 0, 0) é qual será a cor da sua borda, você altera os 0 pelo código RGB da cor. Onde esta padding:1px é onde irá determinar como uma margem para o sua formatação, altere somente o número, quanto maior, maior a margem. Onde está width você irá trocar o x por um número qualquer, alterando o tamanho do quadro de formatação. E onde esta o (0, 0, 0) será a cor do seu fundo. Depois disso, é só escrever. 
DEIXANDO AS LETRAS/LINHAS PRÓXIMAS.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
<*div style="font-family:'Arial'; letter-spacing: -1px; line-height: 8px; color: #000000; width: 300px;"> Seu texto aqui <*/div>

Explicando:
 Arial: Nome da sua fonte.
 -1px: Distância entre as letras.
 8px: Distância entre as linhas.
 #000000: Cor HTML do seu texto.
 300px: Largura limite onde se encaixará o texto.
TEXTO CENTRALIZADO E JUSTIFICADO.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
 Código: <*blockquote><*div align="justify"> Seu texto aqui <*/div><*/blockquote>

Quanto mais <*blockquote>, mais estreito ele fica. 
TEXTO EM 3D.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ 
 Código: <*div style="color: rgb(0, 0, 0); font-family: verdana; font-size: 36px; letter-spacing: -2px; line-height: 0.9; margin: 5px 0pt 0pt; text-align: center; text-shadow: -0.06em 0pt red, 0.06em 0pt cyan; ">Texto<*/div>

Onde está verdana, substitua por qualquer outra fonte que tu queira. No 36, você mude por qualquer número, será o tamanho de sua fonte. O -2 deixe assim, só mude se quiser que o espaçamento de seu texto seja maior, ou menor. O center, é para o texto já ficar no centro, mas se quiser, poderá mudar para left, se quiser que fiquei ao lado esquerdo, ou right, para o direito. Não mude o resto.
 

BARRA DE ROLAGEM VERTICAL ATUALIZADA.ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ 
 Código: <*div style="overflow:auto; color:#000000; width:300px; height:100px; text-align:center; font-family:arial; font-size:12px; line-height:100%"> SEU TEXTO AQUI <*/div>

Em 350px você irá alterar a LARGURA da barra de rolagem, no caso, quanto texto ela irá suportar em cada linha, sendo pouco ou grande, basta variar os números. Onde está 100px você irá alterar a ALTURA. Onde está center, é onde você irá decidir qual será o alinhamento da sua barra de rolagem. Onde está arial é a fonte que você deseja na barra. Em 12px é o tamanho da fonte que você quer. Agora, basta digitar o texto e testar!

Nenhum comentário:

Postar um comentário