Criar um Site Grátis Fantástico

Partilhe esta Página

CÓDIGOS HTML ESQUERDA-DIREITA E VERTICAL
CÓDIGOS HTML ESQUERDA-DIREITA E VERTICAL

A

CÓDIGO PARA TRABALHOS EM HUMANIMANIA

<marquee></marquee>
Exemplo: <marquee>AQUI FICA O TEXO</marquee>


Os códigos mais comuns para a edição de textos e locação de figuras são os seguintes:
Obs.: Os códigos podem ser agrupados, para obter um feito composto pelas várias funções.

1. Fonte
Utilize esse código para alterar o estilo de fonte
<font face="times new roman">digite seu texto aqui</font>
Existem várias fontes: arial, courrier, times new roman, verdana, etc...

2. Tamanho da fonte
Utilize esse código para alterar o tamanho da fonte
<font size="-2>texto muito pequeno</font>
<font size="-1">texto pequeno</font>
Para manter a fonte no tamanho padrão não precisa digitar seu tamanho
<font size="+1">texto grande</font>
<font size="+2">texto bem grande</font>
<font size="+3">texto muito grande</font>

3. Cor da fonte
Utilize esse código para alterar a cor da fonte
<font color=ffffff>texto na cor branca</font>
<font color=000000>texto na cor preta</font>
<font color=ffff00>texto na cor amarela</font>
<font color=990000>texto na cor marrom</font>
<font color=cc00ff>texto na cor purpura</font>
<font color=ff9900>texto na cor laranja</font>
<font color=00ff00>texto na cor verde</font>
<font color=ff0000>texto na cor vermelha</font>
<font color=0000ff>texto na cor azul</font>
<font color=00ffff>texto na cor turquesa</font>
<font color=ffccff>texto na cor rosa</font>

4. Estilo de fonte
Utilize esse código para modificar o estilo de sua fonte
<i>texto em itálico</i>
<b>texto em negrito</b>
<u>texto sublinhado</u>
<marquee>seu texto fica passando como letreiro digital</marquee>
5. Alinhamento
Utilize esse código para alinhar seu texto de acordo com sua vontade.
<left>seu texto ou imagem ficam a esquerda</left>
<center>seu texto ou imagem ficam centralizados</center>
<right>seu texto ou imagem ficam a direita</right>
Exemplo de composição com formatação:
Como escrever um texto verde com fonte (letra) grande:
<font size="+2"><font color=00ff00> O Incrível Hulk </font>
Veja os comandos:
<font size="+2"> ........... aumenta o tamanho (+2)
<font color=00ff00>....... muda a cor (verde)
HULK ........................... texto (pode ser uma palavra ou uma dissertação inteira)
</font> ........................... encerra o comando.

_____________________________________________________________________________________________


CÓDIGO PARA MENSAGENS DE ARTISTAS EM HUMANIMANIA
______________________________________________________

Painel Annie Lennox "A Wither Shade Of Pale

<marquee><font color=0000ff><b><font size="+3">Dame Annie Lennox é uma cantora escocesa, conhecida por ser vocalista do grupo Eurythmics. Annie nasceu em 25 de dezembro de 1954. 
Filha única, Annie mostrou desde muito cedo vocação para as artes e ainda menina aprendeu a tocar piano e flauta, além de cantar em corais e estudar dança. 
A jovem Annie era apaixonada pela música negra, especialmente os artistas da Gravadora Motown, como Marvin Gaye, Stevie Wonder, Aretha Franklin e The Supremes.
Em 2004, Annie ganhou o Globo de Ouro e o Oscar pela canção-tema de O Senhor dos Anéis: O Retorno do Rei. 
Em Setembro de 2011, Annie recebeu uma homenagem no museu britânico V&A em que foram expostos seus principais figurinos 
usados desde sua carreira no Eurythmics até sua carreira solo, incluindo roupas desenhadas pela própria Lennox.
A canção interpretada por Annie neste vídeo é “A Whiter Shade of Pale”, canção de estréia da banda britânica Procol Harum, lançada em 12 de maio de 1967. A música
é de autoria de Gary Brooker, Keith Reid e Matthew Fisher. A música foi gravada por Annie Lennox em seu álbum Medusa, de 1995.</font></b></font></marquee>

____________________________________________________

CÓDIGO (O MESMO QUE SE ENCONTRA ACIMA) PARA ALTERAÇÕES

 

<marquee><font color=0000ff><b><font size="+3">CONTAGEM REGRESSIVA---COM Jeff Bridges e Tommy Lee Jones</font></b></font></marquee>

 

HTML FaceBook

