Educação
Tecnologia
- Banco de Dados
  - MySQL
- Criação de Games
  - Construct 2
  - Desenvolvedores Indies
- Desenvolvimento 3D
- Download
  - Open Source
  - Software de Autoria
- Eletrônica
  - Arduino
- Framework
  - Materialize
- Games
- Programação
  - Android Studio
  - ASP.NET
  - Csharp
  - CSS
  - HTML
  - Javascript
  - PHP
- Redes
- videoaula
  - Vídeos PHP
  - Vídeos Unity 3D
- Web Design
Eventos
Serviços
Quem Somos
Contato
Academy
Acesso
- Criar conta
- Entrar

HTML do básico ao avançado parte 5

Será explicado aqui como trabalhar com imagem e links.

Gunnar Correa

27/02/2015

4,153

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

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.