= HTML, CSS and APL with Classes =

<<TableOfContents>>

== Overview ==

This is about (X)HTML and CSS, and how to create XHTML code from APL and why classes are very handy for this task. It also includes a short introduction into HTML and a short introduction into CSS. Feel free to skip them if you are already familiar with the concepts of HTML and/or CSS.

== A Short Introduction to HTML ==

The original idea of HTML was to mark up content. Therefore, HTML offered so called tags to mark up a piece of text as, for example, a header, together with a particular level: h1, h2, h3, h4, h5 and h6. Other examples are:

 * '''p''' = paragraph
 * '''ul''' = unordered list
 * '''ol''' = ordered list
 * '''b''' = bold
 * '''I''' = italic
 * '''table''' = tables
 * '''cite''' = cites

and many others.

A tag must be enclosed between {{{<}}} and {{{>}}} to be recognized as such by a browser. An opening tag is written as {{{<H1>}}}, while a closing tag is written as {{{</H1>}}}.

Because one must be able to use a "greater-than" as well as a "less-than" within an HTML page there must be a mechanism to tell a browser where to use those special characters, of course. For this, escaping is used. That means that a string which is enclosed by special characters is treated differently by a browser. The two characters recognized by browsers for switching escaping on and off are the "&" and the ";" characters. 

A string like 

{{{
The result of the <I>APL expression</I> "5 &lt; 3" is a 0
}}}

might therefore be displayed like this:

'''The result of the APL expression "5 &lt; 3" is a 0'''

But actually we don't know about the exact appearance.

By using {{{<H1>}}} and {{{</H1>}}} one could mark up a piece of text as a header of level 1. In the first version of HTML it was completely up to the browser to decide how to present such a piece of text.

To have no control about the appearance of a site was something many could not stand. They asked for opportunities to tell the browser how a piece of text should be displayed, at least to some extend. Unfortunately, in a first approach this was implemented as part of the HTML tags. So later versions of HTML offered the opportunity to do something like this:

{{{
<H1 font-family="Arial" color="Blue">Main Caption</H1>
}}}

At the same time people started to use (you can also use the word abuse here) tables and images to implement a kind of positioning mechanism to achieve a particular layout. As a result, tables were found within tables within tables within tables…

To put it mildly, the HTML code got bloated and very hard to read and maintain. The people at W3C, who are in charge for defining the standards, then decided that this was the wrong way from the start and that mark up and design issues should be kept apart from each other.

== CSS – Cascading Style Sheets ==

At that point the idea of CSS was introduced. With CSS, one can specify the exact appearance of one particular element, identified by a name called an '''id''' in CSS, or the exact appearance of a particular HTML tag called a '''class''' in CSS.
Later CSS also offered the opportunity to position the content of any HTML tag within a browser's view, which is basically the area were a browser displays an HTML page.

Although this was a brilliant idea, it took years until CSS was recognized and taken into account by the main browsers in a predictable way. This process was prolonged by the disastrous implementation of CSS in Netscape Navigator 4. Internet Explorer also slowed down the process because Microsoft ignored many of the CSS specifications while other parts of CSS got implemented as a kind of bug.

However, over the years the situation got better and better. With Internet Explorer 7 Microsoft eventually managed to implement CSS in an acceptable way. So today, the CSS specification 2.x is more or less implemented in all modern browsers. Yes, there are a few exceptions, but it works well anyway.

== What the hell is XHTML then? ==

All the color= and font-family= stuff introduced in HTML could not be removed once introduced. The W3C marked those attributes as "deprecated", but people still can use them, and the browsers need to deal with this stuff. So somebody invented the idea of a new, clean version of HTML. That new version was designed as a kind of XML child. That is the reason why it was called XHTML in opposite to HTML. 

XHTML differs from HTML in a number of ways. These topics are discussed in detail:

 * Syntax rules are strict 
 * All tags are written in lowercase letter
 * There are no attributes at all that allow a designer to specify appearance-specific details. 
 * An XHTML page must declare itself as being XHTML

=== Strict syntax rules ===

