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 zsoka barkacs
zsoka barkacs
202 Points

I cannot move on with "How to Make a Website", though in preview mode I see the right thing.

The message I get is I didn't include the proper image file, though I see it in preview mode. I'm stuck, cannot go to the newt step.

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="">
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
          </a>
        </li>
      </ul>      
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

3 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The problem was in following the directions. It did not ask you to make them anchor elements too. This code passed. 

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Nick Pettit</title>
6
  </head>
7
  <body>
8
    <header>
9
      <a href="index.html">
10
        <h1>Nick Pettit</h1>
11
        <h2>Designer</h2>
12
      </a>
13
      <nav>
14
        <ul>
15
          <li><a href="index.html">Portfolio</a></li>
16
          <li><a href="about.html">About</a></li>
17
          <li><a href="contact.html">Contact</a></li>
18
        </ul>
19
      </nav>
20
    </header>
21
    <section>
22
      <ul>
23
        <li><img src="img/numbers-01.jpg" alt=""></li>
24
        <li><img src="img/numbers-02.jpg" alt=""></li>
25
        <li><img src="img/numbers-06.jpg" alt=""></li>
26
    </section>
27
    <footer>
28
      <p>&copy; 2013 Nick Pettit.</p>
29
    </footer>
30
  </body>
31
</html>

Sorry for the numbers. And, oddly, it passed without closing the unordered list.

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

The reason why you can't move on is because you're putting code that is not valid. 

   <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
      </a>
    </li>

Anchor elements are only used to link to a different web page. You're inserting the path to an image. You can view the correct code below.

<!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><img src="img/numbers-01.jpg" alt=""></li>
        <li><img src="img/numbers-02.jpg" alt=""></li>
        <li><img src="img/numbers-06.jpg" alt=""></li>
      </ul>
    </section>
    <footer>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
zsoka barkacs
zsoka barkacs
202 Points

Thanks for your help, it is working now.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The statement that anchors can only refer to external sites is not correct. You can have internal links with the anchor element also. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fa

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

I never said external sites I just said different web page. Which can mean both internal and external sites.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You can also use anchors to link to ids in the same page.

If you are linking to a spot on the same page, the format of the link will be similar to:

<a href="#anchor">Link Text</a>

For example, if the text is "Read more about raptors!" then your HTML should look like this:

<a href="#raptors">Read more about raptors!</a>
- See more at: http://help.typepad.com/anchor-tags.html#sthash.JMuRAX00.dpuf

http://help.typepad.com/anchor-tags.html

But you are also correct that designating the image file in the anchor is incorrect syntax.

Franciscus Agnew
Franciscus Agnew
23,912 Points
Franciscus Agnew
Franciscus Agnew
23,912 Points

Hello Zsoka,

Try closing or refreshing the browser. And if that doesn't work carefully debug your code and check for errors.

Good Luck,

Franciscus