Linking Image in HTML: How to create links from images (Português)

we are going to take a beginner friendly look at how to create image links on your website.

veremos quais as tags HTML que você precisa usar no código.se nunca fez isto antes, não se preocupe! Vou guiar-te durante todo o processo.

no final deste artigo, você estará criando links de imagem em toda a sua página web e na Internet.,nós também vamos olhar para algumas técnicas mais avançadas no final do artigo se você estiver se sentindo corajoso.pegue um café, vamos mergulhar!como criar uma hiperligação?

para obter links na sua página inicial, você precisa criar uma hiperligação. Para fazer isso em HTML você precisa usar um ID

tag. Cada tag<a>tem duas partes da tag de abertura e fechamento.,

Aqui está um exemplo:

<a href="..."> ...</a>

No exemplo acima, você pode ver que o open tag:

<a href="...">

Cria o início do hiperlink. Em seguida, fechamos a tag com:

</a>

qualquer texto que escrevemos entre a tag aberta e fechada é o seu texto de ligação. Por Exemplo:

<a href="..."> My Great Link</a>

Para transformar isso em um link precisamos adicionar um URL. Para isso, adicionamos o URL ao atributo href., A URL pode apontar para qualquer lugar na internet. Para este exemplo, vamos usar o PageDart página inicial:

<a href="https://pagedart.com"> My Great Link</a>

certifique-se de incluir a URL completa com HTTPS em frente.

isso é tudo o que há para criar um link apenas texto em HTML. Em seguida, vamos ver como podemos adicionar uma imagem a uma página web usando HTML.

como criar uma imagem em HTML?

para adicionar uma imagem à sua página web use um ID

tag.,

esta tag é um pouco diferente de uma taga tag em que não tem uma tag de abertura e fechamento.

para criar um id

marca, é necessário dar à marca um ficheiro de código. Use osrcatributo para fazer isso:

<img src="https://pagedart.com/favicon-32x32.png">

Isto irá adicionar uma imagem para a tela como esta:

Agora temos uma imagem de nós precisa transformá-lo em um link., Para isso, precisamos adicionar um id

tag dentro do id

tags criando uma imagem de ligação em HTML.

vamos olhar para um exemplo a seguir.

Imagem como um link

Para transformar uma imagem em link, você precisa adicionar a tag <img> dentro de <a> tag., Assim, tomando o exemplo anterior, o código-fonte seria semelhante a este:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

o Que produziria este HTML:

adicionando o <img> dentro de uma <a> o navegador pode ver que a imagem deve ser clicável. Você transformou a imagem em um link!

Se você está usando WordPress, então você pode adicionar este código HTML à sua página usando a vista de texto no editor de páginas.

Você também pode adicionar texto e imagens dentro do link, vamos ” ver isso.,

imagem e texto como uma ligação

o exemplo acima mostrou como adicionar apenas uma imagem como a ligação.

E se quiséssemos adicionar uma imagem e texto a um link.

Bem, neste caso, precisamos ter certeza de que nós adicionamos o texto antes de fechar o <a> tag:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

No exemplo acima, nós adicionamos “PageDart Casa” dentro de <a> tag com <img> tag., Quando mostrado num navegador web na página, ficará assim:

há mais um atributo no <img> tag que não discutimos e que o utilizador deve usar.

é o atributo alt.

Image Links and the Alt Attribute

Images on the internet should have an alt attribute. Esta é uma descrição de texto da imagem.os leitores de Ecrã usam o texto alt para ajudar os utilizadores com deficiência visual. Os leitores de tela irão ler a descrição do texto quando encontrar uma imagem.,

Para fazer isso, adicione um alt atributo img tag assim:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

Agora, quando o leitor de tela lê esta imagem vai dizer “PageDart.com” em voz alta.

é importante seguir as melhores práticas ao escrever texto alt imagem.

certifique-se que pensa na pessoa que está a usar o leitor de ecrã. Escreva a sua descrição de texto alt para eles e descreva a imagem o melhor que puder.

isto é tudo o que você precisa para criar ligações de imagens em HTML., No entanto, existem algumas técnicas mais avançadas que você pode usar. Se te sentes corajoso, vamos ver isto a seguir.

técnica avançada: a imagem como uma ligação usando CSS

uma técnica mais avançada é usar CSS. CSS significa Cascading Style Sheet e permite-lhe alterar a aparência de uma página HTML.

com CSS pode definir uma imagem de fundo num elemento como o nosso id

tag.,

Aqui teríamos HTML semelhante a este:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

Então, desta vez, não há nada dentro de <a> tag, mas a imagem é definida usando o estilo CSS. Isto mostraria o seguinte no navegador:

podemos usar uma técnica similar com um id

tag.

técnica avançada: usando um botão

neste exemplo, vamos usar a etiqueta <button> em vez da etiqueta <a> tag.,

podemos criar a mesma saída como o exemplo acima usando este código HTML:

, Que cria esse saída:

Aqui estamos usando JavaScript para abrir uma nova guia do navegador. A enviar o utilizador para a página inicial do PageDart.não faço ideia porque Farias isto! Mas, eu queria mostrar-lhe o que é possível e como HTML, CSS e JavaScript podem ser flexíveis.

o último exemplo que vou mostrar é usando um mapa de imagem.

técnica avançada: mapa de imagens

mapas de imagens são imagens únicas com áreas clicáveis., Eles perderam popularidade ao longo dos anos, mas ainda fazem parte da especificação HTML5. Isto significa que navegadores como o Internet Explorer, o Chrome e o Safari irão apoiá-los.

os Gráficos são bons exemplos de Mapas de Imagem, tais como os gráficos organizacionais, como este:

em Seguida, fazer com que cada zona rosa com um link clicável podemos criar uma map como esta:

Nós adicionamos o atributo usemap img tag.,

Then within the maptag we have anarea tag. Cada uma dessas áreas cria uma área clicável que atua como um botão.

Utilizando a Vinculação da Imagem em HTML

temos olhado cinco maneiras diferentes para adicionar uma imagem como um link na sua página web:

1. Uma imagem como um link
2. texto e Imagem como um link
3. o Uso de CSS para definir uma imagem como um link
4. Usando um botão como um link
5. a Utilização de mapas de imagem

Todos estes pode transformar imagens em links. Devias ter confiança para tentares isto sozinho.,

também analisámos a acessibilidade e como definir o texto Alt para ajudar os deficientes visuais.