DrQu+xum's Basic HTML primer

For posting at the Mornington Crescent Websites

(Also useful for determining what your browser can do)


Really Simple Stuff to allow you to play 99.9% of all games

What you want What you type What you get
Boldface <b>Text</b> Text
Italics <i>Text</i> Text
Underline <u>Text</u> Text
Large type (simple) <big>Text</big> Text
Small type (simple) <small>Text</small> Text
Fixed width type <tt>Text</tt> Text
Hyperlink <a href="http://parslow.com/mornington">MCiOS</a> MCiOS
Horizontal line <hr>
New line <br>
New paragraph with spacing <p>Whole paragraph</p>

Whole paragraph


Some more interesting stuff if you want to make/break friends and influence/irritate people

* denotes a tag which shouldn't be used for normal posting, as it causes annoyance.
What you want What you type What you get
Superscript type Text<sup>Text</sup> TextText
Subscript type Text<sub>Text</sub> TextText
Stricken type <strike>Text</strike> Text
*Blinking type <blink>Text</blink> Text
*Scrolling Type <marquee>Long line of text</marquee> Long line of text
Inline image <img src="pics/mc-logo.png">
Numbered list <ol type="1"><li>First item<li>Second Item</ol>
  1. First item
  2. Second Item
Roman Numeral list <ol type="I"><li>First item<li>Second Item</ol>
  1. First item
  2. Second Item
Bulleted list <ul><li>First item<li>Second Item</ul>
  • First item
  • Second Item
*Preformatted text <pre>Text text text.
More text text.
More more text.</pre>
Text text text.
More text text.
More more text.

Nesting HTML Tags

HTML tags can be put one inside each other in order to combine effects. Keep it down, though, as too much of it can make you look like a dork.
What you want What you type What you get
Bold & italic type <b><i>Text</i></b> Text
Big type with some fixed-width in-between <big>Text <tt>Other text</tt> More text</big> Text Other text More text
A mathematical formula <i>e<sup>i&pi;</sup>+1=0</i> e+1=0
Scrolling image <marquee><img src="http://mustela.phyast.pitt.edu/pics/noo.gif"</marquee>
Just a bunch of effects* <u>Don<blink>'t t</u>ry t<b>his </blink>at </b>home. Don't try this at home.

Be nice to everyone...make sure you close all of your tags.
*-This is not guaranteed to work on all browsers.

The Almighty Font Tag!

The <font> tag has three major modifiers: "color", "size", and "face".
<font size="n">, where n is either a number from 1 to 7 or from -2 to +4, determines the size of the type. A number without a sign is absolute (regular type is 3), whereas a number with a sign is relative to the current size.
What you want What you type What you get
Largest font possible <font size="7">Text</font> Text
Normal size font <font size="3">Text</font> Text
Smallest font possible <font size="1">Text</font> Text
Font two sizes bigger <font size="+2">Text</font> Text
Font one size smaller <font size="-1">Text</font> Text

<font color="#rrggbb"> determines the color of the text. "rr", "gg", and "bb" are three hexadecimal numbers denoting the level of red, green, and blue in the color. Having none of a level is "00", a small amount is "40", a medium amount is "80", a large amount is "C0", and the full amount is "FF". Note that any hexadecimal number from "00" to "FF" is possible, thus allowing for 16.7 million colors (for those of you who really want to know: 224=16,777,216)
Some browsers will interpret the name of a common color; this is not always standard. Click here for a list of colors.
What you want What you type What you get
White text <font color="#FFFFFF">Text</font> Text
Green text <font color="#00FF00">Text</font> Text
Navy blue text <font color="#000080">Text</font> Text
Orange text <font color="#FF8000">Text</font> Text
Lilac text <font color="#B080FF">Text</font> Text
Puce text <font color="#913668">Text</font> Text
Red text (by name) <font color="red">Text</font> Text

<font face="font 1,font 2"> determines the font. You should be aware that not everyone has every font; for politeness, use one of the three major font selections listed below. You may use a list of fonts (as below), but it should be sufficient (and sometimes preferable) to specify "Sans Serif", "Serif", or "Monospace" alone.
What you want What you type What you get
Sans Serif text <font face="Sans Serif, Helvetica, Arial">Sans Serif Text</font> Sans Serif Text
Serif text <font face="Serif, Times, Times New Roman">Serif Text</font> Serif Text
Fixed-width text <font face="Monospace, Courier New, Courier">Fixed-Width Text</font> Fixed-Width Text

The color, face and size modifiers can exist in the same tag.
What you want What you type What you get
Big blue text (by name) <font color="blue" size="7">Text</font> Text
Little gray text (by number) <font color="#808080" size="1">Text</font> Text
Fairly large italicised hampster text (by number) <i><font color="#8B4513" size="5">Text!</font></i> Text!
Smaller-than-normal boldfaced Serif text <b><font size="-1" face="Serif">Text?</font></b> Text?
Larger-than-normal purple Sans Serif text <font size="+2" face="Sans Serif" color="purple">More text</font> More text


Making Special Characters