<iframe src="http://www.facebook.com/plugins/like.php?href=http://humanimania.comunidades.net/&;layout=standard&<br>show_faces=false&width=380&action=like&colorscheme=light&height=25&locale=pt_BR" scrolling="no" 
frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" allowTransparency="true"></iframe>

____________________________

Imagem Clicável

<a href="Link da imagem" target="_blank" title="AQUI FICA O TÍTULO DA IMAGEM"><img src="AQUI FICA A URL DA IMAGEM" 
width="86" height="183" alt="" border="0" /></a>

________________________________

Efeito APagar a luz do site

 

Gostei desfe tutoria, razão pela qual usarei o mesmo


http://meublogdecodigos.blogspot.com.br/2013/02/criando-o-efeito-apagar-luz-para-ver.html


_________________________________________________________

Este tb parece ser bacana, inclusive com vídeo


http://templateseacessorios.blogspot.com.br/2013/04/video-com-efeito-apagar-luz.html
___________________________________________________________________

Esta dica é menos objetiva que a de cima (tutorial)

http://www.linhadecomando.com/jquery/jquery-efeito-de-apagar-a-luz

________________________________________________________________________________

Painel digital em movimento 

Um letreiro digital exibe uma mensagem de texto de rolagem.

 

Você pode personalizar um letreiro digital para conseguir exatamente os efeitos desejados.
Para criar um letreiro digital basta envolver o texto com as seguintes tags:

<marquee></marquee>
Exemplo: <marquee>Texto envolvido</marquee>
_____________________________________________________________________________________________________________TAGS: <MARQUEE></MARQUEE>


Você pode formatar um letreiro digital para ajustar sua direção, velocidade, comportamento, alinhamento, 
tamanho, número de repetições e cor de plano de fundo.

Para formatar um letreiro digital basta inserir dentro da tag de abertura <marquee> um ou mais parâmetros abaixo descritos:


Direction - define a direção com que o texto do letreiro se move.
Sintaxe: direction="X"
onde X pode assumir os seguintes valores:

left - (para a esquerda)
right - (para a direita).
up - (para cima)
down - (para baixo)

 

Exemplos: letreiro se movendo para a direita
<marquee direction="right">movendo para a direita</marquee>

 

Para formatar um letreiro digital basta inserir dentro da tag de abertura <marquee> um ou mais parâmetros abaixo descritos:

Direction - define a direção com que o texto do letreiro se move.
Sintaxe: direction="X"
onde X pode assumir os seguintes valores:
left - (para a esquerda)
right - (para a direita).
up - (para cima)
down - (para baixo)

Exemplos: letreiro se movendo para a direita
<marquee direction="right">movendo para a direita</marquee>


vER MAIS EM: http://kithomepage.com/kit/tutorial/html/letreiro_digital.php

_____________________________________________________________________


Use o comando de HTML

Letreiro digital

Vc já deve ter visto em varias paginas da web letreiro digital, 
textos que ficam rolando na página normalmente escrito Seja Bem-Vindo ! 
nessa lição vamos aprender como fazer isso. O comando é o comando <marquee> 
ele faz o letreiro digital, mas vc também pode mudar o tamanho a cor ao a fonte do letreiro digital, 
é so fazer utilizar os comando que aprendemos na lição anterior.


<marquee>Humanimania Brasil é um dos sites que mais cresce atualmente no segmento de filmes ONLINE. Novas parcerias estão despontando no horizonte de Humanimania, e com esses novos parceiros,
a certeza de que a qualidade do nosso trabalho só tende a aumentar em respeito ao nosso fiel público que está nos conduzindo rumo ao rank dos sites mais visitados</marquee>

<center><h3><i><marquee>Seja bem-vindo ao nosso site!!!</marquee></i></h3></center>

 CÓDIGO

<marquee>Bem-Vindo ao nosso site!!!</font></marquee>

<marquee><center><h3><i><marquee><font size="+4"><font color=ff0000>HUMANIMANIA BRASIL - GERAÇÃO X: O SEU JEITO ANIMAL DE SER GENTE!</font><font color=ff0000></marquee></i></h3></center>

_____________________________________________________________________________________________________________

COMO UTILIZAR OS CÓDIGOS PARA MUDAR FONTES, CORES E TAMANHOS DAS LETRAS, ASSIM COMO DIREÇÃO, ETC. E TAL:

-----------------------------------------------------------------------------

Os códigos mais comuns para a edição de textos e locação de figuras são os seguintes:
Obs.: Os códigos podem ser agrupados, para obter um feito composto pelas várias funções.

1. Fonte
Utilize esse código para alterar o estilo de fonte, lembrando que existem várias fontes: arial, courrier, times new roman, verdana, etc...


<font face="times new roman">digite seu texto aqui</font>


