technical problem

[spockyboy]

ive just started level2 web design at college, I started the course 3 weeks later than everyone else, So im working at home ive built a basic web page with an editor but i cant add a picture or any for that fact i am using mozzilla firefox browser when i load the page the picture appears as a blank box with a torn piece of paper in the top left hand corner and when i tried it another way the alternate text appears without the picture and thats it can someone tell me why im ****ing up please much appreciated.

<img src="piglet.gif" alt="piglet" />

<img src="piglet.gif" alt="piglet" height="100" width="100" />

:mad::mad::mad:

[spockyboy]

dont worry guys i figured it the picture has to be in the same folder as the html document

[Eye for Video]

Actually your images can be in whatever folder you want, they do not need to be in the same folder as your html page. In fact, as a (upcoming and coming) Web designer, you would normally not have your images in the same folder but rather create separate folders for your images, css, scripts, etc. Learning to do so will keep your Web site files much more organized.
Using subfolder just requires that the path to the photos or css files is correctly detailed in the code. For example, if your "piglet.gif" is in the images folder, one folder level down, then the path relative to the html page, would be:
<img src="images/piglet.gif" alt="piglet" height="100" width="100" />
If your "piglet.gif" is in the images folder, one folder level higher than the html page, then the path relative to the html:
<img src="../images/piglet.gif" alt="piglet" height="100" width="100" />
Learning to use subfolders and correctly pathing the access to them is a very important part of your growth as a Web designer.
Best wishes on your education!
EfV

[spockyboy]

thanks a lot great tutorial i get what you mean the the html has to tell the browser where the image is stored:):):)

[webshowcase]

Just thought I would add that referencing things from your websites root directory is also a good thing to keep in mind. Especially for large websites that require pages to be moved around from time to time - you won't need to change the image reference.

For a beginner it might be a little hard to understand but definitely something to keep in mind. So instead of using ../ to jump back directories you can apply your code to go back to your websites root directory / then look in the images folder. Example /images.

If you have a web page on your server:
http://www.yourdomain.com/mysubpage/page/pageexample/mypage.html
instead of linking to your image like ../../../images/myimage.jpg - using the root directory you can simply use /images/myimage.jpg

No matter where you move mypage.html on your web server you will never have to edit the link if you use the root directory.

The only problem here is that you cannot preview this on a local computer unless you are using iis.

My explanation is probably not too great - looking for a good tutorial on this but can't seem to find one for you.

Hope that helps!