logo not appearing on my browser

Well just make sure about a few things first
Lets assume you are creating your html project in a folder called Demo and you have your main html file called main.html in the same folder demo.
In the same folder demo you have your logo called logo.jpg
So to call your logo i.e. logo.jpg in your main.html file you will use the tag

<img src="logo.jpg" alt="" />

If you have your image files in a subfolder called Images inside your Demo folder then you will refer to the image as

<img src="Images/logo.jpg" alt="" />

Try looking into your html code too. Maybe you spelt something wrong (it is case sensitive) or forgot to close the tags.
If it still doesn't work you can post your code here so that we can look into it.
Hope that helps

so it has to be in the same folder that i have the index.html file is in? im completely new to this but i alway like wanting to do this and sofar its fun to me.

ok yea that makes sense. lets say i have my index.html in one folder and my images on another would i be able to direct it to the folder or should i just put the images and html in the sam folder?

Could you copy your code and paste it here? https://gist.github.com/ then Share the link with us.

Wow spam delete.

Wow spam delete.

Wow spam delete.

Wow spam delete.

Avelardo,

Did you make sure to download the project files for the video, and verify that you're pointing to the correct directory on your computer to where that image file actually lives?

Erik

Avelardo,

The image doesn't need to be in the same folder as your index.html file, you just need to make sure that you're specifying the correct path within your index.html to point to wherever you have the image in your directory.

As Gunjeet mentioned, there are multiple ways you could have this set up:

1) You have a folder called "PROJECT" on your desktop. This is where you have saved your "index.html" file. Within that folder, you could have another folder called "IMAGES", and in that "IMAGES" folder, you could have your "logo.jpg" file. If that were the case, the "logo.jpg" file would have the file path of "PROJECT/IMAGES/logo.jpg" associated with it. Therefore, in your "index.html" file, when you assign the location for that img tag, you would need the following value:

src="PROJECT/IMAGES/logo.jpg"

However, you CAN choose to have the image sitting in the same folder as the index.html file (i.e. have the image sitting right there in the PROJECT folder instead of in the PROJECT/IMAGES/ folder), in which case the src attribute for the image would read:

src="PROJECT/logo.jpg"

It's all a matter of making sure you're pointing the source for that element to the exact right location. You could choose to make a folder structure of PROJECT/IMAGE/JPG/LOGOS/ and then put logo.jpg all the way down there, in which case your source attribute would read:

src="PROJECT/IMAGE/JPG/LOGOS/logo.jpg"

Does that make sense? You can put the file wherever you like (though there are recommendations for how you should set up your file structure that will make it easier to understand and maintain), and then you just have to make sure you're pointing your source attribute to that exact location.

Erik

Typically, you would want to separate your files into different folders, as you mentioned. A sample folder structure is as follows, (let us assume the root project folder is simply called "PROJECT", and all folder names will be ALL CAPS to help separate them from what is inside them):

PROJECT -index.html CSS -my-styles.css IMG -logo.jpg -background.jpg -my-profile-picture.jpg

So here, we have a main PROJECT folder with one file sitting in it: "index.html". Also in the PROJECT folder, we have two other folders (or "directories" or "subfolders"), CSS and IMG.

The CSS folder contains one file: your "my-styles.css" file (which is how you add colors and positioning and other styles to your website, which you'll get to soon enough if you haven't already).

The IMG folder contains multiple files, which in this case is all the images that you need for your site, including "logo.jpg".

If this is the way you structure your folders, your website will be easier to put together and maintain, particularly if you need to come back to it at some point a few days or weeks or months down the road. Think of it like any other organizational system that you might implement, say, in your kitchen. If you went shopping and bought groceries for a full week, then came home and just put them all in one massive pile, or in random cupboards, you would have to sift through a bunch of irrelevant stuff just to find the one item you wanted when you got hungry. If, however, you put individual items into areas that make sense for them (such as milk and other perishables into the refrigerator), you would know exactly where to go to find them when you wanted them. Moreover, if someone else came over and wanted some milk, they would know to go look in the fridge to find it, rather than having to check all the random cabinets or the big pile of groceries on the counter.

The above is just a sample structure, and is recommended and widely used. You can adopt it and change it to fit your style however you like, and you'll then just need to make sure that you have all your links pointing to the correct locations within!

Erik

It can help to think of the relationship between your folders and files as addresses and stores, and think of your web browser as a friend who needs directions to a particular store.

Files = STORES Folders = ADDRESSES Browser = FRIEND Computer = YOU

If a FRIEND comes up to YOU and wants to go to a new STORE in town that they know you have been to, they might ask you for the ADDRESS so that they can get there. It's then YOUR responsibility to give them the exact ADDRESS so that they can get to that STORE and find the content that they want.

Pretend the store is Apple, and the address is 5150 Apple St N. If your friend asked where Apple was, and you simply said "Apple St", they would be lost, because the address "Apple St" isn't specific enough. That street is really big and has a lot of different stores on it, thus, they don't know where to go to find the exact store they want. If, instead, you gave them the exact address of 5150 Apple St. N, they could find it without any problems because they know EXACTLY where to look!

Alternatively, if you were standing right next to the Apple store when your friend asked you, you wouldn't need to do anything more than simply point and say "it's right here." This is similar to what you would do if the logo.jpg file were in the same folder as your index.html file, whereas the first example is what you would do if the logo.jpg file were in a different folder.

RIGHT NEXT TO YOU (i.e. sitting in the same folder as your reference file):

src="logo.jpg"

IN ANOTHER FOLDER WITHIN THIS FOLDER:

src="image/logo.jpg"

While computers are really good at doing what they do, they can only do those things if we tell them EXACTLY how to do them.

And don't worry too much if this doesn't make perfect sense yet; you'll be exposed to folder structures and relative vs. absolute file paths and all of that in upcoming videos in your lessons, and it will all click!

Happy coding!

Erik

repost sorry

thank you Erik that makes more sense and i get most of it