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 4.


It is intended to build upon the lesson in Class 3.
If you have not completed lesson 3, 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 page3.html and save it as page4.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 page3.html.
  • L-Click Open button.
Now save the file as page4.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 page4.html.
  • L-Click Save button.

Return to Summary


Recap of last weeks lesson.

Last week, we learned about attributes and values to the BODY tag in our pages and we also began learning about the FONT tag and some of its attributes.

We all know that Tags are used to format our web page. Attributes are the parts of our page we want to format and Values are what we want them to be formatted as. Attributes and their values belong inside the angle brackets < > of their related tags. Each attribute also needs a value specified. An attribute with its value is shown as <TAG ATTRIBUTE=VALUE>. A Tag may have one, many or no valid attributes. The BR tag has no valid attributes. The BODY tag has many. Attributes are not dependent on each other nor are they required in all cases. For example, the BGCOLOR and TEXT attributes may both be defined in any order, only one can be used or none of them can be used.

The first attribute we learned is the BGCOLOR attribute of the the BODY tag. The BGCOLOR attribute formats the background color of the body of our page. The value we provide, for now is the name of a color, Blue, Green, etc...
Another attribute for the BODY tag is the TEXT atttribute. This attribute formats the default color of the text on our page. Again, you specify the name of the color you want for the value.

Next we learned the FONT tag. The FONT tag requires a closing tag as well. The FONT tag formats the text between it and its closing tag. The FONT tag has a number of attributes. The ones we learned were SIZE and COLOR. Size specifies how big the text should be, similar to the differences between each of the Heading tags. You can specify a relative size to the default by using a + or - sign and a number for the value. a +1 value means to increase the size of the text 1 level from the default while -1 stands to decrease the size one level.
The next attribute of the FONT tag was the COLOR attribute. The COLOR attribute does the same thing as the TEXT attribute of the BODY tag only it is in effect only until the closing FONT tag. It is a way to override the color of a section of text to make it stand out for emphasis. The values for the COLOR attribute again are the names of a color.

Before continuing, you should have a page3.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 4: B(bold), I(italic) and PRE(preformatted) Tags.

In this week's class, I will introduce 3 new tags that affect how text is formatted. The <B>, <I> and <PRE> tags. Each of these have required closing tags </B>, </I> and </PRE>

The <B> tag is signals the browser to BOLD all text between it and the closing B tag.
In your page4.html file, add a line after "Line 4" as "<BR>This is line 5 of <B> Cubs Web Page</B>.". Then save and view page4. What you should see is the text "This is line 5 of " in normal font and the text "Cubs Web Page" in bold characters.

The <I> tag signals the browser to ITALICIZE the text between it and the closing I tag.
In your html file, add a line after "Line 5" as "<BR>This is line 6 of <I> Cubs Web Page</I>.". Then save and view page4. What you should see is the text "This is line 6 of " in normal font and the text "Cubs Web Page" is in italics.
In your html file, add a B tag before the I tag on line 6 and add the closing B tag after the word Cubs. When you save and view your page, you will see the text "This is line 6 of " in normal font and the text "Cubs" in bold and italics and "Web Page" in italics only.

Next, we learned was the <PRE> tag. The PRE or Preformat tag will tell the browser that the text is already formatted and it should leave whatever spaces and/or line breaks that are there.

If you remember from our first lesson, when we put text on two or more lines in our HTML file, when we viewed it, it appeared to be on one line in the browser. This is because the browser normally ignores 'white spaces'. This is the term for all the space and line breaks in your source code. The browser changes any multiple spaces and line breaks to a single space. Thus the lines will be separate in your source code, but not when displayed through the browser. To get around this, we have been using the <BR> tag when we want to start a new line.

The best way to understand the difference is to see it. Click Here to see the transcript from lesson 3 iwthout the PRE or BR tags. You can see that the text all runs together. Now, click Here to see the same transcript with the PRE tags put in but still no BR tags. The difference should be very obvious to you. The PRE tag is good for long transcriptions of things, be it class transcripts or census transcripts. You can just type in the data add the opening and closing PRE tags and you are done.

Another benefit from the PRE tag is when want to separate words on a line with more than one space. This could be used in separating a list of dates without having to list them all vertically, you can list many across a page. In your source file, add the following text to a new line after line 6 "This is Line 7 of Cubs Web Page". Do not put any tags on this line. Save and view your page. It should be on line 6, why? because we have no BR tag and the extra spaces between the words we typed have been removed down to a single space. Now, add a <PRE> tag to the line between lines 6 and 7, and add a closing PRE tag </PRE> after line 7. Save and View. You should see that line 7 is now on its own and even double spaces, and the spaces between our words are back in.

Now add "This is Line 8 of Cubs Web Page" after line 7, before the closing PRE tag. Make sure it is on a line by itself and there are no tags on the line. Save and View. Without the PRE tag, line 8 would be moved up and tacked on to line 7. With the PRE tag, you can see that it leaves the line break there even without the BR tag.

What are some of the things you can do with the B I and PRE tags? Do the B and I tags work within the PRE tags? Try it and see what happens. What would happen if you took out the closing B tag on line 6? What would lines 7 and 8 look like? Again, play around with your file and see what things you can do. Try inserting a FONT tag inside the PRE tag (between the opening and closing tag).
Once you are done, make sure your page4.html looks 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>
<BR>Line 5 of <B>Cubs Web Page</B>
<BR>Line 6 of <B><I>Cubs</B> Web Page</I>
<PRE>
This      is      Line       7      of      Cubs      Web      Page
This is Line 8 of Cubs Web Page
</PRE>
</BODY>
</HTML>

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

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