Como Criar um Link de Imagem em HTML

PDF download Baixe em PDF
Coescrito por Christopher Batchelor

PDF download Baixe em PDF

Você já quis adicionar um link em um documento HTML, mas queria mostrar ao leitor uma imagem em vez do texto? A maioria dos programadores HTML sabe, e você também pode saber, depois que ler e seguir as instruções neste artigo.

Passos

PDF download Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/54\/Make-a-Picture-Link-in-HTML-Step-1.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/54\/Make-a-Picture-Link-in-HTML-Step-1.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abra um programa de edição de texto, como o Bloco de Notas ou o WordPad no Windows [1] . Em um Mac, abra o TextEdit. O Dreamweaver pode ser usado em qualquer uma das duas plataformas [2] .
    • Você também pode usar o Notepad++ para isso, se quiser.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Make-a-Picture-Link-in-HTML-Step-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Make-a-Picture-Link-in-HTML-Step-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite a tag de abertura do link da foto (conhecido pelo seu nome mais sofisticado como um elemento "â"ncora, por isso o "a") [3] , <a href=".
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c9\/Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Digite o link que você quer que o usuário veja(incluindo o http://)
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Utilize o formato <img src="imagefilenamehere.gif">.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    [4]
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg\/v4-460px-Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg\/v4-728px-Make-a-Picture-Link-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Publicidade

WikiHows Relacionados

Como
Redirecionar um URL
Como
Criar uma Página Simples da Web com HTML
Como
Alinhar Algo em HTML
Como
Criar Uma Página Web Simples com o Bloco de Notas
Como
Inserir Uma Linha em HTML
Como
Verificar a Versão do PHP
Como
Adicionar Comentários em um Código HTML
Como
Criar um Plano de Fundo Transparente Usando o Pixlr
Como
Adicionar um Hiperlink com HTML
Como
Fazer um Texto Piscar com HTML
Como
Esconder um Link em HTML
Como
Aprender HTML
Publicidade

Referências

  1. ↑ https://hyperise.com/blog/how-to-embed-a-hyperlink-in-an-image
  2. ↑ https://www.geeksforgeeks.org/what-is-dreamweaver/
  3. ↑ https://html.com/anchors-links/
  4. ↑ https://www.w3schools.com/tags/tag_u.asp

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 126 871 vezes.

Este artigo foi útil?

Publicidade