HTML Workshop - The HTML - GordeonBleu

The HTML

HTML
Displayed below are samples of nearly all the HTML tags 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
- Background Music

Font Features
- The Font Tags
- Formatted Text

Page Structure

Image Features
- The Image Tags

Links Features

Table Features

Form Features

Spacing and Alignment

MetaTags

Other Text Features

Other Page Display Features

Externally Linked

Proprietary Tags
- Marquee ("Scrolling Text" Ticker)
- Blink Tags

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

Font Features

* For more on color names and color hex codes, click here.
* For the <font style='...... part, refer to my CSS section.
* For more on the differences between point, pixel, em, and % font sizes, see the Sizes 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 (Presentational)
<i> italics </i> ← Italic Text (Presentational)
<u> underlined </u> ← Underlined Text
<sup> superscript </sup> ← Super^script Text
<sub> subscript </sub> ← Sub_script Text
<strike> strikeout </strike> ← Strikeout Text
<s> strikeout </s> ← Strikeout Text
<tt> teletype </tt> ← Teletype Monospace Text (Presentational)
<big> big <big> ← BIG Text (Presentational)
<small> small <small> ← small Text (Presentational)

<strong> bold </strong> ← Strong Emphasis Text (Structural)
<em> italics </em> ← Emphasis Text (Structural)

Page Structure

Doctype

HTML 4.01 Strict
Allowed: All HTML elements and attributes
Disallowed: Presentational or deprecated elements (like font tags); framesets

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>GordeonBleu</title>
</head>
<body>
<p>Gordon Mei
</body>
</html>

HTML 4.01 Loose
Allowed: All HTML elements and attributes, including presentational or deprecated elements (like font tags)
Disallowed: Framesets

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>GordeonBleu</title>
</head>
<body>
<p>Gordon Mei
</body>
</html>

HTML 4.01 Frameset
Allowed: All HTML elements and attributes, including presentational or deprecated elements (like font tags); Framesets
Disallowed: None

<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>GordeonBleu</title>
</head>
<frameset rows="50,*">
<frame name="navigate" src="pageheaderwithfiftyheight.html">
<frame name="partner" src="pagebodywithflexibleheight.html">
</frameset>
</html>

XHTML 1.0 Strict
Allowed: All HTML elements and attributes
Disallowed: Presentational or deprecated elements (like font tags); framesets
Requirements: Markup must be written in well-formed XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GordeonBleu</title>
</head>
<body>
<p>Gordon Mei</p>
</body>
</html>

XHTML 1.0 Transitional
Allowed: All HTML elements and attributes, including presentational or deprecated elements (like font tags)
Disallowed: Framesets
Requirements: Markup must be written in well-formed XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GordeonBleu</title>
</head>
<body>
<p>Gordon Mei</p>
</body>
</html>

XHTML 1.0 Frameset
Allowed: All HTML elements and attributes, including presentational or deprecated elements (like font tags); framesets
Disallowed: None
Requirements: Markup must be written in well-formed XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GordeonBleu</title>
</head>
<frameset rows="50,*">
<frame name="navigate" src="pageheaderwithfiftyheight.html" />
<frame name="partner" src="pagebodywithflexibleheight.html" />
</frameset>
</html>

XHTML 1.1
Allowed: All HTML elements and attributes
Disallowed: Presentational or deprecated elements (like font tags); framesets
Requirements: Markup must be written in well-formed XML
Additional: Unlike XHTML 1.0 Strict, allows adding modules

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GordeonBleu</title>
</head>
<body>
<p>Gordon Mei</p>
</body>
</html>

HTML 5
Notes: Backwards-compatible with XHTML and HTML

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>GordeonBleu</title>
</head>
<body>
<p>Gordon Mei
</body>
</html>

HTML Head, Body, and Title Bar Text

<html>
<head>
<title>This text goes in the title bar of your browser window</title>
</head>

<body>
</body>
</html>

Divs and Spans

<div>
This has non-semantic, but it allows you to group block elements.
<span>
Neither is this, but it allows you to style or implement interaction on inline elements.
</span>
</div>

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Image Features

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.)

Anchor Links

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

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

"Top of Page" Anchor Link

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

Link Button

E-mail to:

