Building the Shell

Overview

A 'Shell' is a term used to describe the web pages that reside in the Root Directory, and hold all of the Include Files. The main function of the Shell is to maintain a consistent Look and Feel throughout the site. Included Content references and HTML must be placed in a specific order for the page to transform gracefully into older browsers. Graceful transformation means that if a browser cannot properly interpret CSS, the page will still be displayed in a manner that is user-friendly. The Shell also sets certain variables that help make the site easier to search, as well as navigate. In this section, we will go over each of these variables, and examine the source code of a completed Shell.

The Code in the Shell

The Shell consists of several key components. Let's examine each one briefly. We will view the component in source code, and then read a brief description of that item, and why it is used.

Document Type Declarations

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The Doctype tag or DTD (Document Type Definition) tag precedes the opening <HTML> tag. It is generally the first element to be used on any page. It distinguishes the version of HTML in use from other versions of HTML and tells the browser what tags to expect when laying out the page. According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.

Language Specification

This tag defines the content as HTML, and sets the language of the page to English by default.

Character Encoding & META Tags

<META HTTP-EQUIV> tags are equivalent to HTTP headers. When you request information from your browser and the Web Server receives your request via HTTP (the standard Web protocol - Hypertext Transfer Protocol). When the server sends the page requested, it generates an HTTP response. The initial data in that response is called the HTTP header block. This header gives the Web browser information useful for displaying the page.

The Content-Type entity-header field indicates the media type of the entity-body sent to the recipient. The CHARSET attribute defines the contents as viewable in the Windows Standard Format (1251).

There are two more META tags that are unique to each page. They are the KEYWORDS and DESCRIPTION tags. These tags are primarily used to help search engines index information on each page. The keywords tag should hold what the developer believes are common phrases and words that someone might type into a search engine if they were looking for information contained on that page.

The description tag would be the information displayed when that page was returned in search results. This information should give a general overview of the content contained on the page.

The Page Title

<title>Building the Shell</title>

The title tag should hold the title of the page. This information would be displayed as the link returned by search results, and also appears at the top of the browser window. The title tag is the first thing that is read by a screen reader, and so it should contain information that properly conveys the contents of the page.

Breadcrumb Navigation

<div id="breadcrumb">
    <a class="toplink" href="default.htm" accesskey="1">Home</a>
        >
            <a class="toplink" href="design.htm" accesskey="2">Design Tutorials</a>
                > Building the Shell
</div>

The breadcrumb navigation is also a unique component on each page. This is located between the Site Header and Main Menu on each page. This menu system allows users to backtrack through the path that they followed to reach the current page. It is a simple, yet effective way of minimizing the menu structure, while maximizing site usability. The associated CSS looks like this:

#breadcrumb
{
background-color:#000;
padding:5px;
padding-top:2px;
font:70% Arial, Verdana, Helvetica, sans-serif;
color:#ffffff;
font-weight:bold;
}

a.toplink, a.toplink:visited
{
color:#6BC54A;
text-decoration:underline;
font-weight:bold;
}

a.toplink:hover
{
color:#CCCCCC;
text-decoration:underline;
font-weight:bold;
}

References to Include Files

For this site, I have used Server Side Includes (SSI) on the .HTM extension within Internet Information Server (IIS) on a Windows 2003 Server to include content. It is important to understand that Included Content is a CONCEPT that can be implemented on any platform or server environment. The most commonly used form of Included Content is Server Side Includes (SSI). The Server Administrator will be able to assist you in implementing this functionality in your web pages.

The Big Picture

In order to give you a larger picture of a completed and pre-rendered (not rendered by a browser) Shell, I have included the server side source code for this page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en">

<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta NAME="keywords" CONTENT="template site, web template, css, accessibility, disability, disabilities, drs, vosap">
<meta name="description" content="A Shell is a term used to describe the web pages that reside in the Root Directory, and hold all of the Include Files. The main function of the Shell is to maintain a consistent Look and Feel throughout the site">
<link rel="stylesheet" type="text/css" href="scripts/all.css">
<title>Building the Shell</title>
</head>

