Internal Link Path Fails

HTML & CSS
1

I am trying to link to an internal webpage and all that I have tried has failed.

My html is as follows:

<div class="project" id="tennis-ball-project">
   <img src="/images/tennis-ball-purple.webp" alt="">
     <p class="overlay"><a href="/electronics/projects/tennis-ball-project.html" style="color: white;  text-decoration: none; target=" _bllank class="external-link">Tennis Ball Project</a></p>
</div>

I am trying to link to the / electronics / projects / tennis-ball-project.html file.

I am in a shared server and my public_html file structure is as follows:

file-struture
file-struture498×946 55.6 KB

The html markup provided above comes from the index.html file seen at the bottom of the public_html grab shown above.

I have also tried prefixing ‘../’ and ‘//’ neither of which worked. Any help provided will be greatly appreciated.

Thank you!

2

Chrome returns the following:

error
error938×190 8.83 KB

Thanks!

3

What is the URL in the browser’s address bar when you open index.html?

I suspect you are opening index.html directly in the browser, by double-clicking on the filename, using a filesystem path, not a URL, and the leading \ in the link then refers to the root of the current disk, not the document/domain root folder.

You need to make a http request to index.html via the web server that serves files for the public_html document/domain root folder, something like http://localhost/index.html

4

@mabismad

Thank you for you comments. You are probably correct in all that you noted.

My limited knowledge concerning link paths has served me well over the years but this time I believe I was just not thinking clearly and that led me astray. (I’m a part-time coder so I get rusty over time) I now have everthing linking correctly. I think any way.

Here is a grab of my main (hub) site.

Screenshot 2026-08-07 at 19.23.19 copy
Screenshot 2026-08-07 at 19.23.19 copy1000×912 226 KB

Selecting the blue upper-right-hand image will take you to my electronic’s webpage as show next:

Screenshot 2026-08-07 at 19.38.50
Screenshot 2026-08-07 at 19.38.501920×1443 375 KB

And, finally, selecting either of those images will link you to that particular project. This webpage and the projects webpages are not functional yet.

Lastly, I never get notified when someone leaves a comment on any thread I start. Several SP Admin’s have looked into this in the past and could not figure it out. So I have to check back every once a while to check for new comments. This is what I did this evening.

Thanks again for your help.

5

In your code:

     <p class="overlay"><a href="/electronics/projects/tennis-ball-project.html" 
style="color: white;  text-decoration: none; target=" _bllank class="external-link">Tennis Ball Project</a></p>

why do you close the quotes after target= and then have _bllank after it? Surely it should be target=blank inside the quotes.

It’s a while since I’ve done this, so my knowledge might be out of date. Or you might have made the typo when you put the code into the forum post.

6

It looks like some missing closing quotes.There is some in-line styling before the target which isn’t closed.
Then there is no closing quote after the _bllank (sic).

<a href="/electronics/projects/tennis-ball-project.html" style="color: white;  text-decoration: none;" target="_blank" class="external-link">Tennis Ball Project</a>

…is how I believe it is supposed to read.

1 Like
7

@droopsnoot

@SamA74

Good catch. You are both correct. I saw the _bllank during this post and fixed. I have since removed all the inline styling and replaced it with styling in my index.css file.

Thanks for pointing out all of my markup errors. Lesson learned.

1 Like