O que são atributos em HTML


No artigo de HTML passado, ensinamos como fazer um texto deslizar na tela, através da tag marquee. Ao final da lição mostramos vários efeitos semelhantes e dissemos que todos eram, de fato, o mesmo marquee, porém com algumas alterações no código HTML.

Essas alterações são feitas diretamente nas tags, e se chamam atributos.
E atributos será nosso objeto de estudo desse tutorial de HTML

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 é:

<!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, é:

<!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:

Anônimo disse...

Muito bom este tutorial mas não está dando para colocar os acento e a cedilha, sempre que coloco aparece outro sinais, me ajuda!

Curso HTML Progressivo disse...

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

Anônimo disse...

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!

Anônimo disse...

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

Ricardo Castro disse...

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.,

Anônimo disse...

coloquei o comando sem as "aspas"
e mesmo assim foi aceito, isso é assim mesmo?
obs: coloquei sem por curiosidade!

Niuvan disse...

Não se esqueçam de formatar a codificação UTF-8...