Aprenda HTML criando um aplicativo de fotos de gatos - Passo 15

Conte-nos o que está acontecendo:
Estou tentando transformar a imagem em um link, porém estou tento dificuldades para tal. Se alguém puder me ajudar, desde já agradeço.

Seu código até o momento

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
       alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>

Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Desafio: Aprenda HTML criando um aplicativo de fotos de gatos - Passo 15

Link para o desafio:

Olá!

A tag para criar links é o elemento anchor, <a>, ela precisa ser fechada com </a>.

Esse elemento, como outros elementos, pode usar atributos. Um deles é o atributo de referência href que vai indicar qual o destino do link, assim:

<a href="freecodecamp.org">Tudo aqui entre as tags será o link!</a>

Você pode colocar qualquer coisa dentro das tags incluindo um elemento de imagem. Então se eu tenho essa imagem:

<img src="foto_gatinho.jpg"/>

Eu só preciso envolver ela em um elemento/tag anchor para fazer dela um link:

<a href="freecodecamp.org"><img src="foto_gatinho.jpg"/></a>

Se ajudar, pense como se cada elemento fosse uma caixinha, você coloca uma foto dentro da caixinha <img/> para mostrar a foto, e pode colocar essa caixinha dentro de uma caixinha de link <a></a>, para criar o link.

Espero que ajude! Bons estudos.

1 Like