Browsers are following some sort of "forgiving" policy when dealing with HTML. That means that in case of an ill-formed tag a browser tries to work out what the intention of the author might have been. Some browsers are more tolerant than others, but all accept invalid HTML code to some extent.

For example, HTML tags supposed to be uppercase like {{{<H1>}}} but all browsers except lowercase tags as well. If a closing tag is forgotten, Internet Explorer tries hard to work out how to display the page anyway, in many cases successfully.

XHTML rules are strict. If something is wrong or forgotten, nothing is displayed at all – the user gets an empty page.

=== Lowercase tags ===

In XHTML, tags must be written in lowercase letters. {{{<h1>}}} will do but {{{<H1>}}} will not.

=== No Design Properties ===

All the attributes introduced in HTML for design purposes like "color" or "font" are not available in XHTML. Instead, CSS must be used to achieve a particular design.

=== Declaration ===

An XHTML page must declare itself as such with a line like this:
{{{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
}}}

The idea behind this was that as soon as a browser comes across such a declaration, it can switch off all the messy code that tries to deal with ill-formed HTML code and rely on a clean, well-defined syntax. Well, that idea, also it was brilliant, never happened to spring into existence.

Of course there is more to say about the differences between HTML and XHTML, but this is beyond the scope of this discussion.

=== The future of XHTML ===

The idea of XHTML attracted especially programmers who often are looking for better, cleaner, nicer ways to do something. Unfortunately, XHTML did not offer much to improve the design aspects of a web page. In other words, it did '''not''' attract web designers. 

The majority of web sites are created by web designers, not by programmers, and that's why XHTML was not accepted as widely as hoped. For example, the exiting opportunities offered by CSS can also be used from ugly and even ill-formed HTML-code.
But XHTML is treated well by all modern browsers, although more or less accidentically, so it '''can''' be used.

== CSS ==

We cannot discuss CSS in detail, that would be very much beyond the scope of this discussion, but I would like to tell you about the general concept of how XHTML and CSS work together.

We need something to deal with – a particular XHTML tag:

{{{
<h1 id="thish1" class="allmyh1" >Main Caption</h1>
}}}

To give this h1 tag a particular design you can choose from a number of different approaches: You can specify a rule which is taken into account…

 * for all h1 tags
 * for all h1 tags marked as member of the class "allmyh1"
 * for the h1 tag with the name "thish1", called "id" in CSS speak

The sequence of this list also defines the precedence of these rules: at first, the most general one is processed. Then the class-specific rules are processed. At least the most specific ones are processed. That means that a rule associated with a name overwrites class rules which overwrites general rules. 

Example:
{{{
h1 {
	color: blue;
	font-family: Helvetica
        font-size:x-large;
}

h1.allmyh1 {
	color: red;
	border: 1px green solid;
}

h1#thish1 {
	font-size:xx-large;
        color:gray;
}
}}}

Note that the first definition is applied to '''all''' h1 tags. The second one defines a class "allmyh1". The third one is applied to the one h1 tag that has the id "this1".

According to the rules our header would take these attributes:

{{{
color:       gray;
font-size:   xx-large;
font-family: Helvetica;
border:      1px green solid;
}}}

You may believe this or not, so let's prove it. CSS rules can be associated with a particular web page in two very different ways: either by putting the CSS rules in its own file, using the extension ".css" or by putting it into the HTML page itself. 

In general it is a much better idea to separate the CSS code in a seperate file. Only to simplify the matter we go for the embedded approach here. Given this html code:

{{{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>  
<style type="text/css" media="screen">
h1 {
    color: blue;
    font-family: Helvetica 
    font-size:x-large;
    padding: .5em;
}
p {
    font-size:large;
    font-family: Georgia;
    margin-left: 2em;
}
h1.allmyh1 {
    color: red;
    border: 1px green solid;
}
h1#thish1 {
    font-size:xx-large;
    color:gray;
}
</style>
</head>

<body>
<h1 id="thish1" class="allmyh1" >Main Caption</h1>
<p>
                A simple example
</p>
</body>
</html>
}}}

This code would let the browser display something like this: 

{{attachment:pic1.jpg}}

