| 2.1.26 HTML Topic | | Three different HTML 5 guides are needed to cover: | 1. Private Business Applications.
2. Public Web Sites with SEO.
3. Private Business Documents. |
| HTML 5 Standard Framework | <DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="application-name" content="Application Service">
<meta name="author" content="myname@businessltd.co.uk">
<meta name="generator" content="Application Content Manager">
<meta name="description" content="now is the time">
<meta name="keywords" content="business, application, service">
<meta name="robots" content="index, follow">
</head>
<body>
<table class="c2-page-ta"> <tr> <td>
... common structure ...
<td> <tr> </table>
</body>
</html> |
| Content Manager | | Meta-Description as a text string. | | Meta-Keywords as a comma separated string. | | Page-Header-Left as text/image inserted into common structure. | | Page-Header-Center | | Page-Header-Right | | Menu-Item as a set by page. | | Page-Footer-Left as text/image inserted into common structure. | | Page-Footer-Center | | Page-Footer-Right | | Gadget as an article of HTML text blocks and/or images. | | Topic as an article of HTML text blocks and/or images. |
| Page Break Before | | With IE9 and Chrome, this will work on a <p> but not a <br> (for large pages). | | With Firefox, this will work on a <p> and a <br>. | | HTML-5 has a @PAGE page print area that impacts on how page breaks work - this is beyond what we do today. |
| Common Structure | <table class="c2-head-ta"> <tr>
<td class="c2-head-td-l"> ... [B]Page-Header-Left[/B] ...
<td class="c2-head-td-c"> ... [B]Page-Header-Center[/B] ...
<td class="c2-head-td-r"> ... [B]Page-Header-Right[/B] ...
</tr> </table>
<!-- ... end of page header : start menu bar ... -->
<table class="c2-menu-ta"> <tr>
<td class="c2-menu-td"> ... [B]Menu-Item[/B] (many) ...
<td class="c2-menu-td"> ... [B]Menu-Item[/B] (many) ...
</tr> </table>
<!-- ... end of menu bar : start body ... -->
<table class="c2-body-ta"> <tr>
<td class="c2-body-td-l"> ... left body structure ...
<td class="c2-body-td-c"> ... center body structure ...
<td class="c2-body-td-r"> ... left body structure ...
</tr> </table>
<!-- ... end of body : start footer ... -->
<table class="c2-foot-ta"> <tr>
<td class="c2-foot-td-l"> ... [B]Page-Footer-Left[/B] ...
<td class="c2-foot-td-c"> ... [B]Page-Footer-Center[/B] ...
<td class="c2-foot-td-r"> ... [B]Page-Footer-Right[/B] ...
</tr> </table> |
| Left Body Structure | <table class="css-left-ta"> (may be zero width)
<tr> <td class="css-left-td"> ... [B]Gadget[/B] ... </td> </tr>
<tr> <td class="css-left-td"> ... [B]Gadget[/B] ... </td> </tr>
</table> |
| Right Body Structure | <table class="c2-right-ta"> (may be zero width)
<tr> <td class="c2-right-td"> ... [B]Gadget[/B] ... </td> </tr>
<tr> <td class="c2-right-td"> ... [B]Gadget[/B] ... </td> </tr>
</table> |
| Center Body Structure | <table class="c2-center-ta">
<tr> <td class="c2-center-td"> ... [B]Topic[/B] ... </td> </tr>
<tr> <td class="c2-center-td"> ... [B]Topic[/B] ... </td> </tr>
<tr> <td class="c2-center-td"> ... [B]Topic[/B] ... </td> </tr>
</table> |
| | | Article Design | | Topics and Gadgets are blocks of HTML text with optional images. A topic may be a form with a list of data entry fields or a list of records for selection. | | Many Topic and Gadget articles can be stacked below one another with a break element. |
| Menu Design | | A web page may have any number of menu bars with each menu bar typically supporting up to 10 menu items. The content manager only needs the web page number to have all the information needed to create the menu. Some condictional logic can be introduced to restrict who can view what menu itsms - each menu item can be restricted by site or role. | | The scope of any web site is defined by its menu navigation design - a web page may be part of any number of different web sites. |
| Style Design | body color:black; background:white; margin:0; font-size:12px;
[B].c2-page-ta[/B] color:black; background:white; border-collapse:collapse; width:100%;
/* ... page header ... */
[B].c2-head-ta[/B] color:black; background:white; border-collapse:collapse; width:100%;
[B].c2-head-td-l[/B] font-size:small; text-align:left; vertical-align:top;
[B].c2-head-td-c[/B] font-size:large; text-align:center; vertical-align:top;
[B].c2-head-td-r[/B] font-size:small; text-align:right; vertical-align:top;
/* ... menu bar ... */
[B].c2-menu-ta[/B] background:silver; border-collapse:collapse; width:100%;
[B].c2-menu-td[/B] font-size:xx-small; text-align:center;
[B].c2-menu-a[/B] color:maroon; font-size:xx-small; text-align:center; text-decoration:none;
[B].c2-menu-a[/B] color:green; font-size:xx-small; text-decoration:underline;
/* ... body with variable center width ... */
[B].c2-body-ta[/B] color:black; background:white; border-collapse:collapse; width:100%;
[B].c2-body-td-l[/B] width:123px; text-align:left; vertical-align:top;
[B].c2-body-td-c[/B] text-align:left; vertical-align:top;
[B].c2-body-td-r[/B] width:123px; text-align:left; vertical-align:top;
/* ... left ... */
[B].css-left-ta[/B] background:silver; border-collapse:collapse; width:100%;
[B].css-left-td[/B] font-size:xx-small; text-align:left;
/* ... center ... */
[B].c2-center-ta[/B] background:white; border-collapse:collapse; width:100%;
[B].c2-center-td[/B] font-size:x-small; text-align:left;
/* ... right ... */
[B].c2-right-ta[/B] background:silver; border-collapse:collapse; width:100%;
[B].c2-right-td[/B] font-size:xx-small; text-align:left; |
|