HTML do básico ao avançado parte 5

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

Publicado em

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. 

Gunnar Correa
Gunnar Correa

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

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção