The <!DOCTYPE... line is required by XHTML, It's sort of a pointer to the 'Roseta stone' of HTML. The DOCTYPE is automatically added if you use HTML Tidy checking software. (More on HTML Tidy in the tools section)
The <html... line declares that this is an html document, and points to the name space documentation. (Again required by XHTML)
The <head> tag begins the header. The header is also where you would put other meta-information, like search tags.
The <title> tag begins the title. This title is what's picked up in the browser window title. close the title with the </title>tag.
The <link... tag links the stylesheet to the page
The </head> tag closes the header.
The Body
The body contains the HTML that will be rendered onto the screen.
<body>
<div>
<h1> The Title of your Story, </h1>
<p> By T. Author</p>
<hr />
<p> This is the first paragraph of the story. XHTML demands that a paragraph always begins with a <p> tag and end with a </p> tag. </p>
<p> This is the second paragraph of the story. I've used four characters to perform the indent. </p>
<p> Each paragraph in the story is formed in the same way. </p>
<hr />
<a href="http://validator.w3.org/check?url=" your full url"><img border="0" src="vxhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</div>
</body>
</html>
The <body> tag is required, It tells the browser that the body starts here. (The closing </body> is at the bottom of the format.)
The <div> tag declares a region on the document. In the Stylesheet It's used to set the width of the text. I put the entire story into one big "div". (See the closing </div> down at the bottom of the format.)
The <h1> tag makes a nice big title. The </h1> tag is required to close the title.
The <p> tag starts each paragraph, the </p> tag is required to close each paragraph.
The <hr /> is used to create a break between the title section and the story itself. That space and slash are not a misprint. XHTML requires that all elements be closed (which explains the </p> on every paragraph). Naturally empty elements, such as the <hr> are closed by the addition of a space and trailing slash.
The following section is optional.
<a href="http://validator.w3.org/check?url=your full url"><img border="0" src="vxhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
It places a small graphic in your story, and links it to the W3 validation software. When you click on that graphic it asks the W3 to read the page you've specified, and generate a report about that page.
It looks like this:
Go ahead, click on the picture above. Then hit the back button on your browser to get back here.
That's the format. That's all you need to be XHTML compatible. Now on to the Stylesheet...
The Stylesheet
This is the style sheet that I use for all of my stories.
div {width: 22em;
margin-left: 2em;
margin-right: 2em}
p {margin-top: .3em;
margin-bottom: .3em}
p.small {margin-top: .3em;
margin-bottom: .3em;
font-size: .75em;
color: #0000ef}
p.blk {margin-top: .5em;
margin-bottom: .5em;
margin-left: 2em;
margin-right: 2em}
ol {font-size: .75em}
ul {font-size: .75em}
body {background: #cdc0b0}
div - Division
div {width: 22em;
margin-left: 2em;
margin-right: 2em}
The div Element is the magic key to this format. It's used to set the width of the text, and to pull the text away from the left edge of the window.
The width: property sets the width of the 'div' region.
The margin-left: pushes the div region to the right, (Out of the left gutter)
The margin-right: does the same on the right.
I'm using the em to set the widths here. The em is a relative measurement, which means that the width of the text is related to the font size. If you want to know more about the em, here is an outstanding article on Typographical Measurement systems.
A width of 22em will cause the lines to break at about the same relative width as a paperback book.
Browser note: The 4.x versions of Netscape Navigator will display the text as something closer to 24 em wide. That's a bug. Navigator 6, IE 5x, and Opera will display the text correctly at 22em width.
p - Paragraph
p {margin-top: .3em;
margin-bottom: .3em}
The p element sets the base style for paragraphs. A paragraph is a block-level element, which means that it is rendered within a 'box'. For the base style the only thing I do is adjust the whitespace above and below the box.
margin-top: sets the space above the 'box'
margin-top: sets the space below the 'box'
These style changes pull paragraphs of text closer together. Books are printed with no blank lines between paragraphs, but the HTML standard renders a full blank line between paragraphs.
I've elected to bring the paragraphs closer together, but not so close as to completely remove the extra 'leading' between them. This compromise is a both an aesthetic choice and a concession to the lower resolution of computer screens. In less fancy words, I like the way it looks.
There's another reason to bring the paragraphs together — a full space between paragraphs is used in prose to indicate to the reader that a change or discontinuity has occurred in the narrative.
That full line break is forced by adding a paragraph with a non-printing character between paragraphs:
<p> Here is a sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.</p>
<p> </p>
<p> Here is a the second sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.</p>
This html would render as:
Here is a sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.
Here is a the second sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.
While CCS has a text-indent property that can be applied to paragraphs, I have elected to indent paragraphs by using a string of three or four characters. I chose this method for backwards compatibility with older (Pre-4.0) browsers and text-based browsers (such as Lynx).
p.small - Paragraph (Small)
p.small {margin-top: .3em;
margin-bottom: .3em;
font-size: .75em;
color: #0000ef}
I use this style in one place, in the navigation line at the top of each story.
This style is called by adding the class parameter to the p tag:
<p class="small">This is the string of text I want to appear in a smaller font. It will also appear on a bluish color.</p>
It will render as:
This is the string of text I want to appear in a smaller font. It will also appear on a bluish color.
Here's what my navigation bar looks like:
Home / Ranma 1/2 Fanfictions / Format
The HTML for that looks like this:
<p class="small">
<a href="http://www.josephpalmer.com/index.shtml">Home</a> /
<a href="http://www.josephpalmer.com/fanfic/fanfic.shtml">Ranma 1/2 Fanfictions</a> / Format</p>
I recommend that you have a navigation feature on your stories, but that is, of course, optional.
p.blk - Paragraph (Block)
p.blk {margin-top: .5em;
margin-bottom: .5em;
margin-left: 2em;
margin-right: 2em}
I use this style for paragraphs that are in some way removed from the story. The text appears in a smaller box like this:
This is an example of the 'blk' style, I used it in "Black" to set off a news report that was heard from a radio. The block format is commonly used when a large block of text is to be quoted verbatim, such as a newspaper article.
You can also set off the text in a block by applying italics or Typewriter Text
ol - Ordered List
ol {font-size: .75em}
I use the ordered list to format my copyright disclaimer.
Copyright Notice
- The characters and stories of Ranma 1/2 are Copyright © Rumiko Takahashi, and are used here without permission or license.
- No claims to the above copyright are made by the author of this work.
- This work is for non-commercial use ONLY, and is produced for the enjoyment of fans only.
- This work is the expression of the author and the depiction of the Ranma 1/2 characters herein are in no way represented to be a part of Ranma 1/2 as depicted by the original author and copyright holder(s).
The HTML for that looks like this:
<p><b>Copyright Notice</b></p>
<ol><li type="i">The characters and stories of Ranma 1/2 are Copyright © Rumiko Takahashi, and are used here without permission or license.</li>
<li type="i">No claims to the above copyright are made by the author of this work.</li>
<li type="i">This work is for non-commercial use ONLY, and is produced for the enjoyment of fans only.</li>
<li type="i">This work is the expression of the author and the depiction of the Ranma 1/2 characters herein are in no way represented to be a part of Ranma 1/2 as depicted by the original author and copyright holder(s).</li>
</ol>
ul - Unordered List
ul {font-size: .75em}
I used the unordered list in "Hot" to break off a series of non-story paragraphs.
body - Body
body {background: #cdc0b0}
I declare a body background color to flood the page with a less than bright white background. I'm personally not very hot on either full white or patterned .gif backgrounds, and I find that a pastel background makes it easier on the eyes.
Tools
Text Editor
I prefer NoteTab Pro 4.82 as my text editor. NoteTab Pro does html tag coloring, and can integrate with Html Tidy. It's available online for $19.95. I've been using it for a couple of years, and it has proven to be very stable.
HTML Checker
I use HTML Tidy to check the validity of my code. I highly recommend that you get and use HTML Tidy as well. (It's Free!)
I think it's important to the future of the web that we authors stick to the W3 standards. By supporting open standards, can we can help prevent the takeover of the web by those pushing proprietary features and tags. HTML Tidy is a painless way of checking (and cleaning up) your html
HTML Tidy is a separate filter, not a GUI program. NoteTab opens it, and passes the file through, then returns the repaired file to the editing window. (You can undo) The HTML Tidy web page links to other programs that are integrated with Tidy.
HTML Tidy can use a Configuration file to create the output you desire Here's my tidy.cfg file:
// Palmer's xhtml-prose config file for HTML tidy indent: auto indent-spaces: 2 wrap: 0 markup: yes output-xml: no input-xml: no show-warnings: yes numeric-entities: no quote-marks: no quote-nbsp: yes quote-ampersand: no break-before-br: no uppercase-tags: no uppercase-attributes: no char-encoding: ascii output-xhtml: yes
This configuration creates a non-wrapped, indented file that remembers characters and keeps the text in simple (7 bit) ascii format.
Text Decoration
<b> </b> - Bold is frequently used as the title of chapter, but is rarely used within the body of prose text.
Example Bold Text
<i> </i> - Italics is used for extra emphasis or to clue the reader that a word is in a foreign language.
Example Italic Text
<tt> </tt> - Teletype Text can be used to quote external material.
Example Teletype Text
Special Characters
HTML can call characters outside of the normal ascii range.
- The non-breaking space. This space can be put between words that you simply don't want split between lines. Also, since browsers compress 'white space', tabs and spaces in the source file are shrink to a single space. The is treated differently, and you can stack them up to make indents or expressive spacing.
Example of several non-breaking spaces in a row
— - The em dash. An extra wide dash commonly used in prose to mean a break longer than a comma. Traditionally the em dash is as wide as the block around the capital letter "M".
Example—Text
Appendix A
A Copy-paste ready XHTML Template, ready for you to input your story.