How do I open a folder for the images? how do I reference my images in my code?

Question

<a href="index.html/Trees.jpg"> <p>Mixed forest.</p> </a>

css/main.css

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

Answer 1 · 2016-01-29T23:09:40Z

January 29, 2016 11:09pm

Hello Susan,

Hi Susan, Suppose your image file named image1.jpg is in the folder named img. Now, if this img folder is in same hierarchy as index.html file, you can reference your image like this :

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

It is a good practice to keep the folder (where images are located) in the same hierarchy as index.html file.

If your image1.jpg is in the same hierarchy as index.html file, you can directly reference to image file. You can also keep information about the image in the alt attribute, specify the height and width of the image inside the img tag.

<img src="image1.jpg" alt="Smiley face" height="42" width="42">

Hope this helps. Feel free to ask if you are not clear.

Happy Learning :)

Welcome to the Treehouse Community

Looking to learn something new?

Susan McNeil

Susan McNeil

How do I open a folder for the images? how do I reference my images in my code?

1 Answer

Rasbin Rijal

Rasbin Rijal