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 HTML Basics Images, Text and Links Understanding File Paths

Posted by Joshua Sacrey
Joshua Sacrey
489 Points

adding images and file paths, is there full copy of the example code page from the video I got a little lost

I think in the previous videos I must have got my code out of order and a bit wrong, when I watch the video I can only pause to try and see the whole page to spot where I am off. I am looking to see if there is a copy of the whole page of code to compare mine with. Other wise I have to go all the way back and start again which isn't the worst idea but I was ok until around this area of the course. Or any chance of someone reviewing my entire page of html>??

1 Answer

Shay Paustovsky
Shay Paustovsky
969 Points
Shay Paustovsky
Shay Paustovsky
969 Points

Hi Joshua, A copy/example of the code I can't provide you, with a code example because unfortunately I don't have it. But I can explain the topic more deeply.

Image - The <img> tag is used to add images to your page to make it look more attractive or appealing.

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

The <img> tag is one of the "empty elements" HTML has to offer, and it uses 2 attributes.

  • src - requires a value which could be a URL / or a file path in the website's folder structure
  • alt - accepts text values for an image as an alternative text in-case the image isn't available.

FILE PATHS In HTML a file path is simply a path that describes the location of the file/image you're trying to get.

There are :

Absolute Path - A full URL web address outside of your website's folder structure with the http:// pre-fix

  <img src="http://my-awesome-website.com/image.jpg" alt="awesome image">

Relative Path - A URL relative to the website's folder structure without the http:// pre-fix and the root folder is always the folder in which the HTML file is located.

Assuming the image you're trying to link to in inside a folder called images:

<img src="images/image.jpg" alt="my image"/>

Root-Relative - Root-Relative path is similar to the Relative path except that the root-directory of your website isn't the folder where the HTML file is located rather is the project folder that contains all the files.

!Note! - The Root-Relative path works only when your website is uploaded to the web or to a server.

<img src="/images/my-meme.gif" alt="my meme" />

Now the '/' character defines the root-path which is the project folder that contains all the files of your website

Hopefully this answer helped and you could make assumptions & fix your code without returning back ;)

HAPPY CODING