Images are kind of like hyperlinks, the page is calling on another file, but in this case it will just display it within the same page.
The code is :
<img src=”http://www.capty-design.com/images/picture1.jpeg” width=”400” height=”300”>
No closing tag because it does not contain anything its just a piece of information for the browser. Img src stands for Image Source and simply points to where on your web server or computer you have the image you want displayed. You do not need to include the width and the height, it will work without it and use the actual dimensions of the picture, but those attributes can be used when laying out a page to get a more precise look.
Now as I said before a hyperlink can simply be applied around this :
<a href=”page2.html”><img src=”picture1.jpeg”></a>
Go into paint and make a picture real quick and then save it as picture1.jpeg, in the same folder as your index.html. Then add that code to your page and check it out. It works the same as the text link just applied to a picture.
Now we need to cover some non-html issues about images
The file types for images vary depending on the program you use to create them. You'll notice that when you were in paint you had many options to choose from on how to save your file.
Most common are .BMP , . JPEG and .GIF and .PNG
Note : .JPEG and .JPG are the same file format there are just two ways of expressing it, but the image source in your html has to point to what the picture actually is. So don't tell it to go to picture1.jpg if picture1 is actually a .jpeg.
All these different image types are just methods of compression to make them fit on the web. You will very rarely ever use .bmp, and stay away from it, its compression is minimal and so you end up with very large files which means long load times on your pages. As a rule I use jpeg for the majority of images that have lots of different colors in them, and gifs for images with few colors or some kind of transparency. A jpeg image will not carry over any transparency, the clear area will become white. PNG's were invented for the web and pretty much make gifs obsolete. As of right now support fully for png's does not exist, but with the next evolution of Internet explorer 7.0 you will see pngs become a mainstay of the Internet. They can also use transparency. Gifs will probably stay the only kind of image that can be animated, or that is what it looks like right now. For photographs use Jpegs.
As of right now you are probably not making graphics, so just make sure to link to your filename and correct file extension and you will be just fine.
This post has been edited by capty99: 04 October 2006 - 07:17 AM