animated Web Page Design gif

Step 5.


Adding an image or animation.


An image is a drawing, picture, photoghaph, or graphic. An animation is a graphic that moves because there is more than one layer of the graphic and the browser is running through all the layers to make it appear to move. Just to add the animation to your page, you don't have to worry about the layers, but you do need to make sure that you save it into your folder that your web site is in. Saving it to your desktop or in My Documents usually only gets one layer saved. You save a graphic and an animation the same way. Once you've found a graphic or animation for your page, right click on it. Click on save picture as. Save it in your folder. Remember to ftp it to your site. I'll put an animation and a graphic on this page for you to save and put on your practice index page that we are building.
Angel graphic


animated Ohio flag

We will center the Ohio flag animation between the first and second lines of text on our page. Then we will put the Angel graphic at the bottom of our page, also centered. Below is the html needed to do both.


<center><img src="ohioC.gif"></center>
<center><img src="Angel5.gif"></center>

Now let's see what it looks like when we put the html in our index page.


<html>
<head>
<title>index.html</title>
</head>
<body background="wood006.jpg">
<center><H1>Welcome To My Home Page!</H1></center><br>
<center><img src="ohioC.gif"></center><br>
<center><H2>This is my first web page!</H2></center><br>
<center><H3>This is really easy!</H3></center><br>
<center><img src="Angel5.gif"></center><br>
<center><a href="page2.html">Go to page 2.</a><br>
</body>
</html>

Where can you get neat free animations and graphics? I'll add one or two to the list below every once in awhile. Starting with this one...

Free Web Page Graphics

Back