Images

[Kev]

Hi,

In short like alot of people i am trying to learn html/css to build a half sharp website.

I am working through some online tutorials whilst waiting for some books i have ordered on the subject.

 

So my rather Begginer question is:-

Where do you store images that you wish to add to your html coding ?

 

I read people mentioning an Image Folder but is that on my PC and if so how do i point the code to the image ?

 

Thanks for any help

[Andrea]

Technically, where you store them is (almost) irrelevant. That is, if your website is just on your computer, they can be on your computer, but if your website is online, they should be on a server.

 

Creating a folder called 'images' is not necessary - but it's a useful organizational tool. You could have them in the same folder as your index.html and your other pages, but if your site is bigger, that might be quite a mess. Or you could have them in a folder called 'elephant' - as long as the path to the images is correct, it won't matter. Obviously, calling your images folder 'images' makes a lot more sense.

 

Let's assume you have a folder called 'website' and your index.html is in that folder. That folder also contains another folder called 'images' (which holds your images) - then your code to the image would look like this:

 

When you upload to a server, you'd upload your index.html AND your 'images' folder (including elephant.jpg) and your code will not change.

 

Does that help for starters?

[Kev]

Thanks for the quick reply

 

That will do nicely and i will give it a go see what i get

[Kev]

Ummm

 

Got half right but alas no Image only a Pale blue box 300 x 400 and the text i included.

 

 

My Image is located on my PC and i am opening the page in FF is this my problem ?

 

NOTE:

I am using Notepad as my editor and saving as

 

File name...Description of page.html

Save as type...Text Document [*.txt]

Encoding...UTF-8

 

Thanks for any help

[Wickham]

This

File name...Description of page.html

Save as type...Text Document [*.txt]

Encoding...UTF-8

 

should preferably be ANSI

 

File name...Description of page.html

Save as type...Text Document [*.txt]

Encoding...ANSI

 

for all html files as UTF-8 usually causes a strange symbol at the top left corner of your page. Also make sure that the file hasn't been saved as page.html.txt as happens sometimes when you save. Make sure the operating system file list has extensions visible to check this and delete the .txt if it's there, but in your case it seems that it's OK as you can see the html page in a browser.

 

As far as the image is concerned, Thelma recommended that you create a sub-folder called images so you should have your main folder with the html file, whatever that is called, and inside that should be the images folder and inside that should be the image file:-

 

main folder -> page.html

main folder -> images -> digi_voice_recorder.jpg

 

Note that I have used lower case for images and your filename with no spaces; spaces always cause problems when uploaded to a server and differences between lower case and upper case between the filename and the code will also cause a problem because servers are case-sensitive.

 

So re-code as:-

 

 

I hope it shows after editing.

Edited July 17, 2009 by Wickham

[Kev]

Thanks for the reply, But i'm not on the same page :/

 

I can get an Image onto the web page using one that's hosted on PhotoBucket no problem (Although i found the code rather long !!!) It's getting one on that resides on my PC that's giving me grief

 

I have ordered a couple of Books so i think i'll wait and see if they can steer me outa the woods

 

Thanks all..........

Edited July 17, 2009 by Kev