sexta-feira, 27 de novembro de 2020

HTML #6: INSERINDO IMAGEM COM LINK

 Nas postagens anteriores vimos como inserir um hyperlink na sua página web, e também como inserir imagens. Veja os links da postagem:

 HTML #4: INSERINDO IMAGEM

 HTML #5: INSERINDO LINK

 Agora vamos aprender a como criar uma imagem que pode ser clicada como um link.

 

html-imagem-link

 

 

 

 

 

 Abra o gedit (ou um editor de texto de sua preferência) e abra também o arquivo da aula anterior:


Para inserir uma imagem linkada primeiramente vamos usar a tag de link <a> com os seus respectivos atributos:


Agora era o momento de adicionarmos o texto que iria aparecer como link, mais como queremos uma imagem, simplesmente colocamos a tag <img> “dentro” da tag <a>

 


No caso adicionei uma imagem que acrescentei na pasta mídias na área de trabalho. Por fim fechamos as tags, lembrando que a tag que abre primeiro fecha por último:


 Acrescentei duas tag’s de quebra de linha <br> para ficar mais organizado .Vamos ver com ficou no navegador:

 


 Note que a imagem adicionada possui um link de redirecionamento.

Veja o vídeo da postagem:

 

Nenhum comentário:

Postar um comentário