Navbar

Link to home

Go to "home.html" and add A tags on the lines above & below the H1 website heading line. In the opening A tag, add the href attribute.

Inside the quotation marks, give it the name of the home page file, including the file extension .html

If you look at your home page, so far you'll see the page heading underlined... 

...and if you hover over it, your cursor will turn to a hand. If you've clicked on your home page link, it'll be purple; if you haven't, it will be blue.

Create Links to pages

Paragraph

  1. After the page heading (still inside the PAGE HEADER area), add the opening and closing P tags.
  2. Make sure there are 4 empty lines between
  3. Type out the 4 page topics in full, with proper spelling and capital letters, each on a new line.

After the first 3 topics, add the following:

  1. Space Bar
  2. Vertical separating line (To type this, hold SHIFT and the key shown below)
  3. Space Bar

Do not add a separating line after the last topic! 


So now you should see each topic with the lines between...

basic A tags

Now we'll add the starting A tags for the links.

  1. Start by adding the opening A tag including href="" at the beginning of the first topic line.
  2. Copy that and paste it at the beginning of each topic line...
  1. Add the closing A tag at the end of each topic line - make sure to keep the space before the separating line!

If you save and look at your page, the topics are now underlined - but if you click on them, they won't do anything yet.

add links

  • Go inside each href and type out the name of your page file with the .html extension (= what you see in the NP document tabs).

Make sure the links work. Click on the link to first topic. It should take you to that page.


  • Just click the Back button to go back to Home.
  • Repeat these steps for each page link.

If you get an error, it might be because either:

  • you didn't spell the file name correctly, OR
  • you forgot to include ".html" inside the href

Copy navbar to other pages

On the home page:

  • select everything between the green PAGE HEADER comment tags
  • copy (CTRL+C).

Go to the first page and:

  • select the H1 tag/line
  • then paste (CTRL+V) to replace with your navbar

Repeat for your other pages. When you've done it on the last page, Save All.

Now you can go to your home page and when you click on the navbar links, they should take you to the other pages, and each subpage has links as well. 

If it's all working, get your website checked off.