HTML
Displayed below are samples of nearly all the HTML code out there. I could annotate each tag I list here, but frankly, I haven't the time to make an extremely comprehensive reference sheet of HTML tags and their attributes (properties). Nevertheless, this webpage that I've created for you should be at least a decent and fairly comprehensive resource for all you webmasters out there.

If you'd like a brief history of this section, read this. The HTML Workshop was created at the beginning of 1999 as a place where I randomly placed new HTML I was learning. It was a reference or library to which I could refer whenever I needed some code that I hadn't in my memory yet. There were buttons and text fields and random links and images all over the place. In 2000, I organized the mess into separate text areas (now tables) for others to use. There has been a lot for me to add since then, but the amount of material to put here is rather overwhelming. Hopefully, what I have here so far will suffice.

XHTML
By the way, we were at HTML version 4.01 when I created this section, (and we still are). You may have come across the term "XHTML", which is essentially a stricter version (by XML's rules) of HTML, with differences like stricter rules about...

- closing your tags: <p>your face</p> instead of <p>your face, and <br /> instead of <br>, and <img /> instead of <img>
- using only lowercase tags: <body> instead of <BODY>
- sandwiching your nested tags: <b><u>still your face</u></b> instead of <b><u>still your face</b></u>
- placing quotes around attributes: <p align="right"> instead of <p align=right>

(If you already code your HTML like this, wonderful. I almost do, except for the next part. The quirky part is getting used to closing single tags like <br />. Sorry, I didn't make up the rules.) XHTML is the successor of HTML, and it's currently a parallel standard coexisting with HTML for smoother transitions into the future. There's a little more to the whole XHTML story, but all you need to know is that HTML is probably not going to disappear ever. But for those who fancy XHTML, just know that once you know HTML, you pretty much know XHTML. So get cracking and hacking!

[Last major content updates: 1999-2000; Last introduction text update: 2004;]

Background Features

The Body Tags

<body

bgcolor="beige" <-- (Background color of page)
background="image.gif" <-- (Image as background wallpaper if you want one)
bgproperties="fixed" <-- (How the background wallpaper is shown...either as fixed in place while scrolling or not)

link="blue" <-- (Color of a link that hasn't been clicked recently)
vlink="purple" <-- (Color of a link that has been clicked recently)
alink="white" <-- (Color of a link while it's still selected after being clicked)

text="black" <-- (Color of the text on the page unless specified with font tags)

marginheight="0" <-- (Margins at top and bottom of page)
marginwidth="0" <-- (Margins at left and right of page)

topmargin="0" <-- (Margin at top of page)
leftmargin="0" <-- (Margin at left of page)
rightmargin="0" <-- (Margin at right of page)
bottommargin="0" <-- (Margin at bottom of page)
>

Background Music

Title Bar Text

<title>This Text Goes In The Title Bar of Your Browser Window</title>

Font Features

The Font Tags

<font

face="times new roman,comic sans ms,helvetica" <--If the visitor's computer can't read the first font, it will try to read the second or the ones afterwards.

size=3 <--Font size is defined from a scale of 1 to 7, 1 being the largest.
-OR-
size=+0

color=white
-OR-
color=#000000
-OR-
color=000000
>

* For more on color names and color hex codes, click here.
* For the <font style='...... part, refer to my CSS section.

Font Scale

Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7
Font Size -2
Font Size -1
Font Size +0
Font Size +1
Font Size +2
Font Size +3
Font Size +4

Formatted Text

<b> bold <b> <--Bold Text
<i> italics </i> <--Italic Text
<u> underlined </u> <--Underlined Text
<sup> superscript </sup> <--Super^script Text
<sub> subscript </sub> <--Sub_script Text
<strike> strikeout </strike> <--~~Strikeout~~ Text

Image Features

Image Tags

<img src="picture.gif"
alt="This text will show up in the image placeholder while the image loads."
title="This text will show when you hold the mouse cursor over the image."
height="100"
width="200"
border="2"
align="right"
hspace="1"
vspace="3">

- OR, the XHTML version -

<img src="picture.gif" />

Link Features

Links

<a href="index.html"
title="This text appears in the tooltip box when you hover and pause the mouse cursor over the link."
target="blank">Link</a>

(You can also use style="" and class="". See the CSS section for more info.)

Jump Links

<a href="#whee">Click here to jump to the "Whee" section.</a>

<a name=whee>
This is the "Whee" section.

"Top of Page" Jump Link

<a href="#top">Click here to jump to the top of this page.</a>

<a tabindex="1" href="something.html">Hit 'tab' key once to select this link</a>
<a tabindex="2" href="something.html">Hit 'tab' key a 2nd time to select this link</a>
<a tabindex="3" href="something.html">Hit 'tab' key a 3rd time to select this link</a>

Table Features

Table

<table bgcolor="white" border="2" bordercolor="red" cellpadding="3" cellspacing="2" width="320" height="400" align="right">
<tr colspan="2" rowspan="1">
<td valign="top" align="center" bgcolor="green" width="52" height="20">
This is the content of the table.
</td>
</tr>
</table>

Table Header

<table>
<th>Header!</th>
<td valign="top" align="center" bgcolor="green" width="52" height="20">
This is the content of the table.
</td>
</table>

Form Features

The Form Tags

<form method="post" action="mailto:gordon@gordeonbleu.com">
</form>

All the checkboxes, textfields, radio buttons, etc. go between these tags.

Drop-down Options Box

<select name="">
<option>Option 1
<option>Option 2
<option>Option 3
</select>

- OR -

<select name="">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

Checkbox

<input type="checkbox"

value="This text will show up in the textfield and can be edited by the user."
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you">

Radio Button

<input type="radio"

value="whatever_goes_in_here_labels_this particular_radio_button"
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you">

Small Text Box (Text Field)

<input

size="13"
maxlength="50"
value="This text will show up in the textfield and can be edited by the user."
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">

(Size defines the length of the text field.)
(Maxlength defines the maximum length of text that the user inputs.)

Large Textbox (Text Area)

<textarea cols=100
rows=5
name="whatever_goes_in_here_shows_up_as_a_label_for_the_form_results_sent_to_you"
class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">

Text that goes here will appear in the textarea, and users can edit it.
</textarea>

(I put a space inside the tag in the last line to prevent it from being hidden. Remove it before you use this tag.)

Submit Button

<input type="submit" value="Send"

class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">

Reset Button

<input type="reset" value="Erase"

class="see_my_css_section_to_read_more_on_customizing_colors_and_fonts_of_textareas">

Scroll Box

<select name="Bathroom colors" size="5" multiple>
<option>White
<option>Red
<option>Green
<option>Black
<option selected>Bronze
<option>Copper
<option>Coral
<option selected> Olive Green
<option>Cyan
<option>Yellow
</select>

Spacing and Alignment

Next Line (Carriage)

<br>

- OR, the XHTML version -

<br />

New Paragraph

Paragraph Alignment: Left, Center, Right, and Justify

Blockquote Text (Justify)

<blockquote>text</blockquote>

Center Text

<center>text</center>

List Items (Bullets)

<li>Bullet 1
<li>Bullet 2
<li>Bullet 3

or

& + # + 1 + 8 + 3 + ;
(all together without plus signs)

- OR, to be more proper -

<li>Bullet 1</li>

Unordered Lists

<ul>
All this text is indented to the right.
</ul>

Ordered Lists

<ol>
<li>This text will be
<li>Numbered in order
</ol>

Horizontal Rule (Horizontal Line Divider)

<hr color="gray" size="2" width="100%" align="center" noshade>

- OR, the XHTML version -

<hr />

Definition Lists

<dl>
<dt>List Item 1 Title</dt>
<dd>This is a description of list item 1.</dd>
</dl>

MetaTags

Description of website when found by search engine (unless search engine ignores metatags)

Keywords for search engine

Author for search engine

Redirect Code

Other

Marquee ("Scrolling Text" Ticker)

<font size="3" color="white">
<marquee bgcolor="black" width="300" height="14" direction="up" loop="2" behavior="slide" scrollamount="100">
This is a scrolling marquee, and it is not supported by all web browsers (example: older versions of Netscape)m as it is a proprietary tag.
</marquee>
</font>

How to show HTML tags:

Put the 4 characters in each combination together with no spaces in between. I put spaces only so that I could show these combinations. Other wise they would show us as < and >.



& l t ;  =  <

& g t ;  =  >

How to make consecutive HTML spaces (nbsp - nonbreaking spaces):

Put the 4 characters in each combination together with no spaces in between. I put spaces only so that I could show these combinations. Putting multiple spaces (by Spacebar) in a row in your code will interpreted as only once space. That's why nbsp is useful.



& n b s p ;

Frames

<frameset rows="50,*">
<frame name="navigate" src="//www.google.com" scrolling = "no" marginheight=1 resize>
<frame name="partner" src="//www.yahoo.com" scrolling = "yes" marginheight=1 noresize>
</frameset>

<noframes>
If the visitor's browser doesn't support frames, whatever you put here will be shown.
</noframes>

Image Maps

Embed Music on Page

Font Scale
Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7	Font Size -2 Font Size -1 Font Size +0 Font Size +1 Font Size +2 Font Size +3 Font Size +4