Assumed that the fonts specified are installed on the machine where the page is finally viewed.

The CSS rules are enclosed by a {{{<style>}}} tag declaring itself as containing CSS rules by the type="text/css" attribute, and it defines these rules as valid for the screen by the media="screen" attribute. It could be something else, for example "print", which tells you that you can have two different sets of CSS rules in place for screen and for print. 

That allows you to prepare the HTML page in very different ways, even suppressing elements completely, like navigation elements for example, by specifying "display:none" on them.

In theory, the sequence of html tags is not important. The reason is that you can re-arrange the different parts of the HTML page by CSS. As so often, in practise there is a difference between theory and practise: There are some annoying limitations. In other words: sequence matters!

== APL and Classes to the rescue ==

Fortunately, there is a tag available designed to put some stuff together which is logically related, for example to make them available for some CSS rules: {{{<div>}}}

Most pages on the web offers some if not all of the following concepts:

 * A logo
 * Main caption(s) 
 * Utilities (like "Email" or "Privacy" or the like)
 * bread crumbs ("You are here: home > this > that")
 * Header (contains the logo, the main caption and sometimes but not always also the utilities and the bread crumbs)
 * The main menu
 * A sub menu
 * A footer
 * A page header
 * The real content
 * One, sometimes even two sidebars

The idea is to define these elements independently from each other as {{{<div>}}} tags with unique names (IDs) by assigning the appropriate HTML code to particular properties of an instance of a class designed to create and accept syntactically valid XHTML code only. This is especially important because invalid XHTML code has a fairly good chance to result in a very simple very white very empty page which your visitors will not appreciate as I can assure you.

Having defined all the different parts of the web site you are interested in, they can be compiled together in whatever sequence you like.

=== Creating valid XHTML code via APL ===

It would be nice to have some APL functions at hand to generate XHTML code. The class "HTML" is designed to to this. You can download a Dyalog Version 12.1 workspace which contains this as well as other classes we will be in need for soon:

http://download.aplwiki.com/AplWikiStuff/HtmlCssAndAplWithClasses.zip

This link is also available at the end of the page.

All methods offered by this class are of type shared and can be listed therefore easily:

{{{
      #.HTML.⎕nl -3
 a  h1  h2  h3  h4  h5  h6  li  ol  p  pre  ul 
}}}

Not all HTML tags are represented by methods in this class but enough to get something serious done. Here are some examples of what is possible:

{{{
      #.HTML.p 'APL is an interpreted language'
<p>APL is an interpreted language</p>  
      'id="myP"' #.HTML.p 'APL is an interpreted language'
<p id="myP">APL is an interpreted language</p>  
      'class="myclass" id="myP"' #.HTML.p 'APL is an interpreted language'
<p class="myclass" id="myP">APL is an interpreted language</p>  
}}}

Note that this does not only make the creation of XHTML code easier, it makes also sure that the generated code is valid.

=== Putting it all together ===

The next and last step is a class which let you assign the different parts almost all HTML pages are build up from as discussed above.

You need to create an instance from this class so we must use the [[ADOC]] class to get in idea about the methods and properties offered by this class. (To find out how to use ADOC as a User Command see [[UserCommands/Adoc]])

{{{
ADOC.List #.XHTML_Page
*** XHTML_Page (Class) ***

Constructors:
  make
Instance Properties:
  body (ReadOnly)
  head (ReadOnly)
  html (ReadOnly)
Instance Fields:
  css_file_print
  css_file_screen
  css_name_print
  css_name_screen
  doctype
  encoding
  footer
  meta_author
  meta_copyright
  meta_date
  meta_description
  meta_email
  meta_keywords
  meta_robots
  title
  xmlns
  nl (readonly)
Instance Methods:
  AddToBody
  AddToHead
  ResetBody
  ResetHead
Shared Methods:
  Copyright
}}}

Well, that does not look easy and straightforward, does it?

=== A first (and simple) example ===

It is probably much easier to build up an example. Here it is:

