Aula 3

O que são atributos?

• Todos os elementos HTML podem ter atributos
• Os atributos fornecem informações adicionais sobre os elementos
• Os atributos são sempre especificados na tag de início
• Os atributos geralmente vêm em pares de nome/valor como: name=”value”

<a href="https://www.google.com">Ir para o Google </a>

<a href="https://www.google.com" target"_blank">Ir para o Google </a>

<a> tag define um hiperlink.

O href atributo especifica a URL da página para a qual o link vai

O target=”_blank” especifica que ao clicar no link a página será direcionada para uma nova guia.

Links

Sintaxe:

<a href="url">link text</a>
<href="mailto:someone@example.com">Send email</a>
<a href="url"><img src="" alt="" style="width:42px;height:42px;"></a>

Por padrão, os links aparecerão da seguinte maneira em todos os navegadores.

• Um link não visitado é sublinhado e azul
• Um link visitado é sublinhado e roxo
• Um link ativo é sublinhado e vermelho

O atributo target especifica onde abrir o documento vinculado.

E pode ter um dos seguintes valores:

• _self – Padrão. Abre o documento na mesma janela/guia em que foi clicado
• _blank – Abre o documento em uma nova janela ou guia
• _parent – Abre o documento no quadro pai
• _top – Abre o documento em todo o corpo da janela

Imagens

Sintaxe:

<img src="url" alt="aternatetext">

Atributos obrigatórios na tag <img>:

src – especifica o caminho (URL) para a imagem.

alt – fornece um texto alternativo para uma imagem, se o usuário por algum motivo não puder visualizá-la. Ele deve descrever a imagem

title – Dá um título à imagem

Formatos de imagem comuns:

• gif – Permite combinar imagens ou quadros, criando animações básicas.
• jpeg – É o formato de imagem digital mais utilizado quando esta possui muitas cores.
• png – Apropriado para uma imagem que possui poucas cores ou extensas áreas com a mesma cor.
• svg – Armazenam imagens por meio de fórmulas matemáticas baseadas em pontos e linhas em uma grade, podem ser redimensionados sem perder nenhuma de suas qualidades.

Exercício:

1. Na página a desenvolver insira a tag <a> e no conteúdo do seu bloco o nome “Link”. Verifique que a palavra “Link” aparece na página, mas ao clicar não há redirecionamento.
2. Dentro da tag <a> vamos acrescentar o atributo “href” para identificar o caminho para onde pretendemos navegar: <a href=””> Link</a>
3. Dentro das aspas coloque um link válido para navegar, por exemplo: http://www.google.pt/ – Verifique que ao clicar, a página abre.
4. Duplique a linha e coloque mais um atributo e teste: target=”_blank”
5. Adicione a tag <img> e adicione o atributo “src=””“
6. Copie o link de uma imagem a sua escolha no google e cole dentro das aspas do src.