HTML Tutorial - Using Pictures

This HTML tutorial aims to teach you how to put an image on your web page.

Sidenote

The tag we use to insert an image is the < img> tag, which unlike most HTML tags, does not have an ending tag (e.g. to make text bold you would use the opening tag and the closing tag ) - but to conform with the new XHTML standards, ALL tags must have a closing tag, even those that previously didnt, such as the < hr > and < br > tags - so we add a forward slash / to the end of the tag, so < hr > becomes < hr /> and < br > becomes < br /> (without the spaces).

The Properties

The important properties of the image tag are the source, i.e. where the image comes from, its height in pixels, and its width, also in pixels - we should also include the alt property, although this is strictly optional. So here is how the image tag works: and the above code gives this result: (if you dont beleive me, view the source!) If you want to add an image which is in another folder (such as a smilies folder) you would change the source to something like that below: < img src=’ smilies/beerchug.gif ‘ height=’ 40 ‘ width=’ 60 ‘ alt=’ Beerchugging smilies! ‘ /> Conclusion You can now add images to your web pages, from the same, or other directories (folders) on your web site - have fun