HTML <a> tag won't work? Is there an alternative coding tag?

158 Views Asked by At

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>
1

There are 1 best solutions below

4
Taylor Reece On

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.