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

Posted by Jeanie Sherman
Jeanie Sherman
288 Points

maybe?

What is wrong with this work. The test won't let me move on. It says I need to make sure the image tag displays: "img/numbers-01.jpg." I have done this. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit</title> </head> <body> <header> <a href="index.html"> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p></p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p></p> </a> </li> </ul> </section> <footer> <p>© 2013 Nick Pettit.</p> </footer> </body> </html>

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
       <ul>
         <li>
           <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg" alt="">
           <p>Experimentation with color and texture</p>
           </a>
         </li>
         <li>
          <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p></p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p></p>
         </a>
        </li>
      </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Jeanie Sherman
Jeanie Sherman
288 Points

The first page did not copy well. Second page reflects my work.

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It looks like it's because you put the reference to the file in the anchor element as well as your image element.

Try taking out the anchor elements completely.

<a href=""></a>
Jeanie Sherman
Jeanie Sherman
288 Points

I did what you said and it still reads: make sure the image tag displays: "img/numbers-01.jpg."

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

What about the paragraph elements in your links...

Here's what the question is saying.

Inside the three new list items, add the following images from inside the img folder: "numbers-01.jpg", "numbers-02.jpg", and "numbers-06.jpg". Leave the alt attributes blank, and don’t add any captions or links. Just the images!

What you want is a structure that looks like this.

 <ul>
        <li><img src="img/numbers-01.jpg" /></li>
        <li><img src="img/numbers-02.jpg" /></li>
        <li><img src="img/numbers-06.jpg" /></li>      
</ul
Jeanie Sherman
Jeanie Sherman
288 Points
Jeanie Sherman
Jeanie Sherman
288 Points

Thank you. I'll do what you suggested. So don't I need the anchor for the picture to display? I think I'm somewhat confused.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Jeanie. I'll try and explain. :)

The anchor element is the driving force of the internet and is the first tool when interacting with different web pages. They "link" to each other. They get you from one web page to another.

This how it looks.

<a href="http://www.teamtreehouse.com">Go the awesome Treehouse Website</a>

So it opens with an <a> tag, provide the website link to go to in the href attribute, provide the text to display to the browser and then close the tag with </a>.

The image element is slightly different. It's one of the few HTML elements that doesn't chave a closing tag.

<img src="" />

It links to other images on your local hard drive or somewhere on the internet.

It opens with <img declare the location with the src attribute and close it with a forward slash.

The anchor element allows you to link to another webpage but the image element references an image on your local hard drive, your server or another location on the internet. :-)

Jeanie Sherman
Jeanie Sherman
288 Points
Jeanie Sherman
Jeanie Sherman
288 Points

Thank you. That makes sense now.