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
David Moyle
2,713 PointsSuper-noob question about images in HTML!
In a Workspace, I'm following along Nick Pettit's course in website design succesfully, but I have a really naive question:
the HTML finds the images in the left upload column of Workspace. Okay. But if I try to create a similar website outside of Workspace, in my PC's Notepad++, there is no neat little upload area on the left.
So, where do I store the images, folders, etc.?
Hope that makes sense, & isn't making you shake your head too hard ...
7 Answers
Richard Hope
25,237 PointsYes, you will have a similar file/folder structure for each website. As you learn more, this structure will get more complex. It's really just to keep organised though. In theory you could put all files in the same folder but this would get unruly very quickly. Other types of files you'll eventually need folders for will be things like .css and .js files.
Richard Hope
25,237 PointsYou should create a folder for your website on your pc, anywhere you like, but choose somewhere you can navigate to quite easily. The html file you create in notepad may go directly in this folder. It would then be good practice to create a folder inside called 'img' to contain your images, but this can also be called anything you like. Then you include the path to this image in the src attribute of the image tag in your html. ie <img src="img/image.jpg"> If you just put the image in the same folder as the html file it would be <img src="image.jpg">
Richard Hope
25,237 Pointssorry code didn't show up. the 1st should be img src="img/image.jpg" the 2nd should be img src="image.jpg"
Jason D'Angelo
6,592 PointsHi David, in a live website, all of the pages, images, etc. are stored on the web server. You would store your images in a folder (i.e. Img) and link to that image in your code <img src="img/photo1.jpg">. There are variations in this linking but this is the basic. The "upload" function is performed by "FTP" software.
I know it is a little overwhelming and confusing, and my answer probably just confused you more (lol) but keep following the course, Nick Pettit is an amazing instructor and everything gets explained throughout the course.
Richard Hope
25,237 Pointsbtw a program that recreates the look of workspaces is sublime text 3, although i think notepad++ does as well a little. Lots of people love it.
Jason D'Angelo
6,592 PointsExactly David. Think of each website as a folder named mywebsite.com inside that folder you have another folder called Img and a file called index.html. You can have multiple folders (websites) all with different index.html files.
David Moyle
2,713 PointsThanks, guys! So, a folder (within a folder) becomes the image-upload area. Okay. That's great!
... I suppose then that if I had multiple (practice) websites, each should get its own folder, each folder containing an "index.html" and an image folder, etc.?
Not sure if that makes sense. I guess I'm just not used to--among other things--using the same names ("index.html" or "images" for a folder, etc.) for different versions of the same thing. (I.e., Each website folder containing a folder called "images", each "images" folder containing different jpgs.)
David Moyle
2,713 PointsMagnificently clear & helpful answers, gentlemen. Thanks!