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

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

Seu código até o momento

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."><a herf="https://freecatphotoapp.com"</a>

<!-- User Editable Region -->

    </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/115.0.0.0 Safari/537.36 OPR/101.0.0.0

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

Link para o desafio:

Oiee, boa noite! :slight_smile: @aandrecandido

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
<a herf="https://freecatphotoapp.com"</a>

Quebrei seu código em duas linhas pra gente conseguir observar melhor o que está acontecendo. O desafio pede o seguinte:

Transforme a imagem em um link, envolvendo-a com as tags dos elementos necessários. Use https://freecatphotoapp.com como valor do atributo href do elemento de âncora.

A palavra chave pra resolução desse desafio é a palavra envolvendo. A imagem deve estar dentro de uma tag de link, no seu código a tag img está dentro da tag a? :eyes:

Dê uma olhada!!! :thinking:

qualquer coisa se não tiver ficado nítido me avisa que explico de outra forma! Bons estudos.

1 Like

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

Seu código até o momento

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

      <img <a href="https://freecatphotoapp.com"src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

<!-- User Editable Region -->

    </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/117.0.0.0 Safari/537.36

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

Link para o desafio:

Olá @fabio1 boas vindas :slight_smile: espero que esteja bem!

Vamos das uma olhada no seu código :eyes:

<img <a 
href="https://freecatphotoapp.com"src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

Quebrei seu código em duas linhas para conseguirmos analisar melhor, repare que você declara as tags da seguinte maneira:

<img      <a>

A sintaxe acima não existe. Aqui você não fecha a sua tag img e nem a sua a tag <a>. Outro ponto importante aqui é que temos uma tag img envolvendo uma tag a . Será que é isso que devemos fazer? :eye:

O desafio pede para que você: Transforme a imagem em um link, envolvendo-a com as tags dos elementos necessários. Se eu quero transformar minha imagem em um link quem deve estar por fora envolvendo toda imagem? :thinking:

Se não tiver ficado nítido me avise, bons estudos!

1 Like

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

Seu código até o momento

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

   <a href="https://freecatphotoapp.com"> <img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"</a> alt="A cute orange cat lying on its back."

<!-- User Editable Region -->

    </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/117.0.0.0 Safari/537.36

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

Link para o desafio:

Ei @michaeljohnny534 boa tarde :slight_smile:

Vamos da ruma olhada no seu código? :eye: Vou quebrar ele em linhas pra gente conseguir enxergar melhor!!!

Temos alguns problemas aqui e o teste ele retorna assim que executamos com esse código:

Está faltando uma tag de fechamento (a ) após a imagem.

Isso pq você não fechou sua tag img e outro problema que temos aqui é o seu alt="A cute orange cat lying on its back." que está fora da tag img. Esse atributo deve estar contido dentro da tag, exemplo:

<img alt="texto aqui" src="#" />

Ficou nítido? qualquer coisa me avisee!! bons estudos :slight_smile:

In the <a element containing the link to “cat photos”, you have a typo in the href attribute. It should be href, but you wrote herf

you have a syntax error in the <img element

1 Like

Obrigado, consegui agora estou parado em outro kkk

1 Like

qualquer coisa só chamar!!
:slight_smile: bons estudos

1 Like

A post was merged into an existing topic: Aprenda HTML criando um aplicativo de fotos de gatos - Passo 46

Transformar imagem em link:
Sou iniciante de programação. Não consigo inserir transformar a imagem em link. Alguém mais experiente poderia me dar um help aí?!.

Seu código até o momento

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

<!-- User Editable Region -->

    </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/117.0.0.0 Safari/537.36

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

Link para o desafio:

1 Like

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

**Seu código até o Desculpe, seu código não passou nos testes. Você está chegando lá.

O elemento img deve estar dentro do elemento de âncora (a). Todo o elemento img deve estar dentro das tags de abertura e fechamento do elemento de âncora (a)**

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
      <a img <a href="https://freecatphotoapp.com">cat photos</a>

      
 

<!-- User Editable Region -->

    </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/117.0.0.0 Safari/537.36 Edg/117.0.2045.60

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

Link para o desafio:

Ei @matheus_7 boass vindas :slight_smile:

Para adicionarmos link a uma imagem podemos envolver essa imagem com uma tag <a>:

Dei uma pesquisada no google e achei isso aqui: html5 - colocar link em uma imagem para ser redirecionado para outro site - Stack Overflow em Português

Bons estudos, qualquer coisa só chamar

1 Like

ei @cassio boa noite :slight_smile:

Da uma olhada na resposta que dei pro @matheus_7 e vê se te ajuda!! qualquer coisa se não tiver ficado nítido me avisa :wink:

Bons estudos!

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

Seu código até o momento Transforme a imagem em um link, envolvendo-a com as tags dos elementos necessários. Use https://freecatphotoapp.com como valor do atributo href do elemento de âncora. estou no passo 15 não estou conseguindo trasformar a imagem em um link…

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
  
    
      
        

<!-- User Editable Region -->

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/117.0.0.0 Safari/537.36 Edg/117.0.2045.60

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

Link para o desafio:

You can turn something into a link by nesting it an an anchor element. In other words, by wrapping it in opening and closing a tags. You already did this with the words “cat photos”. You put an opening a tag before those words and a closing a tag after those words. Do the same thing to turn the img element into a link.

2 Likes

ei @cassio tudo bem? :slight_smile: Conseguiu resolver?

Não estou conseguindo encontrar o erro.

href=“https://freecatphotoapp.com”>
A cute orange cat lying on its back.

Muito obrigado pela ajuda! :heart:

Valeu pela ajuda @anabergerr :v: