Xhtml notes

This page is intended to be a quick reference for the xhtml 1.0 markkup used in this web site. It is not intended to be a comprehensive reference to all markup possible. In general, these markups work with Navigator 4x, 6x and 7x and Explorer 5x and 6x. I tend to avoid tags and options which are:

Brouser specific (i.e. non-standard)
Depreciated (i.e. marked for removal from later versions of xhtml)
Better left to Cascading Style Sheets (CSS)
Not useful for content similar to the pages contained in this site

General Comments & Conventions

All tags must be entirely lower case.
All tags must begin with "<" and end with ">"
All tags must be closed, that is to say, for each tag at the beginning of an object or instance there must be a corresponding closing tag at the end of that object or instance. Closing tags are simply the tag with a "/" inserted between the opening symbol ("<") and the first character of the tag.
For example: <tag> ... data ...</tag >
Certain tags neither span " ... data ... " nor reqire informaion other than that contained within the tag. These tags are closed internally by inserting a "/" just prior to the ">" at the end of the tag.
These tags are:
- meta <meta ... parameters ... />
- line break: <br />
- horizontal rule <hr ... parameters ... />
- hypertext anchors when used only as a target
  <a name="...data..." />
- inline image<img ... parameters ... />
All nested taged objects must be fully contained within their parent taged object. To facilitate adherence, appropriate indentation should be used.
For example:
<div> <p> ... data ... <blockquote> ... data ... </blockquote> ... data ... </p> <p>... data ... <b>... data ... </b> </p> </div>
All parameters must be associated with a key word and should be enclosed in quotes
Comment delimiters are "" (quotes added) for end comment. Comments may span multiple lines.
The file type (i.e. suffix) must be ".html" or ".htm"
Certain characters are reserved, therefore must be encoded when used for display. (see Ascii Codes). These characters are:
- Left angle bracket (<)
- Right angle bracket (>)
- Ampersand sign (&)
- Double quation sign (")

File Header

The file should begin with the following string:

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

File Proper

- The file contains one parent element, <html> ... </html> That is to say, the file proper (i.e. after the <!DOCTYPE ...) must begin with <html> and end with </html>
The <html> ... </html> parent element contains two child elements:
1. The first child element is the <head> ... </head> element.
2. The second child element is the <body> ... </body> element.

File Structure:


                <!DOCTYPE . . . 

                <html>

                <head>

                    ... valid head statements ...

                </head>

                <body>

                    ... valid body statements ...

                </body>

                </html>

Head Statements:

Xhtml head element begins with the <head> tag and is closed by the </head> tag. Within the head element are meta, title and link tags.

Meta statements take the form:

<meta keyword=" ... data ... content="... data ..." />

The http-equiv meta statement must be included in the <head> ... </head> element. to satisfy well formedness criteria. This statement indicates to the browser which character set is to be used.


               <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

The name meta statements really should be included in the <head> ... </head> element. The Author statement indicates pride of ownership, the generator statement will likely be included automatically if you use a an html editor, The keywords and description statements are used by some search engines. The examples here are from this html file please make the appropriate modifications.

<meta name="Author" content="Howard Powers" />
<meta name="Generator" content="Native XHTML 1.0" />
<meta name="keywords" content="xhtml, well formedness, extensible hypertext markup language" />
<meta name="description" content="xhtml notes and code samples" />
<meta name="copyright" content="Grifbrick Software" />
<meta name="date" content="25-10-2000" />

The Title statement is used by some search engines and some browsers. This statement must be included in the head element.


                     <title>Xhtml notes</title>

The link statement provides the browser with a path to the cascading sytle sheet(s) used in the html file.


                     <link href= "../css/stylesheet006.css"  rel="stylesheet" type="text/css" />

Body Statements:

Xhtml body element begins with the <body> tag and is closed by the </body> tag. Parameters for the <body> tag should be left to cascading style sheets. Within the body element are block mark up tags and in-line mark up tags.

The following core parameters (attributes) can be used with most body Statements:

class="class name"
lang="language"
onclick="applet"
ondblclick="applet"
onkeydown"applet"
onkeypress="applet"
onkeyup="applet"
onmousedown="applet"
onmousemove="applet"
onmouseout="applet"
onmouseover="applet"
onmouseup="applet"

The class attribute is used in conjunction with cascading style to define the characteristics of a tag. This attribute is the only one used extensively on this site.

Block mark up Statements

Block mark up tags deliniate "blocks" of data, that is to say data preceeded and followed by carage return and line feed (aka break). These tags may be nested (as long as they are fully nested) and must be closed by an end of block tag (block tag with a "/"). Spacing above and below blocks and other block characteristics (alignment and etc.) are controlled by the cascading style sheet(s) listed in the link statement(s)

Useful block tags in alphabetical order are:

<blockquote>
This is an example of text in a block quote
</blockquote>
<div>
This is an example of text in a division
</div>
<h1>
Largest Heading
</h1>
<h2>
2^nd Largest Heading
</h2>
<h3>
3^rd Largest Heading
</h3>
<h4>
3^rd Smallest Heading
</h4>
<h5>
2^nd Smallest Heading
</h5>
<h6>
Smallest Heading
</h6>
<hr width=350 size=3 align=center />
<p>
This is an example of text in a paragraph
</p>

Dictionary lists

The Code
<dl>
   <dt>First term</dt>
   <dd>First definition </dd>>
   <dt>Second term</dt>
   <dd>First definition</dd>
   <dd>Second definition</dd>
</dl>

Is presented as

First Dictionary term: First Dictionary definition
Second Dictionary term: First Dictionary definition; Second Dictionary definition

Ordered lists

The code:
<ol>
   <li>Line Item One</li>
   <li>Line Item Two</li>
   <li>Line Item Three</li>
   <li>Line Item Four</li>
</ol>

Is presented as:

Line Item One
Line Item Two
Line Item Three
Line Item Four

Table

The code:
<table border=1>
   <tr>
      <td>row 1 col 1 data</td>
      <td>row 1 col 1 data</td>
      <td>row 1 col 1 data</td>
   </tr>
</table>
   <tr>
      <td>row 1 col 1 data</td>
      <td>row 1 col 1 data</td>
      <td>row 1 col 1 data</td>
   </tr>
</table>

Is Presented as:

row 1 col 1 data	row 1 col 2 data	row 1 col 3 data
row 2 col 1 data	row 2 col 2 data	row 2 col 3 data

Unordered lists

The code:
<ul>
   <li>Line Item One</li>
   <li>Line Item Two</li>
   <li>Line Item Three</li>
   <li>Line Item Four</li>
</ul>

Is presented as:

Line Item One
Line Item Two
Line Item Three
Line Item Four

In-Line mark up statements

<a> ... </a> Anchor
- The code:
  <a href=../notes/index.html>go to Notebook</a>
- Is presented as:
  go to Notebook
- To open a new browser window for the link, insert the phrase target=new in the anchor statement.
  - The code:
    <a target=new href=../notes/index.html>Open Notebook</a>
  - Is presented as:
    Open Notebook
- To use an icon or image instead of text for the link, simply replace the text with the <img ... /> statement (see below)
  - The code:
    <a href=../notes/index.html><img src=../images/ptr2.gif border=0 alt=some icon /></a>


   <acronym>Present as an acronym      </acronym> 
   <b>            Present the text in bold faced   </b>
   
   <big>        Present the text bigger        </big>  
   <cite>      Present the text as a citation</cite> 
   <code>      Present the text as code      </code> 
   <del>        Present the text as deleted text </del> 
   <dfn>        Present the text as a definition</dfn> 
   <em>          Present the text as Emphasized  </em> 
   <i>            Present the text in italic       </i>  
   <img ... /> Images
     
         The code:
            
<img src=../images/ptr2.gif border=0 alt=some icon />
         
         Is presented as:
            

         
      
   
   <ins>        Present the text as inserted text</ins> 
   <kbd>        Present the text as key board input</kbd> 
   <q>            Present the text as a quotation   </q> 
   <samp>      Present the text as sample text</samp>
   <small>    Present the text smaller     </small>  
   <strong>  Present the text strongly emphasized</strong> 
   <sub>        _Subscript                      </sub> 
   <sup>        ^Superscript                    </sup> 
   <tt>          Present the text as typewriten  </tt>  
   <u>            Underline the text               </u> 
   <var>        Present the text as a variable   </var>

Xhtml 1.0 Notes

General Comments & Conventions

File Header

File Proper

File Structure:

Head Statements:

Body Statements:

Block mark up Statements

Largest Heading

2nd Largest Heading

3rd Largest Heading

3rd Smallest Heading

2nd Smallest Heading

Smallest Heading

In-Line mark up statements

2^nd Largest Heading

3^rd Largest Heading

3^rd Smallest Heading

2^nd Smallest Heading