<!DOCTYPE html>

<html>

<head>

<title>How to build a website</title>

</head>

<body>

<div id=”introduction”>

<h1>How to build a website</h1>

<p>This website contains a reference to everything I know about HTML, CSS and JavaScript. Each language is contained on its own page, and each section of the language is contained in a separate block. Use the main navigation and then the jump list to navigate straight to any section of the webpage.</p>

</div>

</body>

</html>

Navigation

We are now going to create the main navigation method for our website. We are going to create a horizontal nav bar that sits at the very top of every page.

The steps:

  • Create a new div above the ‘introduction’ div and give it an id of ‘navigation’.
  • Inside the ‘navigation’ div add a new div and give it an id of ‘navigation-inside’.
  • Inside the ‘navigation-inside’ div add an unordered list with the following list items:
    1. –  a relative link to ‘index.html’ with the text ‘Home’ and a class of ‘active’
    2. –  a relative link to ‘html.html’ with the text ‘HTML’
    3. –  a relative link to ‘css.html’ with the text ‘CSS’
    4. –  a relative link to ‘javascript.html’ with the text ‘JavaScript’

Expected result: the expected result of this should be a list of hyperlinks that go to various pages (which do not yet exist). Currently the list will be rendering vertical and all the links should be blue (aside from the home link, which should be a darker shade to indicate the page is active).

Expected code: