Como Adicionar um Link a uma Foto

Baixe em PDF
Coescrito por Equipe wikiHow

Baixe em PDF

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

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/769114-1.jpg\/v4-460px-769114-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/769114-1.jpg\/v4-728px-769114-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/769114-2.jpg\/v4-460px-769114-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/769114-2.jpg\/v4-728px-769114-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abra o “index.html” e cole-o.
     < 
 a 
 href 
 = 
 "URL DE DESTINO" 
 >< 
 img 
 src 
 = 
 "URL DA IMAGEM" 
 /></ 
 a 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/769114-3.jpg\/v4-460px-769114-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/769114-3.jpg\/v4-728px-769114-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2b\/769114-4.jpg\/v4-460px-769114-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2b\/769114-4.jpg\/v4-728px-769114-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Arraste o URL da imagem com o mouse e pressione CTRL + V para colá-lo.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/769114-5.jpg\/v4-460px-769114-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/769114-5.jpg\/v4-728px-769114-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/39\/769114-6.jpg\/v4-460px-769114-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/39\/769114-6.jpg\/v4-728px-769114-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/769114-7.jpg\/v4-460px-769114-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/769114-7.jpg\/v4-728px-769114-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f7\/769114-8.jpg\/v4-460px-769114-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f7\/769114-8.jpg\/v4-728px-769114-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • <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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/769114-9.jpg\/v4-460px-769114-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/769114-9.jpg\/v4-728px-769114-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ela possui fechamento próprio, ao escrever <img src="" /> ou <img src=""></img>. [2]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/47\/769114-10.jpg\/v4-460px-769114-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/47\/769114-10.jpg\/v4-728px-769114-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

WikiHows Relacionados

Como
Desativar o Controle dos Pais no Android
Como
Pesquisar e Encontrar Alguém Facilmente Usando Imagens
Como
Ver o Histórico de Navegação de um Roteador WiFi
Como
Desativar o Google Safesearch
Character.AI: O que É, Consertando Filtros e Repetições e Mais
Como
Realçar Valores Duplicados no Google Planilhas em um PC ou Mac
Como Enviar uma Mensagem de Texto Anônima
Como
Colocar um Site em sua Área de Trabalho
Como
Burlar Restrições de Acesso na Internet
Como
Remover Alguém da sua Rede
Como
Desbloquear o Fortinet
O que o Emoji 😮 (Boca Aberta) Significa?
Uso e Significado do Emoji dos Dedos Juntos 🤌
Como
Rastrear um Pacote Sem o Código de Rastreamento
Publicidade

Referências

  1. ↑ http://www.w3schools.com/html/html_links.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 49 383 vezes.

Este artigo foi útil?

Publicidade