Part of Lesson Plan: Make 3 web pages from one and manage with External CSS

Activity Overview / Details

Now that you have external CSS you can make multiple web pages, multiple html files all resulting in similar styles and colors, unifying the site with a thematic approach.  We’ll do that now with the music page, saving it as   "index.htm"   and again another page as   "school.htm"  resulting in a web site of three uniform  pages.  "Index.htm" will be all about you and your family.   "School.htm" will be all about this school.

But wait!!! What about those three statements in the leftsidebar?  Those are going to be links to your three pages.  So let’s change those into links now so we don’t have to edit all three pages of links individually.

Change the H2 heading “Me” in the leftsidebar to link to a relative web page called  "index.htm".  It should read like this now:

<div id="leftsidebar">

    <h2><a href="index.htm">Me</a></h2>

Now do the same for “school.htm” and “music.htm”  Make those headings into similar links.

Now let’s make the "index.htm" and "school.htm" file in merely a few seconds.  I’ll show you how, then you’ll do this on your own.

Take "music.htm" and save it as "index.htm" in the same folder where the music file was.

Then take that resulting file and save it as  "school.htm"   in the same folder.

And that’s it.  You now have three web pages.  But we need to edit them.  SO “have at it,” editing the three web pages, only changing the headings and paragraphs of the “maincontent” division.  Leave everything else alone.

One word of caution:  Do NOT share any personal information by which a person could identify you personally and find you.  Do not share your full name, your address, phone numbers, etc.

Once you have a full page about YOU  and one about YOUR SCHOOL you can have the fun of changing the CSS for the entire site in as many ways as you would like.  Make a change to the background picture in the "main.css" file for instance.  Save the CSS file and then refresh any one of the pages in the browser and click through to all the pages in the site.  All pages should change.

As time allows, change the background, colors, borders, etc.

If time allows, insert a picture in your “header” so that your picture is in all 3 pages.  You could even change the background of the header in the CSS to have your picture in the background of the header but not repeating that picture.  See the www.w3schools.comweb site for help on making a background not repeat.   We suggest you not use a personal picture of yourself to protect your privacy.