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


It is intended to build upon the lesson in Class 4.
If you have not completed lesson 4, 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 page4.html and save it as page5.html

This step will create the working file for this class. It will be a copy of the page4.html file you created in lesson 4.
  • 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 page4.html.
  • L-Click Open button.
Now save the file as page5.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 page5.html.
  • L-Click Save button.

Return to Summary


Week 5: B(bold), I(italic) and PRE(preformatted) Tags.

In last week's class, I introduced 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 a signal to the browser that the text should be BOLD when displayed. This is useful for emphasizing text.

The <I> tag is a signal to the browser that the text should be ITALICIZEd when displayed. Another tool for emphasizing text. The I

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.

Normally, a Browser will ignore 'white spaces'. These are the spaces and line breaks in your HTML file. The browser changes spaces and line breaks into a single space. The result is your HTML file will have extra spaces and different commands on different lines, but when it is displayed, everything seems to run together. Up till now, we have been using the <BR> tag when we want to start a new line on our page. The <PRE> tag keeps the spaces and lines for text and other objects between its opening and closing tags. The PRE tag is good for long transcriptions of things. You can type them basically without worry of the HTML at first. When you are done, you can add the PRE before and after it and it is all done.

Another benefit from the PRE tag is when you want to separate words with more than one space between them. This is helpful when you have a list of items you would like displayed horizontally and take up less space vertically.

Before continuing, you should have a page4.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 5: CENTER and IMG(Image) Tags.

In last week's class, we started with a quiz. Here are the basic questions asked. Go through them and make sure you understand the answers. If you have questions about one, go back through the lessons and find the answer. It is important to review what we have done so that it does not get forgotten. Use it or lose it is a popular saying in the Computer Industry.
  • What are the 4 tags required in all HTML files?
  • What is the purpose of the TITLE tag?
  • Where does the TITLE tag go?
  • Why would we use the B and I tags?
  • How did we change the color of our page?
  • What two ways can we change the color of the text on the page?
Before getting into this weeks tags, please create your page5.html file from your page4.html file. I introduced 2 new tags this week. The <CENTER> and <IMG> tags. The CENTER tag has a required closing tag, where the IMG tag does not use a closing tag.

The CENTER tag centers what is between its open and closing tag within the page. It is most useful for paragraph headings of your text. You typically do not want to center everything on your page. It tends to lose some of the emphasis of the text.

Place a CENTER tag before the H1 heading in your file, then put the closing after the H6 heading. When you view and save your page, you will notice that all six headings are now centered, while the rest of your page is aligned to the left. Now, center the text for Line 3 in your file. Make sure only line 3 is centered.

The IMG tag places an image on your page. In most cases, this will be a scanned picture or graphics you or someone else has created.

To place the image, type <IMG SRC="http://freepages.genealogy.rootsweb.com/~gcf2000/Images/gcflogo.xxx" ALT="GCF Logo"> after line 8 in your file. Save and view it. You should see something like a box with a red x in it and the words 'GCF Logo' inside the box. The box is a place holder for your image. This is what a web user will see if your images are not available to your page. The GCF Logo is a way to tell the viewer what the image should be of. Now, change the xxx in your html file to jpg. Save and view. The box should be changed to the GCF logo. If not, you need to check the spelling, spaces, quotation marks and case of your letters (Caps or small). If you still do not see the logo, copy and paste the IMG line in an email and send it to me by clicking here.

Once you have the logo displayed, move your cursor over the image and hold it there for a few seconds. A box should pop up that says GCF Logo. Again, this is from the ALT attribute of the IMG tag.

The last thing to do this week is to center the logo image on your page.

Once you are done, your page5.html should look something like this:
<HTML>
<HEAD>
<TITLE>Cubs Web Page</TITLE>
</HEAD>
<BODY BGCOLOR=lightblue TEXT=red>
<CENTER>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</CENTER>
This is Cubs Web Page.
<BR>
This is line 2 of my web page.
<CENTER>
<BR><FONT SIZE=+3 COLOR=green>Line 3 of my web page</FONT>
</CENTER>
<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>
<CENTER>
<IMG SRC="http://freepages.genealogy.rootsweb.com/~gcf2000/Images/gcflogo.jpg" ALT="GCF Logo"> </CENTER>
</BODY>
</HTML>

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

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