Como usar uma imagem como um link em html

HTML é um idioma usado em design e desenvolvimento da web. Com o uso do único HTML, podemos fazer páginas da web estática. O alinhamento e o design são feitos através de CSS. Como outras linguagens de programação, também existem códigos/comandos conhecidos como tags. Essas tags são escritas com colchetes angulares.

Podemos encontrar alguns sites modulares interativos interativos que usam abordagem de arrastar e soltar, que são todos compostos de html. Podemos adicionar muitos itens no HTML, como texto, imagens, vídeos, etc. Cada item tem uma tag separada escrita dentro do corpo da tag html. HTML tem muitas funções a serem aplicadas. Um dos quais é um link. Link é um recurso que transforma a página atual em outra. Um link por trás da imagem é o tópico de hoje a ser explicado aqui.

Itens essenciais necessários

Existem duas ferramentas básicas usadas para a implementação do código HTML.

• Um editor de texto
• Um navegador

Uma ferramenta é usada como uma ferramenta de entrada, enquanto a outra atua como software de saída. No editor de texto, escrevemos o código que deve ser executado no outro software. Este editor atua como uma ferramenta de entrada. Por outro lado, o navegador atua como uma ferramenta de saída. É uma plataforma que executa o código HTML escrito no editor.

Como estamos executando esta tarefa no Windows, o editor de texto é um bloco de notas por padrão. Você pode usar sublime, bloco de notas ++, etc. Considerando que o navegador é o Internet Explorer. Mas em nosso guia, usaremos o Google Chrome e o bloco de notas, que é facilmente acessível.

Manual HTML

Se queremos elaborar o conceito de link na imagem, precisamos entender o funcionamento do HTML primeiro. O corpo HTML é dividido em duas partes. Um é a cabeça e a segunda é o corpo. A parte da cabeça está escrita primeiro. Nessa parte, incluímos o título da página da web. A parte funcional é conhecida por ser a parte do corpo do HTML. Porque todas as propriedades do HTML são definidas aqui.

Todas as tags, incluindo HTML, têm tags de abertura e fechamento. O código HTML escrito nos blocos de bloco é salvo em extensões de bloco de notas e navegadores. O .A extensão txt, é salva como um código, enquanto que com html, é salvo para o navegador. O arquivo do editor de texto deve ser salvo com a extensão HTML. Por exemplo, link.html. Em seguida, você verá que o arquivo é salvo com o ícone do navegador atual que você está usando para esse fim.

..
.. .

A imagem abaixo é um código de amostra de html. Na parte da cabeça, adicionamos o nome do título da página. E na parte do corpo, o texto simples é adicionado.

Criação de um hiperlink simples

Você pode ter observado os links nos sites na forma de texto ou na imagem. Estes são desenvolvidos usando os hiperlinks no código HTML. Esta é a característica das páginas da web estática e dinâmica. Tem tags de abertura e fechamento. é conhecido como uma tag de ancoragem. A sintaxe é dada abaixo.

..

Href é para a referência da página. Aqui, escrevemos o endereço desse site específico ou página da web onde queremos ir clicando no link. Enquanto dentro do corpo da tag de ancoragem, escrevemos o texto ao qual queremos vincular. Por exemplo, usamos algum texto abaixo.

https: // linuxhint.com”>
Meu ótimo link

Enquanto escrevemos o endereço, você pode ver que ele está sublinhado automaticamente e sua cor é alterada. Implica diferenciação entre o texto simples e o hiperlink. Enquanto dentro do corpo, usamos uma frase simples. Considere o exemplo acima no estado de trabalho.

Como escrevemos este código no bloco de notas, agora o executaremos para obter a saída do navegador.

A partir da saída, você pode observar que o texto que adicionamos está sublinhado, o que mostra que é um link. Enquanto passamos o ponteiro do mouse para o link, o ponteiro é convertido no símbolo da mão.

Tag de imagem em html

A imagem é o conteúdo básico do HTML. Há uma tag específica usada. A tag de imagem é um pouco diferente de outras tags. Como não contém tags de abertura e fechamento. A imagem pode ser adicionada diretamente do seu sistema ou da Internet também. A fonte da imagem é mencionada. Na fonte, você adiciona a localização/endereço da imagem, ela está em qualquer pasta ou colocada em qualquer site.

< img src = “c:\users\USER\DESKTOP\13.png”>

Aqui, a tag de imagem é . 'SRC' significa a fonte. Este é o caminho da imagem com a extensão do arquivo.

Veja a saída abaixo.

Imagem e um link

Vincular um site à imagem

Você deve ter encontrado sites, especialmente nas lojas de sites ou nos sites de compras on -line. Existem toneladas de imagens que se abrem em outra página ao clicar. Adicionamos um link para a imagem ou vinculando duas páginas através de um link. Esta página pode ser uma página estática ou dinâmica. Precisamos de dois itens tag nele. Uma é a tag de imagem e a outra é a etiqueta do link.

O código da imagem é adicionado dentro da etiqueta de âncora, pois queremos que a imagem age como um link. Abaixo está o código HTML completo.

Agora, vamos executar este código no Google Chrome.

Através da imagem, não será possível explicar com precisão. Mas quando você pratica, você verá que, quando passa o mouse, a imagem mostra a mão do ponteiro, mostrando -a como um link. Quando clicamos na imagem, ela será aberta no site, cujo endereço é mencionado na parte de referência. O site abaixo será aberto.

Vincular uma página da web estática com a imagem

Se você estiver disposto a adicionar a página da Web estática no código, basta substituir o endereço do site pela página presente em seu sistema.

< a href = “sample.html”>

No navegador, você verá que a página de amostra estática é aberta cujo endereço foi dado dentro da tag.

Atributo alt e o link da imagem

Este atributo ajuda a descrever algo sobre a imagem. Isso é exibido apenas quando devido a algum motivo, a imagem não está carregada ou sua conexão com a Internet pode ser lenta. Portanto, essa descrição é mostrada que ajuda o leitor a saber algo sobre a imagem ou um site.

< img alt= “image is not available” src= “C:\users\USERS\DESKTOP\13.png”>

Esta é a tag. Atributo alt está escrito dentro da tag IMG.

A saída é mostrada abaixo que mostra o texto alternativo à imagem.

Conclusão

Neste artigo, usamos as tags simples de um link e uma imagem. Além disso, usamos uma imagem como um link com muitos exemplos. Pode haver muitas maneiras de elaborar este conceito. Mencionamos alguns exemplos fáceis neste guia.