Os sites são diferentes de qualquer meio de comunicação que veio antes deles. Uma das principais coisas que diferenciam os sites dos formatos de mídia anteriores, como impressão, rádio e até televisão, é o conceito de "hiperlink".
Os hiperlinks, também comumente conhecidos como "links", são o que tornam a Web dinâmica. Ao contrário de uma publicação impressa que pode fazer referência a outro artigo ou outro recurso, os sites podem usar esses links para realmente enviar visitantes a outras páginas e recursos. Nenhum outro meio de transmissão pode fazer isso. Você pode ouvir um anúncio no rádio ou ver na TV, mas não há hyperlinks que possam levá-lo para as empresas nesses anúncios da maneira que o site pode fazer facilmente. Links realmente são uma incrível ferramenta de comunicação e interação!
Muitas vezes, os links encontrados em um site são conteúdo de texto que direciona os visitantes para outras páginas desse mesmo site. A navegação de um site é um exemplo de links de texto na prática, mas os links não precisam ser baseados em texto. Você também pode vincular facilmente imagens no seu site. Vejamos como isso é feito, seguido por algumas instâncias em que você gostaria de usar hiperlinks baseados em imagem.
Como ligar uma imagem
A primeira coisa que você precisa fazer é colocar a imagem em si em seu documento HTML. Um uso comum de um link baseado em imagem é o gráfico do logotipo do site, que é então vinculado de volta à página inicial do site. Em nosso código de exemplo abaixo, o arquivo que estamos usando é um SVG para o nosso logotipo. Esta é uma boa escolha, pois permitirá que a imagem seja dimensionada para diferentes resoluções, mantendo a qualidade da imagem e um pequeno tamanho geral do arquivo.
Veja como você colocaria sua imagem no documento HTML:
Em torno da tag de imagem, você adicionaria o link de âncora, abrindo o elemento de âncora antes da imagem e fechando a âncora após a imagem. Isso é semelhante ao modo como você vincula o texto, mas em vez de envolver as palavras que deseja vincular às tags de âncora, você quebra a imagem. Em nosso exemplo abaixo, estamos nos conectando à página inicial do nosso site, que é "index.html".
Ao adicionar este HTML à sua página, não coloque espaços entre a tag de âncora e a tag de imagem. Se você fizer isso, alguns navegadores adicionarão pequenos sinais ao lado da imagem, o que parecerá estranho.
A imagem do logotipo agora também funcionaria como um botão da página inicial, que é praticamente um padrão da web atualmente. Observe que não incluímos nenhum estilo visual, como a largura e a altura da imagem, em nossa marcação HTML. Deixaremos esses estilos visuais em CSS e manteremos uma separação clara da estrutura HTML e dos estilos CSS.
Depois de chegar ao CSS, os estilos que você escreve para segmentar esse gráfico de logotipo podem incluir o dimensionamento da imagem, incluindo estilos responsivos para imagens amigáveis para vários dispositivos e também quaisquer recursos visuais que você queira adicionar à imagem / link, como bordas ou CSS sombras. Você também pode dar sua imagem ou vincular um atributo de classe se precisar de "ganchos" adicionais para usar com seus estilos CSS.
Casos de Uso para Links de Imagem
Então, adicionar um link de imagem é bem fácil. Como acabamos de ver, tudo que você precisa fazer é envolver a imagem com as tags de âncora apropriadas. Sua próxima pergunta pode ser "quando você realmente faria isso na prática, além do exemplo de link logo / homepage acima mencionado?"
Aqui estão alguns pensamentos:
- Imagens em miniatura em uma galeria que leva a versões maiores dessas imagens.
- Imagens usadas sozinha para representar conteúdo, como fotos de produtos de um site de comércio eletrônico.
- Imagens de provocação que fazem parte de outro conteúdo, como um artigo de blog ou comunicado de imprensa, que motivam as pessoas a perceberem que o conteúdo lhes dá uma área de segmentação para tocar ou clicar para ler o artigo completo.
- Imagens de ícone que são usadas como botões para se conectar a uma funcionalidade específica ou a páginas do site.
- Links de mídia social que usam os logotipos reconhecíveis dos vários sites de mídia social que são importantes para esse site ou empresa.
- Imagens usadas como botões para determinadas funcionalidades, como envios de formulários (nota de práticas recomendadas - do ponto de vista do desempenho de um site, os botões estilizados exclusivamente com CSS são uma opção melhor do que os botões de imagem).
Um lembrete ao usar imagens
As imagens podem desempenhar um papel importante no sucesso de um site. Um dos exemplos acima mencionados mencionou o uso de imagens ao lado de outros conteúdos para chamar a atenção para esse conteúdo e levar as pessoas a lê-lo.
Ao usar imagens, você deve estar atento para selecionar a imagem certa para suas necessidades, isso inclui o assunto e o formato corretos da imagem, além de garantir que as imagens usadas em seu site sejam otimizadas adequadamente para a entrega do site. Isso pode parecer muito trabalho apenas para adicionar imagens, mas a recompensa vale a pena! Imagens realmente podem adicionar muito ao sucesso de um site.
Não hesite em usar imagens apropriadas em seu site e vincule essas imagens quando necessário para adicionar algumas interativamente ao seu conteúdo, mas também esteja atento a essas práticas recomendadas de imagem e use esses gráficos / links de maneira correta e responsável em seu trabalho de web design.
