First of all, right click the 'smiley face' below. Choose to 'save picture as'...and save it as smiley.gif. Save it in the same folder that your notepad/html file will be saved in.
After the <body> tag somewhere, depending on what else you have on your page and where you want your picture in relation to it...you need to put in the command to put the picture on your page.
This is:
"
<img src=smiley.gif>".
Save your notepad as an html file, then open up the html page. You will now see the smiley face on it!
Another thing that's handy to include in the image tags is the height and width of the picture. Although you don't need it, when your page is opened the pictures won't download instantly. Without the image size included, as the picture downloads the page re-arranges itself. If the size is there, then the space is allocated for the pictures straight away and the text shows where it's supposed to.
To find out your images size, open the picture and right click on it. Go to properties then note down the image height and width. You then enter this into your image tag like this:
"
<img src=smiley.gif width=59 height=57>".
You can change the height and width and the picture will change to suit. If you want to make it smaller, make the height and width smaller and the picture will squeeze into the area. To make it bigger, set the dimensions bigger...and it will fill the space. Remember to keep your picture in proportion!!
If you're still not sure how to do this, have a look at how the html looks on the page
here.
Of course, you can use the <center> tag, and the <p align=right> tag with your images. I don't think you need to be a brain surgeon to work out what those tags before your "img src" tag will do!!
Putting animated pictures on your webpage.
If you want to use an animated gif, you use exactly the same code as using a 'normal' one. The only difference is, you need to find animated images instead of static ones. I have a 'smiley' image that is animated as well as the one we used already that isn't. Download the following picture saving it in the same folder as your html page, and call it 'face.gif'. You can then put the animated 'smiley face' on your page in the same way you did a non-animated image: "
<img src=face.gif>"
"
<img src=smiley.gif>"
"
<img src=face.gif>"
So now, you have two pictures side by side. One fixed, one animated.
You don't want them side by side? You want them one on top of the other? Use your <BR> tag and your <P> tag then!
Making sure we can SEE the pictures you put on your webpage!.
The main thing you need to be aware of when putting pictures on your webpage is that your html coding needs to say EXACTLY where the picture can be found. It's kind of like asking one of your kids to get something for you. You can't just say, 'hey go get it, it's in the kitchen'. They just won't find what they're looking for. You need to say, 'It's in the kitchen, on the bench near the sink, on the left side of the kettle'. If you leave out the 'left side of the kettle' bit, then they're not going to find it. Trust me.
So, what we need to do is make sure the pictures you use on your webpage can be seen by anyone who goes to your site. You can't keep them on your computer, upload your page to the net and expect your pictures to show up on your page. They just won't. You need to upload the pictures you want to use to your site.
Go to the file manager on your site, and upload the pictures the same way you did the index.html page, or any other files you uploaded.
Upload the html file you have been working on, type the address in your browser....and see if your pictures showed up!
Next, I'll show you how to make links in lesson 9!
