Pls help me i dont know how to add images to my website

HTML-CSS
1

Tell us what’s happening:

Your code so far


<h2>CatPhotoApp</h2>
<main>


<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

Your browser information:

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

Challenge: Add Images to Your Website

Link to the challenge:

2

What have you tried? That looks like the starting state.

The instructions give you an example:

<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">

Then it gives you the instructions:

Within the existing main element, insert an img element before the existing p elements.

Now set the src attribute so that it points to this url:

https://bit.ly/fcc-relaxing-cat

Finally, don’t forget to give your img element an alt attribute with applicable text.

Which part isn’t clear?

4

sir pls tell what is src

5

and also what is alt attribute

6
  1. Following the instructions, find the <p> elements in the code.
  2. On the line before those, put an img element, so something like <img>.
  3. Then, following the instructions, add and src attribute to it. So, it will look something like:
<img src="https://the.path/the-image">

except that it tells you that the src should be https://bit.ly/fcc-relaxing-cat.

  1. Add an alt attribute. This is just a string to say what the image is. There are many things it could be. So, you’ll end up with something like:
<img src="https://the.path/the-image" alt="a description of the image">

If you do that, and change the src to the correct url and give it a meaningful alt, it will pass. It does for me. Technically it doesn’t check what your alt string is, it just checks if there is any string there, but it’s a good habit to get into to provide a meaningful alt text, like “relaxing cat”.

I don’t know how to help you more than that without giving you the answer. But please don’t get frustrated - this is confusing stuff if you’ve never done it before. If you’re still stuck, please cut and paste the exact code that is failing so we can tell you exactly what is wrong with it.

1 Like
7

sir pls tell what is src

They are attributes that tell the computer about the image. The “src” is the “source” - the place (the local file name or the internet address) to find the image to show.

and also what is alt attribute

The “alt” (short for “alternate”) tells the computer what to display if the image can’t be found. If it can’t find the image it will display that text instead so the user will have an idea what the image should have been. It’s also helpful if a visually impaired person is using a screen reader, so they can know what the image is representing.

In the example provided:

<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">

The location of the image (“source” or “src”) would be “https://www.your-image-source.com/your-image.jpg” and the alternate text (“alt”) would be “Author standing on a beach with two thumbs up.”.

You need to do the same thing as in that example img (short for “image”) but change the src and alt to meet the requirements given. You can literally cut and paste that example and change the src and alt.

1 Like
8

Can i do this on the phone?

9

Not to be rude, but I really don’t think that is necessary. Can you please post the code that you’ve tried? Just cut and paste the code that you’ve tried into the reply and we can help you.

10

What does it mean if the letters becomes red

11

Thank u sir i found the answer google and u help me.