2. Tamanho da fonte
Utilize esse código para alterar o tamanho da fonte
<font size="-2>texto muito pequeno</font>
<font size="-1">texto pequeno</font>
Para manter a fonte no tamanho padrão não precisa digitar seu tamanho
<font size="+1">texto grande</font>
<font size="+2">texto bem grande</font>
<font size="+3">texto muito grande</font>

3. Cor da fonte
Utilize esse código para alterar a cor da fonte
<font color=ffffff>texto na cor branca</font>
<font color=000000>texto na cor preta</font>
<font color=ffff00>texto na cor amarela</font>
<font color=990000>texto na cor marrom</font>
<font color=cc00ff>texto na cor purpura</font>
<font color=ff9900>texto na cor laranja</font>
<font color=00ff00>texto na cor verde</font>
<font color=ff0000>texto na cor vermelha</font>
<font color=0000ff>texto na cor azul</font>
<font color=00ffff>texto na cor turquesa</font>
<font color=ffccff>texto na cor rosa</font>

4. Estilo de fonte
Utilize esse código para modificar o estilo de sua fonte
<i>texto em itálico</i>
<b>texto em negrito</b>
<u>texto sublinhado</u>
<marquee>seu texto fica passando como letreiro digital</marquee>
5. Alinhamento
Utilize esse código para alinhar seu texto de acordo com sua vontade.
<left>seu texto ou imagem ficam a esquerda</left>
<center>seu texto ou imagem ficam centralizados</center>
<right>seu texto ou imagem ficam a direita</right>
Exemplo de composição com formatação:
Como escrever um texto verde com fonte (letra) grande:
<font size="+2"><font color=00ff00> O Incrível Hulk </font>
Veja os comandos:
<font size="+2"> ........... aumenta o tamanho (+2)
<font color=00ff00>....... muda a cor (verde)
HULK ........................... texto (pode ser uma palavra ou uma dissertação inteira)
</font> ........................... encerra o comando.
Façam o teste em suas PDs!
- - - - -
Imagens no LV (recurso atualmente inativo):
Para colocar imagens no LV, utilize o código HTML de Background:
<center><p style="height: X; width: Y; background-image: url(http://www.seu_site.com.br/sua_imagem.jpg); ></p></center>
Não esquecendo, é claro, de trocar < e > por < e >
Substitua X e Y pelos valores de Altura e Largura (em pixels) da sua figura.
- - - - -
Links no LV (recurso atualmente inativo):
Para inserir links no LV utilize o seguinte comando:
<a href="Link-que-deseja-usar" target=_blank>Texto-ou-comando-de-inserção-de-figura</a>
- - - - -
Escrever colorido no LV e no Fórum (recurso atualmente inativo):
Para escrever com letras coloridas nos Fóruns ou LVs, use o seguinte comando:
<b style=color:cor em inglês> texto </b>
Para escrever com letra colorida sobre fundo também colorido, use o comando:
<b style=color:cor do texto em inglês;background-color:cor do fundo em ingles>texto </b>
- - - - -
Contador de Visitas:
Para criar um contador se cadastre no site http://www.freeweblogger.com (ou qualquer outro que 
disponibilize códigos html), escolha o modelo do contador desejado e confirme. O site vai criar e 
lhe exibir uma rotina; copie-a e cole na área de edição da PD. O contador passará a operar imediatamente.
No site abaixo vocês encontrarão um outro exemplo de contador, bem simples e em português:
http://www.2w.com.br/contador-de-visitas-acessos-gratis.html
- - - - -
Observação: Tanto na PD, quanto no LV, não usar figuras com largura superior a 400 pixels.
- - - - -
Agora é usar a criatividade!
- - - - -
O dirigente crocodillo criou um vídeo explicativo, dêem uma olhada:
http://br.youtube.com/watch?v=esApg25I-ow&fmt=18
Vídeo do user cristiano_ss sobre PDs:
http://www.4shared.com/file/139782919/30e3f7fb/Tutorial_da_PD_-_by_Cristiano_Santos.html


Leia mais: http://asilomz.webnode.com.br/codigo-html/
Crie seu site grátis: http://www.webnode.com.br

_____________________________________________________________________________________________________________

PAINEL DIGITAL COM IMAGEM EM MOVIMENTO CONTÍNUO DIREITA ESQUERDA


CÓDIGO 1:
<span> <marquee behavior="scroll"><img alt="moving image by marquee html code" height="212" src="(AQUI DENTRO FICA O LINK DA IMAGEM)" width="320" /></marquee></span>

 CÓDIGO 2: DISPONÍVEL EM http://kithomepage.com/kit/tutorial/html/letreiro_digital.php <-------------------------------------------

