The <!DOCTYPE... line is required by XHTML, It's sort of a pointer to the 'Roseta stone' of HTML. I've switched from transitional to strict Doctype. (It's 2003!)
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 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> Sets a character set, as required in XHTML Strict. ISO-8859-1 is a common latin (West European) character set.
The <meta name="MSSmartTagsPreventParsing" content="TRUE"> tag prevents Internet Explorer from adding "smart links" to the text of your story. "Smart Links" was a feature invented by Microsoft that would inflict ugly squiggly lines under seemingly random tag words on your webpage, Mucking up your nice layout and enticing your readers to visit another (Microsoft sponsored) page while in the middle of your page. After much feedback from webmasters, Microsoft backed down from deployment of this feature, but has not disavowed it for future use.
The <title> tag begins the title. This title is what's picked up in the browser window title, and it's picked up as the title if you bookmark a page. Close the title with the </title>tag.
The <style... tag starts the style section, which is placed in HTML comments. The elements of the style sheet will be covered below.
The </style> tag ends the style section
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 class="none"> 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. Note that I've selected the "none" class so this first paragraph is not indented. It is a common typographical practice to leave first line of a chapter without an indent. </p>
<p> This is the second paragraph of the story. Note that no style class has been selected, so this paragraph will be rendered per the style for "p", which includes a 1 em text indent. I placed the indent on the "p" since it is the most common paragraph used in prose. </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 "division" within the document. A div is a structual block element of HTML, it can contain other block elements. (A paragraph is a block element) In the Stylesheet the div is 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. To select a styled paragraph, the class of the tag is added within the opening paragraph tag.
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 class="nb" 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 my stories.
div {width: 26em; margin-left: 2em; margin-right: 2em}
p {margin-top: .3em; margin-bottom: .3em; text-indent: 1em}
p.none {text-indent: 0em}
p.small {font-size: .75em; color: #0000EF}
p.blk {margin-top: .5em; margin-bottom: .5em; margin-left: 2em; margin-right: 2em}
ol.copy {font-size: .75em; list-style-type: lower-roman}
ul {font-size: .75em}
body {Background: #CDC0B0}
img.nb {border: 0}
span.grey {color: grey}
div - Division
div {width: 26em; 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 26em will cause the lines to break a little wider than a paperback book.
Browser note: The 4.x versions of Netscape Navigator will display the text as something closer to 28 em wide. That's a bug. Navigator 6, IE 5x, and Opera will display the text correctly at 26em width. (It's 2003, time to get a modern browser)
p - Paragraph
p {margin-top: .3em; margin-bottom: .3em; text-indent: 1em}
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 I adjust the whitespace above and below the box, and I use text-indent: to indent the paragraph.
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.
p.none - Paragraph (no indent)
p.none {text-indent: 0em}
This style is called by adding the class parameter "none" to the p tag:
This style cascades the whitespace styles from the <p> tag, but over-rides the text-indent so that the paragraph is not indented. This seems a bit backwards, but since the indented paragraph is far more common in prose, I figured it was better to have the default paragraph indeneted and save the more verbose tag over-ride that indent.
p.small - Paragraph (Small)
p.small {font-size: .75em; color: #0000EF}
I use this style in one place, in the navigation line at the top of each story.
<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 for your entire website, but that is, of course, optional.
p.blk - Paragraph (Block)
p.blk {margin-top: .5em; margin-bottom: .5em;}
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.
ol - Ordered List
ol.copy {font-size: .75em; list-style-type: lower-roman}
I use the ordered list to format my copyright disclaimer.
Note that this disclaimer is for Ranma 1/2, (You'll need to reference the correct copyright holders) and that as far as I know no such disclaimer has ever been tested in court. I wrote this one in a good faith effort to acknowledge the authority of the story's creator.
Japanese copyright law is somewhat more deferential to the derivative works than US law, but more importantly, In Japan there seems to be a peaceful co-existance and perhaps a demonstratable symbiotic relationship between original publishers and dojinshi, which borrow liberaly from the original works for character and art designs than do prose fanfiction.
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 class="copy">
<li>The characters and stories of Ranma 1/2 are Copyright © Rumiko Takahashi, and are used here without permission or license.</li>
<li>No claims to the above copyright are made by the author of this work.</li>
<li>This work is for non-commercial use ONLY, and is produced for the enjoyment of fans only.</li>
<li>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 Validator
I use the W3C validator to check the validity of my code.
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.
I used to use HTML Tidy, but I've found that since I switched to XHTML, I make far fewer errors, and I find the utility of an offline checker is no longer compelling.
Text Decoration
Bold
<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.
Italics
Example Italic Text
Colored text
Colored text is rarely, if ever, seen in in the body of fictional prose. I use a grey color to de-emphasise inline translations:
“So is purple hair your type?” Mariko nudged her brother.
He watched as they crossed the room. “Keba-keba.” [Too showy (fluffy)]
“Mmmmmmm.” Mariko hummed.
The HTML for that looks like this:
<p class="blk">He watched as they crossed the room. “<i>Keba-keba</i>.” <span class="grey">[Too showy (<i>fluffy</i>)]</span></p>
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
Punctuation
‘ - The left (opening) single quotation mark.( ‘ )
’ - The right (closing) single quotation mark. ( ’ ) Also used as the apostrophe.
“ - The left (opening) double quotation mark. ( “ )
” - The right (closing) double quotation mark. ( ” )
Examples: First with true quotation marks, then in typewriter style:
“I find that ‘curly’ quotation marks give prose a professional polish.”, don’t you agree?”
"I find that 'curly' quotation marks give prose a professional polish, don't you agree?"
Clearly, that wasn't he best bit of prose I've ever written, but it does make use of both double “ ” and single ‘ ’ quotation marks, and the use of ’ as an apostrophe.
Appendix A
A Copy-paste ready XHTML Template, ready for you to input your story. The text in red is the fixed boilerplate, and the text in blue should be replaced.