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 Classes 6 & 7.


It is intended to build upon the lesson in Class 5.
If you have not completed lesson 5, 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


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: CENTER and IMG(Image) Tags.

In week 5, we learned 2 new tags. CENTER and IMG. the CENTER tag aligns everything between its open and closing tags centered on the page when viewed. There no attributes to the CENTER tag. The IMG tag allows us to put a graphic (picture or other artwork) on our page. the IMG tag has one required attribute, SRC. This is the path to the image we wish to display. We added the image of the GCF club logo to our page in week 5.

If you have not completed week 5's lesson, please do so now before continuing. You can review the lesson by clicking here.
Return to Summary


Week 6 & 7: Anchor Tag.

We started the class this week by creating a new html file called state.html. The file should containt the 4 required HTML tags only. You are free to use whatever TITLE you wish for your state page. You may also use a BGCOLOR and TEXT attributes in the BODY tag if you wish. Each student was then assigned a state and after a bit of shuflfling, everyone got one they were comfortable with. For those reading this lesson, pick a state you wish to work on, it is not important which one you choose.

Your state page is going to have 9 different categories on it. They are:

  • Basic Links
  • Ethnic Links
  • Family Histories and Collections
  • Historical Societies
  • History and Map Links
  • Libraries and Books Sites
  • Military Links
  • Newspaper and other Media Links
  • Vital and Census Records
Each category should a set of HTML tags to format it as follows:
  • Centered
  • H3 Level
  • Underlined
The first new tag we learned is the HR tag. HR stands for Horizontal Rule. A Rule is another name for a line. The HR tag puts a rule across your page. We also learned that the HR tag has a WIDTH attribute. The WIDTH specifies how long the rule should be. It can be specified as a number of pixels or as a percentage of the screen. To specify by pixels, you simply enter the number of pixels as the attribute value. To specify a percentage of the screen, you enter from 1-100 and the % sign. The difference between the two is noticed by the size of the page viewers screen. Use of a percent of the screen will resize the rule to match the screen resolution where a pixel will always be the number of pixels long. For our page, we insert a rule after each category header that is 65 percent of the screen width. To do this, put a <HR WIDTH="65%"> tag after each set of category heading. After saving your page you should view it and see a centered line that is about 2/3 the length of your page.

Other attributes of the HR tag are ALIGN and SIZE. The ALIGN attribute values are left, right or center. The default is center. The SIZE attribute value is a number of pixels thick the line should be. The HR tag does not have a closing tag. You should not specify the ALIGN or SIZE attributes in your state page.

The next tag we learned was the A tag. The A stands for Anchor. An Anchor is used to "link" to another object. This can be another web page, and image, sound bite pretty much anything you want. All Anchor tags need to a closing tag of /A. An Anchor tag is required to have one of 2 attributes specified. The NAME attribute or the HREF attribute and may contain both. There are other attributes to the Anchor tag, but those are not required. One of these two must be included in the opening Anchor. This week we will only be concerned with the HREF attribute and the TITLE attribute of the Anchor tag.

All Links require 2 things, a starting location and a destination. The starting location is the text between the opening and closing tags. When you use text as the starting location of a link, it will by default be colored and underlined. Once the destination has been opened, the Link text should change color again. We will learn how to set the colors of Link text in a later lesson. The destination of the link is the value of the HREF attribute. The destination can be any numbe of things from another page, to an image or a location within the same page. Today, we will use a URL or web page address as the destination.

In your state page, add an Anchor that creates a link to the GCF club library home page. After the last rule, enter <A HREF="www.genealogychatfriends.org">Go To Mom's LIbrary</A> When viewing your page, you should see the starting location as the text "Go To Mom's Library". When you move your cursor over the text, the pointer should change into something different indicating it is a link. Usually a hand with the index finger pointed up. Clicking on the text should open the main Mom's Library page in your browser window. Click the "Back" button on your browser to return to your page.

It is possible to use an object other than text as the link source. You can use Images, lines, just about anything you want. All you need to do is place the object between the opening and closing Anchor tags. We will changoe our link to be the GCF logo image we used last week.

In your state page, replace the Source text (Go To Mom's Library) with <IMG SRC="http://www.genealogychatfriends.org/Images/gcflogo.jpg">. When you view your page, you should see the club logo and when you move your cursor over it, the pointer should again change like it did over the source text before. You can now click on the Image itself to get to the library.

Now, add the ALT attribute to the IMG tag by inserting ALT="Go To Mom's Library" before the >. When you hold your cursor over the image now, you should see the bubble with the alternate text pop up like we did with last week's IMG tag.instead of text.

In week 7 we continued working with the Anchor tag. As I said above, the Anchor tag requires one of two attributes, HREF or NAME. The HREF defines the anchor as a link to another object, while the NAME attribute gives that particular Anchor a name. You can use this name as a destination of a link to go to a specific place within the object. This week, we will use a combination of Anchor tags with NAME and HREF attributes to create a page Index.

In Your file, immediately after the BODY tag, add <A NAME="index"></A>. Notice we are not using any text here. That does not mean the Anchor does not exist, only that there is no visible place on the page it will be displayed. Next, just before the last HR line, add <A HREF="#index"> Return to Index</A>. This will add a link to the anchor we named above. The # in the HREF value means that the destination of the link is within the current page and the browser should not look elsewhere. When you view your page now, you should see the text "Return to Index" just above the last Rule underlined and a different color, signifying a link. Clicking on it should take you to the top of your page where the index Anchor is located. On short pages that fit on one page, you may not notice anything changing. To really see the effect, copy the link to the index (Anchor with the HREF="#index") to before each Rule, this will duplicate the Return to Index link at the end of each category. If you still have everything on one screen, add a number (15-20) after the index Name Anchor tag (NAME="index"). Now, when you scroll to the bottom of your page and click on the Return to Index link, your page should scroll back to the top.

You can have multiple Name Anchors within your web page. We will now create a Table of Contents at the top of our page that links to each category header. You should not use the same anchor name twice within a page, but you can link to an Named anchor many times within the same page. To create the Named anchors for our headers, add <A NAME="xxxxx"> to just before the first character of the Category heading text and </A> to just following the last character of the category heading text. Use a different name for each category header in place of the xxxx's. Once this is done, copy each of the category header lines to just below the named index anchor (NAME="index). On these lines, change the anchor from a NAME to HREF, and add a # to the beginning of the HREF value (after the first ( ). You now have an index or table of contents for your page, and when you click on the category heading text, it should take you to the category within your page. You can then click the Return to Index link to take you back to the top of your page.

That is about it for the last 2 weeks worth of classes. What I would like you to do for next weeks class is the following:

  • Move the GCF Logo image to after the table of contents, before the first category header and Center the logo.
  • Add links to each category in your page. I have created a page of guidelines to follow and some suggested links for you to add. Feel free to use these and any additional ones you may know of. To get to the guideline page Click Here.
If you have any questions about the anchor tags as we have discussed, or about what you should be doing with your pages, please email me by Clicking Here.

Click here to see an example of how your state page should look content wise. You should not yet be concerned about the animated images, or background on your page. Thank You Marieclassof86 for letting me use her page as my example. I will not be posting the HTML any longer as each page will be different depending on the authors preference. Please email your file to me if you are having problems and can not figure out what is wrong.
Return to Summary

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