CÓDIGO PRONTO E JÁ USADO EM HUMANIMANIA COMO PAINEL LETREIRO DIREITA-ESQUERDA

<marquee OnMouseOver="javascript:this.stop()" OnMouseOut="javascript:this.start()" 
scrolldelay="33" bgcolor="#DDFEFE" width="70%"><a href="/index.php"><img border="0" src="/kit/tutorial/html/images/kithomepage.gif"></a></marquee>
(Acima, cor de fundo= #DDFEFE) (Acima, local da imagem via link)

<span> <marquee behavior="scroll"><img alt="moving image by marquee html code" height="212" src="(http://img.comunidades.net/hum/humanimania/falc_o_negro_em_perigo_Black_Hawk_Down_2001.jpg)" width="320" /></marquee></span>

 ____________________________________________________________

<span> <marquee behavior="scroll"><img alt="<img src="

http://img.comunidades.net/hum/humanimania/falc_o_negro_em_perigo_Black_Hawk_Down_2001.jpg" border="0">" 
height="212" src="(http://img.comunidades.net/hum/humanimania/falc_o_negro_em_perigo_Black_Hawk_Down_2001.jpg)" 
width="320" /></marquee></span>

 ___________________________________________________________

Imagem em MOvimento

<a href="Link da imagem" target="_blank" title="AQUI FICA O TÍTULO DA IMAGEM"><img src="AQUI FICA A URL DA IMAGEM" 
width="70" height="120" alt="" border="0" /></a>

______________________________________________________

Sensura códigos prontos

<a href="http://www2.policiacivil.sp.gov.br/index2.html" target="_blank" title="Programa Não recomendado para menores de 18 anos"><img src="http://img.comunidades.net/hum/humanimania/N_o_recomendado_para_menores_de_18_anos_.jpg" 

width="200" height="400" alt="" border="0" /></a>

______________________________________________________

Código para redirecionamento

TODO O PROCESSO SOBRE COMO TRABALHAR O CÓDIGO DE REDIRECIONAMENTO

Você pode colocar qualquer link em qualquer imagem. O primeiro passo é colar este código:
_________________________________________________________________________________________

 <a href="Link da imagem" target="_blank" title="AQUI FICA O TÍTULO DA IMAGEM"><img src="AQUI FICA A URL DA IMAGEM" 

width="70" height="120" alt="" border="0" /></a>

************************************************


Os valores width="57" e height="57" é o tamanho da imagem, que pode ser alterado a gosto. 
Para obter a URL da imagem você deve hospeda-la, para isso use o Picasa ou o Image Shack.

Espero ter ajudado.

____________________________________________________________________________________________________

ESTE É O CÓDIGO PARA ALTERAÇÕES (Copiar para além da linha a fim de fazer alterações)

 

<a href="Link da imagem" target="_blank" title="AQUI FICA O TÍTULO DA IMAGEM"><img src="AQUI FICA A URL DA IMAGEM" 
width="70" height="120" alt="" border="0" /></a>

___________________________________________________________

Letreiro Vertical

Tópico

Como fazer texto em movimento em html?
Como fazer o letreiro vertical (texto a rolar para cima)?
Como definir a cor fundo do texto do letreiro?

link com explicações detalhadas e códigos em movimento: http://www.pt.hscripts.com/tutoriais/html/marquee1.php
_____________________________________________________________________________________________________________

Explicação


Etiqueta Letreiro: <marquee> </marquee>

Se que que o seu texto se mova dentro do ecrã, utilize esta etiqueta.
A etiqueta usada é "marquee"

Código de Exemplo:
<marquee> Este texto irá movimentar-se </marquee>
O texto dentro das etiquetas irá movimentar-se horizontalmente.
Resultado:
Este texto irá movimentar-se


A etiqueta letreiro tem muitos atributos, vamos revê-los um a um


Atributo: bgcolor Isto define a cor de fundo para o caminho do texto do letreiro
Código de Exemplo:
<marquee bgcolor=orange> Texto em Movimento </marquee>
Resultado: Texto em Movimento


Atributo: height,width O atributo width define a largura da area do letreiro
O atributo height define a altura da area do letreiro
Código de Exemplo:
<marquee bgcolor=orange width=100 height=20> Texto em Movimento </marquee>
Resultado:
Texto em Movimento


Atributo: direction
Isto define a cor de fundo do caminho do texto do letreiro.
Aceita valores LEFT (esquerda) ou RIGHT (direita) ou UP (cima) ou DOWN (baixo)
Código de Exemplo:
<marquee bgcolor=orange width=100 height=20 direction=right> O texto irá movimentar-se </marquee>
Resultado com direcção RIGHT (direita):
O texto irá movimentar-se
Resultado com a direcção (vertical) UP (cima):