title: How do I make my navigation bar lead to another page?
body: <p>So I'm REALLY new to HTML and brackets, however I have a little navigation bar going. That's pretty much it. What I want to ask is, how do I make it so when I press one of the buttons in the bar, that button leads to another page? This is the code:</p>
  
  <p>Index.html:</p>
  
  <pre><code>    &lt;DOCTYPE Html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Navigation Bar&lt;/title&gt; 
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;  
  &lt;body&gt;
  &lt;div id="Maindiv"&gt;
     &lt;div id="navdiv"&gt;
  
          &lt;u1&gt;
              &lt;h1&gt;The Turtle House&lt;/h1&gt;
               &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Information&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Care Guide&lt;/a&gt;&lt;/li&gt;
         &lt;/u1&gt;
      &lt;/div&gt;    
  &lt;/div&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Style.css:</p>
  
  <pre><code>body{
      font-family: arial, sans-serif;
  
  }
  *{
      padding: 0px;
      margin: 0px;
  }
  #maindiv{
      width: 100%;
      height: 1000px;
      background: url(img/RiverRock.jpg) repeat;
      background-size: cover;
  }
  #navdiv u1{
      width: 100%;
      height: 80px;
      background: #648DA0;
      line-height: 80px;
      color: white;
      float: right;
  }
  #navdiv u1 a{
      text-decoration: none;
      color: white;
      padding: 20px;
  }
  #navdiv u1 li {
      list-style-type: none;
      display: inline-block;
      float: right;
  }
  #navdiv u1 li:hover{
      background: #8FB0BF;
      transition:all 0.40s;
  }
  #navdiv h1{
      width: 300px;
      float: left;
      cursor: pointer;
      margin-left: 15px;
  }
  </code></pre>
  
  <p>Thanks.</p>