1

I'm using CodePen to create my CIS 101 class final but for some reason, my HTML links won't load. It keeps giving me this: /boomboom/v2/WEBLAB5_HOUSER.html. The homework links on the website are working just fine so I'm wondering if its the tag that I'm using?

CODEPEN: https://codepen.io/0n_uh/pen/VweJjBx?editors=1100

HTML FILE: file:///E:/CIS%20-%20101/LABS/WEB%20LAB%20-%2006/WEBLABFINAL_HOUSER/WEBLAB5_HOUSER/WEBLAB5_HOUSER.html

CODE:

<html>
  <a href="WEBLAB1_HOUSER.HTML">*Web Lab 1</a>
  <a href="WEBLAB2_HOUSER.html">*Web Lab 2</a>
  <a href="WEBLAB3_HOUSER.html">*Web Lab 3</a>
  <a href="WEBLAB4_HOUSER.html">*Web Lab 4</a>
  <a href="WEBLAB5_HOUSER.html">*Web Lab 5</a>
  <a href="WEBLAB6_HOUSER.html">*Web Lab 6</a>
0n_uh
  • 11
  • 4
  • 3
    The problem isn't in the a tag it is in the href attribute. Make sure those files are located in the same directory as the file where the code above is written. – Salim Ibrohimi Aug 05 '20 at 19:07
  • are you trying to link to another [page](https://www.w3schools.com/html/html_links.asp) or link for a [download](https://www.w3schools.com/howto/howto_html_download_link.asp)? – rhavelka Aug 05 '20 at 19:07
  • 1
    also, instead of creating a pen, create a [project](https://blog.codepen.io/2017/03/20/codepen-projects-is-here/). that way you can have multiple html files – rhavelka Aug 05 '20 at 19:12
  • @rhavelka, yes to the first question. My professor wants us to make all of the files linked on one webpage. – 0n_uh Aug 05 '20 at 19:16
  • @SalimIbrogimov, they're all in the same file on my computer. Is that what you mean? – 0n_uh Aug 05 '20 at 19:19
  • hey @0n_uh you can access debug page of your codepen here `https://cdpn.io/0n_uh/debug/VweJjBx` and you can see that relative links doesn't work but lower links will work ok – Kresimir Pendic Aug 05 '20 at 19:27
  • If that's what will sufice your need I'd suggest to remove buttons from lower links and that should be fine, or use advice from @rhavelka that you create project and have relative links in projects – Kresimir Pendic Aug 05 '20 at 19:29
  • Thank you, @KresimirPendic; I'll try it! – 0n_uh Aug 05 '20 at 20:18

1 Answers1

2

When you don't prepend with a protocol, like http://, file:///, etc., your browser reads those links as relative (as opposed to absolute) - see https://www.webstix.com/knowledgebase/general/relative-links-vs-absolute-links.

So, if you're on the site https://codepen.io/0n_uh/pen/VweJjBx?editors=1100 and you link to WEBLAB1_HOUSER.HTML, your browser will try to open up https://codepen.io/0n_uh/pen/VweJjBx/WEBLAB1_HOUSER.HTML, which presumably doesn't exist.

Change your href values to the absolute path, like <a href="file:///E:/CIS%20-%20101/LABS/WEB%20LAB%20-%2006/WEBLABFINAL_HOUSER/WEBLAB5_HOUSER/WEBLAB5_HOUSER.html">, and your web browser will open up that file.

Edit: note, though, that ideally you'd be using relative links and creating an HTML file that lives alongside your WEBLAB1_HOUSER.HTML file. That way you'd be able to ship your homepage along with your other pages (WEBLAB1_HOUSER.HTML, etc) in a single zip file.

I'd strongly recommend downloading VSCode and editing your site within there. It gives you a really nice "preview" feature so you can see your edits in real time.

Taylor Reece
  • 486
  • 3
  • 14
  • 1
    Thank you, Taylor! I'll try that. – 0n_uh Aug 05 '20 at 19:18
  • hey @Taylor, that link structure ` – Kresimir Pendic Aug 05 '20 at 19:26
  • If it's on the `E:\` drive, it might -- lots of universities map shared drives for their users. Point taken, though - I'll update my answer to note that ideally relative links would be used. – Taylor Reece Aug 05 '20 at 19:28
  • 1
    I would also add that you could see easier how a browser would route connected files if you were serving the site in your browser. With python 3 you can run `python -m http.server` in the same folder as your index.html and then see the site on `localhost:8000` – Jacob P Aug 05 '20 at 19:37