Getting Started
Open Notepad again, click on File/Open. At this stage it will only show your folder name at the top.
Go to the box which says FIles of Type and click on the arrow at the side of this and choose All FIles. Your index.html
file will now be displayed in the box above. Either double click on it to open or single click to select it and
then click Open at the side of the file name. Now we are ready to start.
First of all we are going to give the page a title, which is not the same as naming your HTML file.
Whatever you type between the <Title></Title> tags is the only part of the head section that is visible to
the viewer. Try to use a descriptive title then when people bookmark your page, that is the name that will
show up in their Favorites list.
In between the Title tags type in the name of your page. I am going to call mine Topsy's Web Graphics.(See below)
Now go to File/Save but don't close Notepad.
We now go to the BODY part and work between the tags <BODY> and </BODY>
The first thing we need to do is set a background color. You can open your Graphics program and look
in your color palette, choose a color and make a note of the number. I have chosen a pale yellow with
the number #FEFED6. We will now type this in the body part of our document, using the correct attribute
within the Body tag which is BGCOLOR and quotation marks.
<BODY BGCOLOR="#FEFED6">
<HTML>
<HEAD>
<TITLE>Topsy's Web Graphics</TITLE>
</HEAD>
<BODY BGCOLOR="#FEFED6">
</BODY>
</HTML>
You can check your progress by going to your folder and double clicking on the file index.html.
If you would like a textured background such as this one I have included with the tutorial, this is how to do that.
The file name is tpslilac.jpg. Just right click on the image, select "Save picture as" and save it to
your folder with the other files.
To change your background to the texture, we will change the existing BGCOLOR="#FEFED6" to the BACKGROUND
attribute as below.
<BODY BACKGROUND="tpslilac.jpg">
<HTML>
<HEAD>
<TITLE>Topsy's Web Graphics</TITLE>
</HEAD >
<BODY BACKGROUND="tpslilac.jpg">
</BODY>
</HTML>
Save your work and check your progress again to see how this looks.