This document contains a list of style samples, paired with the HTML that produces them. It's just a quick reference to remind you of things you already knew but may have momentarily forgotten. For introductory material, click here .
John Kerl
June, 1997
Description | Sample | HTML | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bold | Bold text here. | <b>Bold text here.</b> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Italic | Italic text here. | <i>Italic text here.</i> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Typewriter text | Typewriter text here. | <tt>Typewriter text here.</tt> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Centered text |
|
<center>Centered text here.</center> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colored text |
Blue text here.
Blue bold text here. |
<font color="#0000FF">Blue text here.</font>
<font color="#0000FF"><b>Blue bold text here.</b></font> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Paragraph break |
Paragraph break (with a blank line) between this word
and the next. |
Paragraph break (with a blank line) between this word <p> and the next. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Carriage return |
Carriage return (with no blank line) between this word
and the next. |
Carriage return (with no blank line) between this word <br> and the next. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Hyperlink | This text is a hyperlink. | <a href="almost-blank.html"> This text is a hyperlink</a>. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Mailto | This text is a mailto. | <a href="mailto:kerl@emtek.com"> This text is a mailto</a>. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Pre-formatted text |
Pre-formatted text here. (Preserves line breaks, whitespace, etc., exactly as found in the HTML source. Useful when you have a text file that already looks nice & you don't want to have to go in and add the HTML markup tags to format it.) |
<pre> Pre-formatted text here. (Preserves line breaks, whitespace, etc., exactly as found in the HTML source. Useful when you have a text file that already looks nice & you don't want to have to go in and add the HTML markup tags to format it.) </pre> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bullet list |
Here is a bullet list:
|
<p>Here is a bullet list: <ul> <li> First item goes here. <li> Second item goes here. <li> Third item goes here. <li> Fourth item goes here. </ul> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Numbered list |
Here is a numbered list:
|
<p>Here is a numbered list: <ol> <li> First item goes here. <li> Second item goes here. <li> Third item goes here. <li> Fourth item goes here. </ol> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Horizontal lines |
|
<hr>
<hr size=10> <hr noshade size=1> <hr noshade size=4> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Table |
|
<TABLE BORDER=1 WIDTH=100%> <TR> <TH> Headers </TH> <TH> Go </TH> <TH> Here </TH> </TR> <TR> <TD> Contents </TD> <TD> go </TD> <TD> here </TD> </TR> <TR> <TD> Contents </TD> <TD> go </TD> <TD> here </TD> </TR> </TABLE> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Special characters
(See also: special-characters reference at UT Austin or this page at Penn State.) |
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Greek alphabet |
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Superscripts and subscripts |
x 1 2 +
x 2 2 +
x 3 2 = 7.
If you want to anything more complicated than this, I strongly suggest you use LaTeX. :) |
<i>x</i> <sub>1</sub> <sup>2</sup> + <i>x</i> <sub>2</sub> <sup>2</sup> + <i>x</i> <sub>3</sub> <sup>2</sup> = 7. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comments | (Do not appear on the page when displayed.) | <!-- Comment text goes here --> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Images |
<img src="patrick_stewart.jpg"
alt="Picture file is missing!" title="Bald is Beautiful"> Syntax:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Finally, here is an almost blank file that I sometimes use when I want to create a new page. I can copy this to the new file name, then put in whatever content I want that page to have. | (Click here to see it.) |
<HTML> <HEAD> <TITLE> This appears up in the title bar </TITLE> </HEAD> <BODY BGCOLOR ="#FFFFFF" LINK="#993333" VLINK="#888888" ALINK="#cc3333"> <H1> </H1> <H2> </H2> <H3> <CENTER> <FONT COLOR="#993333"> This appears at the top of the page </FONT> </CENTER> </H3> <p> Body goes here. </BODY> </HTML> |
Those are the features that I use the most often. As you can see, these are all simple building blocks; but you can use them to make some neat-looking pages. It is really easy!