Skein HTML Guide

Skein HTML Guide prose by sprice 24 March 2002 30 comments		Skein Home Author's Works View 30 comments
HTML on Skein
A disclaimer to you who know html: I'm oversimplifying many things here. This is a guide to using html to format text within the skein engine. It's not a guide to HTML proper or full. I'm going to explain just a little bit about HTML and then list some tags that you might use everyday. After that, I'll explain a few tags that are slightly more complicated, and then some tags that we don't allow at all. Finally, there are some links to sites where you can learn more.

The basics of HTML
HTML is at heart a system of glorified highlighters. A web page is basically just a regular file full of text, that then has "tags" put in that set sections of the text apart to be treated differently. Tags are set apart with characters that tell the browser not to display the tag, but to interpret it instead. So to make multiple lines set apart a paragraph, which in the middle has a section of bold text, here's what the browser sees:
`<p>This is a new paragraph that <b>has some bold text</b> in the middle of it. When it hits the edge of the screen, it wraps around without my having to tell it to.</p>`
And that gets displayed as:
This is a new paragraph that has some bold text in the middle of it. When it hits the edge of the screen, it wraps around without my having to tell it to.
Spaces are a special case. Web browsers will ignore extra spaces, because they assume that you've formatted your code in special ways to be readable. To get more than one space character in a row, you need to use special "non breaking spaces", which are explained in the next section. This is also why we need to have skein treat poetry differently than prose... besides the different ways that you can comment, skein also needs to know that it should be careful about spaces and single-line carriage returns.
A final note before describing some tags (see, there really isn't much to it!) is that most tags need to be closed and nested. Closing a tag means that when you're done with the bold section, you need a tag </b> that says "this is the end of the bolding". Nesting means that if you want two tags to apply to the same section of text, you need to set one entirely within the other, both opening and closing. To apply two styles, you essentially need to say "do thing 1 to this" "and thing 2" Here's the text "end of 2" "end of 1". See the next section for some examples of both of these.


Some Immediately Useful Things
There are a few things that you may want to use immediately, and which may be all you need know.
<p>starts off a new paragraph. Note that skein is smart enough to interpret both line breaks and <p> tags as the start of a new paragraph... and it will be careful to only put one paragraph break in if you put both line breaks and <p> into your submission.
<b>bold</b>
Do be careful to close this.

<i>italic</i>
Close this one, too.

<b><i>*bold and italic*</i></b>
Note the nesting.
<a href="filename.html">link text</a>
So if you'd like to post a "next" link at the bottom of a work, visit the work that you want to link to, copy the URL from the little line at the top of the browser, and put it in place of filename.html , including the "http://" stuff.
<u>underline</u>
As someone who cares about design, I'm required to ask that you not use underlines... because links use underlines, and it can get confusing. But it's there for you if you want it, like in a bibliography.
<a name="name"></a>
If you'd like to link to some place within a single work, you can put in a "named anchor" like this one. Then you can link to <a href="http://www.skein.org/filename.html#name"> and the link will jump the reader's browser to that place. I don't recommend using this, but it's there for you. The links that I have in the opening paragraph to this page are links to anchors which are placed at the beginning of each section.
<blockquote>Text with wider margins</blockquote>
This will set off the section of text like a block of quotation in a properly formatted academic paper-- it will have wider margins and will have a blank line before and after. It won't be smaller type.
<hr>
makes one of those lines that stretches the width off the page, called a "horizontal rule".
<br>
This is a line break, and is the way that you get a single "carriage return" in a document-- otherwise, if you declare a new paragraph (like with <p>) then you get a full blank line between the lines of text.
- and > or <
There are a lot of characters that html "reserves" for its own use, like < and >. If you put those characters into a document, the browser will interpret them as html itself. For those characters, you need a special code. One such code is a "non-breaking space", or   . That's the way that you get several blank spaces at the beginning of a paragraph, which is one way to indent just the first line of some text. `>` means "greater than", and `<` means "less than".


Some Slightly More Complex Things
There are many more things which skein allows, but which are a bit more complicated. The most useful of these are: lists and <font> tags.
To make lists, you have to do three things: tell the browser what kind of list it is, where the list is, and where to divide each of the items in the list. There are two main kinds of lists: unordered lists (bullets) and ordered lists (numbers, letters).
<ul> <li>In an unordered list, this is the first list item, with a bullet afore it.</li> <li>and this is the second item.</li> </ul>
<ol> <li>In an ordered list, this is the first list item, with a number (one) before it.</li> <li>This is the second item. </ol>
If you'd like an ordered list to have letters rather than numbers, you can add a type: <ol type="a"> for instance.
Showing different fonts is a tricky business, because the computer that is viewing the work may not have the right font, and if it doesn't, it will simply guess at what it should display, or it will use the regular fonts. Because of this, you should take care using fonts, and be very careful to close the font-ed area, or else you might affect the rest of the page (including comments, for instance). So:
<font face="Times"> This should appear in times.</font> <font face="Arial"> This should appear in Arial.</font> <font face="Sand"> This probably won't appear in sand unless you're on a Mac.</font>


Some Things You Shouldn't Do
Finally, there are a bunch of HTML tags that skein will do its best to eradicate. These tags are disallowed because they can be used to do Bad Things, either to the server itself or to the page that displays the work. There are good things that can be done with them-- they're just bad for Skein's digestion. I'm not going to explain them because you don't need them, right?
<html>, <head>
<frameset>
Server Side Includes
<script>
<table>, <td>, <tr>, <th> -- Tables have many legitimate uses; right now, however, they are dangerous, because improperly formatted tables will break the entire page. In time, skein will verify HTML submitted to it.
<form> and all its ilk
<bgsound>
<applet>
<embed>
<div>
<ilayer> and <iframe>
<layer>
<span> and <style>
<div>, <span>, and <style> also have many legitimate uses, but when javascript and stylesheets are disabled, these tags do little but allow you to streamline your html.
<php>
<?>
<blink> ...because we cannot permit pure evil.
<multicol>



Learn More
This is just the tip of a very large iceberg. If you'd like to learn more, and learn about stuff that we won't yet let you do on skein, here are some sites to explore.
HTML Goodies' primer to HTML - http://www.htmlgoodies.com/primers/basics.html - The rest of this site gets into specifics quickly; this section is a quick, readable introduction.
HTML at about.com - http://html.about.com/compute/html/mbody.htm - a readable guide for learning HTML, from basics on up to the tricky stuff.
Index dot HTML - http://www.blooberry.com/indexdot/html/index.html - The most thorough guide to HTML and browser implementation, ever.
Non-dithering Font Colors - http://www.lynda.com/hexh.html - A nice palette-style guide to colors, visually, in hex, and in RGB values
Named Font Colors - http://www.umd.edu/HTMLClasses/glossary.html#font - Though named colors are dangerous to use, here's a quick visual guide to some.

[ Back to top ] [ Author's Works ] [ Skein home ]