Adicionar um link para uma imagem em HTML

Autor: Christy White
Data De Criação: 12 Poderia 2021
Data De Atualização: 1 Julho 2024
Anonim
Link na Imagem HTML - (Tutorial Completo)
Vídeo: Link na Imagem HTML - (Tutorial Completo)

Contente

Com uma única linha de código HTML, você pode adicionar uma imagem clicável a quase qualquer site. Existem duas coisas que você precisa para fazer este trabalho. Você precisa de um URL para a imagem e também o URL de um site.

Dar um passo

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

  1. Crie um arquivo HTML. Abra um editor de texto e crie um novo arquivo. Salve o arquivo como index.html.
      • Você pode usar qualquer editor de texto que desejar, até mesmo os editores de texto simples do Windows (Notepad) e Mac OS X (TextEdit).
      • Se você deseja usar um editor de texto para trabalhar com HTML, clique aqui para baixar o Atom, um editor de texto para Windows, Mac OS X e Linux.
      • Se você estiver usando o TextEdit, clique no menu Formatar antes de criar o arquivo HTML e, em seguida, clique em Tornar texto simples. Esta configuração garante que o arquivo HTML carregue corretamente em um navegador da web.
      • Processadores de texto como o Microsoft Word não são realmente bons para escrever HTML, porque adicionam caracteres invisíveis e formatação que podem corromper o arquivo HTML e torná-lo exibido incorretamente em um navegador da web.
  2. Copie e cole o código HTML padrão. Selecione e copie o código HTML abaixo e cole-o no index.html aberto.

    a href = "url de destino"> img src = "url da imagem" /> / a>

  3. Encontre o URL da sua imagem. Encontre uma imagem na web, clique com o botão direito nela e (dependendo do seu navegador) clique em Copiar URL da imagem, Copiar endereço da imagem ou Copiar local da imagem.
      • O Firefox e o Internet Explorer usam Copiar localização da imagem. O Chrome usa Copiar URL da imagem. O Safari usa Copiar endereço de imagem.
  4. Adicione o URL da imagem. No arquivo index.html, clique e arraste para selecionar o URL da imagem com o mouse e, em seguida, pressione CTRL + V para colar o URL.
  5. Adicione o URL de destino. Em index.html, exclua o URL de destino e digite https://www.startpage.com.
      • Você pode usar qualquer URL como URL de destino.
  6. Salve o arquivo HTML.
  7. Abra o arquivo HTML em um navegador da web. Clique com o botão direito em index.html e abra este arquivo no navegador de sua escolha.
      • Se o navegador abrir, mas você não vir a imagem, verifique se digitou o nome do arquivo de imagem corretamente no arquivo index.html.
      • Quando o navegador é aberto, mas você vê o código HTML em vez da imagem de fundo, seu index.html é salvo como um arquivo .rtf (arquivo rich text). Tente editar o arquivo HTML em outro editor de texto.

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

  1. Entenda a tag âncora. O código HTML consiste em abrir e fechar tags. A tag a href = ""> é a tag inicial e / a> é a tag final. Isso é chamado de tag âncora e é usado para adicionar links a uma página da web.
    • O uma diz a um navegador para criar um link. O href é uma abreviatura para referência HTML, o = diz ao navegador para mudar tudo entre ’ ’ crie um link. Qualquer URL pode ser colocado entre as duas aspas.
    • O / a> informa ao navegador que a tag âncora está fechada.
    • Quando você adiciona texto entre a href = ""> e / a> esse texto se torna um link clicável em uma página da web. Por exemplo: a href = "https://www.google.com"> Google / a> cria um link para o Google.
  2. Entenda a tag da imagem. A tag img> é uma tag fechada. Você pode fechá-lo com img src = "" /> ou img src = ""> / img>.
    • O img tag diz a um navegador para exibir uma imagem. O src é uma abreviatura de source, de = diz ao navegador para excluir tudo entre o ’ ’ e recupere a imagem desse local.
    • O /> diz a um navegador para fechar a tag da imagem.
    • Por exemplo: {samp [} obtém a imagem desse URL e a exibe em um navegador da web.
  3. Use este código em qualquer lugar. Agora que você conhece este código, pode a href = "url de destino"> img src = "url de imagem" /> / a> para adicionar imagens clicáveis ​​a qualquer página da web com código HTML.