{{{
 ⍝ Build up a simple page with a paragraph and an h1 header only
 ⍝ The path the HTML should go to:
  path←1⊃#.APLTreeUtils.SplitPath ⎕WSID
 ⍝ The fully qualified filename of the HTML page:
  filename←path,'htmlsample1.html'
 ⍝ Create a reference to the #.HTML class script:
  h←#.HTML 
 ⍝ Create a new instance from the "XHTML_Page" class:
  myPage←⎕NEW #.XHTML_Page
 ⍝ Add a H1 tag to the body:
  myPage.AddToBody h.h1'My Test Page'
 ⍝ Build up the, hrrrm, real content of the page:
  txt←'This is a short demonstration of the XHTML object. '
  txt,←'This object is designed to make sure that the (X)HTML syntax is correct'
 ⍝ Add the content to the body:
  myPage.AddToBody h.p txt
 ⍝ Ask the instance for the HTML created from what we did so far:
  html←myPage.html
 ⍝ Write the HTML code to the "filename":
  #.UnicodeFile.Write filename html(13 10)  
 ⍝ View the HTML page:
  #.ADOC.View filename
}}}

You need three other, more general classes for this: ADOC, APLTreeUtils and the !UnicodeFile class Dyalog comes with. All these classes are to be found in the workspace mentioned above.

And that's the result:

{{attachment:htmlpage1.jpg}}

=== A second (and more complex) example ===

In the following example we add a lot of stuff to our first try:

 * Some meta information
 * A main menu
 * A sub menu
 * A footer

To build the main menu, the sub menu and the footer the XHTML_Page will prove to be helpful as well. This class offers shared method that makes it really easy to build up a main menu and/or a sub menu as you can see from this example:

{{{
 path←1⊃#.APLTreeUtils.SplitPath ⎕WSID
 filename←path,'htmlsample2.html'
 h←#.HTML
 myPage←⎕NEW #.XHTML_Page

⍝ --- Setting props ---
 myPage.meta_author←'Kai Jaeger'
 myPage.meta_copyright←'APL Team Ltd'
 myPage.meta_description←'Demonstrates how to create a proper website with APL'
 myPage.meta_email←'kai@aplteam.com'
 myPage.meta_keywords←'APL, Demo, OO'
⍝ --- End setting props

 myPage.mainCaption←'APL Wiki Articles'
 myPage.subCaption←'APL, XHTML and CSS'
 myPage.breadcrumb←('Welcome' '')('Prime number' '')
 myPage.utilities←('email' '')('privacy' '')('copyright' '')('contact' '')

⍝ --- define the main menu ---
 mainMenuOptions←''
 mainMenuOptions,←⊂'Welcome' 'c:\welcome.html'
 mainMenuOptions,←⊂'Vision' 'c:\vision.html'
 mainMenuOptions,←⊂'Products' 'c:\products.html'
 mainMenuOptions,←⊂'Service' 'c:\service.html'
 mainMenuOptions,←⊂'Contact' 'c:\contact.html'
 cammi←1 ⍝ currently active main menu item
 mainMenuHtml←#.HtmlHelper.Mainmenu cammi,(↓⍉↑mainMenuOptions)
 myPage.mainMenu←mainMenuHtml
⍝ --- end main menu ---

⍝ --- define the sub menu ---
 list←('Overview' 'overview.html')('Utilities' 'utilities.html')('Prime number' 'prim.html')
 casmi←3 ⍝ currently active sub menu item
 subMenuHtml←#.HtmlHelper.Submenu casmi,(↓⍉↑list)
 myPage.subMenu←subMenuHtml
⍝ --- end sub menu ---

⍝ --- define the content ---
 myPage.AddToContent h.h1'My Test Page'
 txt←'This is a short demonstration of the HTML object. '
 txt,←'This object is designed to make sure that the (X)HTML syntax is correct'
 myPage.AddToContent h.p txt
 txt←'Nevertheless the concept is very flexibel: '
 txt,←'you can, for example, add all kinds of properties to a tag like:'
 myPage.AddToContent h.p txt
 myPage.AddToContent h.ol'id="xyz"' 'class="xyz"' 'cellspace="xyz"' '...'
 myPage.AddToContent h.h2'APL Code'
 myPage.AddToContent h.pre'prim←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵}'
⍝ --- end content ---

 myPage.footer←#.HtmlHelper.Footer'Simple sample HTML page'
 myPage.css_file_screen←'pretty.css'

 html←myPage.GetHtml
 #.UnicodeFile.Write filename html(13 10)
}}}

