Como Adicionar um Link a uma Foto

Coescrito por Equipe wikiHow

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.

Método 1

Método 1 de 2:
Escrevendo o código HTML

1
Crie um arquivo HTML. Abra um editor de texto, escolha “novo arquivo” e salve-o como “index.html” (sem aspas).
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
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”.
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
No “index.html”, apague o URL de destino e digite https://www.google.com.
6
Salve o arquivo HTML.
7
Abra-o em um navegador, clicando com um botão direito e escolhendo um browser.
Publicidade

Método 2

Método 2 de 2:
Entendendo o código HTML

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.^{[1]
X
Fonte de pesquisa}
- <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
Entenda a tag de imagem <img>. Ela possui fechamento próprio, ao escrever <img src="" /> ou <img src=""></img>.^{[2]
X
Fonte de pesquisa}
- 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
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