Learn HTML by Building a Cat Photo App - Step 13

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Kindly guide on what exactly is required on step 13 as I have been stuck for a while.

  **Your code so far**

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
  <p>Click here to view more <a 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>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 13

Link to the challenge:

3

Hello. You’re basically asked to add an attribute to your anchor tag.

An element with more than one attribute:

<element attribute1="value1" attribute2="value2"></element>

Where attributes 1 and 2 can switch places, because their order does not matter.

So, in order to complete this step you must add an attribute target to your anchor tag, and set its value to _blank.

1 Like
4

Please i dont understand

5

Hi, I’ve read your comment and still don’t really understand how to add “_blank” into the code. I’ve tried several different ways but the explanation provided in freecodecamp doesn’t make sense and it hasn’t taught how to use attribute targets yet. In this instance, would you be able to show what the line of code should look like so that we can understand where _blank is supposed to go?

6

Hi.
This is line from my own code, don’t bother with details, you will learn about them.
Here we have element with multiple attributes

 <input id="number" type="number" min="5" max="100" placeholder="Age"/>

here id is the name of attribute and number is the value

7

Hello.

This is the original code available when you begin the step:

<p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>

The step asks you to add the attribute target to your anchor element, and set the value of this new attribute to _blank. You say you haven’t been taught how to use attribute targets, that is partly true. In previous steps you have already dealt with attributes:

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

src and alt are attributes. Attributes have different uses, in this case src sets the ‘source’ of the image the img element should present, and alt sets the alternate text that should replace the image, if there is a problem loading it or finding it (e.g, a case where the src attribute is incorrect or leads to nothing).

The href attribute that you added in a previous step sets the address to which the element within your anchor element should direct. In other words, what website it should lead to.

The target attribute sets where it should open said website. When assigned the value ‘_blank’, it will open in a new tab. You can learn more about the target attribute here: HTML a target Attribute. This is a w3chools page, generally speaking w3schools is a really useful resource you can use and research by yourself when there is something you don’t understand, such as this case.

In order to know how to add the attribute target to your anchor element, and set its value to _blank to complete this step, let’s look at what the correct syntax for an attribute is:

attribute="value"

As you can see, this is the syntax you followed in a previous step, when adding the href attribute to your anchor element:

<a href="https://freecatphotoapp.com">cat photos</a>

It’s possible to add more than one attribute to an element. To do this you must simply separate them with a space. When an element has more than one attribute, their order does not matter.

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.