Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Organize with Unordered Lists

Bronwyn Huddleson
Bronwyn Huddleson
330 Points

I have added the img/ before each photograph and it still isnt working, I am not sure what is wrong.

I think my work is correct, can someone please tell me where I messed up with my commands?

6 Answers

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

This is the correct syntax so that the code will work:

<ul class="gallery-list">
   <li>
      <a href="../img/your-image.png"> This is my Image </a>
      <img src="../img/your-image.png" alt="This is alternative text. Nice for usability and accessibility"   />    
      <p>I am a paragraph. Just wanted to let you know that YOU HAVE TO close the tags when needed.</p>
  </li>

   OTHER LI ELEMENTS AS ABOVE

</ul>

Remember to always check your possibly closing tags. IMG tags don't have a closing tag, yet they use a CLOSING SLASH at the end. Other elements, like LI, P, UL (..), have their own closing tags. Check your code out also for PATHS. You might have done something like this:

<img src = "../img/image.png" />

In this case the path goes BACK by 1. This is something you might want to use when you call an image (or whatever) from your stylesheet but your stylesheet is nested somewhere where he cannot get a direct opportunity to take the path you are asking him. In these cases we use the double dots to go back by 1. Also, the countrary might have happened. You didn't put the DOUBLE DOTS where needed. Check your images path and then check out your declaration for the path!

Have the best day of learning, mate!

Bronwyn Huddleson
Bronwyn Huddleson
330 Points

How can I add a screen shot to show my code?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points
![alt text](/path/to/img.jpg "Title")
Lorenzo Pieri
Lorenzo Pieri
19,772 Points

As I opened the "Check Element" from the Chrome Dev Toolbar I noticed this:

src="/desktop/to/screenshot.png"

This is the src from the image you just tried to post. Are you definatly sure that you are using a validly hosted \ uploaded image?

Because the images should be :

1) Hosted INSIDE the workshop so you can use them with relative linking

2) Hosted somewhere on the internet (http://google.images/yourimage.png) so that you can use them with ABSOLUTE linking.

Which one is that? :)

Bronwyn Huddleson
Bronwyn Huddleson
330 Points

so now the same thing is happening here as in my code, the picture icon is only showing up

Bronwyn Huddleson
Bronwyn Huddleson
330 Points

I'm not sure, I am really confused :/ So I should add the image to my workspaces and then use it? or I should just use the link to my workspaces online and use that?

(Thanks for helping me through this!)

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

It really depends on you. If you are working with the TREEHOUSE workspace, I'd say you should upload the files directly into the workspace. While we're at it, I'll be able to do a small video and post it on youtube in (give or take) 30 minutes. If you have the will to wait, Ill do it :)