Create A HEAD Template

The HEAD section of an HTML file is DIFFERENT than the HEADER of an HTML PAGE.

The HEAD section, denoted by the tags <head> and </head>, contains information about your page that is useful to browsers and search engines and isn't seen online.

The HEADER is contained in the BODY section of the page, usually the title of the site along with a logo, and IS VISIBLE on your site.

This template lesson is about the HEAD section. Since we're still using Composer but we want to bring our pages up to modern standards, we'll need to replace the entire HEAD section AND the BODY TAG - just the tag.
  1. There are three different <!DOCTYPE> declarations in HTML 4.01. In HTML5 there is only one:
    <!DOCTYPE html>

    Composer uses
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    Fortunately, it's no biggie to change this to HTML5
  2. OPEN NotePad. COPY and PASTE the following to NotePad.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="add a short description of your site">
    <meta name="Author" content="Your name goes here">
    <meta name="KeyWords" content="words that people might be using in their searches to find the
    information on your page, use a comma between words or phrases - history, genealogy, marriage records    ">
    <title>Page Title</title>
    <link rel="shortcut icon" href="link to your favicon if you use one">
    <link rel="stylesheet" type="text/css"link to yourCSSfile.css"-->
    <style>
    We'll move our body style here.
    </style>
    </head>
    <body>
  3. SAVE the file in your website folder, I like to create a template folder. You can name it head-template.htm or something similar.
  4. Only the first meta tag is necessary, you can omit the others but the viewport tag will come in handy later and is easier to include now. If you never use it, it isn't hurting anything by being there.

    If you aren't going to use a separate CSS file, you can delete that line and the same goes for the favicon line. Otherwise, make the changes to the template that I noted in BLUE in Step 2 and save it again.
  5. OPEN your page in Composer and go to the Source tab. COPY the whole body tag. (It's probably on two or more lines.)
    <body link="#330099" vlink="#3366ff" text="#000000" bgcolor="#FFFFFF" alink="#cc0000" background="images/purple.gif">
    PASTE it a couple of lines below the template. We need to convert whatever you have in there to CSS styling. Text is now called color and bgcolor is spelled out.
  6. Copy this small style sheet to NotePad below your old body tag.

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #000000;
    background-image: url("images/purple.gif");
    background-color: rgb(255, 255, 255);
    }
    a:link {
    color: #330099;
    }
    a:visited {
    color: #3366ff;
    }
    a:active {
    color: #cc0000;
    }

    Change the colors to those in your body tag. Note that there are two ways of defining colors shown here, you can use either one so just copy and paste. A third way is to simply use the name of the color without the # - black, white, blue, red, etc. Be sure to change the name of your background image if you have one. Delete that line (or leave it there) if you don't. The link styles MUST be listed in the order shown or they won't work. If you use a:hover, it will need to be last. You can change the font if you like. They're listed in the order that the browser will use them, if the visitor doesn't have Verdana on his computer, the browser will use Arial, if Arial isn't available, it'll use Helvetica, etc. If you're using a font with more than one word in it's name, use quote marks around them "Times New Roman" and be sure to put a comma between fonts.
  7. You should now have a file that looks something like this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="historical and genealogical records of Rusk County, Texas; part of TXGenWeb &amp; USGenWeb">
    <meta name="Author" content="Gina Heffernan">
    <meta name="KeyWords" content="genealogy, rusk, texas, TXGenWeb, usgenweb, family tree, ancestry, history, cemetery, vital records, marriages">
    <title>Page Title</title>
    <link rel="shortcut icon" href="http://www.txrusk.com/favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://txrusk.com/includes/rusk.css">
    <style>
    We'll move our body style here.
    </style>
    </head>
    <body>

    <body link="#330099" vlink="#3366ff" text="#000000" bgcolor="#FFFFFF"
    alink="#cc0000" background="images/purple.gif">

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #000000;
    background-image: url("images/purple.gif");
    background-color: rgb(255, 255, 255);
    }
    a:link {
    color: #330099;
    }
    a:visited {
    color: #3366ff;
    }
    a:active {
    color: #cc0000;
    }
  8. Once you have everything copied to this small CSS style sheet, DELETE whatever is left of the body tag that you copied from composer in Step 5, NOT the empty one that will be part of your template. Cut and paste (move) your finished style sheet to the place indicated in red. DELETE any blank lines. The last line in your template should be <body>. SAVE the template for the last time.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="historical and genealogical records of Rusk County, Texas; part of TXGenWeb &amp; USGenWeb">
    <meta name="Author" content="Gina Heffernan">
    <meta name="KeyWords" content="genealogy, rusk, texas, TXGenWeb, usgenweb, family tree, ancestry, history, cemetery, vital records, marriages">
    <title>Page Title</title>
    <link rel="shortcut icon" href="http://www.txrusk.com/favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://txrusk.com/includes/rusk.css">
    <style>
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #000000;
    background-image: url("images/purple.gif");
    background-color: rgb(255, 255, 255);
    }
    a:link {
    color: #330099;
    }
    a:visited {
    color: #3366ff;
    }
    a:active {
    color: #cc0000;
    }
    </style>
    </head>
    <body>
  9. Go back to Composer and CLICK File and CLICK Save As. Make sure you're in your website folder and name the file backup-index.htm.
Previous page
Next page