Photos and Clipart
Once you have a basic web page set up and running, you will undoubtedly want to put on some pictures. Be careful not to overdo it - balance pictures and text carefully and don't put pictures on just for the sake of it; on the other hand, a page of unbroken text is likely to be off-putting so try to break it up with some sort of graphic.
You can use various types of images - your own photos, pictures created with a graphics program such as Paint Shop Pro (PSP) or clipart from other websites.
Please note - NEVER just "help yourself" to an image you fancy off someone else's site. This is breach of copyright, and besides, it is extremely impolite! If you want to use a particular image, email the site owner and ask permission - the chances are that they will be extremely flattered and will happily grant permission and you can go ahead with a clear conscience. There are also THOUSANDS of websites offering free use of their graphics, a web search will leave you spoilt for choice. You should also provide a link back to the site you got your graphics from - it's a small price to pay for all the hard work that's gone into creating them for you. |
Whatever images you are going to use, they need to be saved on your own hard drive or disk as either GIF or JPG format and then uploaded to your website server. Make a note of the name of all your images, and the dimensions in pixels (open them up in a graphics program and read the width and height off from there.) Your images should not be too large - in computer memory, not actual dimensions - some graphics programs allow you to condense the files and you should save the pictures on the lowest definition which still gives a good image (if you are using "ready-made" clipart then you don't need to worry about this.) Photos taken with a digital camera are usually in JPG format and already condensed.
Placing the pictures
To put pictures on your page you need to use an image tag (<IMG>) in the BODY of your page : all the details of the image are set as attributes.
The source of the image is its full name : <IMG SRC="myphoto.gif"> and is followed by the alternate tag (to let those who can't see your picture know what they're missing!) : <IMG SRC="myphoto.gif" alt="Photo of me"> and the dimensions in pixels : <IMG SRC="myphoto.gif" alt="Photo of me" width="100" height="150"> .
At this point it is also a good idea to get into the habit of adding border="0" to the IMG tag so that when you start adding links to images you won't get an unwanted coloured border.
Thus, a typical image tag will look like this :
<IMG SRC="myphoto.gif" alt="Photo of me" width="100" height="150" border="0">.
There is one more attribute you will probably want to add to your IMG tag : the position or alignment of your picture.
If you want your picture in the middle of the page (like the one at the top, under the header) you need do nothing if you page is centered - it will centre automatically; otherwise you need to place the IMG tag between two CENTER tags :
<CENTER><IMG SRC="myphoto.gif" alt="Photo of me" width="100" height="150" border="0"></CENTER>
If, however, you want your picture at the left or the right of the page, with the text flowing down one side of the picture, you need to set either ALIGN="LEFT" or ALIGN="RIGHT" within the IMG tag :
<IMG SRC="myphoto.gif" alt="Photo of me" width="100" height="100" border="0" align="left"> Rhubarb rhubarb
rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb and so on......!!
will appear on the page as
Rhubarb rhubarb
rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb rhubarb and so on......!!
and similarly
<IMG SRC="myphoto.gif" alt="Photo of me" width="100" height="100" border="0" align="right"> Blah! blah! blah! blah! blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah! blah!
will appear on the page as
Blah! blah! blah! blah! blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah!blah! blah!blah! blah!
There is no way of wrapping the text down BOTH sides of the image. (You can get a similar effect by using tables - but not yet!)
Are you ready to start linking up to a second page yet?
Email me if you need any more help with this.
Clipart image free with Microsoft Office