Os atributos HTML fornecem informações adicionais sobre os elementos html. Os atributos são sempre especificados na tag inicial e geralmente vêm em pares nome/valor como: nome=”valor”.
Dando uma pequena recapitulada vemos que já conhecemos alguns atributos:
1 – A tag <a> define um hiperlink. O atributo href especifica o URL da página para a qual o link vai.
2 – A tag <img> incorpora uma imagem em uma página HTML. O atributo src especifica o caminho para a imagemque será exibida.
3 – A tag <img> pode conter os atributos de largura e altura que são medidos em pixels.
4 – O atributo alt é obrigatório para a tag <img>. Ele especifica um texto alternativo para uma imagem que por algum motivo não puder ser exibida.
5 – O atributo lang dentro da tag <html> deve ser usado para declarar o idioma da página Web, tendo como objetivo ajudar os mecanismos de pesquisa e navegadores.
Vamos conhecer novos atributos: style e title.
O atributo style (estilo) é usado para adicionar características a um elemento, tais como: cor, fonte, tamanho, etc…
EXEMPLOS
<p style=”color:red;”>Este é um parágrafo vermelho</p>
<h1 style=”color:green;”>Este é um título verde</h1>
<p style=”background-color:yellow”>Este é um título com cor de fundo amarelo</p>
O atributo title apresenta algumas informações extras sobre um elemento. Estas informações serão exibidas como uma dica quando você passar o mouse sobre o elemento.
EXEMPLO
<p title=”Eu sou o texto do atributo title”>Passe o mouse sobre este texto para ver o efeito do atributo title.</p>
<h3 title=”este título é pequeno demais”>Título</h3>
<img src=”flores300x300.jpg” title=”Veja que flor maravilhosa!!”>
Alinhamento de texto
A propriedade text-align define o alinhamento horizontal do texto num elemento html.
EXEMPLO
<h1 style=”text-align:center;”>Título centralizado</h1>
<p style=”text-align:center;”>Parágrafo centralizado</p>
<p style=”text-align:right;”>Parágrafo à direita</p>
Tem muitos outros atributos que iremos ensinando nas próximas aulas.
Agora vamos aos exercícios.
Pegue o esqueleto HTML e o preencha com estas alternativas, evidentemente que digitando letra por letra, nada de copiar e colar!
Sua página deve parecer com esta imagem abaixo:
