What is Wrong With My Link

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Display of Watch Brands</title>
  <style>
    h1  {
      font-family: "Bradley Hand ITC TT", "Handwriting-Dakota", sans-serif;
      color: rgb(16, 127, 224);
    }
  </style>
</head>
<body>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgjC-IvVfu_b7ug2UabHTwa0EdVlhcwSExyA&usqp=CAU" alt="this is an Omega watch">
  <h1>Casio</h1>
  <ul>
    <li><a href="../../omega.html">omega</a></li>
    <li><a href="../bulova.html">bulova</a></li>
    <li><a href="../timex.html">timex</a></li>
    <li><a href="casio.html">casio</a></li>
    <li><a href="ultimate/rolex.html">rolex</a></li>
  </ul>
</body>
</html>

I don’t understand why - with this code - the rolex.html page wont load - the others seem to load just fine

Screen Shot 2020-12-13 at 7.53.27 PM
Screen Shot 2020-12-13 at 7.53.27 PM352Ă—770 33.5 KB

2

Hey @ttibsen!

Please explain more.

If you have codepen link, please share

1 Like
3

I will attempt to explain more thoroughly - the issue that I am having - in the meantime, what the heck is codepen link?

4

Codepen

Most people do their projects on codepen.

5

The code we are seeing is the casio.html, right? Is that in its own folder that you need to move out of first?

We need to know the folder structure to know if the path is correct.

Edit: where is the ultimate folder in relation to the casio.html file?

6

@ttibsen Hey there!

CodePen is a place to store html, CSS, and JS code all together to create a webpage. It’s a beginner alternative to share code without more complicated “pro” tools such as GitHub. Once you sign up you can create CodePens that you then fill in with your code. You can then share the codepen by sharing the link, as an example here’s one of my codepens:
https://codepen.io/BenTechCode/pen/KKzWvWE

7

I have 5 .html files called
omega.html
bulova.html
timex.html
casio.html
rolex.html

they are contained in nested folders as shown

WILL STERN
omega.html
FANCY
bulova.html
timex.html
CONTRAST
casio.html
ULTIMATE
rolex.html

vsc folder hierarchy

every .html file has links as shown -

web page links

the links function well except in the 2 following circumstances

on the casio.html page - the rolex link doesn’t work
<li><a href="ultimate/rolex.html">rolex</a></li>
I thought that I had to point to the folder that rolex was in - ULTIMATE - to make the link work

on the rolex.html page - the casio link doesn’t work
<li><a href="contrast/casio.html">casio</a></li>
I thought that I had to point to the folder that casio was in - CONTRAST - to make the link work

It’s not a case of going up in the hierarchy so I don’t think I would use …/ here and so by default I used the folder that the anchor was in for href but it’s not working. What is the correct approach here?

8

If you are in the contrast folder and want to go to the ultimate you have to move up one level.

Are you saying this doesn’t work?

../ultimate/rolex.html

9

Actually - that works perfectly - it’s just that I don’t get the reasoning behind it. I thought that the folders
Contrast and Ultimate were at the same level within the Fancy folder. Furthermore, I thought that the pointers could only be
…/…/
or
Fancy/Contrast/
but not a combination of the two. Obviously I am wrong but I just don’t get the combination approach.

10

So I have been thinking about this issue of the href pointer. So if we have the following hierarchy where one folder contains - one page + 3 folders each with one page like this (to sort of carry on with the previous nomenclature)

WILL STERN
omega.html
FANCY
bulova.html
CONTRAST
timex.html
ULTIMATE
casio.html

then, if we have the link “omega” in any of the 3 bottom folders, then we will have an href=../
However, if we have a link from one of the 3 bottom folders to a page also in one of the 3 bottom folders, then we have (if we are on the timex.html page and want to get to the bulova.html page) an
href=../FANCY
Is this the right line of reasoning?