MyCool_Stuff

The xHTML Structure of a "General Page"

I will explain how the xhtml of a gerneral page found in this site works. Red is code, black is explanation. Let's get started. We will look at the HTML of the MathGV page found under math.

As you can see, every page is divided into a table. Each cell has some important CSS and JavaScript files in them. The JavaScript files documnet.write's a string of HTML.

CSS Class: tableHead, JavaScript: none
CSS Class: nav, JavaScript: XMenu.js	CSS Class: worksace, JS: none
CSS Class: workspace2, JavaScript: MCSfootNote.js

Doctype tells the computer what kind of file this is. The link (http) downloads a DTD that explains what the browser should do when it comes across html. It is basically the xhtml rules. If you know how to, you could create your own DTD and define your own XHTML. Doctype goes before the HTML tag. It is important to verity each page by uploading each to the w3c's verification page: http://validator.w3.org/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

MEAT tags describe the page/data. Description is what users read in the search results when they perform a search (like in Google or Yahoo). It is a good idea to restate the title (which should be the same as what is in "the h1") in the description with some word variation. It helps if you write your page then go back and note words that you stated often (words you used, words in h1-h6, words that are bold, important words, etc) and place them in the keywords. Keywords are REALLY, I mean REALLY important.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head><title>PVHS: Free Graphing Software MathGV</title>
<meta name="description" content="PVHS: Free Graphing Software -- MathGV">
<meta name="keywords" content="free, graph, graphing, software, freeware, math, mathgv">
<meta name="author" content="MyCool_Stuff">
<meta name="robots" content="index,follow">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">

This is the master css file. The link up (href) needs to be tailored make for each page. Most files are 1 level down (one folder below) from the master CSS file, but not all.

Here is the file that makes the color of the top/sub links change depending on what page the user is viewing. The link up (src) needs to be tailored make for each page. Most files are 1 level down from the style file, but not all.

The body calls a function in the MCSlinkstyle.js file. The 1st argument tells what folder (top links) the page is in and the 2nd argument tells what page this is (sub links). Feel free to view the source of the MCSlinkstyle.js file and note the function. If you do, you will note that the left links all have an ID. The function takes a parameter given by each page in the following lonLoad event and changes document.getElementById(parameter value).style.color to a new color.

</head><body onLoad="topNav('math','mathGV')">

This is the "master table," everything is inside this table.

This is the start of the header (the graphic and top links)

<tr><td colspan="2" class="tableHead">
<div class="headText"> MyCool_Stuff</div>
</td></tr>
<tr>
<td class="nav">

Ok, so now we are in a new cell. This calls the left links. The link up (src) needs to be tailored make for each page. Most files in the same level from their respective links, if not all.

This is the start of the workspace, where you will most likely add your own html/content. This part is different for each page; this is the page.

</td><td class="workspace">

<h1 class="headline">Free Graphing Software: MathGV</h1>

Blah Blah Blah Blah Blah Blah, this is content. This is inside the workspace, in a cell, in a table, in the body!

Start of workspace2. This area is for the footnote.

This calls the footnote. The link up (src) needs to be tailored make for each page. Most files are 1 level down from the footnote file, but not all.

End []

Cascading Style Sheets

Master CSS.

This sets the blue border around the content area.

body

{background-color:#050033;
padding:0;
margin:1em;}

#thetable

{border:1em;
margin:0;}

Sets the style of anything in the header area.

.tableHead

{font-size:300%;
font-weight:bold;
color: #FCF3FA;
background-color:#050033;
font-family: "Arial", "Times", sans-serif; }

sets the style of the MyCool_Stuff text

.headText

{margin-bottom: -.25em;
padding:0;
color:#ffffff;
z-index:20;}

sets the looks of the left navigation bar

.nav

{background-color: #FCF3FA;
width:20%;
color: #336666;
font-weight: bold;
vertical-align: top;
text-align: left;
font-size: 9pt;
padding-top:1pt;
padding-left:7pt;
background-image: url("freeMySpaceBGsnet.jpg");
background-repeat:repeat;
font-family: Verdana, Tahoma, "Helvetica", "Helv", "Arial", sans-serif;}

This sets the looks of the word Menu above the links.

.navtitle

{font-weight:bold;}

sets the style of all links in the navigation area.

.nav a:link, .nav a:active

{color: #1d2087;
background-color:#e1f0f1;
text-decoration:none;
padding: 10pt;
display:block;
margin-top:1px; }

Sets the style of visited links in the navigation area.

.nav a:visited

{color: #003333;
/* same as above */
background-color:#e1f0f1;
text-decoration:none;
padding: 10pt;
display:block;
margin-top:1px;}

changes a link when the mouse is over it.

.nav a:hover

{color: #336666;
background-color:#FCF3FA;
text-decoration:none;
/* same as above */
padding: 10pt;
display:block;
margin-top:1px; }

sets the looks of links below the major topic links

.nav a.sublinks:link, .nav a.sublinks:active

{color: #1d2087;
background-color:#e1f0f1;
text-decoration:none;
padding: 1em 0 0 .5em;
display:block;
margin: 0 0 0 2em; }

sets the looks of visited links below the major topic links

.nav a.sublinks:visited

{color: #003333;
/* same as above */
background-color:#e1f0f1;
text-decoration:none;
padding: 1em 0 0 .5em;
display:block;
margin: 0 0 0 2em;}

sets the looks of links below the major topic links when the mouse is over them

.nav a.sublinks:hover

{color: #336666;
background-color:#FCF3FA;
text-decoration:none;
/* same as above */
padding: .5em 0 .5em .5ex;
display:block;
margin: 0 0 0 2em; }

This sets the style of the area that has most of the context. You are reading this in a HTML table with a class of workspace

.workspace

{background-color:#FCF3FA;
padding-left:7pt;
padding-right:7pt;
padding-top:7pt;
font-size:100%;
vertical-align:top;
font-family: "Arial", "Times", sans-serif; }

Workspace2 is the foot note at the end of every page.

.workspace2

{background-color:#FCF3FA;
padding-left:7pt;
padding-right:7pt;
vertical-align:bottom;
color:#999;
text-align:center;
font-size:smaller; }

.workspace2 a

{color:#999; }

.copyright

{color:#999;}

You can not use the b and i tags in html. Instead of using local CSS, I defined this rule here and use span tags with the below classes locally.

.headline

{text-align:center;}

.bold

{font-weight:bold;}

{ font-style: italic;}

This is how we center an image.

.centerimg

{display:block;
margin-right:auto;
margin-left:auto; }

Hosted by www.Geocities.ws