<body>



<div id="breadcrumb">
    <a href="default.htm" accesskey="1">Home</a>
        > <a href="design.htm" accesskey="2">Design Tutorials</a>
            > Building the Shell
</div>



<div id="content">

<h1>Building the Shell</h1>
<h2>Overview</h2>

<p>A 'Shell' is a term used to describe the web pages that reside in the Root
Directory, and hold all of the Include Files. The main function of the Shell is
to maintain a consistent Look and Feel throughout the site. Included Content
references and HTML must be placed in a specific order for the page to transform
gracefully into older browsers. Graceful transformation means that if a browser
cannot properly interpret CSS, the page will still be displayed in a manner that
is user-friendly. The Shell also sets certain variables that help make the site easier to search, as well as navigate. In this section, we will go over each of these variables, and examine the source code of a completed Shell.</p>

<h2>The Code in the Shell</h2>The Shell consists of several key components. Let's examine each one briefly. We will view the component in source code, and then read a brief description of that item, and why it is used.<p></p>

<b>Document Type Declarations</b>

<div class="markup">CODE INSERT</div>

The Doctype tag or DTD (Document Type Definition) tag precedes the opening
<HTML> tag. It is generally the first element to be used on any page. It
distinguishes the version of HTML in use from other versions of HTML and tells
the browser what tags to expect when laying out the page.  According to
HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.<p><b>Language Specification</b></p>

<div class="markup">CODE INSERT</div>

This tag defines the content as HTML, and sets the language of the page to
English by default.<p><b>Character Encoding & META Tags</b></p>

<div class="markup">CODE INSERT</div>

<META HTTP-EQUIV> tags are equivalent to HTTP headers. When you request
information from your browser and the Web Server receives your request via HTTP
(the standard Web protocol - Hypertext Transfer Protocol). When the server sends
the page requested, it generates an HTTP response. The initial data in that
response is called the HTTP header block. This header gives the Web browser
information useful for displaying the page.

<p>The Content-Type entity-header field indicates the media type of the
entity-body sent to the recipient. The CHARSET attribute defines the contents as
viewable in the Windows Standard Format (1251).</p>

<div class="markup">CODE INSERT</div>

<p>There are two more META tags that are unique to each page. They are the
KEYWORDS and DESCRIPTION tags. These tags are primarily used to help search
engines index information on each page. The keywords tag should hold what
the developer believes are common phrases and words that someone might type
into a search engine if they were looking for information contained on that
page.</p>

<p>The description tag would be the information displayed when that page was
returned in search results. This information should give a general overview of
the content contained on the page.</p>

<b>The Page Title</b>

<div class="markup">CODE INSERT</div>

The title tag should hold the title of the page. This information would be
displayed as the link returned by search results, and also appears at the top of
the browser window. The title tag is the first thing that is read by a screen
reader, and so it should contain information that properly conveys the contents
of the page.

<p><b>Breadcrumb Navigation</b></p>

<div class="markup">CODE INSERT</div>

The breadcrumb navigation is also a unique component on each
page. This is located between the Site Header and Main Menu on each page. This
menu system allows users to backtrack through the path that they followed to
reach the current page. It is a simple, yet effective way of minimizing the menu
structure, while maximizing site usability. The associated CSS looks like this:

<div class="markup">CODE INSERT</div>

<p><b>References to Include Files</b></p>

<div class="markup">CODE INSERT</div>

For this site, I have used Server Side Includes (SSI) on the .HTM extension within Internet Information Server (IIS) on a Windows 2003 Server to include
content. It is important to understand that Included Content is a CONCEPT that
can be implemented on any platform or server environment. The most commonly used
form of Included Content is Server Side Includes (SSI). The Server Administrator
will be able to assist you in implementing this functionality in your web pages.

<p><b>The Big Picture</b></p>
<p>In order to give you a larger picture of a completed and pre-rendered (not
rendered by a browser) Shell, I have included the server side source code for
this page:</p>

<div class="markup">CODE INSERT</div>

</div>



</div>

</body>
</html>

Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

This File Was Last Modified: Wednesday September 09 2009