That's how it looks like:

{{attachment:htmlpage2.jpg}}

This example already contains almost everything a standard HTML page offers. However, it is not exactly a hit. The layout is somewhat dump and boring. Well, that is because we haven't cared about the design so far. We are going to change this right now.

Standard HTML is used to mark up the main menu as well as the sub menu. Although they are ordinary lists, we can beautify them easily by specifying appropriate CSS rules.

=== Layout I. ===

Adding this line to the example listed above:

{{{
 myPage.css_file_screen←'pretty.css'
}}}

specifies a CSS file "pretty.css" as beeing in charge for the layout. The contents of the file might look like this:

{{{
html {
        background-color: #FFE09F;
        font-family: Verdana;
		  margin: 0;
		  padding: 0;
}

body {
		  margin: 0;
		  padding: 0 1em;	
}

ul, ol, p, pre  {
        font-size: large;
}

pre {
        font-family: "APL385 Unicode";
        border: 0px solid yellow;
        background-color: black;
        color: yellow;
        padding: 10px 5px;
        margin: 5px;
}

h2, h3, h4, h5, h6 {
        color: #CD5C5C;
        font-family: "Tohama";
}

h1 {font-size: xx-large;}
h1 {
	margin: 0;
}
h2 {font-size: x-large;}
h3 {font-size: large;}
h4 {font-size: medium;}

div#mainmenu {
        padding: 5px 0 0 0;
        margin: 10px 0 0 0;
        background-color: #FFE09F;
		  float: right;
}
ul#mainmenu {
        clear:both;
        display:block;
        font-size: 1.3em;
        margin:0pt;
        padding: 5px 10px;
}

li.mainmenu {
        border-color: silver;
        border-style: solid solid none solid;
        border-width: 2px;
        display:block;
        float:left;
        margin: 0px 8px -2px 0;
        padding: 2px 10px;
        white-space:nowrap;
        background-color: silver;
}
li#currentmainmenuitem {
        font-weight: bold;
        background-color: white;
        padding: 2px 6px 2px;
        border: 1px black solid;
        border-bottom: 2px white;
        margin-bottom: 0px;
}

li.mainmenu a {
        text-decoration: none;
        background-color: transparent;
        padding: 0 5px;
}

div#submenu {
        float: left;
        clear: both;
        padding: 0;
        margin: 0 10px 0 0;
        background-color: silver;
        width: 12em;
}

ul#submenu {
        clear:both;
        display:block;
        font-size: 1em;
        margin: 5px;
        padding:10px;
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
}

li.submenu {
        margin: 5px 0;
        padding: 5px;
        background-color: silver;       
}

li#currentsubmenuitem {
        font-weight: bold;
}

div#container {
        padding: 0 10px 10px 10px;
        background-color: transparent;
        margin: 6em 0 0 0;
}
div#content {
        margin: 0 0 0 13em;
        background-color: white;
        padding: 1em; 
		  border-style: solid;
        border-color: black;    
        border-width: 1px;
}

div#footer {
        margin: 2em 0 0 0;
        text-align: center;
        font-size: xx-small;
        }

div#footer hr {
        width: 75%;
        border: 1px solid silver;
        display:        none;
}

div#footer span {
        color:red;
        font-family: georgia;
}

div#utilities {
	font-size: x-small;
	margin: -32px -0.5em 1em 0;
	float: right;
}

h1#maincaption {
	font-size: xx-Large;
	font-family: "Bodoni MT Black";
	color: green;
	margin: 1em 0 0 2em;
}

h2#subcaption {
	font-size: x-Large;
	font-family: "Bodoni MT Black";
	color: green;
	margin: 1em 0 0 5em;
}

div#breadcrumb {
		float: left;
		font-size: x-small;
		clear: both;
		margin:5px 0 0 1em;
}
}}}

