Introdução ao link da imagem em HTML

O link da imagem em HTML é encontrado em quase todas as páginas, pois eles nos ajudam a navegar de uma página para outra em um site. Uma combinação popular é usar a tag âncora HTML com a tag img do HTML . Com essa combinação, podemos permitir o movimento de usuários de uma página para outra clicando em uma imagem. Antes de aprofundarmos neste tópico, vamos primeiro entender o trabalho e a renderização dos elementos de âncora e imagem individualmente e depois combiná-los para obter uma imagem vinculada.

Tag âncora HTML

A tag HTML Anchor é usada para criar hiperlinks HTML para outras páginas da web ou conteúdo multimídia hospedado na web. Vamos consultar a sintaxe abaixo para entender como as tags âncora funcionam e seus atributos básicos

Clique aqui!!

No exemplo acima, o atributo "href" especifica o URL da página da web para a qual gostaríamos de redirecionar o usuário enquanto clica no texto "Clique aqui !!".

Vamos ver o código completo abaixo:

Resultado

->

Com o exemplo acima, você poderá fazer as seguintes observações

  1. Um link não visitado aparecerá sublinhado e na cor azul. Por exemplo. Este é um link não visitado
  2. Um link visitado aparecerá sublinhado e na cor púrpura. Por exemplo. Este é um link já visitado
  3. Um link ativo aparece sublinhado e na cor vermelha. Por exemplo. Este é um link ativo

Tag de imagem HTML

Enquanto navega na Internet, tenho certeza de que você deve se deparar com várias páginas da Web que possuem várias formas de multimídia incluídas. Especialmente as imagens são uma forma popular de multimídia que pode ser encontrada em quase todas as páginas e sites interativos atualmente. Vamos entender a tag da imagem e sua implementação em HTML com o exemplo abaixo:

Sintaxe

Vamos agora entender como cada um dos atributos na tag img funciona:

  1. src: o atributo src define o caminho do arquivo de imagem que estamos tentando carregar com essa tag. Pode ser um link para uma imagem hospedada na Web com o formato exemplo.com/br/images/dummy.png.webp ou pode ser um arquivo de imagem hospedado localmente no mesmo servidor da página da Web.
  2. alt: o atributo alt define o texto e a descrição da imagem que gostaríamos de exibir, caso as imagens não sejam carregadas devido à conectividade da rede ou a qualquer outro problema.
  3. Largura e altura: a largura e a altura dos dois atributos definem a largura e a altura da imagem que gostaríamos de exibir na página da web. Caso contrário, a imagem funcionaria com 100% de altura e largura padrão.

Agora vamos ver o código HTML completo necessário para carregar uma imagem em uma página da web. Salve a seguinte imagem com o nome "sunset.png.webp" em uma pasta chamada "image_test" em sua unidade local.

Agora, na mesma pasta, vamos criar um arquivo HTML chamado sunset.html com o seguinte código HTML:

Agora vá ao navegador da sua máquina e digite o caminho do arquivo .html. Meus arquivos são armazenados na unidade D, portanto, o caminho para mim seria

D: /image_test/sunset.html

E agora podemos ver que a página HTML renderizada carregou a imagem do pôr do sol em nosso navegador. Com a ajuda do CSS e

também podemos exibir o texto conforme nossa exigência em torno da imagem. As tags anchor e img são compatíveis com todos os navegadores como Google Chrome, Safari, Microsoft Edge, Firefox e Internet Explorer.

Imagens vinculadas em HTML

Agora que entendemos com exemplos, como a tag âncora e a tag image funcionam individualmente, agora vamos entender como podemos combinar as duas funcionalidades para alcançar um cenário em que gostaríamos que os usuários fossem redirecionados para uma nova página da Web com o clique de uma imagem . Para tornar uma imagem clicável e redirecionar o usuário para outra página da web, basta aninhar a imagem em uma tag de âncora. No exemplo abaixo, tentaremos alistar os três principais mecanismos de pesquisa da web usados ​​em todo o mundo. Em nossa lista, mostraremos os logotipos dos três mecanismos de pesquisa e, ao clicar em qualquer um dos logotipos, o usuário será redirecionado para a respectiva página do mecanismo de pesquisa. Vamos criar uma pasta chamada "teste de redirecionamento" e na mesma pasta vamos salvar as imagens abaixo

1. Google

2. Yahoo

3. Bing

Agora, criaremos um .html com o nome imageredirection.html no mesmo arquivo. O imageredirection.html conterá o seguinte código

Agora, precisamos acessar a página HTML do navegador, para a qual digitarei meu caminho local “D: / redirectiontest / imageredirection.html”. o navegador renderizará o arquivo HTML para gerar o seguinte resultado:

->

Os usuários poderão navegar para o respectivo mecanismo de pesquisa clicando no logotipo deles. A partir do exemplo acima, podemos observar que o HTML é uma linguagem simples e flexível que nos permite combinar várias tags e obter uma funcionalidade complexa como essa. Com a codificação HTML adicional, também podemos adicionar elementos HTML diferentes, como exibir imagens vinculadas em uma lista ordenada ou não ordenada usando

    ou
      . A extrema flexibilidade e simplicidade que o HTML oferece a cada versão lançada ajuda os designers de UI e UX a projetar páginas da web interativas e intuitivas que vemos ao navegar na Internet para atividades do dia a dia.

      Artigo recomendado

      Este foi um guia para o link da imagem em HTML. Aqui discutimos os diferentes tipos de tags HTML, juntamente com a sintaxe. Você também pode consultar nossos outros artigos sugeridos para saber mais -
      1. Atributos HTML
      2. Tags de formato HTML
      3. Vantagens do HTML
      4. Tags de imagem HTML
      5. Quadros HTML
      6. Blocos HTML
      7. Definir uma cor de plano de fundo em HTML com exemplo
      8. Lista ordenada em HTML | Tipos de atributos com sintaxe

Categoria:

Ferramentas de Desenvolvimento Web