HTML Page Anchor Tags Not Working

HTML-CSS
1

Hello.
I am working on a personal website with multiple pages and in order to understand what I am doing, I organized the various sections of the site into separate folders and placed them all in one folder. The beginning of the folder (for just HTML) HTML Files/Whitewings/(the rest of the folders here) and in each folder is a set of html files.
My problem is I want to create a link from a file in a different folder to another file in a different folder, but when I use do so, I get an “object not found error”.
Below is visual representation.

Annotation%202019-08-08%20135432
Annotation%202019-08-08%20135432484×814 59.5 KB

As illustrated in the picture above, I have my WhitewingsBulletins.htm file in the Primary Navigation folder and I want to create a link to the WhitewingsSettings.htm folder inside the Settings Navigation folder that when you click on it, it takes you to the Settings Page straightaway. However, all the separate folders are all in the one parent folder called Whitewings. So to achieve this I did this. Take a look at the code below.

<p>Welcome to your personalized page.</p><br>
  <body>
    <p>WELCOME TO YOUR BULLETIN PAGE</p>
    <nav id="nav1">
      <a href="WhitewingsNest.htm" target="_parent">Nest</a><br>
      <a href="WhitewingsBulletins.htm" target="_parent">Bulletins</a><br>
      <a href="WhitewingsFriends.htm" target="_parent">Friends</a><br>
      <a href="WhitewingsFamilies.htm" target="_parent">Families</a><br>
      <a href="WhitewingsLocality.htm" target="_parent">Locality</a><br>
      <a href="WhitewingsWideWorld.htm" target="_parent">Wide World</a><br>
      <a href="WhitewingsMessages.htm" target="_parent">Messages</a><br>
      <a href="WhitewingsHeadsUp.htm" target="_parent">Heads up</a><br>
      <a href="WhitewingsInvitations.htm" target="_parent">Invitations</a><br>
    </nav><br>
    <nav id="nav2">
      <a href="Whitewings\SettingsNavigation\WhitewingsSettings.htm">Settings</a><br>
      <a href="#">Trackies</a><br>
      <a href="#">My Account</a><br>
      <a href="#">Profile</a><br>
      <a href="#">Report something or someone</a><br><br>
    </nav>
  </body>

Inside the Bulletins Page and under the settings anchor tag, I specified the location of the WhitewingsSettings.htm file, but it does not seem to work.
When I analyze the url in the localhost server, it does not match the address I specified. This is the url I get. In-between Primary Navigation and Settings Navigation, there is not supposed to be a Whitewings there… God knows where it came from as it’s not specified in my code not folders.

http://localhost/tests/HTML%20Files/Whitewings/PrimaryNavigation/Whitewings/SettingsNavigation/WhitewingsSettings.htm

I thought it was my browser, but I changed it and it still persists.

Any thoughts and ideas on how to work around this will be highly appreciated, thanks.

2

Where did you save the index html file containing all the anchors?

3

An index file? I saved each file section separate from the other in different folders, and to jump between pages in one folder, I use the anchors local to that folder. But I don’t have a file dedicated to only anchors.

4

There must be an index file that the browser is going to open first, no? Your website starts somewhere…

5

Oh, Yeah. It starts at tests\HTML Files\Whitewings Then the 4 other folders containing the .htm files continue

7

Umm, that’s for a printer…

8

The path to each other document (html or css or whatever) has to be relative to that position.

href="PrimaryNavigation/WhitewingsNest.html"
9

You may want to read up a bit on file paths. With some paths, you also have to be aware of how the files are accessed. There is a difference between the files being served and you just navigating the file system.

Go up one level, go into SettingsNavigation

<a href="../SettingsNavigation/WhitewingsSettings.htm">Settings</a><br>

I’d probably also suggest using the .html extension, not that it really matters much (htm is a bit of a throwback).

Filename extension

When the Internet age first arrived, those using Windows systems that were still restricted to 8.3 filename formats had to create web pages with names ending in .HTM, while those using Macintosh or UNIX computers could use the recommended .html filename extension.

3 Likes
10

This one solved my issue. Thanks for posting and I will be sure to read up on the file paths.