|
Again you may notice this page having progressivlely more eye appeal than
the previous one. This is done by the use of images and a border around
the header. Both of which we will learn how to do for use on a page.
First let's learn how to do the border. It is actually done by a simple use
of tables, which is another area that can be used later. We will not go into
detail about them here...remember..we are keeping things simple yet eye
appealing. I chose to use 3 borders actually..with the outer one the largest
giving more of a 3D type look. I also used another font for a different
look.
The first thing we need to do is to identify what is inside this picture frame
look. In mine that contents is LESSON 3. Next we use our center tags to
surround it like this:
Now we begin to build our border from the inside out. We first want to choose our font style, size and color. Again, from prior lessons remember tags are used in pairs:
<CENTER>LESSON 3</CENTER></font></i></h1>
OK now that we've identified what our contents look like we next build the first border around it:
<font face="Book Antiqua Bold Italic" size=+2 color="#FF0099">
<CENTER>LESSON 3</CENTER></font></i></h1>
</TD></TR></TABLE></CENTER>
That was our first border. We will repeat this action using a larger size for the next border:
<CENTER><TABLE BORDER=3><TR><TD>
<font face="Book Antiqua Bold Italic" size=+2 color="#FF0099">
<CENTER>LESSON 3</CENTER></font></i></h1>
</TD></TR></TABLE></CENTER>
</TD<</TR></TABLE></CENTER>
And now the 3rd and final border:
<CENTER><TABLE BORDER=5><TR><TD>
<CENTER><TABLE BORDER=3><TR><TD>
<font face="Book Antiqua Bold Italic" size=+2 color="#FF0099">
<CENTER>LESSON 3</CENTER></font></i></h1>
</TD></TR></TABLE></CENTER>
</TD></TR></TABLE></CENTER>
</TD></TR></TABLE></CENTER>
You may have noticed the color of the border is picked up from the background color in general.
The use of a background is done with an image. The image itself is used in a method (tile) that repeats itself and gives you a total back ground. Recall from lesson 2 where we put color into our pages; we'll use the same area to insert a background image.
You first must locate an image you want to use. There is a wealth of resources
on the web for background images and icons. I will provide you with a few for starters
later in this lesson. When you locate one you want, and if you are using Netscape,
you can right click on the image and "save as".
Once you have chosen your background image and have it downloaded you will
insert it in the area with your background color. The reference you will
use is BODY BACKGROUND="your image file". This will be within the brackets
of the other information about the appearance of your page. your image will
be whatever gif or jpg you choose. For example the one I have chosen for
this page is called "IMAGE.GIF".
The tags you use to insert an image elsewhere in a document are simple too!
The default placement is to align left, You simply use:
<IMG SRC="your image file">
But if you prefer you can center that using these tags. I will use the
actual teacher gif that I have on the bottom to demonstrate:
OK, now let's align it right:
<IMG SRC="TEACHER.GIF" ALIGN=RIGHT>
We are looking good! Let's go to lesson 4 for some music!! I love music!
"LESSON 4"
ggj@erienet.net
Back to my home page
| ME| GOLF| MUSIC| HTML BEGINNINGS|