Logo SatellaSoft



HTML do básico ao avançado parte 5

Será explicado aqui como trabalhar com imagem e links.


Ícone homem Gunnar Correa
Ícone data de publicação 27/02/2015
Ícone quantidade de visualização 1,996
Ícone bandeira do Brasil Português

Link:

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.

               SatellaSoft

Onde Significa Anchor (Ancora) , href é abreviação de Hypertext Reference (Referencia de hipertexto) e title, é pouco usado pois ela adiciona um texto quando o usuário passa o mouse sobre o  link.

 

O link que se deseja redirecionar fica dentro de href=”” e seu texto dentro de .

Existe uma propriedade, denominada target=””, com ela você pode informar onde será aberto o respectivo link.

Os valores para target=””, abaixo os dois valores mais utilizados.

_blank - carregar em uma nova página (aba);
_self -    abre na página atual.

Você pode ver a documentação completa em: http://www.w3schools.com/tags/att_link_target.asp

 

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

Dentro de SRC deve ficar o endereço da sua imagem, junto com a extensão.

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.

O 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="http://www.google.com" title="Clique e vá para o Google"><img alt="Imagem" src="imagem.png" title="Imagem" /></a>

 




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!