=== How it looks like ===

This is by no means a professional layout, but as you can clearly see, one can achieve a lot with a little CSS - that is how it looks like:

{{attachment:htmlpage3.jpg}}

Note that both, the currently active main menu as well as sub menu item is emphasized.

== A different Layout ==

But what if you want to have a completely different layout? For example, logo and main caption on top, followed by the breadcrumbs. Underneath that three different areas shall take:

||left:||main caption, sub caption and main menu||
||middle:||the content||
||right:||the content||

followed by the utilities and the footer.

Well, you need to assemble the pieces together yourself, but it is not a big deal:

=== The Code ===

{{{
path←'C:\Buffer\'
 filename←path,'htmlsample3.html'
 h←#.HTML
 myPage←⎕NEW #.XHTML_Page

⍝ --- Setting props ---
 myPage.meta_author←'Kai Jaeger'
 myPage.meta_copyright←'APL Team Ltd'
 myPage.meta_description←'Demonstrates how to create a proper website with APL'
 myPage.meta_email←'kai@aplteam.com'
 myPage.meta_keywords←'APL, Demo, OO'
⍝ --- End setting props

 myPage.mainCaption←'APL Wiki Articles'
 myPage.subCaption←'APL, XHTML and CSS'
 myPage.breadcrumb←('Welcome' '')('Prime number' '')
 myPage.utilities←('email' '')('privacy' '')('copyright' '')('contact' '')

⍝ --- define the main menu ---
 mainMenuOptions←''
 mainMenuOptions,←⊂'Welcome' 'c:\welcome.html'
 mainMenuOptions,←⊂'Vision' 'c:\vision.html'
 mainMenuOptions,←⊂'Products' 'c:\products.html'
 mainMenuOptions,←⊂'Service' 'c:\service.html'
 mainMenuOptions,←⊂'Contact' 'c:\contact.html'
 cammi←1 ⍝ currently active main menu item
 mainMenuHtml←#.HtmlHelper.Mainmenu cammi,(↓⍉↑mainMenuOptions)
 myPage.mainMenu←mainMenuHtml
⍝ --- end main menu ---

⍝ --- define the sub menu ---
 list←('Overview' 'overview.html')('Utilities' 'utilities.html')('Prime number' 'prim.html')
 casmi←3 ⍝ currently active sub menu item
 subMenuHtml←#.HtmlHelper.Submenu casmi,(↓⍉↑list)
 myPage.subMenu←subMenuHtml
⍝ --- end sub menu ---

⍝ --- define the content ---
 myPage.AddToContent h.h1'My Test Page'
 txt←'This is a short demonstration of the HTML object. '
 txt,←'This object is designed to make sure that the (X)HTML syntax is correct'
 myPage.AddToContent h.p txt
 txt←'Nevertheless the concept is very flexibel: '
 txt,←'you can, for example, add all kinds of properties to a tag like:'
 myPage.AddToContent h.p txt
 myPage.AddToContent h.ol'id="xyz"' 'class="xyz"' 'cellspace="xyz"' '...'
 myPage.AddToContent h.h2'APL Code'
 myPage.AddToContent h.pre'prim←{{⍵/⍨2=+⌿0=⍵∘.|⍵}⍳⍵}'
⍝ --- end content ---

 myPage.footer←#.HtmlHelper.Footer'Simple sample HTML page'
 myPage.css_file_screen←'pretty2.css'

 nl←⎕AV[4 3]
 html←'<body>',nl
 html←'id="top"'h.div⊃,/(⊂nl),¨⍨myPage.(logo mainCaption breadcrumb)
 buffer←'id="left"'h.div⊃,/myPage.(subCaption mainMenu)
 buffer,←'id="middle"'h.div'id="container"'h.div myPage.content
 buffer,←'id="right"'h.div myPage.subMenu
 html,←'id="all"'h.div buffer
 html,←myPage.utilities
 html,←myPage.footer
 html,←nl,'</body>'
 html←myPage.head,html

 #.UnicodeFile.Write filename html(13 10)
 ⍝
}}}

