RaysWebClass.Com


Lesson 4:   HTML Text and Paragraph Tags


  1. HTML Document Tags


Web Page Design: Exercise 4

Now that we have created and fine-tuned our Home Page, let's create a template of the Home Page so we can used it to add new pages to our site without having to create them from scratch.
  1. Open index.html in notepad.

  2. Click File → Save As...   and save this file as template.html

  3. Notice (see the very top of notepad) that you are now working in the template.html (NOT index.html)

  4. Replace the word Home in the title tag (in the head) with template.

  5. Remove all of the content from the Main Page. Your new template page should look like the sample page below. Rename the page to template.html and save the file.

    Your template code should look like this:
    (NOTE: If it doesn't, select everything and replace it with the code below)
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='utf-8'>
      <title>Global Company - template</title>
    </head>
    <body bgcolor='gray' align='center'>
    <font size='3' face='verdana'>
    <table border='0' cellspacing='0' width='800' align='center' bgcolor='white'>
    <tr>
      <td colspan='2' bgcolor='#2E869D' height='50'>

        <!-- * * * * * * -->
        <!-- * Header  * -->
        <!-- * * * * * * -->
        <h2>
          &nbsp;Global Company 
          <img src='images/Globe.gif' align='middle'>
        </h2>

    </td>
    </tr>
    <tr valign='top'>
      <td width='110'>

        <!-- * * * * * * * * * * -->
        <!-- * Navigation Menu * -->
        <!-- * * * * * * * * * * -->
        <br>
        &nbsp;<a href='index.html'>Home</a>
        <br><br>

        &nbsp;<a href='History.html'>History</a>
        <br><br>

        &nbsp;<a href='Products.html'>Products</a>
        <br><br>

        &nbsp;<a href='Contact.html'>Contact Us</a>
        <br><br>

      </td>
      <td height='1000'>

        <!-- * * * * * * * * * * * * * -->
        <!-- * Main Page: BELOW Here * -->
        <!-- * * * * * * * * * * * * * -->

    template


        <!-- * * * * * * * * * * * * * -->
        <!-- * Main Page: ABOVE Here * -->
        <!-- * * * * * * * * * * * * * -->

    </tr>
    <tr>
      <td colspan='2' height='17' align='center'>

        <!-- * * * * * * -->
        <!-- * Footer * -->
        <!-- * * * * * * -->
        <small>
            Copyright &copy;
            <!-- * * * * * * * * * * * * * -->
            <!-- * Displays Current Year * -->
            <!-- * * * * * * * * * * * * * -->
            <script type="text/javascript">
              var theDate=new Date()
              document.write(theDate.getFullYear())
            </script>
            Global Company
        </small>

      </td>
    </tr>
    </table>
    </font>
    </body>
    </html>
    Save it, close notepad and the browser, and double click template.html
    See how the hearder and the menu and the footer all show up, and the Main Page says template?
    Also, click the Home link in the menu. See how the Menu works. It returns you to the Home Page!

  6. Let's now create the other three pages in our website:

    Close notepad and the browser.
    Right click on the template.html and choose Copy
    Right click anywhere in the html folder and choose Paste
    You now have a copy of the template file named: template - Copy.html

    Right click on template - Copy.html and choose Rename.
    Change the name to History.html.
    Repeat this process twice to create Products.html and a Contact.html.

  7. Lets changes the title and Main heading text of these new pages:

    Open the Contact page. View the code.
    Change the title from Global Company - template to Global Company - Contact Us
    Change template (below the Main Page:) to
        <h2><font color='#2E869D'>
        Contact Us
        </font></h2>
    Do the same for the History and Products pages.
    Now check out the navigation menu - no more missing pages! Notice how smoothly the transitions are from page to page. Watch the URL box to see it chage from History to Products to Contact etc.