I'm learning html and I'm confused as to how href's work

Question

Okay so i'm learning html right now and soon css. In my html coding I have a section like this for navigation:

<div id="header">
<h1>Guild Wars 2 Fanbase</h1>
<ol id="navigation">
    <li><a href="/">Home</a></li>
    <li><a href="/facts">Facts</a></li>
    <li><a href="/gallery">Gallery</a></li>
    <li><a href="/code">Coding</a>
        <ul><li><a href="/code/line">Lines</a></li>
            <li><a href="/code/comment">Comment Lines</a></li>
    </ul>
    </li>
</ol></div>

Now when I open up this .html file this is all layed out the way I want it too look (the mark up that is). My question is this, when I click on a link on this site (this site being this code) I get an a error saying this webpage is not found, but of course. But how do I create it so I can have the web pages working together? I'm not sure how to word it correctly. Like, do I create another .html file in the same directory so somehow when I click the link it reads from the second .html file?

If you not sure what I'm asking, just let me know and I'll try to be more specific. Thank you for your help (:

excuse my mistakes in grammar, not the worlds best in English, trying my best (:

Answer 1

As mentioned by @Craig T your href's should point to another page.

<li><a href="/">Home</a></li>
<li><a href="/facts">Facts</a></li>

These are relative to your existing website where '/' is the topmost page. '/facts' is actually refering to a directory called facts relative to '/'

However, they need not point to just another html page. They can also point to another website.

e.g.

<li><a href="http://www.example.com">Links</a></li>

Or a specific page at other site:

<li><a href="http://www.example.com/somepath/something.html">Something</a></li>

In the html code you provided the URL's point to directories. When a specific file or resource is not provided i.e. it doesn't end in something like /page/yourpage.html then it's up to the webserver to decide how to handle it. They will usually have rules to determine this. e.g. the apache webserver is often configured to return the file index.html in the requested directory.

So these:

<li><a href="/">Home</a></li>
    <li><a href="/facts">Facts</a></li>
    <li><a href="/gallery">Gallery</a></li>
    <li><a href="/code">Coding</a>
        <ul><li><a href="/code/line">Lines</a></li>
            <li><a href="/code/comment">Comment Lines</a></li>

Are equivalent to these:

<li><a href="/index.html">Home</a></li>
    <li><a href="/facts/index.html">Facts</a></li>
    <li><a href="/gallery/index.html">Gallery</a></li>
    <li><a href="/code/index.html">Coding</a>
        <ul><li><a href="/code/line/index.html">Lines</a></li>
                <li><a href="/code/comment/index.html">Comment Lines</a></li>

On some setups instead of the default being index.html it's index.php or index.asp.

Actually most go by an order of priority.

e.g. try index.php first and if not available try index.html

I hope that's clear.