Como Adicionar um Link a uma Foto

Baixe em PDF

Baixe em PDF

Neste Artigo:

Escrevendo o código HTML

Entendendo o código HTML

Artigos Relacionados

Referências

Com uma única linha de código HTML, é possível adicionar uma imagem “clicável” em praticamente qualquer site. Você precisará de duas coisas para que isso funcione: o URL da imagem e o URL do site.

Passos

Método 1

Método 1 de 2:

Escrevendo o código HTML

Baixe em PDF

1. 
   1
   Crie um arquivo HTML. Abra um editor de texto, escolha “novo arquivo” e salve-o como “index.html” (sem aspas).

   • Qualquer editor de texto pode ser utilizado, incluindo os nativos do Windows e do Mac (Bloco de Notas e Editor de Texto, respectivamente).

   • Para usar um programa que trabalhe com HTML, baixe o Atom, que funciona no Windows, Mac e Linux.

   • Ao optar pelo Editor de Texto, clique no menu “Formato” e em “Criar Texto Simples” antes de escrever o HTML, de forma que o arquivo seja carregado normalmente em navegadores de internet.

   • Processadores de texto, como o Microsoft Word, não são a melhor escolha para gerar HTML, já que adicionam caracteres invisíveis e formatação que podem quebrar um arquivo HTML, impossibilitando sua exibição correta em browsers.
2. 
   2
   Copie e cole o código HTML padrão abaixo. Abra o “index.html” e cole-o.
   

   <a href="URL DE DESTINO"><img src="URL DA IMAGEM" /></a>
3. 
   3
   Encontre o URL da imagem desejada na internet. Dependendo do seu navegador, clique em “Copiar URL da Imagem”, “Copiar Endereço da Imagem” ou “Copiar Localização da Imagem”.

   • Tanto o Firefox quanto o Internet Explorer usam “Copiar Localização da Imagem”; no Chrome, aparece “Copiar URL da Imagem”, e no Safari, “Copiar Endereço da Imagem”.
4. 
   4
   Adicione o URL da imagem no “index.html”. Arraste o URL da imagem com o mouse e pressione CTRL + V para colá-lo.
5. 
   5
   No “index.html”, apague o URL de destino e digite https://www.google.com.

   • O URL de destino pode ser qualquer um que desejar.
6. 
   6
   Salve o arquivo HTML.
7. 
   7
   Abra-o em um navegador, clicando com um botão direito e escolhendo um browser.

   • Quando o navegador abrir, a imagem deverá ser exibida. Do contrário, verifique se o nome dela está escrito corretamente na janela de edição de texto do “index.html”.

   • Caso o código HTML seja mostrado ao abrir o browser (em vez da imagem), você salvou o “index.html” como no formato “Rich Text”. Tente alterá-lo em um outro editor.
   Publicidade

Método 2

Método 2 de 2:

Entendendo o código HTML

Baixe em PDF

1. 
   1
   Entenda a tag “âncora”. O código HTML é feito de tags abertas e fechadas: <a href=""> é uma tag aberta, enquanto </a> é fechada. São as tags “âncora”, utilizadas para adicionar links à uma página da web.

   • <a informa que o navegador deve renderizar o link, enquanto href é uma abreviação de “HTML reference” (referência HTML). Por outro lado = instrui o browser a transformar tudo que está entre " " em um link. Qualquer URL pode ser colocado entre as aspas.
   • A tag </a> demonstra ao navegador que a tag “âncora” está fechada.
   • Ao adicionar texto entre <a href=""> e </a>, ele se transformará em um link que pode ser clicado em uma página da internet. Por exemplo: <a href="https://www.google.com">Google</a> faz um link para o Google.
2. 
   2
   Entenda a tag de imagem <img>. Ela possui fechamento próprio, ao escrever <img src="" /> ou <img src=""></img>.

   • Já <img fornece informações para que o navegador renderize uma imagem, enquanto src é abreviação de "source” (fonte) e = informa que o navegador deve obter a imagem de tudo que está entre " ".
   • /> é o comando de fechamento da tag de imagem para o navegador.
   • Por exemplo: {{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}} coleta a imagem do URL e a exibe em um browser.
3. 
   3
   Use esse código em qualquer lugar. Agora que sabe como empregá-lo, use <a href="URL DE DESTINO"><img src="URL DA IMAGEM " /></a> para adicionar imagens “clicáveis” a qualquer página da web que pode renderizar código HTML.
   Publicidade