Tab Index Key

<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>

Base

<head>
<base href="http://www.gordeonbleu.com" target="_top" />
</head>

<body>
<a href="somepage.html">This page will inherit gordeonbleu.com/somepage.html as the URL.</a>
</body>

Table Features

Table

<table bgcolor="white" border="2" bordercolor="purple" cellpadding="3" cellspacing="2" align="right" width="300" height="400" summary="Top full-width bar with two columns below. This is how we built layouts in the olden days.">
<caption>A sample table</caption>
<tr>
<td colspan="2" rowspan="1" valign="center" align="center" bgcolor="pink" width="50" height="20">
I am two columns wide.
</td>
</tr>
<tr>
<td width="50%">
My left foot.
</td>
<td width="50%">
Will always be better than the right one.
</td>
</tr>
</table>

Table Header, Body, and Footer

<table>
<thead>
<tr>
<th>Day of the Week</th>
<th>Attendance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sunday</td>
<td>52</td>
</tr>
<tr>
<td>Monday</td>
<td>55</td>
</tr>
</thead>
<tfoot>
</tfoot>
</table>

Table Scope

<table>
<thead>
<tr>
<th></th>
<th scope="col">Day of the Week</th>
<th scope="col">Attendance</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1.)</td>
<td>Sunday</td>
<td>52</td>
</tr>
<tr>
<td scope="row">2.)</td>
<td>Monday</td>
<td>55</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

Table Columns

<table>
<thead>
<col width="60" />
<col width="40" />
<col width="30" />
<tr>
<th>Notes</th>
<th>Day of the Week</th>
<th>Attendance</th>
</tr>
</thead>
<tbody>
<tr>
<td>This column</td>
<td>Sunday</td>
<td>52</td>
</tr>
<tr>
<td>will have</td>
<td>Monday</td>
<td>55</td>
</tr>
<tr>
<td>a width of 60</td>
<td>Tuesday</td>
<td>85</td>
</tr>
<tr>
<td>but it should be done with CSS</td>
<td>Wednesday</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

Table Column Groups

<table>
<colgroup span="2"></colgroup>
<colgroup align="center"></colgroup>
<thead>
<tr>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
<th>Column 3 Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1 part of colgroup spanning 2 columns</td>
<td>Column 2 part of colgroup spanning 2 columns</td>
<td>Column 3 on its own</td>
</tr>
<tr>
<td>Column 1 part of colgroup spanning 2 columns</td>
<td>Column 2 part of colgroup spanning 2 columns</td>
<td>Column 3 on its own</td>
</tr>
<tr>
<td>Column 1 part of colgroup spanning 2 columns</td>
<td>Column 2 part of colgroup spanning 2 columns</td>
<td>Column 3 on its own</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</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 Menu (Select)

<select name="">
<optgroup label="American Cities">
<option value="newyork">New York</option>
<option value="sanfrancisco">San Francisco</option>
<option value="seattle">Seattle</option>
<optgroup label="Canadian Cities"> <option value="toronto">Toronto</option>
<option value="vancouver">Vancouver</option>
<option value="Calgary">Calgary</option>
</select>

- OR -

<select disabled="disabled" name="">
<option value="newyork">New York</option>
<option value="sanfrancisco">San Francisco</option>
<option value="seattle">Seattle</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">

Single-Line Text Field

<input

type="text"
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.)

Multi-Line Textbox (Textarea)

<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">

Button

<button type="button">Button Nose</button>
<button type="submit">Button Nose</button>
<button type="reset">Button Nose</button>

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>

Fieldsets, Legends, and Labels

<form>
<fieldset>
<legend>Login Information</legend>
<label for="inputuser">Username:</label>
<input type="text" name="username" id="inputuser" />
<label for="inputpass">Password:</label>
<input type="password" name="password" id="inputpass" />
</fieldset>
</form>

Spacing and Alignment

Next Line (Carriage)

<br>

- OR, the XHTML version -

<br />

New Paragraph

Paragraph Alignment: Left, Center, Right, and Justify

Blockquote Text

<blockquote>text</blockquote>

Centered Text

<center>text</center>

List Items (Bullets)

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

- OR, to be less proper, depending on doctype -

<li>Bullet 1

