Genealogy Chat Friends
GCF Logo

Mom's Library

a production of Genealogy Chat Friends

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

It is intended to build upon the lesson in Class 1.

If you have not completed the first lesson, 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

Click Here to see the transcript from the class.

Create a copy of page1.html and save it as page2.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 page1.html.
  • L-Click Open button.
Now save the file as page2.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 page2.html.
  • L-Click Save button.

Return to Summary

Recap of last weeks lesson.

Last week, we created a folder to store our web pages and created our first web page called page1.html.

We learned 4 required tags for any Web Page. These were the <HTML> <HEAD> <TITLE> and <BODY> tags.

Each of these tags have what are called Closing tags. A closing tag has the same name as its primary tag only with a '/' at the beginning. The closing tags for last week are: </HTML> </HEAD> </TITLE> and </BODY>

Tags are signals to the web browser that something needs to be done. They either define a section of the HTML file, or define how the content is to be displayed in the Web Page. Closing tags are signals to the web Browser that it is at the end of what it's corresponding tag told it. For example, the BODY tag defines the start of the main or body section of the html file while the /BODY tag defines the end of the body section.

Tags are always enclosed between angle brackets < and >. Whether you use Upper, Lower or a combination of both for the tag names doesn't matter to the web browser. In my work, I tend to use all UPPER case for the Tag Names. Before continuing, you should have a page1.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 2: Closing Tags, BR and H tag use.

In this week's class, I will introduce 2 more tags. The Forced Line Break tag and the Heading tag.
In your page2.html file, add the line "This is line 2 of my web page" after the text line and before the closing BODY tag.
Now save and view your file. What you should see is that line 2 is actually right next to line 1. Putting text on a different line in your editor does not mean it will be displayed on a different line in your web page. If your text goes to the end of the web browser window, it will usually wrap around and continue on a new line. Resizing the window will most likely change where the new line of text starts on your page.

The BR tag

The Forced Line Break tag, BR, will tell the browser to stop and display what is next on a new line. You can put a BR tag virtually anywhere and it will start a new line.

In your page2.html file insert a BR tag between the two lines of text. Remember to enclose your tag between angle brackets. Save and display your page. You should now see that line2 is in fact, on a new line.

The BR tag does NOT have a closing tag. If the browser sees a </BR>, it will do one of two things, display </BR> on the page as if it were regular text, or ignore the tag altogether. This can vary between browser types and browswer versions.

Heading Tags

Then next tags we will learn are the Heading Tags. There are 6 different Heading tags... H1 H2 H3 H4 H5 and H6... Each Heading tag requires a corresponding closing tag. Heading tags tell the browser how to format the text between the start and closing tags.

In your page2.html file, add 6 lines, one for each header tag. Between the starting and closing tag, type in the text "Heading 1", "Heading 2" etc..

Now save and view your page. You should see the 6 Headings, each a different size font, each on its own line, and having double spacing or extra spacing between them. You can use Heading tags as headings to your page, a different section of your page or even just for a new paragraph. You can use any or all of the H tags as many times as you wish in your page. You do NOT need to use them in order... i.e. 1 before 2 before 3...

Next, add a BR tag between the word heading and the number 1 in your H1 Heading text. Save and display your page. You should see the number 1 on a new line, but still formatted the same as the Heading. This demonstrates the ability to imbed one tag within another. Web pages are always read top to bottom or top down. When the browser sees a tag, it does something. It does not necessarily look for or expect closing tags even though they are 'required'.

In your file, remove the break tag you just entered and also remove the closing H1 tag. Save and Display. What you should see is that the Heading 2 - Heading 6 tags continue to be formatted correctly, but the 2 lines of text you already entered are formatted as H1 headers. This is because the browser did not see an H1 closing tag, so it keeps formatting as and H1 header. The tags in between work fine because when the browser sees the tag, it formats it, but does not forget the last tag. When it sees the closing, it then reverts back to the previous formatting tag.
Add the closing H1 tag back into your file and save it. That concludes this weeks lesson. Your page2.html file should look l like this:

<TITLE>Cubs Web Page</TITLE>
<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.
This is line 2 of my web page.

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

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