::images::
A picture is worth 1000 words
Pictures are integral to a website. Whether it's just to help the appearance of the website, or if its part of the navigating system or maybe the main focus - nearly all websites will have at least one picture/photo. So, lets get into it! JPG vs GIF
The most common formats for pictuers is JPG(JPEG) and GIF. When saving a photo to publish on the internet there are 2 main factors you need to consider. The QUALITY and SIZE of the file. You don't want a photo that is so horribly pixulated that you can't make out what it is, nor do you want a file that is so massive that even people using cable need to wait for ages before they can see it. The general 'rule' I use is this. If it is a photo or something complicated, such as textured background use JPG. If the picture has quite a few blocks of the same colour, then use GIF. Or if you can't decide, and have a program such as Photoshop, you can preview before you save - just remember to look at BOTH quality and size. Basic Manipulation
To display an image on your webpage all you have to do is this:
<img src="picture.gif"> - which translates to: Image Source="picture.gif"
You may notice that unlike links, there is an abscence of the closing tag. This is because an image doesn't really have an 'end' to it unlike links. When you display images, there are several things you can do to them, you can add borders, align them, or even change the size. <img src="picture.gif" alt="description of picture"> - this is the text that often appears when you move your mouse over a picture. It is an alternative view to your picture. If the picture doesn't load, the text in 'alt' will be shown, so it is quite helpful and I highly recommend it be used for ALL images. <img src="picture.gif" border="0"> - this will change the thickness of the border. Obviously the larger the number, the thicker the border (personally, I don't like the borders and if I do want a border, I will put it in as part of the picture - but that's just a personal preference) <img src="picture.gif" width="300" height="300"> - this will change the dimensions of the picture. Becareful when you use this function, as you can distort the picture if you change the width/height ratio too much, or pixulate it by enlarging it too much. <img src="picture.gif" align="left"> - there are 5 different things you can put in place of 'left', they are: left, right, top, middle, bottom. If you put in left/right the image will be aligned to the left or right depending on which you chose, and the text would be 'wrapped' around the image. If you put in top/middle/bottom, one single line of text will be placed at the top/middle/bottom of the image. (see examples below)
This image is not aligned at all. As you can see, the text just follows and looks rather tacky.
This image is aligned left. As you can see, the text is wrapped around it, as opposed to just following afterwards. I will keep on typing nonsense to show you that the text will eventually come down below the picture and therefore finish the wonderfully, amazing, miraculous wrapping effect. Ok, maybe it's not that crash hot, but hey, I got a few more words down!
This image is aligned right. As you can see, like the align="left", the text is wrapping around the image. And again, like the previous example, I will continue to blabber on and on and on and on ... in order to let you see the overall wrapping effect. I think I'll blabber on a bit more just to be certain that there is enough text. But really, HTML isn't that hard is it? The best way you can learn is to make your own webpage - obviously, start small and then expand, and have a plan, it helps alot (yes, I've learnt from painful experience).
<img src="picture.gif" hspace="10"> - this is actually a new command to me. Found it when I was searching up a few forgotten/rusty commands earlier on. But it's rather interesting, and I presume helpful. What it does is it will leave the specified amount of horizontal(left/right) space (hence hspace) around your image. <img src="picture.gif" vspace="10"> - this is very similar to 'hspace', but instead of horizontal space, it will leave vertical(top/bottom) space around the picture. Obviously, the larger the number the more space there is.
Greeting earthlings, I am from Mars and I have come here to teach you HTML... (yes, I am crazy). Ok, back to normal. In this example I have put Horizontal Spacing to 20, and Vertical spacing to 10 and also align is set to left. So you can see the difference. Compare it to the one below which doesn't have any spacing specified. See the difference? This command will come in handy if you want a little bit of breathing space between your images and your text.
G'day all you internet surfers. This example here only has "align=left" as opposed to the example directly above. The difference should be quite obvious. Hopefully this gives you an insight to how hspace and vspace works. (The fact that I just learnt it about 5 minutes ago can be disregarded and forgotten forever.) I suppose that my slightly disfunctional memory will be of great help into contributing to forgetting this little fact - though I fear it will also contribute to forgetting the various HTML I have learnt over the years. *sigh*