Hot and Fresh HTML Help!
Hot and Fresh HTML Help!
Ok, HTML is a "markup language" which means you take plain old english, and add a bunch of goobers to it to make it look like what it's supposed to. You can't use the full set of markup tags (goobers) in the Tastytronic Diner, but you do get to use a powerful subset of them:
<a> <b> <blockquote> <br> <cite> <div> <em> <i> <li> <ol> <p> <pre> <strong> <tt> <ul> <person> <proj> <blink>Before we get started I want to remind you to use the "preview" button to make sure your HTML tags have been entered properly, since you basically can't change posts to Entrees once they're posted. Also, I have to do special mumbo-jumbo to make those symbols show up on the page -- normally they just disappear; they prefer to work behind the scenes and get angry when I make them stand up on stage like this. In most cases, you should be able to use greater-than and less-than symbols in your posts without a problem. Just be sure to preview the post to make sure.
I think we'd all find things like bold text and italics useful, so I'm going to explain them for you first.
To type something in bold, put <b> </b> around it, like so: <b>I'M BOLD</b> You can also make bold text using <strong>
To type something in italics, put <i> </i> around it, like so: <i>I'M IN ITALICS!</i> You can also make italics with <em> or <cite>
Aside: The alternate tags, <strong>, <em>, <cite> ensure device independence. This means that if a blind person is using a reader to 'view' the Tastytronic Diner, their reader will properly translate <strong and <em> into the proper empahsis and designate <cite> as a bibliographic cite. Whereas <b> and <i> are text-dependent.
If you cant to link to another page or site in your musings, you need to use <a> and </a>. This is the anchor tag and allows you to hyperlink to elsewhere on the internet. If you wanted to link to Lileks.com, you do like so: <a href="http://lileks.com">I'm a link to Lileks </a>. The text enclosed by the <a> and </a> will be underlined and linked. Easy, right?
Now let's talk about breaking up text. <br> will put a single line break where you put it down (you don't need to "pair" the br tag). <p> will break up paragraphs if you are typing lots of text. Include <p> at the beginning of the paragraph (except for the first one) and it will put a blank line between your paragraphs. <p> also has other fun options for alignment and style which are covered in brief below. If you wanted to quote someone's wonderful writings and have them indented nicely, then you would use the tasty <blockquote> tag. Like so:
<blockquote>In response to the huge demand for some kind of community-oriented bulletin board, Tastytronic Industries CEO and President Peter A. Peterson II today revealed the Tastytronic Diner -- an online bulletin-board for users, fans, and enemies of Tastytronic Industries to sit down over strawberry pancakes and talk out their plans and/or shoot the breeze.</blockquote>Other tags for text formatting include <pre>, which allows you to insert pre-formatted text like ascii art of figlets. <tt> will do a "typewriter" font (monospaced), which is similar to <pre> but it does not preserve your formatting. Here is an example of <pre>:
<pre> ____ _ | __ ) __ _ ___ ___ _ __ | | | _ \ / _` |/ __/ _ \| '_ \| | | |_) | (_| | (_| (_) | | | |_| |____/ \__,_|\___\___/|_| |_(_) </pre>Let's move on to a more advanaced topic - lists! There are two types of HTML lists -- ordered and unordered. An unordered list is enclosed by <ul> and </ul> Ordered lists are enclosed by <ol> and </ol> Each item in the list is preceded by <li> You do not need to include </li> after each list item. You can include other HTML tags in your lists if you so desire. Let's look at two example. The code to generate the list will precede each list.
This is code for an unordered list.<ul> <li> Eggs <li> Bacon <li> <strong>Sausage!</strong> <li> Coffee <li> Danish </ul>This is what the above code will look like:Here is the code for an ordered list.
- Eggs
- Bacon
- Sausage!
- Coffee
- Danish
<ol> <li> Superior <li> Michigan <li> Erie <li> Huron </ol>Here is what an ordered list looks like.
- Superior
- Michigan
- Erie
- Huron
Note that you can also change the type of numbers that an ordered list uses by adding a type like so: <ol type="i"> This will make on ordered list using lower-case roman numerals. "A" and "a" will use english leters, "I" and "i" will use roman numerals. Arabic numerals are used by default.
Moving right along, let's talk briefly about some of the fun things you can do with <div> and <p>. <div> is a powerful tag that lets you break up sections of an HTML document. For our purposes, it's pretty much interchangeable with <p>. You can do basic alignment of a block of text like so: <div align="center">CENTERED TEXT</div>. You can also add styles to the text, with either tag (allowing for all kinds of fun with color and size), but I'll leave that as an excercise to the reader.
Finally, there are the special tags that are used by mod_virgule (the funky software that runs this crazy diner). You can link directly to people's diaries by using the <person> tag, like this: <person>crackmonkey </person> You can also link directly to an entree; using <proj> in the same way as above.
P.S. If you really want to, you can use <blink> to make the enclosed text blink, but I don't receommend that one.