Can not insert logo

[logician]

In “The Complete Web Designer” tutorial it explains how to insert a logo on a webpage. I made a gif image saying “killiersites” in MS Paint, but I cannot seem to get the image to show on the page. Here are the steps I follow according to the tutorial:

 

Creating the gif logo

1. I open MS Paint.

2. I select the text tool.

3. In the option box just below the toolbar I select the transparent background.

4. I then type “killersites”.

5. I select the font size I want.

6. I click save from the file menu.

7. I save it to the images folder which is inside the websiteProject folder.

8. I then select save as gif and click save.

 

After creating the image

1. I click on the images folder.

2. I then select the name of the image.

3. I click ctrl + c to copy the name.

4. I right click the index.html page then select notepad.

5. I select LOGO GOES HERE.

6. I paste the logo name.

7. I then copy this tag <img src=" " border="0"> from my cheat_sheet folder.

8. I then paste <img src="" border="0"> to the left of the logo name.

9. Then I cut the logo name and paste it between the “ “.

10. Since I have the logo in the images folder I have this <img src="images/killer_logo" border="0">.

11. I then click save from the file menu.

12. I then go back to the index.html page and click the refresh button.

All I see is a box with a red x in it where the image should be. I use the Mozilla Firefox browser, however, MS Paint is in Internet Explorer. Could that be why the image is not showing?

[Andrea]

You're missing the extention:

 

<img src="images/killer_logo.gif" border="0">

[logician]

In “The Complete Web Designer” tutorial it explains how to insert a logo on a webpage. I made a gif image saying “killiersites” in MS Paint, but I cannot seem to get the image to show on the page. Here are the steps I follow according to the tutorial:

 

Creating the gif logo

1. I open MS Paint.

2. I select the text tool.

3. In the option box just below the toolbar I select the transparent background.

4. I then type “killersites”.

5. I select the font size I want.

6. I click save from the file menu.

7. I save it to the images folder which is inside the websiteProject folder.

8. I then select save as gif and click save.

 

After creating the image

1. I click on the images folder.

2. I then select the name of the image.

3. I click ctrl + c to copy the name.

4. I right click the index.html page then select notepad.

5. I select LOGO GOES HERE.

6. I paste the logo name.

7. I then copy this tag <img src=" " border="0"> from my cheat_sheet folder.

8. I then paste <img src="" border="0"> to the left of the logo name.

9. Then I cut the logo name and paste it between the “ “.

10. Since I have the logo in the images folder I have this <img src="images/killer_logo" border="0">.

11. I then click save from the file menu.

12. I then go back to the index.html page and click the refresh button.

All I see is a box with a red x in it where the image should be. I use the Mozilla Firefox browser, however, MS Paint is in Internet Explorer. Could that be why the image is not showing?

 

 

I must be doing something wrong in creating and saving my gif image. Every time I create the killersites_logo, I always add the .gif extension when naming the image. However, after saving it as a gif to my desktop the .gif extension is never there. Am I doing something wrong in the steps I take in creating and saving my image?

[Andrea]

Have you tried what I said, regardless of what the file name looks like? Maybe your system is just not showing common file extensions. That's a setting in the folder options (on a PC) somewhere. But if my guess is right, you still need to call for the .gif even so you don't see it, as it is a (n invisible) part of the actual file name. And as far as the code is concerned, killer_logo is NOT the same as killer_logo.gif.

[logician]

Thanks to your suggestion I am able to insert the logo on the index.html page and the productList page. Unfortunately, I am still having problems inserting it in the CSS and tables_tutorial page. The CSS page is inside the cssTutorial folder. The tables_tutorial page is inside the tableTutorial folder which is inside the cssTutorial folder.

 

This is the code I am using to try to insert the logo on the CSS page: <img src="images/killer_logo.gif/cssTutorial" border="0">

 

Thanks in advance for your help.

[daddyalfie]

Thanks to your suggestion I am able to insert the logo on the index.html page and the productList page. Unfortunately, I am still having problems inserting it in the CSS and tables_tutorial page. The CSS page is inside the cssTutorial folder. The tables_tutorial page is inside the tableTutorial folder which is inside the cssTutorial folder.

 

This is the code I am using to try to insert the logo on the CSS page: <img src="images/killer_logo.gif/cssTutorial" border="0">

 

Thanks in advance for your help.

 

Looks like you have a path-problem!

 

The "forward-slash" symbol (/) means essentially "look within". Therefore the "killer_logo.gif" (which is the item you are pointing to,)needs to be the LAST entry in the path!

 

Right now you are looking for "cssTutorial" inside a folder called "killer_logo.gif".

 

Keep on plugging!

 

Alfie

[logician]

I have tried every path arrangement I can think of. I can get the logo on the index.html page and the productList.html page. However, because the CSS page is in the cssTutorial folder, and the the tables_tutorial page is inside the tableTutorial folder which is inside the cssTutorial folder, I cannot seem the insert the logo.I would appreciate anymore suggestions.

Thanks.

[daddyalfie]

I have tried every path arrangement I can think of. I can get the logo on the index.html page and the productList.html page. However, because the CSS page is in the cssTutorial folder, and the the tables_tutorial page is inside the tableTutorial folder which is inside the cssTutorial folder, I cannot seem the insert the logo.I would appreciate anymore suggestions.

Thanks.

 

OK!

 

Time to put your thinking cap on!

 

Make believe you are in the folder of the HTML page you are working on. Where is the graphic to which you are trying to link? In another folder, right? Is the target folder at your same level? Probably not! (You do not say in which folder the "killersites.gif" graphic resides. [at least I do not think you have!])

 

To go UP one level you use "../" (no quotes), so your path may look something like <img src="../cssTutorial/tableTutorial/killersites.gif"> Keep in mind that all "names" are case sensitive so cssTutorial is NOT the same as CSSTutorial.

 

Note that this same regimen applies to ALL paths, so if your css file is on another level than your current html page, you have to "point" to it in the same fashion.

 

You seem to have a rather confusing organization to your work. Maybe simplifying that would help?

 

Good luck!

 

Alfie

[logician]

I found the solution

A couple of days ago I found the solution to my dilemma. However, I was wondering if there is a better way? I have an images folder, with my .gif image inside it, on the same level with both my index.html page and productList.html page. Therefore, if I want to display the logo on those two pages this is the tag I use: <img src="images/killer_logo.gif" border="0">.

 

Because I have the css.html page inside the cssTutorial folder, it is one level down. Also, I have the tableTutorial folder inside the cssTutorial folder. Inside that folder is the tables_tutorial.html page. That page is, therefore, two levels down from the images folder. In order to display the logo on these two pages this is what I did. First I made two new folders: "specialimages" and "specialimages2". Then I made two copies of the killer_logo.gif. I put a copy in each of the two new folders. I put the "specialimages" folder inside the cssTutorial folder. This is the tag I use to display the killer_logo.gif on the css.html page: <img src="specialimages/killer_logo.gif" border="0">. It works!

 

Because the "specialimages2" folder is inside the tableTutorial page this is the tag I use to display the logo on the tables_tutorial.html page: <img src="specialimages2/killer_logo.gif" border="0">. It works also! However, I was wondering if there is a better, or simpler way of doing this? I apologize for being so wordy.

[Andrea]

If there are directory issues like yours, a good way to bypass them all is to always use direct path - so www.mysite.com/website/images/the-image.gif - that way, no matter where a file/folder is, you should be good.

 

(one thing I'm not clear and don't have time to look up - I think I can do www.mysite.com without the http - but I could be wrong....)