Sample Sidebar
You can have additional divisions in the left sidebar, as shown by this example.
Please note that the contents of the left sidebar are not printed out to paper!
W3C Validation
This Sample Page shows you how to use the Sinorcaish stylesheet to best advantage. You are encouraged to examine the HTML source code whilst reading the rest of this document. You may also want to consult the official Sinorcaish web site for updated instructions, updated stylesheets and/or appropriate images.
The best way to use the Sinorcaish stylesheet is to start with the supplied template document. So, make a copy of that file and fire up your favourite text editor — GNU Emacs is a good one to use!
The first thing you will notice about the template document is that it conforms to the XHTML 1.0 Strict standard. This means that you will need to be a little more picky about the HTML code you write — if in doubt, use the W3 Markup Validation Service to check your newly-created document.
Start modifying your new file by changing the <title> element, as well as the Author,
Description, Copyright and <link
rev="made"> meta-elements. You would probably want to
include an element of your web site’s name in the title. For
example, the Sinorcaish Company web site might include
“Sinorcaish:” as part of every title.
The next element to modify is the location of the stylesheets. Sinorcaish actually uses two files to provide the style information needed: sinorcaish-screen.css for screen-based User Agents, and sinorcaish-print.css for printing HTML pages to paper. You can, of course, rename the files at your leisure.
Following the <head> element is the
visual page header. You will want to replace the left division
with your own web site name (or replace the entire paragraph with an
image; see the section on Main Design
Elements for more information about doing this). Similarly, replace
the links in the right and subheader divisions with your own site-wide
ones. Note the presence of the highlight
class: it indicates which part of your web site this particular page will
fit into.
Next comes the left sidebar. Replace these links with ones
that reflect the local page layout in this section of your web
site. Note the presence of the highlight
class once again: it indicates the actual page you are editing. Make sure
you keep the associated “(this page)” line: it helps readers
using non-visual or non-stylesheet-aware browsers make sense of your
page.
Maintaining a Largish Web Site
If you are planning to maintain a medium to large web site, you most likely will want to split the header, sidebar and footer portions out to other files, to be incorporated via server-side includes, dynamic content creation systems or other means. But you probably already knew that.
After the sidebar comes the main content area. Since you
are still modifying the template file, you probably don’t need to
make too many modifications here: the idea is that you first create an
appropriate template file for your own web site, then copy that file as
needed for all other pages. You should modify the navigation
head so that users will be able to find the path to this page in a
logical fashion (the level-1 header provides the last part of this path).
The <h1> level-1 header element should
contain the same text as the page title, apart from any web site-wide
prefixes.
Finally, modify the footer to suit your web site. If your template is for a corporate site, you will probably want to change the wording of the “maintained by” portion. You should also make the Terms of Use and Privacy Policy links point to the appropriate documents.
The main design philosophy of the Sinorcaish stylesheet is the separation of style and content. In other words, as much as is possible, all style information is contained in the CSS files (sinorcaish-screen.css and sinorcaish-print.css), with your HTML documents containing text with minimal markup and boilerplate. This allows you to concentrate on the structure and content of your documents without worrying too much about presentation. It also makes your documents accessible to the visually-impaired and to those using non-stylesheet-aware browsers.
As you have already seen in Making a Start, a typical document based on the Sinorcaish stylesheet is composed of four parts: the visual page header, the left sidebar, the main content area and the footer. In addition, the main content area can contain floating boxes that are displayed on the right-hand-side of the page. Each of these design elements will be examined in turn.
The visual page header appears first in a typical document and is displayed at the top of the rendered page. You should use this header to provide a unifying theme for your entire web site: each document should have essentially the same header.
As shown in the Sinorcaish template file, the visual page header is divided into three sections: the left, the right and the subheader, as shown in the following diagram:
| Left | Right |
| Subheader | |
The left part of the header is meant for a global title, such as the name of your web site. Ideally, this would be provided by a suitably-styled image. In that case, the markup would look something like the following:
<div id="header">
<div class="left">
<a href="http://www.example.com/"><img src="example.png"
alt="Browse the Example home page" width="350" height="60" /></a>
</div>
...
As you can see from the above markup, the suggested size of the header
image is about 250–500 × 60 pixels. The background of
the image should either be a flat colour with RGB code #8CA8E6 (to match the left header background), or
include a linear gradient from #3365CB on the
left to #8CA8E6 on the right. Text in the
image should be white (#FFFFFF), or #FF9800 for highlighting, with #003399 for text shadows. You can view a suitable
example at the top of this page. Creating your
own header image is easy with the step-by-step logo
instructions included with Sinorcaish.
In the case of a linear gradient, the gradient need not appear across
the entire image: you might want to divide the image into thirds, with the
first third being the darker #3365CB colour,
the second being the gradient and the third being the lighter #8CA8E6 colour.
If you do not wish to use an image, replace the previously-shown markup with something like the following:
<div id="header">
<div class="left">
<p><a href="http://www.example.com/">Example
<span class="alt">page</span></a></p>
</div>
...
The right part of the header is meant for global and/or external links. It can also contain code for searching your web site, as demonstrated on the official Sinorcaish example page.
The subheader is designed to contain links to the main
sections of your web site. For example, you might decide to partition
your company’s on-line presence into Products, Services, Support and
so on — much like this sample page. Most of the pages on your site
should then fall into one of these categories; the section a particular
page falls into should be indicated with the class="highlight" attribute.
Please note that the only markup that should appear before the visual page header is the mainlink: a link to the start of the main content area. It is not rendered by stylesheet-aware browsers, nor is it printed to paper. Its purpose is to allow a visually-impaired user to quickly ignore all of the links that appear in the visual page header and left sidebar (imagine yourself listening to all of the links in these sections for each and every page!).
The main purpose of the left sidebar is to provide navigation in the current (local) section of the web site. Links should be provided to all pages at this level of the web site, as well as possibly to their parent. For example, the left sidebar of the Products overview page might list Product A, Product B and Product C as relevant links, as well as a link to the Overview page itself. In turn, Product A’s overview page might list Overview, What’s New, Features, System Requirements, Download, Reviews, FAQ and Submit Comments as links in its left sidebar.
The best way to provide all of the relevant links is to use an
unordered list (<ul>), as shown in this
document: apart from being styled correctly by the Sinorcaish stylesheet,
non-visual or non-stylesheet-aware browsers will be able to render
something meaningful. You indicate the current page in the left sidebar
by using the class="highlight"
attribute to the <li> element; you
should also use the sample “(this page)” HTML fragment for
accessibility.
The left sidebar is actually a series of <div> markup sections, each of which is
displayed one after the after, top to bottom. You can have ordinary text
and markup in the sidebar, as illustrated by this sample document. Please
note, however, that the left sidebar is not printed out to
paper.
The main content area is the portion of the document that will contain the vast majority of your prose. This paragraph, for example, is part of the main content area, as are other paragraphs, headings, diagrams, tables, floating boxes and so on. Its structure — particularly headings — is essentially dictated by your text.
As illustrated by this sample document, each page should contain a main
content area that starts with a navigational head. This
navigational head, identified by a navhead ID,
allows readers to quickly locate this particular page in the web site
hierarchy. The <h1> level-1 header
provides the last part of this navigational head; for this reason, a
document based on the Sinorcaish stylesheet should have only one
<h1> element.
Given that the level-1 heading appears only once (and should be
similar, if not identical, to the document title), you should use level-2
to level-6 headings (<h2> to <h6>) to indicate a document’s
structure. In addition, you should not use headings in any
section other than the main content area (you should not use headings in
floating boxes, either).
The different levels of headings can be used to indicate the importance (or otherwise) of this particular section in the prose. In particular, level-2 and level-3 headings are larger than their surrounding text, level-4 headings are about the same size, and level-5 and level-6 headings are smaller. This document, for example, only uses level-2 and level-3 headings (apart from sample headings in the Brief HTML Sampler).
Incidentally, a good rule of thumb to observe is that you should never place two headings (of any level) next to each other without placing some text between them. Thus, for example, a level-2 header should not be followed by a level-3 header without an introductory paragraph of some sort — even a few words are usually sufficient.
In addition to headings, you may use any valid XHTML markup in the main
content area. Many of these are illustrated in the Brief HTML Sampler found later in this sample
document. The only elements you should avoid are <address> and <q>, for reasons explained in the section on
Deprecated Elements.
The last element in the main content area should be <br id="endmain" />. This forces
the main content area to extend to at least the end of the left sidebar,
should that sidebar be longer than your text.
The Sinorcaish stylesheet provides you with two types of floating boxes: the navigational box for intra-page/inter-page links, and general floating boxes for sidebar-type content.
[The following paragraphs represent a sidebar. You may need to read some of the text following this sidebar to fully understand it.]
Navigational Box Width
The default navigational box has a fixed width of 12.5em, where 1em
is typically defined to be the height of the letter “M”.
This may be too wide or too narrow for your links, in which case you
should add an attribute such as style="width: 14em".
In general you should avoid using the style attribute as it violates the principle of
separating style and content. You should certainly avoid using any
units other than em for the width of the
navigational box.
If your document is particularly long (as is this one) or is split into
logically consecutive pages, you may want to include a navigational
box just after the level-1 heading. This box (identified by <div class="navbox">) should contain
nothing more than an ordered list of links to the main section headings;
these links are not meant to point to material that is not
logically part of the current document — use the left sidebar for
that. In addition, please note that the navigational box is not
printed out to paper, just as for the left sidebar.
General-purpose floating boxes may be used to visually separate prose that is merely an aside to the ordinary flow of text. You can see an example of such an aside (called a “sidebar” in typographical circles) on the right-hand side of this page, in the vicinity of this paragraph.
The following markup may be used as a template whenever you wish to include a floating box in your document:
<div class="floatbox"> <hr /> <p class="hidden">(Hidden text)</p> <p class="title">Floating Box Title</p> <p>(Actual text)</p> <hr /> </div>
Notice the horizontal rules and hidden text: these are only displayed in non-visual or in non-stylesheet-aware browsers and help the reader to make sense of your document. Depending on the content of the floating box, the hidden text may not need to be present. Alternatively, it might read something like “[The following paragraphs represent a sidebar. You may need to read some of the text following this sidebar to fully understand it.]”.
You should also note that the title of a floating box is given by a
title class, not by a heading: headings are
for main content only.
By default, floating boxes have a width of about 35% of the main
content area. In general, you should not need to change this width,
except in the case that you include <pre> or (wide) <table> elements within the actual floating
box.
One limitation of floating boxes is that they must appear between block-level elements such as paragraphs. In other words, it is not possible to start a floating box in the middle of a paragraph. This is a limitation of XHTML in general, not of Sinorcaish in particular.
Due to the Cascading Style Sheets 2.1 specification of
floating elements, floating boxes in this stylesheet do not always
visually interact well with elements having the highlight class. For example, if you have a
highlighted paragraph defined by <p
class="highlight">, the grey background of that
paragraph may overlap the grey background of a floating box in its
vicinity. The way to avoid this situation is to include the clearboxes class as well:
<p class="highlight clearboxes">Highlighted paragraph</p>
The clearboxes class is possibly even more
important with the preformatted paragraph element (<pre>, with or without the highlight class). The reason is that the XHTML
specification forbids text inside such a paragraph from being wrapped,
potentially causing the preformatted text to “spill over” into
the floating box. Adding the clearboxes class
is not done by default, however, as it very much depends on the
width of your preformatted content: if the text inside <pre> is narrow enough, it is probably not
worth clearing any boxes, as doing so would generate a significant amount
of empty space on your rendered page.
The footer is the last section to appear in any Sinorcaish HTML document. As suggested in the section on Making a Start, the footer allows you to include a link to your site’s Copyright statement, Terms and Conditions of Use and/or Privacy Policy. You are also encouraged to include a date of last modification and a contact address for the person or group maintaining the web page.
When modifying the template’s footer, please keep in mind that,
by default, all content in the footer is printed out on paper.
The only exception is content protected by <span
class="notprinted"> elements, as shown in this sample
page. You should use the notprinted class to
make sure that what is printed to paper makes sense: for example, the mere
words “Terms of Use” and “Privacy Policy”
don’t make sense by themselves on paper and thus should not be
printed.
By the way, if you need to include a range of dates for the copyright
notice, the correct way to do so is to use the – XML entity. For example:
Copyright©2001–07, John Zaitseff. All rights reserved.
This is rendered as:
Copyright © 2001–07, John Zaitseff. All rights reserved.
Finally, note the initial <hr /> in
the footer: this allows non-visual or non-stylesheet-aware browsers to
clearly separate the main content area from the footer.
You should always check that your completed documents conform to the XHTML 1.0 Strict specification by using the free W3 Markup Validation Service. In addition, you should test your web pages using a variety of browsers, particularly the latest versions of Mozilla Firefox, Konqueror, Safari, Opera and Internet Explorer (although Internet Explorer 7, the current release, still has significant bugs in rendering HTML and CSS).
If possible, you should also test your web pages using older versions of Internet Explorer, as many potential users of your web site may not be able to upgrade their browser (this document, for example, has been fully tested with Internet Explorer 6 and 7).
As well as checking your web pages with the popular browsers, you should also use a text-mode browser such as Lynx for testing — this will give you a reasonable “feel” for how visually-impaired users might experience your pages.
One rather non-obvious item to check is how your pages will look when printed — the Sinorcaish stylesheet for printing is rather different from the one used to render your pages on-screen.
This section of the sample document shows you how various HTML elements appear under the Sinorcaish stylesheet. It assumes you have already read and understood the section on Main Design Elements. Each example is presented in a box similar to the following:
This is a typical example box. It contains a valid XHTML paragraph.
You are strongly encouraged to read the source code of this document to
see “how it is done”. In particular, open the file sample.html using any
text editor, then search for id="h-html-sampler" to find the start of
this section.
By the way, if you examine the source code for the above example box, as well as the document header, you will find that it uses a special class to set the right margin when displayed on the screen. This has the effect of avoiding the navigational box that would otherwise be rendered on top of it. Since the navigational box is not printed to paper, there is no need for setting a right margin on the example box in that case.
This special class is not really a generic solution (as it is very dependent on the width of the navigational box, which has its own custom style in this instance), hence its exclusion from the Sinorcaish stylesheet.
Only one level-1 heading may appear in the document, directly following
a <div id="navhead"> section.
You may use level-2 to level-6 headings almost anywhere you like within
the main content area (apart from within floating boxes). For example:
Whenever one needs “filler text”, one invariably uses Lorem Ipsum. This passage has been in use as filler text since the 1500s and was originally taken and slightly mangled from de Finibus Bonorum et Malorum, written by Cicero in about 45 B.C.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paragraph with Title Class (not recommended)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
As you can see from the example above, your use of level-5 and level-6
headings should probably be limited, as they are rendered smaller
than the surrounding text. Furthermore, although the Paragraph with Title
Class looks like a heading, it should not be used as one: the
title class is meant to be used within the
left sidebar and within floating boxes only.
Many inline elements have already been used throughout this sample document. This example brings them all together:
Ordinary text, as seen throughout this document. An (almost certainly) visited link and a (probably) unvisited link.
The Sinorcaish stylesheet assumes the following elements are defined as per the HTML4 Sample Stylesheet: emphasised text, strongly emphasised text. You should probably avoid strong’ed em and em’ed strong text (although it will probably work).
You should avoid physical markup elements such as bold, italic, bold italic (and italicised bold). Instead, use elements that give meaning and structure to your text. The same applies to typewriter text, b + tt, i + tt, tt + b + i and other permutations.
Avoid the following if possible, as it adds little semantic meaning: Bigger text, Smaller text.
You can use sup and sub as appropriate: H2SO4, a2 + b2 = c2.
For computers and programming: code, keyboard
input, sample output, variables. For
example, var++ in C increments the variable
var. A typical example of these elements is when using
the <pre> element:
$ make target make: *** No rule to make target `target'. Stop.
Something more exotic: a definition is often useful; you
should really read Cascading Style Sheets:
The Definitive Guide (Second Edition) by Eric Meyer;
deleted text;
inserted text;
abbreviations such as Mr. John Zaitseff or U.N.; acronyms such as NATO.
Note the use of <abbr> and <acronym> in the above example: if the
abbreviation or acronym has an associated title attribute, the element is displayed with a
dotted underline; furthermore, holding your mouse cursor over the element
will display the contents of the title.
Unfortunately, the dotted underline is not displayed under older versions
of Internet Explorer for Windows, as those browsers do not comply with
the CSS 2.1 Standard.
The use of the title attribute is entirely
optional for all elements, including <del> and <ins>.
The Sinorcaish stylesheet defines a number of custom inline styles for
particular uses. For example, filenames, URLs and e-mail addresses should
all be displayed using the appropriate style class as part of the <span> or <a> element; HTML and CSS markup should use
the <code class="markup">
element and class; the tooltip class can
provide underlined tooltips; program names, windows (and dialog boxes),
menu items, individual keypresses and generic GUI elements in graphical
applications can use appropriately-named classes; and most Unicode characters may be displayed
using the unicode class:
A filename, URL and e-mail address: index.html, http://www.zap.org.au/, J.Zaitseff@zap.org.au.
HTML elements and the like can be marked up using <code class="markup">. If you
like, you can use <span
class="markup"> instead: it’s merely a
matter of taste.
Text with a tooltip.
Parts of a graphical computer application: OpenOffice Writer can be
invoked with the oowriter command; the
End Session dialog box; press Alt+Tab to select another window; modify the value
of the Size combo box; is just one way to
terminate programs under KDE. By the way, note the use of » between menu items.
Unicode text uses a different font (or fonts) to make sure as many Unicode characters as possible can be displayed. For example: /ˈkʊkəbʌrə/ (kookaburra), Добро пожаловать! (“welcome” in Russian), Χαίρετε! (“Rejoice!” in Ancient Greek; “ε” should be “ϵ”, but some fonts don’t have the latter symbol), ←↑↓→ (arrows).
Please be aware that some browsers may not display overly-long tooltips
correctly. In addition, many browsers have problems displaying Unicode
characters that are not present in the current font; the unicode class helps to reduce this problem (by
selecting a font with as many characters in it as possible), but does not
eliminate it.
You have already seen the most common block-level element in continual
use: the paragraph element (<p>). Other
standard elements are shown in the following example:
Standard paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Another paragraph in the block quote. You can have multiple levels of
<blockquote>, as illustrated by the following riddle from The Hobbit, or There And Back Again by J. R. R. Tolkien:Alive without breath,
As cold as death;
Never thirsty, ever drinking,
All in mail never clinking.The answer is “a fish”, of course!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Note that the del and ins elements may be block-level as well as
inline:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The preformatted text element (<pre>)
is mostly used for computer programs or for terminal-based transcripts.
Please note that the content inside <pre>, as well as the starting and ending
elements themselves, must not be indented with spaces or tabs.
Most ordinary markup rules apply within the element:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
/* The classic C program */
#include <stdio.h>
int main (int argc, char *argv[])
{
(void) printf("hello, world\n");
return 0;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
/* The classic C program, with syntax highlighting */ #include <stdio.h> int main (int argc, char *argv[]) { (void) printf("hello, world\n"); return 0; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Sinorcaish stylesheet allows you to place most block-level elements
into a highlight mode:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A highlighted paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A highlighted paragraph directly following another highlighted paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A highlighted block quote. Note the additional space inside the box at the top and bottom, compared with the highlighted paragraph. Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A highlighted division. This has spacing the same as a highlighted block quote.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
/* The classic C program, with syntax highlighting */ #include <stdio.h> int main (int argc, char *argv[]) { (void) printf("hello, world\n"); return 0; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Please remember that highlighted elements (ie, elements with the highlight class) may interact rather badly with
floating boxes, as discussed in the section on Floating Boxes.
Although not officially deprecated by the Sinorcaish stylesheet, you
should try to avoid using horizontal rules, with or without the custom
lighter class. Please note that <hr class="lighter" /> elements
are not printed to paper:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
There are essentially three types of lists supported by the XHTML
standards: ordered lists, using the <ol> and <li> elements; unordered lists,
using the <ul> and <li> elements; and definition
lists, using the <dl>, <dt> and <dd> elements:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ol
class="alpha">)Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lists can contain other lists, as well as block elements (such as paragraphs) of their own:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Unordered lists with paragraphs inside each list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Second paragraph within a single item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
A blockquote as part of a list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{ The classic "first program" in Turbo Pascal }
program Hello;
begin
writeln("Hello, world.")
end.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Second unordered list following the first. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ol
class="alpha">)<ol
class="number">)Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
If you are nesting lists within lists, as shown in the previous example, you should make sure that you include some text between any two levels. The reason for this is that some browsers otherwise leave an almost empty line instead of making the inner list start on the same line as the outer list. In other words, you should design your nested lists as shown at Items 2, 4, 4b, 4b.3 and Points B, D, I and K in the example above. You should not do something like the following:
<ol>
<li>Item 1</li>
<li> <!-- You should not leave this line blank with no text on it! -->
<ol>
<li>Item 2.1</li>
<li>Item 2.2</li>
...
</ol></li>
...
</ol>
Tables should be used to present tabular data, not for visually
positioning page elements. The Sinorcaish stylesheet defines a simple class for rather simplistic table formatting.
You can highlight certain cells with the highlight and lighter
style classes; you can also force the text alignment within a cell to be
left, right or centred (the default). Some simple examples:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| Currency | AUD | NZD | USD | EUR | JPY | GBP | CHF | CAD |
|---|---|---|---|---|---|---|---|---|
| AUD | 1 | 0.9162 | 1.337 | 1.709 | 0.01259 | 2.455 | 1.117 | 1.097 |
| NZD | 1.092 | 1 | 1.459 | 1.865 | 0.01374 | 2.679 | 1.219 | 1.197 |
| USD | 0.7479 | 0.6852 | 1 | 1.278 | 0.009416 | 1.836 | 0.8353 | 0.8203 |
| EUR | 0.5852 | 0.5362 | 0.7825 | 1 | 0.007368 | 1.436 | 0.6536 | 0.6418 |
| JPY | 79.43 | 72.77 | 106.2 | 135.7 | 1 | 195 | 88.71 | 87.11 |
| GBP | 0.4074 | 0.3732 | 0.5447 | 0.6962 | 0.005129 | 1 | 0.455 | 0.4468 |
| CHF | 0.8954 | 0.8203 | 1.197 | 1.53 | 0.01127 | 2.198 | 1 | 0.982 |
| CAD | 0.9118 | 0.8353 | 1.219 | 1.558 | 0.01148 | 2.238 | 1.018 | 1 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| Left | Centre | Right |
| ABCDEFGHIJKLM | ABCDEFGHIJKLM NOPQRSTUVWXYZ |
ABCDEFGHIJKLM |
| Right | Centre | Left |
| R1C1 | R1C2 | R1C3 |
| R2C1 | R2C3 | |
| R3C1 | R3C2 | R3C3 |
| R1C1 + R1C2 | R1C3 + R2C3 | |
| R2C1 + R3C1 | R2C2 | |
| R3C2 + R3C3 | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Although tables may be nested to any degree, formatting the result can
be quite tricky, as shown in the following example. It is better to use
the colspan and rowspan attributes, as illustrated in the second
table:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| R1C1 | R1C2 | R1C3 | |||||||||
| R2C1 |
|
R2C3 | |||||||||
| R3C1 | R3C2 | R3C3 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| R1C1 | R1C2 | R1C3 | ||
| R2C1 | iR1C1 | iR1C2 | iR1C3 | R2C3 |
| iR2C1 | iR2C2 | iR2C3 | ||
| iR3C1 | iR3C2 | iR3C3 | ||
| R3C1 | R3C2 | R3C3 | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
It is likely that you will need to create custom styles for your own tables, in order to present them in their best light. The Sinorcaish stylesheet definitions provide you with a starting point to do so. Please remember that you should minimise the excessive use of colour and of thick or dark borders, in order to harmonise with the rest of the document.
You may embed images into your document as you would normally, using
the <img> element. By default, images
are aligned with the text baseline; images within links have no
border. In addition, you may force your images to “float” to
the left or right by using the floatleft and
floatright classes respectively (as shown in
the following example). In this case, your images should not
contain a white or transparent border, as the stylesheet takes care of
this for you.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
![[Gradient]](gradient.png)
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Including a caption with the floated image is a little trickier: you need to ensure your markup does not cause the current paragraph to be terminated prematurely. For this reason, you should use the following as a template:
<span class="floatleft"> <-- or "floatright" -->
<br class="hidden" />
<img src="url" alt="[text]" width="w" height="h" /><br />
<strong>Figure 1: Short caption text</strong>
<br class="hidden" />
</span>
Notice that a <span> element is used
to contain the image and caption: <table> and <div>, as well as <hr
/>, are block-level elements and cannot appear within
a paragraph (this is a limitation of XHTML in general, not of Sinorcaish
in particular). In general, you must only use inline elements, such as
those described in Inline Elements and Custom Inline Styles, within floating spans.
Secondly, note the hidden line breaks (<br
class="hidden" />) at the start and end of the
floated span: these are only displayed in non-visual or in
non-stylesheet-aware browsers and help the reader to make sense of your
document.
Finally, you should keep the image captions short, as these will not
be wrapped to the width of the image. As a final resort, you may need to
use additional <br /> elements to keep
the caption width reasonable.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
Figure 1: Left-floating image
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
Figure 2: Right-floating image
commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
The Sinorcaish stylesheet includes a special class, icon16, for 16 × 16 file-type
icons:
Every good web designer should read the
![[PDF]](file-pdf.png){kind=small}
Cascading Style Sheets 2.1
Specification (1.5 MB).
If you examine the source code for the previous example, you will note that it follows the following form (attributes omitted for clarity):
<a><img></a> <a>link text</a> (size)
In particular, note that the hyperlink <a> appears twice. This prevents the
space between the icon and the link text from being highlighted when using
the mouse.
You may include almost any valid inline, block-level, list or table element in floating boxes. The only exceptions are headings, which should be used in the main content area only, and horizontal rules, which are used for non-visual or non-stylesheet-aware browsers only.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sample Floating Box 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sample Floating Box 2 (wider than normal)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{ The classic "first program" in Turbo Pascal }
program Hello;
begin
writeln("Hello, world.")
end.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| R1C1 | R1C2 | R1C3 |
| R2C1+R3C1 | R2C2+R2C3 | |
| R3C2 | R3C3 | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The Sinorcaish stylesheet allows you to design pages containing interactive HTML forms. Such pages represent one of the few places that tables may be used for visual formatting, as traditionally form elements need to be vertically aligned with each other.
Please note that the following form is entirely fictional: please do not fill it out or submit it!
The Sinorcaish stylesheet includes a totop
class that can be used for links to the top of the page. The following
example shows you how to create a FAQ-style page, which makes
use of this class. The only change you would need to make from this
example to your document would be to replace the level-2 heading, <h2>, with a level-1 heading <h1>.
Not at all! Simply follow the instructions in Making a Start — you’ll be on your way in no time.
You can download Sinorcaish from the Open Source Web Design group or from the official Sinorcaish web site. The version available from the official web site includes appropriate sample images that you can use in your own documents.
Yes, absolutely! You may redistribute and/or modify the template file without any restriction. This means, naturally enough, that you can remove the author’s name from that file (particularly from the copyright statement) and replace it with your own.
Please note, however, that you must retain the original copyright notice in the Sinorcaish CSS stylesheet files (sinorcaish-screen.css and sinorcaish-print.css), as well as in this sample document, in the overview document and in the logo image instructions. This is essentially a matter of giving credit where credit is due.
No, as that would not fit the desired “look and feel” of Sinorcaish. However, there is nothing preventing you from modifying the CSS stylesheet files yourself — as long as you retain the original copyright notices in those files.
That’s a fairly difficult question to answer… “About two or three weeks of on-and-off writing and developing” is probably as close an answer as the author can come up with for the first version of Sinorcaish!
You should not use the following deprecated elements with the Sinorcaish stylesheet:
<address>- You should use
<div id="footer">(ie, Sinorcaish footers) instead. This was essentially a design decision made when implementing the Sinorcaish stylesheet.<q>- You should use
“and”instead. The reason for this is the somewhat spotty support for<q>in the first place, as well as a lack of support in Internet Explorer for CSS propertiesquotesandcontent, as well as pseudo-elements:beforeand:after.
The Sinorcaish stylesheet was created by John Zaitseff and submitted to the Open Source Web Design group in December, 2004; it was last updated in March, 2007. You should consult the official Sinorcaish web site for updated style sheets and associated images.
You may freely redistribute and/or modify the Sinorcaish CSS stylesheet files (sinorcaish-screen.css and sinorcaish-print.css) on the condition that the original copyright notice is preserved. The same condition applies to this sample document, to the overview document and to the logo image instructions. You may redistribute and/or modify the associated template file without any such restriction. These conditions may be waived; write to John Zaitseff for details.
Your comments, suggestions, corrections and enhancements are always warmly welcomed! Please send these by e-mail to J.Zaitseff@zap.org.au. In addition, you are encouraged to send a short note to the same address should you use this stylesheet in one of your own web sites. Happy coding!
