Working With Images
Now we can add some images to our page. You can have an image background, for example, instead of a solid color, and you can have pictures or images scattered throughout your page (though I must warn you, the more images, the longer it takes for your page to load).

The image code is very simple...it is < IMG SRC > and it does not have to be closed. To add an image background for your background, you need only put the url of the image beside BACKGROUND in the < BODY > tag instead of the color code.

For these examples here, I am going to be using this image:

(I'm getting in the Christmas mood! :-)

Now, I have that image saved to my geocities files here so all I did to get that image to show up above is write this:

< IMG src="//www.oocities.org/ssmcbroom19/xmastree.gif" >

To center that image, I would write:

< CENTER >
< IMG src="//www.oocities.org/ssmcbroom19/xmastree.gif" >
< /CENTER >

You have to be sure to close (< /CENTER >) the center tag otherwise everything else beneath the < CENTER > tag will be centered. You can also use this center tag for anything else on your page that you want centered.

I rarely do this, but you may want your image to be on the right side of the page instead of the left or centered and here is what you would write for that:

< IMG src="//www.oocities.org/ssmcbroom19/xmastree.gif" ALIGN=RIGHT >

Now, isn't that easy enough? Now, to put an image in our background, I am going to use this image and we would write this in our BODY tag:

< BODY BACKGROUND="http://www.oocities.org/ssmcbroom19/angels.jpg" >

SO, now on our html page we can add some images:

< HTML >
< HEAD >
< TITLE >My brand new homepage< /TITLE >
< /HEAD >
< BODY BACKGROUND="http://www.oocities.org/ssmcbroom19/angels.jpg" TEXT="#000000" LINK="#0066ff" VLINK="#ff0000" >
< font size=7 >Welcome to my page! < /font >
< P >
< font size=3 >
Working on my < font color="#ff0000" >brand new page< /font >and trying to learn the html to do it.
< CENTER >
< IMG src="//www.oocities.org/ssmcbroom19/xmastree.gif" >
< /CENTER >
< /font >
< /BODY >
< /HTML >

If you click here, you will see an example of how our page looks now.

Now let's move on to adding links to our pages in lesson 4.

Back Home