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

Posted by Jamshaid Ali
Jamshaid Ali
Courses Plus Student 442 Points

how do i make an about contact us and location page in html and then link it to my navagation bar HELP PLEASE!

ive made hompage html and made navagation for them but i want to know how do i link them to my page so that they could be click and then theyd be on the page they click for example if i was on the hompgae of the website then i click on contact us ill be on a new webpage all about contact us

3 Answers

Brian Montana
Brian Montana
22,445 Points
Brian Montana
Brian Montana
22,445 Points

You can setup a file called contact.php or contact.html

You're element tag should be <a href="//website.com/contact.html"></a>

//website.com/contact.html would be your contact page.

Jamshaid Ali
Jamshaid Ali
Courses Plus Student 442 Points

thanks for replying im confused can you explain it more

Brian Montana
Brian Montana
22,445 Points
Brian Montana
Brian Montana
22,445 Points

Post your code and the files associated. I'll help with how it should be structured.

Jamshaid Ali
Jamshaid Ali
Courses Plus Student 442 Points

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html: charset=utf-8"/> <title> The Book Reivew Book company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTu1rXB6fkY90WUIReU7USWyVJ2zUM09Br6agtzgPvdlkwZkC6-0Q" alt="The Book Review"> </div> <div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Menu & Prices</a></li> <li><a href="#">Location</a></li> <li class="last"><a href="#">contact us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Its always good to read reading is a good habbit so always read read as much as you can books are brains</h1> <p><a href="#" class="btn">browse our books</a></p> </div> <div class="grid_3 omega"> <img src="img/kebabs.jpg" id="kebabs" width="150" height="100" alt="new books yaay"> </div>

    <div id="Featured-book" class="grid_7">
        <h2>Book of the week</h2>
        <p>This week featured book is the <a href="#">Harry Potter series</a> Critical commentary on each chapter, character, object, place, and event is provided in an effort to help the reader better understand detailed content and find connections to the greater storyline</p>
        <p><a href="#" class="btn-small">Read More</a></p>
      <img src="img/burger1.jpg" id="burger1" width="550" height="350" alt="Harry Potter series">
    </div>

    <div>
      <div id="New Books" class="grid_5 omega">
        <h2>Fresh new book</h2>
        <p>Fresh from the manufracture there <a href="#">readingly great</a> and <a href="#">Intensivly intresting</a></p>
        <img src="img/fudgecake.jpg" id="fudgecake" width="320" height="200">
        <img src="img/pani.jpg" id="pani" width="150" height="100">
        <img src="img/chicken.jpeg" id="chicken" width="150" height="100">
        <img src="img/shish.jpg" id="shish" width="150" height="100">
        <img src="img/jacket.jpg" id="jacket" width="150" height="100">

    </div>
    <div id="New Books">
      <img src="img/roastchicken.jpg" style="position: absolute; top: 923px; left: 555px;" id="roast" width="185" height="100" alt="roast chicken">
      <img src="img/lamb.jpg" style="position: absolute; top: 923px; left: 935px;"id="lamb" width="185" height="100" alt="lamb">
      <img src="img/steak.jpg" style="position: absolute; top: 923px; left: 745px;" id="steak" width="185" height="100" alt="steak">
      <img src="img/curry.jpg" style="position: absolute; top: 923px; left: 365px;" id="curry" width="185" height="100" alt="curry">
      <img src="img/keema.jpg" style="position: absolute; top: 923px; left: 175px;" id="keema" width="185" height="100" alt="keema">
   </div>

      <div class="grid_7">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <h2>Inside the Books</h2>
        <p>Reading increase your General Knowledge &amp; as you learn stuff from books that you would not at school. It increases your language skills as you absorb in the reading material.</p>
        <p><a href="#" class="btn-small">Read more</a></p>
    </div> 
        <div class="grid_5 omrga">
            <h2>Get Reading with us</h2>


          <div id="contact">
             <p>Call us: <span>07880545981</span><br>
              Email us: <a href="#">booksreview@hotmail.com
             </div>

             <p>We annouce our books through facebook &amp; twitter</p>
             <a href="https://www.facebook.com/readingfc"><img src="img/facebook.gif" alt="Facebook"></a>
             <a href="https://twitter.com/getreading"><img src="img/twitter.gif" alt="Twitter"></a>
       </div>

  <div id="copyright" class="grid_12">
    <p>&copy;2014 book review company all right reserved</p>
      </div>

  </div>

</body> </html>

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

I would suggest completing the following course, How to Make a Website before you start building a website. This will teach you the basics such as links and navigation.