WEB 101

The information provided on this page is to help you understand what is involved in creating web sites. It should assist you to provide the information your designer or web developer may require or what is involved in programming your site to optimize the content while making the experience a pleasant one for your online visitors.

Templates

A basic web site template consists of the following main section areas

Header Area
A header normally contains the following items:

• your corporate logo or company name;
• tag line;
• key messages;
• Login
• Search Function;
• identify a new sub area within your site;
• corporate address and telephone number; and
• a general contact email address info@guymercier.com

Main Navigational Menu
It is important to identify the main sections of your site. The Home button will let your visitors go back to the first page of your site.

This page is always named index followed by the extension of the file type. Examples: index.htm; index.html; or index.php

Other Main Navigational Menu buttons could include: About Us, Products, Services, Order Form, and Contact.

Content AREA
This is the content of your specific web page. Additional areas can be added for the following items:

• breadcrumbs;
• side columns for sub menu areas or additional key messages or graphics; or
• additional scripts or programmed items such as: forms, slide shows, animations, or login and registration forms.

The Content Area can be divided into columns such as: a left menu column to identify to your visitors they have reached a sub section of your site; to inform them of other key messages; to provide a Call to Action E.G. Register Now; to list features & benefits, sidebar information; highlight testimonials & quotes; or any other information you feel is appropriate for the page they are viewing.

Another example, would be including a table of contents in one of your optional columns for long pages. These can become page anchor links to let your visitor quickly get to where they want to be. I also like to add a Return to Top of Page link every now and then on long pages to let the visitor get back to the top of the page.

Additional navigational links could be added to make it easy for your visitors to get to the next or previous page of the document they are viewing. These are added when the content needs to appear in a specific order while giving the visitor quick navigational buttons to go back, forward, return to the table of contents, or return to the top of the page.

Footer AREA
This area generally contains the following items:

• copyright;
• trademark statements;
• links to Privacy or Disclosure documents;
• login/logout
• Repeat of the Main Navigational Menu in regular link format;
• main contact email address;
• corporate address;
• phone number;
• return to top of pages;
• modification date; or
• a site map.

The items listed for the footer can vary. I listed the most common ones. They do not all have to be there. It is at the clients discretion to choose what to include in this area.

>>Return to Top of Page

Includes

The content for the template area can be part of the template or be a separate document coded to be included. In other words, your "includes". These are useful if the information to be included requires regular updates.

Any web page using a specified template will be updated and will need to be re uploaded to the server. An include will be automatically updated for any page using that include. Only the include needs to be re uploaded.

Your site can also use more then one template to display your content. For example, additional sub areas could be used in optional columns or to accommodate additional information such as a side bar with more information relating to what they are viewing. These columns could also be mini sub table of contents for sites displaying several product or service product lines.

There are no limits to the options available to display your content. The simplest way I can describe it is that a web page is basically a table with rows and columns with a footer and a header. How we divide the table rows and cells to accommodate the content is up to the client, the designer, or at the mercy of the restrictions of free prefabricated templates.

>>Return to Top of Page

CSS

The Cascading Style Sheet (CSS) will apply specified attributes to the web item being displayed. It can add background images, add lines above or below text or around tables and pictures. It will change the colour or size of the font. It will add spacing below, on top, at the bottom, or on the side of the table or images being displayed. It can display bullet list variations. It will determine the justification of the content being displayed or make it float right or left.

The CSS is created by the designer or programmer of the web site page template. A web site can have specific CSS for specific content. For example, I like to create my buttons as a separate CSS along with CSS for the basic TAG items.

>>Return to Top of Page

Samples of basic template structures

Here are a few examples of the most commonly used structures. The content area names are generally the editable regions of the template.

It is important to identify what your preference are for displaying your content.

>>Return to Top of Page

TAGS

All web sites uses the same "TAGs" to display web content. Here are a few of the most common web page tags (only showing opening tag) :

• <body>
• <H1> to <H6>
• <p>paragraph
• <ul>bullet list
• <li>bullet list item
• <form> form
• <td>Table
• <th>Table Header
• <tr>Table Row
• <a> link

CSS CLASSES

The designer or programmer creates custom styles sheets for as many container boxes [aka table or a div - a div divides the content into it's own table if you will. You can create a multitude of different table/div CSS classes to display your content. The style sheet code for the same tag gets extended. Eg. <td class="sample"> the CSS class name is .sample. It can now have other tags such as: .sample td; .sample th; .sample p: .sample a with each have their own unique specified attributes that relates to the class or class sub tags.