CODEWITHSUNDEEP
html
BlackFedora778
BlackFedora778

Reputation: 49

Creating a navigation bar with links to local HTML files

On my website there is a navigation bar and when I click on the navigation links it needs to go to another file I have stored locally on a USB.

How I would do this?

For example:

Say someone wanted to click on "about". How do I go about linking it on my usb to the about page (a separate html file)?

Upvotes: 1

Views: 9381

Answers (3)

BlackFedora778
BlackFedora778

Reputation: 49

Guys im feel like a total idiot I was trying to do I/Napoleon2 when I needed to do just napoleon2.html I didn't relize my mistake till looking over your guys source code. Thanks everyone and best of luck to you in your future coding!

Upvotes: 0

arcyqwerty
arcyqwerty

Reputation: 10695

You would need to create a main container for your navigation bar and use <a> tags for the links. Depending on how you currently have your files stored, you would have to set the href attributes of the links appropriately.

For example:

<html>
  <body>
    <ul class="navbar">
      <li class="nav-item">
        <a href="home.html">Home</a>
      </li>
      <li class="nav-item">
        <a href="about.html">About</a>
      </li>
      ...
    </ul>
  </body>
</html>

In the example, I use a <ul> element as a container since it's a list of navigation items. You could also choose to use a <div>.

For each subitem, I wrap it in a <li> which is a list item. On each item, I use the aforementioned <a> tags.

These are the HTML tags which actually create the link. The href attribute of the <a> tag tells the browser where to go when the user clicks the link.

Example

Lets assume you're on the home.html page.

In the case of the example, the "About" link tells the browser to go to the about.html page in the same directory as the current (home.html) page.

If the "about.html" file were stored elsewhere, you could:

  • Use .. to reference the parent directory (the one that contains the current directory) like ../about.html which means find about.html page in the folder above the one that the home.html is in.

  • Use subdir/ to reference a child directory (a directory that is in the same place as the current file) like pages/about.html which means find the about.html page in the pages folder in the same directory as the current file.

  • Use / to reference the root of the webpage. This is normally appended to the domain name but is less relevant for files on your local computer (accessed via file://). Depending on your browser and security settings, you may be able to use an absolute path like file://path/to/about.html, but I don't think that works in most modern browsers for security reasons.

More examples

  • webpage/
    • home.html
    • about.html
    • fun/
      • funfacts.html
    • contact.html

If you're in home.html, about.html, or contact.html, you'd use:

<a href="home.html">Home</a>
<a href="about.html">Home</a>
<a href="fun/funfacts.html">Home</a>
<a href="contact.html">Home</a>

If you're in funfacts.html you'd use:

<a href="../home.html">Home</a>
<a href="../about.html">Home</a>
<a href="funfacts.html">Home</a>
<a href="../contact.html">Home</a>

Upvotes: 3

Johannes
Johannes

Reputation: 67778

well, copy the other html file/s (from the usb stick) to the same directory as the html file you are starting with and then change the navbar links

Upvotes: 2

Related Questions