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
Crystal Bass
Courses Plus Student 957 PointsCreating an image element
I am having issues adding the image element to the website for this course. After I added the image element <img src="img/logo.gif" alt="Smells Like Bakin"> in between the body tag, I noticed that the image is broken on my index page, after I refreshed. Is there something wrong the the image file?
15 Answers
Giovanni CELESTE
20,961 PointsHi Crystal, You said "after I refreshed", then your first load of the page was displayed correctly? If so, then it is not your image file which is wrong (if it work once, it has to work everytime), we could check your entire code if you want a complete diagnostic.
Crystal Bass
Courses Plus Student 957 PointsAfter I refreshed my page, the image was broken. How can I show my code in the forum?
Giovanni CELESTE
20,961 PointsYou copy/paste it, and wrap it with Markdown Cheatsheet (link under the box you write in) markups. (html...and close it with another ).
Giovanni CELESTE
20,961 Points
Crystal Bass
Courses Plus Student 957 PointsThis is what I have so far:
<!DOCTYPE HTML>
<html>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
<body>
<img src="/img/logo.gif" alt="Smells Like Bakin">
</body>
</head>
</html>
Giovanni CELESTE
20,961 PointsAdd a html after the first ``` It will display with a nice box and coloring syntax :).
For you image, is the url correctly set? In your first post, you write <img src="img/logo.gif" alt="Smells Like Bakin"> and in your code you have <img src="/img/logo.gif" alt="Smells Like Bakin">, the first antislash set the url at the root of your website, without it it links to the folder from you the current emplacement of your index.html.
I don't know if I'm clear enough.
Crystal Bass
Courses Plus Student 957 PointsThe first anti slash is not suppose to be there, that was a typo. I'll post it again with the correct format:
<!DOCTYPE HTML>
<html>
</html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>Smells Like Bakin'
Cupcake Company</title>
<body>
<img src="img/logo.gif"
alt="Smells Like Bakin">
</body>
</head>
</html>```
Crystal Bass
Courses Plus Student 957 PointsPlease let me know if this is the correct. I removed the anti slash. But the image is still broken. There's something I'm doing wrong. :(
Giovanni CELESTE
20,961 PointsOk, didn't look at it closely earlier, my bad. You have some mistakes in your code.
<!DOCTYPE HTML> <!-- First your doctype for HTML5 -->
<!-- start of your html -->
<html>
<!-- start of your head -->
<head>
</head>
<!-- end of your head -->
<!-- start of your body -->
<body>
<img src="img/cupcake.jpg" alt="Smells Like Bakin"/>
</body>
<!-- end of your body -->
</html>
<!-- end of your html -->
You have to keep this structure, and fill it then with your content in your head or body, depending of what you are asked.
<!DOCTYPE HTML>
<html> <!-- you open your html -->
<head> <!-- you open your head -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
</head> <!-- you close your head -->
<body> <!-- you open your body -->
<img src="img/cupcake.jpg" alt="Smells Like Bakin"/> <!-- Here I added an image (but not the logo.gif like you) -->
</body><!-- you close your body -->
</html> <!-- and finally you close your html -->
Tell me if it's not clear enough.
Crystal Bass
Courses Plus Student 957 PointsThanks Giovanni,
I taking one the html beginner classes before I finish this site. In the course, I'm creating a basic website structure using relative links so I can understand how to link images, links, etc. But I am still running into a trap. Both html pages are saved in the same folder. But the links are not relating to each other on my html pages.
This is my code for the first page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Our first page</p>
<a href= "HTML_pages/Another_page.html">
My Link</a>
</body>
</html>
Here is the code for my second page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Another page</p>
<a href= "../index.html">Go Back</a>
</body>
</html>
Giovanni CELESTE
20,961 PointsHi again Crystal :),
How did you come with these urls in your href attributes?
When two files are in the same folder, your a link have a simple url like
<a href=anotherpage.html> Link1 </a>
If the file you link is in the same folder, but in a subfolder, you declare an url like
<a href=subfolder/anotherpage.html> Link2 </a>
If the file you link is in the parent folder of the folder your file is actually in:
<a href=../anotherpage.html> link3 </a>
If the file is in a folder in the parent folder you are in:
<a href=../anotherfolder/anotherpage.html> Link4 </a>
The href=../ means you go up in the heriarchy of your website folder. Well, Treehouse teachers explains it better than me in website links part 1 and website links part 2.
Is it clear enough? Come again if you need precisions. Have fun! :)
Crystal Bass
Courses Plus Student 957 PointsI am currently taking the website part 2, and followed his exact instructions to link another page to my current page. For some reason it's still not linking together. I have both pages index.html and another_page.html under the same folder named "HTML PAGES" I initially had both pages saved on my desktop, then I moved those pages to the "HTML PAGES" folder that I created to keep my pages organized. Could that be the reason why they are not relating because they do not recognize the "HTML PAGES" folder I moved them to?
Crystal Bass
Courses Plus Student 957 PointsFor the urls: This is the url I enter for my index.html page to link my another_page.html page
<a href="HTML_PAGES
/Another_page.html">My Link</a>
This is the url I entered
for my another_page.html
to go back to index.html page
```html
<a href="../index.html
/index.html">Go Back</a>
Giovanni CELESTE
20,961 PointsIt's a bit complicated. I don't want to give you only the answer, you wouldn't understand what you did wrong, and when it would happen again, you would feel desesperate (and I don't want that :)). So, let's go back to the first steps.
<a href="anotherPage.html"> My Link </a> Here you link to a html page which is in the same folder as your current page
<a href="theFirstPage.html"> Back to the first Page </a> Here you link to the first html which is in the same folder
So you have 2 files, in the same folder, your url is simple, just write down the name of the file within quotes.
HTML_pages/anotherPage.html
HTML_pages/theFirstPage.html
<a href="myFolder/aPageWithinMyFolder.html"> Another link </a> Here you link to a html page which is in a folder, within your current folder
<a href="../myFirstPage.html"> Back to the first page </a> Here you link back to the first html page
It means that you have the previous 2 html files, a folder "myFolder" which contains another html file
HTML_pages/another.html
HTML_pages/theFirstPage.html
HTML_pages/myFolder/
HTML_pages/myFolder/aPageWithinMyFolder.html
Sorry if I'm not clear enough (I'm french, my english might be confusing).
Giovanni CELESTE
20,961 PointsHmmm...well, if you wrote the exact code you mentioned in your previous answer, it can't work properly.
Your HTML PAGES folder contains your 2 pages. So if you link the first page with a href="HTML_pages/anotherpage.html", you are telling you browser that in HTML PAGES folder, you have another folder HTML_pages in your current folder. And what I see from your answers, is that you created a "HTML PAGES" folder, and you wrote href="HTML_pages/anotherpage.html", you would have a mispell of your folder (keep HTML_pages in the href, and rename your folder correctly).
But still, if you have your 2 files in the same folder, just write href="anotherpage.html" or href="thenameofyourfirstpage.html".
Giovanni CELESTE
20,961 PointsYou added a new post while I was writing, you may be confused with my answer. Check my comment for you code.
Crystal Bass
Courses Plus Student 957 PointsThanks, that worked!:)
Giovanni CELESTE
20,961 PointsThat's great :). Glad to hear it. So is it less confusing by now? :)
Crystal Bass
Courses Plus Student 957 PointsYes, so I should save my pages/files in the folder I created first, instead saving them to the desktop and then move to the folder.
Giovanni CELESTE
20,961 PointsHmm...not really. It's not a problem where you save your files, as long as your hierarchy and the code associated are coherent. Here the explanation:
Let's say you have a file index.html in your HTML_pages folder, on your desktop.
<a href="yourFirstFile.html"> First link </a>
<a href="myFolder/yourSecondFile.html"> Second link </a>
<a href="../yourThirdFile.html"> Third link </a>
<a href="/myFolder/yourFourthFile.html"> Fourth link </a>
What you have in your explorer is something like this
Your desktop
a HTML_pages folder a file index.html (where your code is)
Giovanni CELESTE
20,961 PointsWell, can't edit my answer, so I go on here.
- Your desktop
- > A HTML_pages
- > 2 files: index.html and yourFirstFile.html and, and one folder: myFolder
- > in your myFolder, you have 2 files: yourSecondFile.html and yourFourthFile.html
What you can see with the code, is that, depending where your coding file actually is, your url path should be adaptated. In the hierarchy,
- when you write just the name of the file in your href, it means that the file is in the same folder as where you are
- when you begin your href with a folder, it means that the folder is in the same location as where you are
- when you begin your href with a "../" it means that you go up in the hierarchy, to the parent location from where you are
- And in the end, if you begin with a "/" it means that you are at the root of your website
Crystal Bass
Courses Plus Student 957 PointsNow I have a better understanding. Thanks for breaking this down for me!