Aprende HTML construyendo una aplicación de fotos de gatos - Paso 64

Español HTML-CSS
1

No se que hacer

Tu código hasta el momento

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <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>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
       <a href="https://www.freecodecamp.org"></a>
      </p>
    </footer>
  </body>
</html>

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Desafío: Aprende HTML construyendo una aplicación de fotos de gatos - Paso 64

Enlaza al desafío:

1 Like
2

Hola @rosalianicole2003

Siempre puedes buscar cómo se crea un enlace en HTML, las páginas de MDN Web Docs y web.dev te puede ser muy útiles como referencia.

Imagino que tú problema es que no entiendes como se marca el código para convertirlo en un enlace. Se emplea el elemento anchor (ancla) a y para convertir un texto, imagen, vídeo, otro elemento, … en un elemento a necesitas marcarlo utilizando una etiqueta de apertura <a> con la URL y otra de cierre </a> allí dónde quieres que termine el enlace (el elemento a o aquella parte de tú documento HTML que quieres convertir en un enlace). Por ejemplo, voy a convertir todos los elementos de la lista ordenada en un enlace:

 <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/a" >
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
</a>

Lee con calma los ejercicios, no hay prisa a la hora de aprender, y consulta aquello que no entiendas en alguna página de calidad y luego intenta resolverlo. Espero que esto te aclare las dudas y te sea de ayuda.

Feliz codificación y suerte Rosalía!

3

Solucion

 <p>No Copyright - <a href="https://www.freecodecamp.org"</a>freeCodeCamp.org</p>
2 Likes
4

Hola, en el texto dice: Turn the existing freeCodeCamp.org text into a link by enclosing it in an anchor (a) element. y veo que tú has puesto "freeCodeCamp.org afuera de la etiqueta de cierra de (a) o lo pusiste así para no hacer todo el trabajo =D