Search billions of records on Ancestry.com
   
GCF Logo

Mom's Library

a production of Genealogy Chat Friends

This is a recap of the Web Page Design and Build Class 3.


It is intended to build upon the lesson in Class 2.
If you have not completed lesson 2, go back to last week's lesson before continuing.


You may click on a link below to go directly to that section of this page, or simply scroll down at your leisure.
I use the following format in all steps:
L-Click = Left Click
R-Click = Right Click
DL-Click = Double Left Click
UPPER CASE = TAG names

Click Here to see the transcript from the class.


Create a copy of page2.html and save it as page3.html

This step will create the working file for this class. It will be a copy of the page1.html file you created in lesson 1.
  • L-Click Start. This opens a popup list of options.
  • L-Click Run. This opens the Run window.
  • Type notepad
  • L-Click the OK button.
  • L-Click File.
  • L-Click Open.
  • Navigate to your myhtml folder from last week. Make sure you have changed File Types to All Files from Text Files.
  • L-Click page2.html.
  • L-Click Open button.
Now save the file as page3.html
  • L-Click File
  • L-Click Save As
  • Navigate to your myhtml folder from last week. Make sure you have changed File Types to All Files from Text Files.
  • L-Click page3.html.
  • L-Click Save button.

Return to Summary


Recap of last weeks lesson.

Last week, we learned about the BR and Heading tags.

The <BR> tag is the Force Line Break tag. This tag puts the next object to be displayed on a new line. It can go anywhere in the BODY section of a web page except within the < and > of another tag. <H1<BR>> is not valid but <H1><BR> is valid.

We also learned about the Heading tags. There are 6 heading tags

<H1> <H2> <H3> <H4> <H5> <H6>

Each of these tags have Closing tags. Remember from last week, a closing tag has the same name as its primary tag only with a '/' at the beginning. The Heading closing tags are:
</H1> </H2> </H3> </H4> </H5> </H6>

The Heading tags format whatever text, or words, that are between them. They will cause that text to be bold and a different size. Each number relates to a different size. H1 produces the largest Header, H6 produces the smallest.

Before continuing, you should have a page2.html file saved in your myhtml folder that contains the information from last week's lesson. If this is not the case, you need to go back and work through last week's lesson. Before continuing.
Return to Summary


Week 3: BODY Tag attributes and the FONT tag.

In this week's class, I will introduce 2 attributes for the BODY tag, and the FONT tag.

In your page3.html file, add the following text inside the BODY tag or before the > sign
" BGCOLOR=blue TEXT=red" Be sure to put a space before BGCOLOR. Then save and view your page.

The BGCOLOR and TEXT are attributes to the BODY tag and the =blue and =red are setting those attributes to those values. This tells your web browser what kind of formatting it is affecting. BGCOLOR stand for Background Color and TEXT stands for the Text color within your BODY section of your page. In effect, you are changing the default colors to a blue background and red text for the whole web page.

You can use many different colors on your web page. Yellow, Cyan, Purple, Brown, Aqua, Green are some that work. Try experimenting to see what works. Some colors you can have LIGHT and DARK versions.. i.e. LIGHTGREEN and DARKGREEN. What colors you leave your page set to is up to you. Pick something you like.

Next, we learned about the FONT tag. The FONT tag also formats the words between the opening and closing FONT tags. the FONT lets you override the defaults we set in the BODY tag above.

In your page3.html, add a line after "This is line 2 of my web page" that looks like this:
<BR><BR><FONT SIZE=+3>Line 3 of my web page</FONT>
save and view your page. The new line should be much larger than lines 1 and 2 but be the same color. Now, add a 4th line after line 3 that says:
<BR><BR><FONT SIZE=-3>Line 4 of my web page</FONT>
Save and view your page. The new line should be very small and the same color as the other lines. The SIZE attribute tells the browser to enlarge (+) or reduce(-) the default size of the characters.
Add the following after the SIZE=+3 and before the > in your file
COLOR=black
Save and view your page. Line 3 should remain very large, but the text should be black. Line 4 should remain very small but be the same color as lines 1 and 2.
What do you think would happen if you took out the closing FONT tag on line 3?

What would happen if you took out the opening FONT tag from line 4?

What color are the Headings? What do you think you would need to do to change their color?

Try each of these and see what happens and see if you can figure out why the page is formated like it is. If you use your page3.html, be sure to add back in what you take out and take out anything extra you add in.

When you are done, your page should look something like this:
<HTML>
<HEAD>
<TITLE>Cubs Web Page</TITLE>
</HEAD>
<BODY BGCOLOR=lightblue TEXT=red>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
This is Cubs Web Page.
<BR>
This is line 2 of my web page.
<BR><FONT SIZE=+3 COLOR=green>Line 3 of my web page</FONT>
<BR><FONT SIZE=-3>Line 4 of my web page</FONT>
</BODY>
</HTML>

Click Here to see how your Page 3 should look when viewed.
Return to Summary

Return to Mom's Library
Copyright 2000-2007
GCF Webmaster
All rights reserved.