Autor:
Christy White
Data De Criação:
12 Poderia 2021
Data De Atualização:
1 Julho 2024
![Link na Imagem HTML - (Tutorial Completo)](https://i.ytimg.com/vi/RQhFjctLNHc/hqdefault.jpg)
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
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.
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>
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.
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.
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.
Salve o arquivo HTML.
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
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.
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.
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.