HTML do básico ao avançado parte 5

Gunnar CorreaGunnar Correa27/02/2015 às 09:48:41 - 7.979 acessos

Aqui você aprenderá a trabalhar com imagens e links de redirecionamento.


Links

Todos os sites possuem imagens e links, raramente alguns utilizam apenas texto, mas todos têm links. O código de um link é muito simples, veja abaixo.

<a href="https://satellasoft.com" target="_blank" title="Título ao repousar o mouse">SatellaSoft</a>
  • <a> - Significa Anchor (âncora)
  • href="" - Hypertext Reference, é aqui que você inclui o seu link.
  • title="" - Fornece um título que é exibido quando o mouse está repousado em uma âncora.
  • target="" - É onde informamos como o link vai ser aberto

De acordo com a documentação da Mozilla, temos alguns valores para o parâmetro title, veja abaixo.

_self:No atual contexto de pesquisa. (é o padrão)
_blankNormalmente abre em uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela
_parentAbre a página dentro do frame atual
_topAbre na página principal, mesmo estando em um iframe.

 

Imagem

Trabalhar com imagens é algo muito simples e rápido, seu código é:

<img alt="Imagem" src="imagem.png" title="Imagem" />

Note que não precisamos abrir e fechar img, como <img>, pois no HTML 5, img passa a ser uma tag órfão.

Onde img é abreviação de Image (Imagem),  src abreviação de source (Fonte)  e alt é abreviação de alternate (Alternar).

src =  deve conter o endereço da sua imagem, junto com a extensão.

alt = serve se caso a imagem não for exibida ele exibe um texto alternativo, porém é altamente recomendável a utilização desta propriedade, ela possibilita deficientes visuais saber do que se trata aquela imagem, já que eles não podem ver. Também serve para que motores de busca encontrem suas informações.

title = tem o mesmo objetivo do que foi explicado nas ancoras que é exibir um texto caso o usuário passe o mouse por cima da imagem.

É possível usar uma imagem como link, ao invés de colocar um texto dentro de um utilize a sintaxe da imagem.

<a href="https://google.com" title="Clique e vá para o Google">
     <img alt="Imagem" src="imagem.png" title="Imagem" />
</a>

Ainda no HTML 5, podemos usar a tag  figure para adicionar uma estrutura semântica. 



a link imagem tag marcação html hyper text title alt anchor referência

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.