Unordered Lists

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

Ordered Lists

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

Directory Titles

<dir>
<li>John</li>
<li>Paul</li>
<li>Ringo</li>
<li>George</li>
</dir>

<menu>
<li>Chocolate Shake</li>
<li>Strawberry Shake</li>
<li>Vanilla Shake</li>
<li>Combo Shake</li>
</menu>

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>

Abbreviations

I love to watch the <abbr title="British Broadcasting Corporation">BBC</abbr> in the evenings.

Acronym

It used to be that everyone wanted to work for <acronym title="National Aeronautics and Space Administration">NASA</acronym>.

Address

<address>
P. Sherman
Address: 42 Wallaby Way, Sydney, Australia
Phone: (02) 5551 5678
</address>

Citations and Short Quotations

There is a short quotation by <cite>Epictetus</cite> that reads:
<q lang="en-us">It is impossible for a man to learn what he thinks he already knows.</q>

Deleted and Inserted Text

The first person to set foot on the moon was <del cite="http://gordeonbleu.org" datetime="1998-11-22 07:58:12">Louis Armstrong</del> <ins cite="http://gordeonbleu.org" datetime="1998-11-22 07:58:12">Neil Armstrong</ins>.

Definition Term

<dfn>Kerning</dfn> involves increases the space based on character pairs, and <dfn>tracking</dfn> increases the space between characters evenly.

Code, Keyboard Text, Sample Output, and Variables

<code>var <var>someVariable</var> = document.getElementById("badgeIdPlease");</code>
Kids, please refrain from typing <kbd>sudo rm -rf *</kbd> in your terminal.
I'm getting the output <samp>-bash: entergodmode: command not found</samp> in my terminal.

Preformatted Text

<pre>

This text will be displayed by default in a
fixed-width (monospace) font (Courier New, Courier, Monaco, Consolas...),
and will show any    s p a c e s and
line
breaks.

</pre>

Bidirectional Override

<bdo dir="rtl">Replace this with right-to-left (rtl) text, like Arabic.</bdo>

Metadata

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

Keywords for search engine

Author for search engine

HTTP Page Redirect

Other

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 ;

Image Maps

Embedded Object

<object width="550" height="400">
<param name="flashandthings" value="flashgordon.swf" />
<embed src="flashgordon.swf" width="640" height="480">
</embed>
</object>

Used to embed Flash, Java applets, ActiveX, and other browser plugin-based media.

Embed Music on Page

Applets

<applet code="bitsofjava.class" width="640" height="640">
I am a Java applet.
</applet>

HTML Comments

<div>
<!--HTML comments do not show up on the page, but appear in the source code. This makes them useful for extra annotating of your code.-->
<span>I can eat peaches all day.</span>
</div><!--They can appear anywhere in the page.-->

Externally Linked

Javascript (script of type Javascript)

Inline Javascript:

<head>
<script type="text/javascript">
document.write("This is very basic Javascript written inline in the HTML document.")
</script>
<noscript>
This part will run if the user does not have Javascript available.
</noscript>
</head>

Externally Linked Javascript:

CSS (style)

Inline Styles:

<head>
<style type="text/css">
@import url("evenmorestyles.css");
body {background-color:#aaccff;}
p {margin:1em 0;}
</style>
</head>

Externally Linked Stylesheet:

Link Tag

Inline Frame (iframe)

<iframe src="pageinapage.html">
This appears if iframes aren't available to the user.
</iframe>

Frames

<frameset rows="50,*">
<frame name="navigate" src="pageheaderwithfiftyheight.html" scrolling="no" marginheight="1" resize>
<frame name="partner" src="pagebodywithflexibleheight.html" scrolling="yes" marginheight="1" noresize>
</frameset>

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

- OR -

<frameset cols="20,*,20">
<frame name="western" src="pageleftnavwithtwentywidth.html" scrolling="no" frameborder="0" resize>
<frame name="central" src="pagecenterwithflexiblewidth.html" scrolling="yes" noresize>
<frame name="eastern" src="pagerightnavwithtwentywidth.html" scrolling="no" marginwidth="1" resize>
</frameset>

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

Proprietary

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>

Blink Tags

<blink>Road Work Ahead</blink>

The HTML Workshop