The Art of Scintography: Chapter 9

Chapter 9: Putting a Page Together

The Art of Scintography
Edition 3.0 © 2008 Aurora Isaac
www.scintography.com

In the previous sections we have examined the details of HTML, STYLE, and SCRIPT. Now we combine these components to see them in action.
As you are working on your page design, it will be easier to keep your STYLE and SCRIPT with your page. As you go through your cycle of edit/upload/view, you will want to see your changes immediately. If you keep your STYLE and SCRIPT in separate files, this may not happen. Your browser keeps files downloaded for viewing in a cache. If your URL request needs a file that is already downloaded, your browser uses the cached file to avoid taking time to download the file again. If you need a new version of your file to come from the server, you may need to empty your browser cache to see it. When you are ready to share your STYLE and SCRIPT with other pages, move them to separate files.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<STYLE TYPE="text/css">

selectors { rules }
</STYLE>

<SCRIPT TYPE="text/JavaScript">

script source statements
</SCRIPT>

</HEAD>

<BODY>

content of this page

</BODY>

</HTML>

The Cut-And-Paste Pages offer examples of simple page layouts. You may use them as is, customize them to your own style, extract portions you find useful, or just let them inspire you when you are in need of a starting point.
Like the Tutorials, the HTML source appears on the left and the formatted page appears on the right. To provide versatility in customizing pages, the source code may contain more complexity than you require. Explore the various options available, then cut and paste to suit your need.

Menu

See This Page

The formatted document will appear in this space.


Letterhead

Letterhead
The Letterhead style places an aggregate of items across the top of the page with the content, often in paragraph form, extending below, similar in appearance to a letter printed on a letterhead. This is a useful format for presenting a personal biography or describing an item in an inventory. Since HTML pages are formatted top to bottom, this style can be achieved with the least amount of HTML markup.


Newsletter

Newsletter
The Newsletter style places a background margin at the left of the page. This area of the page is usually used as a menu area. This has become a popular style for home pages. The text area outside of the right margin can be used to introduce features of the site, make announcements, or profile items in the menu. Columns of content are often sized so that common screen sizes will contain complete blocks of page elements.


Textbook

Textbook
The Textbook style is designed for pages that may be printed. They are sized to look good on the screen and in print. Long text presentations, or collections of text items, should include site identity, title of text, author of text, URL of text, and copyright information, in every printable page.


Collage

Collage
The Collage style is a catch-all expression for a variety of styles. This style is primarily an array of images and brief text. Use this style as a navigational nexus, and include an image map or icon menu to guide your viewers to sections of your site. One practical use for this type of home page is to avoid being "framed". If a viewer accesses your site from another site that loads your home page within a frame, your viewers will see your image array. From this page, target all your other pages to the "_top" page, and you will have the whole window to yourself: <A HREF="url" TARGET="_top">.


HTTP-HTML

From your basic HTML knowledge, adding a touch of STYLE and a dab of SCRIPT, you have created the perfect page. Now it is time for the finishing touch -- the flourish that will bring you recognition.
When your page is accessed by its URL, the text content of the file is transmitted. Other information is transmitted along with the page, some of which you have control over. This information may be used in a variety of ways. It is there primarily to help the applications that read your site to integrate it into the networking community at large.
The <META> tags are placed in the head of your HTML document. These tags provide information on the content and use of the document, and on the availability of other associated documents. Each META tag assigns a value to a variable. The name of the variable can be set by the HTTP-EQUIV attribtue or the NAME attribute, and the value assigned to the variable is set by the CONTENT attribute:

The HTTP-EQUIV assignment of variableName="Variable Value" will be put in the HTTP header that accompanies the transmitted document. The exact variableName used in your META tag, and whether it is assigned to the NAME or HTTP-EQUIV attribute, depends on common usage. This is an extensible language, and any variable names can be used, but they will only be used if they are recognized and understood by the applications accessing your site. This tutorial introduces some of the commonly used variable names and their applications.
With these finishing touches, your completed .htm(l) file should look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>Title of this page</TITLE>
<META
NAME="description"
CONTENT="Description of this page."
>
<META
NAME="keywords"
CONTENT="list, of, keywords, for, this, page"
>
<LINK TYPE="text/css"
HREF="siteStyleSheet.css"
REL=STYLESHEET
>
<SCRIPT TYPE="text/JavaScript"
SRC="siteJSsource.js"
></SCRIPT>

</HEAD>

<BODY>

content of this page

</BODY>

</HTML>

¹ Creating Killer Web Sites
http://www.killersites.com/core.html

² A Dictionary of HTML META Tags
http://vancouver-webpages.com/META/

³ Meta tags - what, where, when, why?
http://www.philb.com/metatag.htm

⁴ Microsoft Developers Network Library
http://msdn2.microsoft.com/en-us/library/default.aspx

⁵ : Introduction to Filters and Transitions
http://msdn2.microsoft.com/en-us/library/ms532847.aspx

⁶ : (ISO) Language Codes
http://msdn2.microsoft.com/en-us/library/ms533052.aspx

⁷ : META Element | meta Object
http://msdn2.microsoft.com/en-us/library/ms535853.aspx

⁸ High Rankings
(Tried and True, Professional Search Engine Optimization)
http://www.highrankings.com/

⁹ : All About Title Tags, Jill Whalen
http://www.highrankings.com/allabouttitles

¹⁰ YALE Web Style Guide
http://www.webstyleguide.com/

¹¹ World Wide Web Consortium
http://www.w3.org

¹² : Associated Meta-information: META
http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.2.5

¹³ : The global structure of an HTML document
http://www.w3.org/TR/REC-html40/struct/global.html

¹⁴ : Notes on helping search engines index your Web site
http://www.w3.org/TR/html4/appendix/notes.html#h-B.4