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

Laura Hill
Laura Hill
13,674 Points
Posted by Laura Hill
Laura Hill
13,674 Points

My images don't render

Hello, I am working on my very first website from scratch and I am making a mistake somewhere. My images don't render, neither does the alternate text.

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="content type">
  <meta content="text">
  <title>Smells Like Bakin</title>
</head>
<body>
  <h1> Laura's First Website From Scratch </h1>
  <img src="stoplight.jpg" alt="This is Alternate text for Stoplight">
  <ul class="nav">
    <li> <a href="#"> About </a> </li>
    <li> <a href="#"> Contact </a> </li>
    <li> <a href="#"> Directions </a> </li>
    <li class="last"> <a href="#"> Pricing </a> </li>
  </ul>
  <div id="intro">
    <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that create ironically delicious desserts!</h1>
    <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
  </div>
  <img src="Shark22.jpg" alt="This is Alternate text for Shark22">
  <div id="featured-cupcake">
    <h2>Cupcake of the Week</h2>
    <p> Our featured cupcake this week is the <a href="#"> Avocado Chocolate Cupcake <a/> Its strange combination of flavors will taste awful.</p>
  </div>
</body>
</html>
Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Firstly. in your head section, the first head, the H is capitalized, and it should not be. Secondly, as far as the images go, unless they are in the very same root folder as your main html page, you need to specify the directory. Something like this:

<img src="img/image.jpg">

Otherwise it won't find the image. If the image is in the same folder as the html page (which it should not be), then it should work just fine...

And just another suggestion, you might want to consider indenting your code where necesaary, to show what's nested and what isn't, and to make it more readable

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

Hi Laura

I edited your codes already. Hope it works.

7 Answers

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Okay, I'm using Sublime Text 2. Before I posted this question my files were in a folder in my documents directory - but I kept moving them to try to get them to render. They finally rendered once they were on the desktop, separately. I'm going to start over with all new files. You've been great! Thank you!

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Oh, good! All you need to do is make a "site" foler, then make your corresponding folders within that "site" folder, and just drag the "site" foider right into Sublimte Text, and you will see everything on the sidebar!

In a nutshell, only the .html files will sit in the actual "site" folder. The .css and the .js files will be in their own folders, within that main "site" folder

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Lush, I don't find the capital H. Is posted code editable by others? Sreng, what did you change? Also Lush, I will add the directory/ and try again, I had it there then removed it because I was trying to isolate the problem. And I did not understand this sentence: "If the image is in the same folder as the html page (which it should not be), then it should work just fine" Should the images be in the same folder as the index.html file or not?

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

One of the mods edited the code and changed the capital H to a lowercase one. When you originally posted it, it was capital. No biggie though.

As far as the images, they should be in a separate folder. The way I set up my sites are, I have a main folder called "site" where all my html pages go. Then in that same main "site" foler, I have another folder called "css" for the css pages. Then an "img" or "images" folder for all the images...

If you do have the images in the same folder as the index.html (which you can of course, it's preference), then your code would work. If they are in a separate folder, you will need to get into that folder first...

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

I tried to fix your error codes. Don't you realize that your code change?

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Sreng, I found the capital H, yes - thank you - I did not know other people could edit my code once posted in the forum. :) Lush, thank you for explaing in that. Since I last posted, I did get my images to render, but only by pulling them out of the folders and putting all the file son the desktop. I don't know what stupid little mistake I am making, but I had set up my folders like this: Documents/Website9/img/shark22.jpg

I created a folder inside my main Documents folder (iMac) called "Website9" the index file was in there, but also on the desktop. Once I removed it from the desktop, the whole page was not rendering - so obviously, somewhere I have set this up to pull from the desktop and not the folders I created.

Why can't I get the index doc to pull the files out of the folders? Why do they have to be on the desktop?

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

They dont have to be on the desktop. They can be anywhere you want, as long as you are accessing them the right way. You need to go into the directory that your images are in, in order for them to work. If they are 5 folders deep, then you will need to keep going down the directory to access them. If you have a main folder called "site" where your index.html is, and inside that folder you have a folder called "img" where all your images are, then on your index.html, you would write:

<img src="img/name-of-image.jpg">

If inside your "site" folder you have a folder called "img" and inside that folder you have anothe folder called "other" where all your images are, then the code wouid be:

<img src="img/other/name-of-image.jpg">

Please note, the images don't necessarily have to end with .jpg. They can be .gif, or .png, or whatever extension they have. I just used .jpg for the example here. It is very important to pay attention to that.

And lastly, if you have a main "site" folder and inside that folder you have 2 folders - one called "pages" where your index.html file is, and another called "img" where your images are, the code in your index.html file would be:

<img src="../img/name-of-image.jpg">

in order to acces the images.

The ../ is what you use to go up a directory (out of the current directory you're currently in - by directory I mean folder) to the main directory (folder - in this case, it would take you the "site" folder), and then write where the images are located, since they are in another directory. Hope that makes sense. It's hard to type out instructions to that. There are videos here about it, or you can Google it...

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Lush, So what you're saying g is that the browser starts looking for the images in the same folder as the index.html file, and any "child" folders need to be specified in the legend to direct the browser deeper. Is that right? I'm going to keep trying- but I just created a folder on my desktop which I called "website9" Inside of that was: Index.html file Img folder Inside the img folder I placed the two Images (paying attention to the extensions). Refreshed and the whole page was gone.

The browser does not appear to look for the files anywhere but on the desktop. So, somewhere in the set up I must be doing something wrong.

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

No. The browser looks for images where you specify the browser to look for images for. If you don't specify a directory, it will be assumed that the images are all mixed in the same directory where the html file is. Otherwise, the browser will only do what you tell it to do.

In your case, the "Desktop" was the parent directory, with "website9" being a sub-directory, and so on and so forth. You can make a main "site" foler any way or anywhere you like, not just the desktop. You just need to make sure the text editor you are using knows the location of ALL your files. You can even drag the parent folder right into text editor, and it will nicely position everything for you, and show where all the files are located inside that main folder. Well, at least Sublime Text does this And so does Brackets, and they are the best editors anyway...

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Hi Lush, Thanks fo fall your help. I tried to give you best answer but think I gave it to myself!!

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

No problem, Laura. Glad I could be of some assistance...

Laura Hill
Laura Hill
13,674 Points
Laura Hill
Laura Hill
13,674 Points

Hey Lush! I am having another issue that I JUST KNOW is related to something IDIOTIC that I am doing wrong when creating saving files to the directory. I am trying to complete the sass course. Here is what keeps appearing on my terminal window: Successfully installed sass-3.4.6 Parsing documentation for sass-3.4.6 1 gem installed laurahillsmbp2:~ laurahill$ sass test.scss Errno::ENOENT: No such file or directory - test.scss Use --trace for backtrace. laurahillsmbp2:~ laurahill$ -- trace -bash: --: command not found laurahillsmbp2:~ laurahill$ sass --trace

I should add that I have not always used a mac, maybe there is a setting or some way that I am saving text files (sublime 2) to my computer that they are not coming when called~ Any advice?

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Hey, sorry but I'm not too familiar with Sass to know what the problem there might be. I only ever looked at Sass for about an hour total, just to get an idea of it. I'm sure there's plenty here that could figure that one out tho. Sorry and good luck...