Note that here the name of the CSS file is not "pretty.css" but "pretty2.css"

=== The CSS ===

And this is how the contents of "pretty2.css" might look like:

{{{
html {
        background-color: #FFE09F;
        font-family: Verdana;
		  margin: 0;
		  padding: 0;
}

body {
		  margin: 0;
		  padding: 0 1em;	
}

ul, ol, p, pre  {
        font-size: large;
}

pre {
        font-family: "APL385 Unicode";
        border: 0px solid yellow;
        background-color: black;
        color: yellow;
        padding: 10px 5px;
        margin: 5px;
}

h2, h3, h4, h5, h6 {
        color: #CD5C5C;
        font-family: "Tohama";
}

h1 {font-size: xx-large;}
h1 {
	margin: 0;
}
h2 {font-size: x-large;}
h3 {font-size: large;}
h4 {font-size: medium;}

div#mainmenu {
        padding: 5px 0 0 0;
        margin: 10px 0 0 0;
        background-color: #FFE09F;
}
ul#mainmenu {
        display:block;
        font-size: 1.3em;
        margin:0pt;
        padding: 5px 10px;
}

li.mainmenu {
        border-color: silver;
        border-style: solid solid none solid;
        border-width: 2px;
        display:block;
        margin: 0px 8px -2px 0;
        padding: 2px 10px;
        white-space:nowrap;
        background-color: silver;
}
li#currentmainmenuitem {
        font-weight: bold;
        background-color: white;
        padding: 2px 6px 2px;
        border: 1px black solid;
        border-bottom: 2px white;
        margin-bottom: 0px;
}

li.mainmenu a {
        text-decoration: none;
        background-color: transparent;
        padding: 0 5px;
}

div#submenu {
        padding: 0;
        margin: 0;
}

ul#submenu {
        display:block;
        font-size: 1em;
        margin: 5px;
        padding:10px;
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
}

li.submenu {
        margin: 5px 0;
        padding: 5px;
        background-color: silver;       
}

li#currentsubmenuitem {
        font-weight: bold;
}

div#container {
        padding: 0 10px 10px 10px;
        background-color: transparent;
        margin: 0;
}
div#content {
        margin: 0;
        background-color: white;
        padding: 01em; 
		  border-style: solid;
        border-color: black;    
        border-width: 1px;
}

div#footer {
        margin: 2em 0 0 0;
        text-align: center;
        font-size: xx-small;
        }

div#footer hr {
        width: 75%;
        border: 1px solid silver;
        display:        none;
}

div#footer {
		clear: both;
}	

div#footer span {
        color:red;
        font-family: georgia;
}

div#utilities {
	font-size: x-small;
	margin: -32px -0.5em 1em 0;
	clear: both;
	text-align: center;
}

h1#maincaption {
	font-size: xx-Large;
	font-family: "Bodoni MT Black";
	color: green;
	margin: 1em 0 0 2em;
	text-align: center;
}

h2#subcaption {
	font-size: Large;
	font-family: "Bodoni MT Black";
	color: green;
	margin: 0;
	padding: 1em;
	
}

div#breadcrumb {
		font-size: x-small;
		margin:5px 0 0 1em;
}

div#left, div#right {
	width: 20%;
}

div#left {
	float: left;
	border:1px solid silver;
	padding: 0 0 1em 0;
}

div#right {
	float: left;	
	width: 15%;
	border:1px solid silver;
	padding: 1em;
   background-color: silver;
}

div#middle {
	width: 610;
	margin: 0;
	padding: 0;
	float: left;
}

div#all {
	clear: both;
	margin: 1em 0 0 0;
	width: 99%;
}
}}}

=== How it looks like ===

{{attachment:htmlpage4.jpg}}

Let's put this straight: the design is horrible, but that's not our point: we've shuffled around almost all the logical parts of the HTML page with very little effort.

== Download Link ==

http://download.aplwiki.com/AplWikiStuff/HtmlCssAndAplWithClasses.zip

Polished by KaiJaeger at 2008-05-31, updated at 2011-08-26

----
CategoryDyalog