Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Corey Beckmann
Corey Beckmann
1,856 Points

HTML file name won't work...unless I add a new character to the end?

Just looking for an explanation here, but I've started a new workspace to practice building a website for my wife's styling services as a project using what I've learned so far on the How to Build a Website track. What I've discovered is this:

If I create an HTML page called 'bio.html', along with the 'index.html' home page and 'contact.html', the browser says the page is broken. I'm sure I've made all of the proper changes to the links in the <head> element and any necessary href's in the <nav> element, and the interesting thing is this - I change it to 'bio2.html' and it has no issues. Any idea why this is? Does the file name 'bio.html' have any sort of syntax or common-practice significance? Thanks - this is my first time in the forums!

Robbie Thomas
Robbie Thomas
31,093 Points

It shouldn't, unless all hrefs point to "bio2.html" instead of "bio.html"

rydavim
rydavim
18,814 Points

Could you post a link to a workspace snapshot so we can take a look at your code and file structure? This is a bit of an odd issue that will be hard to diagnose from a description. You could also try saving and re-opening your workspace, and clearing your browser cache.

4 Answers

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Hi Corey,

Without the code it's hard to tell the solution but if I had to guess it because of syntax errors or maybe the files are not contained in the same folder. Post the code to the html page or pages that are giving you some trouble.

Best, Victor

Corey Beckmann
Corey Beckmann
1,856 Points

Thanks Victor and rydavim - here is all code for index.html:

<html> <head> <title>ALYSSA | KC Hair & Makeup</title> <link rel="stylesheet" href="CSS/style.css"> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width"> </head>

<body> <header id="top" class="main-header"> <a href="index.html" id="logo"> <h1>Alyssa Beckmann</h1> <h2>Hair and Makeup in the KC Metro</h2> </a> <nav> <ul> <li><a href="bio.html">Bio</a></li> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="primary_content"> <img src="img/alyssa_profile.jpg" alt="Alyssa at work" class="Alyssa"> <!--place images here for the portfolio--> </div> <footer class="main-footer"> <p>©2015 Corey Beckmann.</p> </footer> </body> </html>

Here is all the code from bio.html:

<!DOCTYPE html> <html> <head> <title>ALYSSA | KC Hair & Makeup</title> <link rel="stylesheet" href="CSS/style.css"> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width"> </head>

<body> <header id="top" class="main-header"> <a href="index.html" id="logo"> <h1>Alyssa Beckmann</h1> <h2>Hair and Makeup in the KC Metro</h2> </a> <nav> <ul> <li><a href="bio.html" class="selected">Bio</a></li> <li><a href="index.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="primary_content"> <img src="img/alyssa_profile.jpg" alt="Alyssa at work" class="Alyssa"> <!--place images here for the portfolio--> </div> <footer class="main-footer"> <p>©2015 Corey Beckmann.</p> </footer> </body> </html>

I've edited this comment to add all of the code from index.html. The code will not open the 'bio.html' file in the browser, but if I simply change the file name to 'bio2.html' and reflect it in the code, it will work! Very curious. Thanks!

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Can you post both pages Corey from top to bottom. I have an idea why you might be having that issue, but I would like to confirm. Thanks!

Corey Beckmann
Corey Beckmann
1,856 Points

Hi Victor - I've edited my previous comment to reflect the index.html file in its entirety. Thanks!

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Corey try this for the bio,

<!DOCTYPE html>
<title>ALYSSA | KC Hair & Makeup</title>
<link rel="stylesheet" href="CSS/style.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width">
<header id="top" class="main-header">
  <a href="index.html" id="logo">
    <h1>Alyssa Beckmann</h1>
    <h2>Hair and Makeup in the KC Metro</h2>
  </a>
  <nav>
    <ul>
      <li><a href="bio.html" class="selected">Bio</a></li>
      <li><a href="index.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<h3>Home</h3>
<div class="primary_content">
  <img src="img/alyssa_profile.jpg" alt="Alyssa at work" class="Alyssa">
  <!--place images here for the portfolio-->
</div>
<footer class="main-footer">
  <p>&copy;2015 Corey Beckmann.</p>
</footer>
</html>

This is for the index.html

<!DOCTYPE html>
<title>ALYSSA | KC Hair & Makeup</title>
<link rel="stylesheet" href="CSS/style.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width">
<header id="top" class="main-header">
  <a href="index.html" id="logo">
    <h1>Alyssa Beckmann</h1>
    <h2>Hair and Makeup in the KC Metro</h2>
  </a>
  <nav>
    <ul>
      <li><a href="bio.html">Bio</a></li>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<h3>Bio</h3>
<div class="primary_content">
  <img src="img/alyssa_profile.jpg" alt="Alyssa at work" class="Alyssa">
  <!--place images here for the portfolio-->
</div>
<footer class="main-footer">
  <p>&copy;2015 Corey Beckmann.</p>
</footer>
</html>

Let me know if that works. If it doesn't it might be how files are contain within that folder. Send me a pic of the folder structure if you need assistance with this.

Corey Beckmann
Corey Beckmann
1,856 Points

Thanks Victor...I've compared the code between what I currently have (code provided is longer appearing for me on this thread, for some reason...) and I didn't pinpoint any differences which I thought would be impactful. Would you be able to describe the changes you made before I add them and try again? My file structure was the first thing I checked; all of the html files are located at the same level. This is why I found it interesting this page did not load but the others would without issue.

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Hi Corey, Sorry for the late reply, All I did was add and close some tags you where missing from what you posted.