Why would my links be breaking when no changes to them were made?

JohnYingling commented 6 years ago

I'm not touching links, and after a FULL DAY of tinkering with them to get them to all work and connect, they keep dying on me, breaking to page errors, at random!

I really...have no idea what is going on anymore. I'm not touching any of these lines of code, so I just don't understand.

One works, as I get another on a wholly different page to work, the other breaks without any changes to the .html at all! I swear, not changing a thing.

It's insane.

I can gather screenshots and such if I must, but...my brain is toast.

Any insight into this? I know I'm not the only one based on looking at people's live sites. Haha.

JonSwallow commented 6 years ago

@JohnYingling Don't give up man. Look, as this is open source you have the ability to look at any ones code. Go find one that works, go to the repository page, look at the code and compare it to yours. Open yours in atom and the other in a browser or copy it and put in notepad. Two screens are usually better than one in this case if you have the resources, at any rate. You are welcome to use my code for comparison, all my links work. I structured my files as instructed and it should help. This is about collaboration more than anything you can do it. We learn from each other. Looking at someones code and learning from it is not a crime in open source, in fact open source depends upon the group as a whole to function.

  <li>A sense of humor required</li>
    </ul>
  </ol>
  <hr />
  <!-- Relative link to the Instructions Page-->
  <p align="center"><a href="pages/instructions.html">Instructions Page</a></p>
  <!-- Relative link to Quiz page-->
  <p align="center"><a href="pages/form.html">Quiz</a></p>
  <p align="center"><a href="pages/about.html">About Me</a></p>
  <p align="center"><a href="pages/more-info.html">More Information</a></p>
  </body>
</html>

   <a href="#top">Return to Top of Page</a>
    </p>
    <!-- Relative links to other pages-->
    <p align="center" id="nav"><a href="../index.html">Home</a></p>

So #top refers to id="top" in a line at top of page. There is one type of relative in document link , linking to something on the same page always as the #

Next lets look at other pages linking together. My first snippet is from my index html which lives at the root directory in project_2. So, to link to a page in the pages folder I am going down the tree, all I need is pages/form.html

Say I am in my form html which I think I am in the second snippet it is one of them from the pages folder, does not matter which. We want to go to the index html. We know that lives up the tree in the root directory. So we need to go up two, hence the two dot deal. ../index.html two dots gets us back up to the root directory.

Now do not forget that in your pages folder, the documents that need to link to each other live. Since they are in the same folder they need only the name to link to each other; form.html or about.html and that is about it. Linking is all about pointing to where something lives in a directory.

If you open up cmd.exe and type, for example cd User/Owner/Documents/342 it will take you to that folder right? Now you want to go back to documents you have to type cd.. it is the same two dots pointing back up the tree to the previous folder. Think of documents as your root folder in that case it is doing the same thing pointing to a folder in a directory. I hope that helps. I get frustrated all the time.

JohnYingling commented 6 years ago

Thanks, @JonSwallow

JustineEvansUM commented 6 years ago

Hey @JohnYingling!

Shoot me an e-mail with any specific instances. Would you ever want to do a Slack chat?

Media-Ed-Online / intro-web-dev-2017aut