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 How to Make a Website Adding Pages to a Website Add a New Page

Posted by Martin Scott
Martin Scott
1,755 Points

I'm at The add new page section, the portfolio page still comes up in my browser not the about page.

When I select the about page in the browser, the about page does come up and looks fine except that my photo (of me) doesn't show. The alternate text does show. I have saved the treehouse files, rebooted my computer with the same results. I can find no HTML errors. See below.

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Martin Scott | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,800,700italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Martin Scott</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html"class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/martin.jpg" alt="Photograph of Martin" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Martin </p> <p>If you'd like to follow me on Teitter, my username is <a href="http://twitter.com/scottm523">@scottm523</a></p> </section> <footer> <a href="http://twitter.com/Scottm523"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/scottm52"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Martin Scott.</p> </footer> </div> </body> </html>

4 Answers

Shawn Jones
Shawn Jones
15,579 Points

double check how your using your image tag. the image tag: 

<img src="" alt="" />

is a self closing tag. My guess without seeing your code is that you might have done this:

<img>file.jpg</img>

when actually it should be done as this:

<img src="path to file.jpg" alt="" />

If that is currently how you have it then double check the source path of the image. if you have the hierarchy incorrect than the current file wont be able to reference where the image is correctly.

so if the file is in the main root folder "/" and the image is in the "img" folder in main root folder "/"

then in the img tag the source should look like this:

<img src="img/file.jpg" alt="text that describes file" />

if your html file is in a folder like templates which exist in the root directory, then you have to fully specify the path from the root folder to the folder where the image is:

<img src="/img/file.jpg" alt="text that describes file" />

Just throwing this out there. Once you post it I will double check to see if this is it.

Martin Scott
Martin Scott
1,755 Points

Thank you Shawn!! For the image, I had missed the closing forward slash ( / ). Still working on getting the entire About page to come up. Will resend the HTML with what I hope is a correct interpretation of markdown.

This is a part of treehouse.com coursework.

This is my current HTML.

'''<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Martin Scott | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,800,700italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Martin Scott</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html"class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/Martin.jpg" alt="Photograph of Martin" class="profile-photo"/> <h3>About</h3> <p>Hi, I'm Martin </p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/scottm523">@scottm523</a>.</p> </section> <footer> <a href="http://twitter.com/Scottm523"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/scottm52"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Martin Scott.</p> </footer> </div> </body> </html>'''

Shawn Jones
Shawn Jones
15,579 Points
Shawn Jones
Shawn Jones
15,579 Points

hey, I would be happy to answer this question for you but I don't see any source code I could work with. is there a link to this or if you could follow the markdown cheatsheet below I could further help. If this is part of a course I will look into it.

Martin Scott
Martin Scott
1,755 Points

I copied and pasted the HTML but let me try again:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Martin Scott | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,800,700italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Martin Scott</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html"class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/martin.jpg" alt="Photograph of Martin" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Martin </p> <p>If you'd like to follow me on Teitter, my username is <a href="http://twitter.com/scottm523">@scottm523</a></p> </section> <footer> <a href="http://twitter.com/Scottm523"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/scottm52"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Martin Scott.</p> </footer> </div> </body> </html>

Shawn Jones
Shawn Jones
15,579 Points
Shawn Jones
Shawn Jones
15,579 Points

on the forum you have to use the markdown cheat sheet to add html into the forum. go to the bottom of this post and you will see a reference this markdown cheat sheet link which provide syntax examples for formatting the post. I see that you did copy and past code but I can't tell if it's syntax is correct. I have to see raw source code. like this:

<!doctype html>
<html>
<head>
</head>

<body>
    <h1> hello World</h1>

</body>

</html>
Shawn Jones
Shawn Jones
15,579 Points
Shawn Jones
Shawn Jones
15,579 Points

Another thing could also be if the image your referencing isn't in the folder your pointing to. at that point there's nothing to grab and it pulls nothing to the browser. I would double check that as well.