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 Personal Profile Page

Karla Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree
Karla Gonzalez
Front End Web Development Techdegree Student 2,602 Points
Posted by Karla Gonzalez
.a{fill-rule:evenodd;}techdegree
Karla Gonzalez
Front End Web Development Techdegree Student 2,602 Points

Adding an additional page to a website...

What's the code for making the "experience" link below an additional html page on a website? Is the "#" replaced by "index.html" to make it the "home" page?

<div class="main-nav"> <ul class="nav"> <li class="name">Karla Gonzalez</li> <li><a href="#">Home</a></li> <li><a href="#">Experience</a></li> </ul> </div>

Karla Gonzalez
seal-mask
.a{fill-rule:evenodd;}techdegree
Karla Gonzalez
Front End Web Development Techdegree Student 2,602 Points
Karla Gonzalez
.a{fill-rule:evenodd;}techdegree
Karla Gonzalez
Front End Web Development Techdegree Student 2,602 Points

Thank you! I have to figure out how to organize my files in Brackets, as they are all lumped together, reason I think why I'm having trouble linking the file to the page. I have two additional questions:

1) Is adding:

<div class="main-nav"> <ul class="nav">

necessary to all the files below:

      <li class="name">Karla Gonzalez</li>
      <li><a href="#">Home</a></li>
      <li><a href="experience.html">Experience</a></li>
    </ul>
</div>

2) Depending on the file and it's page, do I need to add the "class=selected" within the selected href as shown below:

      <li><a href="about.html">About</a></li>
      <li><a href="portfolio.html" class="selected">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
Maximillian Fox
Maximillian Fox
Courses Plus Student 9,236 Points
Maximillian Fox
Maximillian Fox
Courses Plus Student 9,236 Points

No problem - remember it's best to keep all html together in your root, all CSS in a css file, and all pictures in an img file :)

In order to make your pages have the same layout, such as a navigation and footer, you will want to copy the parts of the HTML code that should remain the same. Here's a mockup page highlighting sections you might want to copy.

<!--You will want to copy all this and remove the comment-->
<!DOCTYPE html>
<html>
  <head>
    <title>Example title</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
  </head>
  <body>
    <header>
      <h1>Example Page</h1>
      <ul id="nav">
        <li><a href="index.html" class="selected">Home</a></li>
        <li><a href="someotherpage.html">Some Other Page</a></li>
      </ul>
    </header>
    <main>
      <div class="content">
<!--End copying here-->
        <p>Some example paragraph</p>
        <p>Another paragraph</p>
<!--Start another copy for your footer-->
      </div>
    </main>
    <footer>
      <h4>Some footer text</h4>
    </footer>
  </body>
</html>
<!--End copying here-->

In regards to your other question about the class="selected", yes, when you move to another page you will need to change the class="selected" over to the link you are on. So if you are on index.html the selected would appear on that anchor tag, but when you move to another page, you want to put it on that anchor tag instead so the styling applies to the link corresponding to the page you are on.

Hope this helps! :)

2 Answers

Maximillian Fox
PLUS
Maximillian Fox
Courses Plus Student 9,236 Points
Maximillian Fox
Maximillian Fox
Courses Plus Student 9,236 Points

The href will depend on how you organise your HTML pages. Lets assume that both index.html and experience.html are two files in the same directory (assume it's called project_root) like this:

project_root (folder)
-- css (folder)
---- styles.css
-- img (folder)
---- img1.png
---- img2.png
-- experience.html
-- index.html

Then in your hrefs, to link between then you would have this on both pages

<a href="index.html">Home</a>
<a href="experience.html">Experience</a>

Notice how the hrefs are exactly the same names as the files that I have in the project_root folder.

However if you had something like this (which is not good) :

project_root (folder)
-- css (folder)
---- styles.css
-- img (folder)
---- img1.png
---- img2.png
-- other_html
---- experience.html
-- index.html

Now we have experience.html within the other_html directory. So to link from index.html to experience.html you'd have to do this:

<a href="index.html">Home</a>
<a href="other_html/experience.html">Experience</a>

But, to get from experience.html back to index.html you'd have to do this... 

<a href="../index.html">Home</a>
<a href="experience.html">Experience</a>

Those 2 dots mean 'go up one directory'. But you can see how confusing it can be if you don't order your file structure correctly. My advice - keep all your HTML together in the main folder, keep all your CSS together in a CSS folder, and all your images in an images folder. That will mean accessing them from anywhere is always the same, no matter what page you are on :)

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Which course is talking about creating additional pages in HTML and linking to CSS file? Do you need to have separate CSS file for each page? The HTML basics course talked only how to create the homepage. What about other pages that normal website would have ?

Thank you