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 Adding Pages to a Website Add a New Page

Jasemin Finlay
Jasemin Finlay
459 Points
Posted by Jasemin Finlay
Jasemin Finlay
459 Points

I have been trying to work out for the best part of an hour why my internal link to my "about.html" is not working. HELP

This is the index.html file the video asks me to copy into about.html

I do not understand why it is not working.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DJ Yasmeen</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Ubuntu:500,300,700|Open+Sans:300,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>DJ Yasmeen</h1> <h2>DJ extraordinaire</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <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>PLaying with blending modes in PS</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>80s style of glows</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created with PS</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Creating shapes using repetition</p>
        </a>
       </li>

      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a>
      <a href="http://twitter.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a>
      <p>&copy; 2014 DJ Yasmeen</p>
    </footer>
   </div>

</body> </html>

10 Answers

Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DJ Yasmeen</title> <link rel="stylesheet" href="css/normalize.css"> <link href="http://fonts.googleapis.com/css?family=Ubuntu:500,300,700|Open+Sans:300,600,700" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>DJ Yasmeen</h1> <h2>DJ extraordinaire</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <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>PLaying with blending modes in PS</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>80s style of glows</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created with PS</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Creating shapes using repetition</p>
        </a>
       </li>

      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a>
      <a href="http://twitter.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a>
      <p>&copy; 2014 DJ Yasmeen</p>
    </footer>
   </div>

</body> </html>

Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points

you are very kind in pointing me into the right directions. Will do that now :-)

Tricia Martin
Tricia Martin
19,604 Points
Tricia Martin
Tricia Martin
19,604 Points

No problem! I'll check back when you get it posted and see if I can help fix the problem you're having. :)

Tricia Martin
Tricia Martin
19,604 Points
Tricia Martin
Tricia Martin
19,604 Points

Okay, so the code you've posted here is all correct. I think the problem may be that you haven't created the "about.html" page yet?

To do so:

  1. Right click on the dark grey bar in Workspaces and click "New File".
  2. It will then ask you to name that file. Name it "about.html" and it will open a new tab next to "index.html"
  3. Copy and paste this code into that blank document, and then I believe Nick asks you to delete everything between opening and closing section tags.

If you HAVE already done that, maybe check the file name and make sure there isn't a typo in the name for "about.html"

Tricia Martin
Tricia Martin
19,604 Points
Tricia Martin
Tricia Martin
19,604 Points

The top part of your code didn't post. I'm only seeing the unordered list of the images and everything after that. Can you re-post with the top part of your document?

Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points

Hi Patricia

Having difficulties getting the complete code on here. I am clearly a novice...

any ideas how I can get the code to you?

Thank you!

Tricia Martin
Tricia Martin
19,604 Points
Tricia Martin
Tricia Martin
19,604 Points

Are you just copying and pasting it? Under the comment box there is a "Markdown Cheatsheet" that will help you format your code so it all shows up.

Basically just post three tick marks ( ` ) ( the key next to the 1) before your first line of code and after your last line of code. Also after the first set of tick marks type "html" so it knows what type of markup you're using.

Alternatively you can try using code pen to paste your code and post a link to it here http://codepen.io/pen/

Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points

'''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DJ Yasmeen</title> <link rel="stylesheet" href="css/normalize.css"> <link href="http://fonts.googleapis.com/css?family=Ubuntu:500,300,700|Open+Sans:300,600,700" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>DJ Yasmeen</h1> <h2>DJ extraordinaire</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <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>PLaying with blending modes in PS</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>80s style of glows</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created with PS</p>
        </a>
       </li>

        <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Creating shapes using repetition</p>
        </a>
       </li>

      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a>
      <a href="http://twitter.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a>
      <p>&copy; 2014 DJ Yasmeen</p>
    </footer>
   </div>

</body> </html> '''

Tricia Martin
Tricia Martin
19,604 Points
Tricia Martin
Tricia Martin
19,604 Points

You're on the right track, but it looks like you used apostrophes instead of tick marks. The tick mark is the one that is slanty. It shares a button with the tilde ( ~ ). Should be the top right of your keyboard next to the 1 and under escape.

Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DJ Yasmeen</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="http://fonts.googleapis.com/css?family=Ubuntu:500,300,700|Open+Sans:300,600,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>DJ Yasmeen</h1>
        <h2>DJ extraordinaire</h2>
       </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
        <div id="wrapper">
        <section>
          <ul id="gallery">
          <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>PLaying with blending modes in PS</p>
            </a>
           </li>

            <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>80s style of glows</p>
            </a>
           </li>

            <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created with PS</p>
            </a>
           </li>

            <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>
           </li>

          </ul>
        </section>
        <footer>
          <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a>
          <a href="http://twitter.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a>
          <p>&copy; 2014 DJ Yasmeen</p>
        </footer>
       </div>
  </body>
</html>
Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points

woohoop.

You are so patient. Thank you.

So I do not understand why it will not link to the "about.html"

Thank you for giving some of your time :)

Jasemin Finlay
Jasemin Finlay
459 Points
Jasemin Finlay
Jasemin Finlay
459 Points

Hi Patricia

Had done that bit NIck said and redid it after your e-mail - still no joy.

I will try and do it on my new machine instead as I am currntly on my 7 year old macbook. Perhaps some browser issues on this machine..no idea.

Good to hear that you could not see a problem in the nav section - I checked the spelling too.

Thank you for being so kind! Have a good rest of the day :-)

Tricia Martin
Tricia Martin
19,604 Points
Tricia Martin
Tricia Martin
19,604 Points

Hmm... you're using workspaces, correct? If you want, you can send me a screenshot of your workspace so I can see your file structure. I posted your above code into my workspace and it linked to everything perfectly.

Make sure the "about.html" and "index.html" are both in the same folder and that about.html isn't in another folder like the css one.

If you want do want to send a screenshot (command + shift + 3 on a Mac) you can email it to TriciaJoy@outlook.com