Some characters not found on normal keyboards can be made with special codes. Note that not all browsers will support these characters.
Typographical, mathematical and currency Capital diacritical characters Small diacritical characters
What you want What you type What you get What you want What you type What you get What you want What you type What you get
Ampersand &amp; & A+acute &Aacute; Á a+acute &aacute; á
Less than/left angle bracket &lt; < A+grave &Agrave; À a+grave &agrave; à
Greater than/right angle bracket &gt; > A+circumflex &Acirc; Â a+circumflex &acirc; â
Non-breaking Space &nbsp;   A+umlaut &Auml; Ä a+umlaut &auml; ä
Pound &pound; £ A+tilde &Atilde; Ã a+tilde &atilde; ã
Euro &euro; A+circle, Ångstrom &Aring; Å a+circle &aring; å
Cent &cent; ¢ AE ligature &AElig; Æ ae ligature &aelig; æ
Yen &yen; ¥ C+cedilla &Ccedil; Ç c+cedilla &ccedil; ç
Copyright &copy; © E+acute &Eacute; É e+acute &eacute; é
Registered Trademark &reg; ® E+grave &Egrave; È e+grave &egrave; è
Trademark &trade; E+circumflex &Ecirc; Ê e+circumflex &ecirc; ê
Degrees &deg; ° E+umlaut &Euml; Ë e+umlaut &euml; ë
Micro (lower case mu) &micro; µ I+acute &Iacute; Í i+acute &iacute; í
Plus/Minus &plusmn; ± I+grave &Igrave; Ì i+grave &igrave; ì
Multiplication &times; × I+circumflex &Icirc; Î i+circumflex &icirc; î
Division &divide; ÷ I+umlaut &Iuml; Ï i+umlaut &iuml; ï
Infinity &infin; Eth &ETH; Ð eth &eth; ð
Pi (lower case) &pi; π N+tilde &Ntilde; Ñ n+tilde &ntilde; ñ
One Quarter &frac14; ¼ O+acute &Oacute; Ó o+acute &oacute; ó
One Half &frac12; ½ O+grave &Ograve; Ò o+grave &ograve; ò
Three Quarters &frac34; ¾ O+circumflex &Ocirc; Ô o+circumflex &ocirc; ô
Square &sup2; ² O+umlaut &Ouml; Ö o+umlaut &ouml; ö
Cube &sup3; ³ O+tilde &Otilde; Õ o+tilde &otilde; õ
Radical/Square Root &radic; O+slash &Oslash; Ø o+slash &oslash; ø
Per Thousand &permil; OE ligature &OElig; Œ oe ligature &oelig; œ
Ellipsis &hellip; S+caron &Scaron; Š s+caron &scaron; š
Section Mark &sect; § sz ligature &szlig; ß
Paragraph Mark &para; U+acute &Uacute; Ú u+acute &uacute; ú
Carriage Return Mark &crarr; U+grave &Ugrave; Ù u+grave &ugrave; ù
Dagger &dagger; U+circumflex &Ucirc; Û u+circumflex &ucirc; û
Double Dagger &Dagger; U+umlaut &Uuml; Ü u+umlaut &uuml; ü
Bullet &bull; Y+acute &Yacute; Ý y+acute &yacute; ý
Inverse Question Mark &iquest; ¿ Y+umlaut &Yuml; Ÿ y+umlaut &yuml; ÿ
Inverse Exclamation Mark &iexcl; ¡ Thorn &THORN; Þ thorn &thorn; þ
Spade &spades;
Club &clubs;
Heart &hearts;
Diamond &diams;
Advanced mathematical characters Capital Greek letters Small Greek letters
What you want What you type What you get What you want What you type What you get What you want What you type What you get
Summation &sum; Alpha &Alpha; Α alpha &alpha; α
Product &prod; Beta &Beta; Β beta &beta; β
Angle &ang; Gamma &Gamma; Γ gamma &gamma; γ
Perpendicular &perp; Delta &Delta; Δ delta &delta; δ
Proportional &prop; Epsilon &Epsilon; Ε epsilon &epsilon; ε
Integral &int; Zeta &Zeta; Ζ zeta &zeta; ζ
Partial differential &part; Eta &Eta; Η eta &eta; η
Similar &sim; Theta &Theta; Θ theta &theta; θ
Approx. equal to &cong; theta (alternate) &thetasym; ϑ
Almost equal to &asymp; Iota &Iota; Ι iota &iota; ι
Equivalence/Identity &equiv; Kappa &Kappa; Κ kappa &kappa; κ
Not equal &ne; Lambda &Lambda; Λ lambda &lambda; λ
Less than or equal to &le; Mu &Mu; Μ mu &mu; μ
Greater than or equal to &ge; Nu &Nu; Ν nu &nu; ν
Subset &sub; Xi &Xi; Ξ xi &xi; ξ
Superset &sup; Omicron &Omicron; Ο omicron &omicron; ο
Subset or equal &sube; Pi &Pi; Π pi &pi; π
Superset or equal &supe; pi (alternate) &piv; ϖ
Not subset &nsub; Rho &Rho; Ρ rho &rho; ρ
Intersection/Setwise and &cap; Sigma &Sigma; Σ sigma &sigma; σ
Union/Setwise or &cup; sigma (final) &sigmaf; ς
Logical and &and; Tau &Tau; Τ tau &tau; τ
Logical or &or; Upsilon &Upsilon; Υ upsilon &upsilon; υ
Is part of &isin; upsilon (alternate) &upsih; ϒ
Isn't part of &notin; Phi &Phi; Φ phi &phi; φ
Contains &ni; Chi &Chi; Χ chi &chi; χ
"For All" &forall; Psi &Psi; Ψ psi &psi; ψ
"There Exists" &exist; Omega &Omega; Ω omega &omega; ω
"Therefore" &there4;
Null set &empty;
Complex real part &real;
Complex imaginary part &image;
Transfinite cardinal &alefsym;

Now, go to it!

MCiOS
Mornington Crescent In Outer Space
OrangeMC
Orange MC
MC5
mc5

2004,
DrQu+xum. Distribution of this document is permitted as long as the copyright notice and revision history remain intact.
This entire page written in vi. Yes, I am hardcore.
Thanks to: MCiOS logo 2004,1997 Dan. Orange MC logo 2003 Dunx. MC5 logo 2003 Projoy & rab.
Revision History: