O HTML Progressivo agora faz parte do Programação Progressiva!
Este conteúdo foi atualizado e movido para o nosso novo endereço.
Redirecionando para: Clique aqui se não for redirecionado
Essas alterações são feitas diretamente nas tags,
e se chamam atributos.
E atributos será nosso objeto de estudo desse tutorial de HTML.
Caso deseje transformar seus estudos de HTML em uma profissão para começar a ganhar dinheiro criando sites, sugerimos que faça o curso e obtenha seu certificado de Webmaster (tudo online):
 |
| Obter meu certificado! |
Atributos em tags de HTML
Atributos são comandos ou informações específicas que
damos a uma tag, para que ela faça tal comando, porém com algum detalhe ou
variação específica, em relação a tag original sem atributos.
A sintaxe dos atributos em tags HTML é a seguinte:
Ínicio da tag: <nome_do_comando atributo1=”valor1”
atributo2=”valor2”>
Final da tag: </nome_do_comando>
Ou seja, na tag de abertura escrevemos mais comandos e
ordens específicas para o navegador, e ele interpretará de maneira diferente,
conforme os atributos.
Atributos do efeito <marquee>
Vimos que para um texto rolar na tela, da direita para a
esquerda, basta que coloquemos qualquer trecho de texto entre as tags <marquee>
e </marquee>.
Existe um atributo para essa tag, chamado direction, que como o próprio nome diz,
tem algo a ver com direção. Na tag padrão, sem atributos, o texto rola para a
esquerda.
Para ele rolar para a direita (“right”), teremos que
dizer isso para a tag através do atributo direction=”right”. Portanto, nosso
código que faz o texto deslizar para o outro lado é:
Note que as coisas em HTML são feitas para serem simples e clara.
<!DOCTYPE html> <html> <marquee direction=”right”> Texto rolando para a direita. </marquee> </html>
Note que as coisas em HTML são feitas para serem simples e clara.
‘direction’ simples, e obviamente, diz em que direção o
texto desliza. E para controlar a direção, basta dizer: right, left, up ou down
, em inglês.
Use direction=”up” e fará o efeito que
propomos artigo passado, que é o texto deslizar para cima.
Outro atributo da tag marquee
é o behavior,
que como o próprio nome diz, trata o comportamento do texto.
O comportamento padrão é o de deslizar, porém há outros,
como o efeito bate e volta, e o que desliza pela tela somente uma vez.
behavior=”alternate” -> efeito
bate e volta
behavior=”slide” -> desliza só
uma vez
Você pode ainda alterar a velocidade de deslize, com o
atributo scrollamount.
A velocidade 1 é a mais baixa:
scrollamount=”1”
E a medida que você for aumentando o número, o efeito vai
ficando cada vez mais rápido.
Usando mais de um atributo em tags de HTML
Nossas tags podem e geralmente possuem mais de um
atributo.
Para usar mais de um, basta dar um espaço entre dois
atributos. Não há limites para o uso de atributos.
Por exemplo, para um texto rolar para a direita, usamos
o: direction=”right”
Para que ele deslize só uma vez, usamos o: behavior=”slide”
E para que ele deslize bem rápido, vamos usar: scrollamount=”40”
Logo, nosso código HTML para criar um site que exiba
um texto, rolando da esquerda para a direita, somente uma vez, e bem rápido, é:
Exercícios de HTML
<!DOCTYPE html> <html> <marquee direction="right" behavior="slide" scrollamount="40"> Texto rolando para a direita, bem rápido e somente uma vez. </marquee> </html>
Exercícios de HTML
Exercício 1:
Usando a tag <marquee> com atributos
Crie um site
que exiba seu nome completo na tela, deslizando, com o efeito bate e volta.
Exercício 2:
Usando dois atributos em tags de HTML
Crie um site
que exiba seu nome na tela, deslizando, com o efeito bate e volta com
velocidade 40 (apenas programe mais um atributo no código HTML do exemplo
anterior).
Exercício 3:
Usando vários atributos em tags de HTML
Refaça o exercício anterior, criando um site que exiba seu nome, mas agora com o texto descendo.
7 comentários:
Muito bom este tutorial mas não está dando para colocar os acento e a cedilha, sempre que coloco aparece outro sinais, me ajuda!
Muito bem percebido, Anônimo.
Estávamos esperando o primeiro a notar :)
Na tutorial sobre Formatação de Textos, tem um artigo sobre a meta tag charset para escrever caracteres especiais, como acentuação e cedilha em HTML
Oi, as apostilas de vc são excelentes! Parabéns!
Gostaria de tirar uma duvida, no terceiro exercício, quando acrescento a parte behavior='alternate' ele para de funcionar e o nome fica parado.
Obrigada!
vc esta escrevendo
behavior='alternate'
(note as aspas)
o certo seria
behavior="alternate"
espero q o dono do blog n tenha se importado de eu corrigi-la
Meu nome não possui caracteres especiais :p, mas lendo os coments fui fazer o teste e não tive esse problema. Fiz o código no bloco de notas mesmo e rodei no opera.
Att.,
coloquei o comando sem as "aspas"
e mesmo assim foi aceito, isso é assim mesmo?
obs: coloquei sem por curiosidade!
Não se esqueçam de formatar a codificação UTF-8...
Postar um comentário