Tweet
Bom galerinha, venho através deste tutorial mostrar como fazer uma animação como o comando MARQUEE. Esse tuto é bem básico voltado para que é iniciante, espero que gostem...
Bom o MARQUEE permite que um determinado texto ou imagem fique passando continuamente de uma lado para outro da tela.
A sintaxe é:
<MARQUEE> Texto ou Imagem </MARQEE>
Bom vamos começar, primeiramente abra o bloco de notas e salve o arquivo como marquee.html.
Agora com o bloco de notas da página aberta digite:
Agora salve e visualize a página como fica...
Bom agora que sabemos a sintaxe do marquee iremos brincar mais um pouco adicionando alguns atributos para melhor visualização da página ou melhor, para adicionar outras formas de animação (ou sei lá como eu digo
).
BEHAVIOR
Com o BEHAVIOR você será capaz de definir o tipo de movimento em que o texto selecionado sera animado.
No behavior temos 3 tipos de movimentos, que são:
SCROLL: Permite ao texto passar continuamente pelo letreiro na direção
especificada, entrando por um lado e saindo pelo outro.
SLIDE: Permite ao texto passar por um dos cantos do letreiro, parando ao
chegar no canto oposto e permanecendo na tela.
ALTERNATE: Permite ao texto passar de um lado a outro das extremidades do
letreiro, permanecendo na tela o tempo todo.
Testem cada um com o código abaixo
BGCOLOR
Acho que todo conhecem esse atributo, ele adiciona uma cor de fundo no letreiro.
DIRECTION
Esse atributo é o responsável por especificar qual a direção no qual o texto irá se mover.
As opções de direção são:
LEFT: O texto se move do canto direito para o esquerdo.
RIGHT: O texto se move do canto esquerdo par o direito.
DOWN: O texto se move de cima para baixo.
UP: O texto se move de baixo para cima.
HEIGHT
Este atributo especifica a altura do letreiro. O valor pode ser dado em pixels ou em relação à altura da janela em que a página será exibida.
WIDTH
Este atributo especifica a largura do letreiro. O valor pode ser dado em pixels ou em relação à largura da janela em que a página será exibida.
HSPACE
Define as margens a direita e a esquerda do letreiro.
VSPACE
Define as margens à direita e à esquerda do letreiro.
LOOP
Este atributo especifica quantas vezes o texto irá cruzar o letreiro. Se este atributo não for
mencionado ou se o numero de vezes for igual a INFINITE, o texto irá se mover em
repetição constante pelo letreiro.
SCROLLMOUNT
Este atributo controla a velocidade do texto, definem o número de pixels entre cada redesenho do texto. O valor a ser entrado em pixels representa a quantia de pixels que separa cada redesenho. Desta forma, quanto maior for o valor, mais rápido será o movimento do texto.
Lembrando que esses procedimentos poderam ser feitos também com fotos...
Bom galera por enquanto é isso, espero que todos tenham gostado do meu primeiro tutorial sobre HTML e se quiserem dar alguma sugestão ou critica comentem...
Bom o MARQUEE permite que um determinado texto ou imagem fique passando continuamente de uma lado para outro da tela.
A sintaxe é:
<MARQUEE> Texto ou Imagem </MARQEE>
Bom vamos começar, primeiramente abra o bloco de notas e salve o arquivo como marquee.html.
Agora com o bloco de notas da página aberta digite:
<html>
<head><title>Animação com marquee</title></head>
<body>
<marquee> Meu primeiro tutorial sobre HTML</marquee>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<marquee> Meu primeiro tutorial sobre HTML</marquee>
</body>
</html>
Bom agora que sabemos a sintaxe do marquee iremos brincar mais um pouco adicionando alguns atributos para melhor visualização da página ou melhor, para adicionar outras formas de animação (ou sei lá como eu digo
). BEHAVIOR
Com o BEHAVIOR você será capaz de definir o tipo de movimento em que o texto selecionado sera animado.
No behavior temos 3 tipos de movimentos, que são:
SCROLL: Permite ao texto passar continuamente pelo letreiro na direção
especificada, entrando por um lado e saindo pelo outro.
SLIDE: Permite ao texto passar por um dos cantos do letreiro, parando ao
chegar no canto oposto e permanecendo na tela.
ALTERNATE: Permite ao texto passar de um lado a outro das extremidades do
letreiro, permanecendo na tela o tempo todo.
Testem cada um com o código abaixo
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE BEHAVIOR="tipo do movimento">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE BEHAVIOR="tipo do movimento">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
BGCOLOR
Acho que todo conhecem esse atributo, ele adiciona uma cor de fundo no letreiro.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE BGCOLOR="red">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE BGCOLOR="red">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
DIRECTION
Esse atributo é o responsável por especificar qual a direção no qual o texto irá se mover.
As opções de direção são:
LEFT: O texto se move do canto direito para o esquerdo.
RIGHT: O texto se move do canto esquerdo par o direito.
DOWN: O texto se move de cima para baixo.
UP: O texto se move de baixo para cima.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE DIRECTION="escolha a direção">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE DIRECTION="escolha a direção">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
Este atributo especifica a altura do letreiro. O valor pode ser dado em pixels ou em relação à altura da janela em que a página será exibida.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE HEIGHT="25">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE HEIGHT="25">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
WIDTH
Este atributo especifica a largura do letreiro. O valor pode ser dado em pixels ou em relação à largura da janela em que a página será exibida.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE WIDTH="100%">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE WIDTH="100%">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
HSPACE
Define as margens a direita e a esquerda do letreiro.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE HSPACE="40">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE HSPACE="40">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
VSPACE
Define as margens à direita e à esquerda do letreiro.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE VSPACE="60">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE VSPACE="60">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
LOOP
Este atributo especifica quantas vezes o texto irá cruzar o letreiro. Se este atributo não for
mencionado ou se o numero de vezes for igual a INFINITE, o texto irá se mover em
repetição constante pelo letreiro.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE LOOP="5">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE LOOP="5">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
SCROLLMOUNT
Este atributo controla a velocidade do texto, definem o número de pixels entre cada redesenho do texto. O valor a ser entrado em pixels representa a quantia de pixels que separa cada redesenho. Desta forma, quanto maior for o valor, mais rápido será o movimento do texto.
<html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE SCROLLAMOUNT="50">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
<head><title>Animação com marquee</title></head>
<body>
<MARQUEE SCROLLAMOUNT="50">Meu primeiro tutorial sobre HTML</MARQUEE>
</body>
</html>
Bom galera por enquanto é isso, espero que todos tenham gostado do meu primeiro tutorial sobre HTML e se quiserem dar alguma sugestão ou critica comentem...
Comment