The How To Guide To Learning HTML

Introduction:

This informational resource is designed to teach you everything you need to know so that you can begin building your own customized web pages in standard HTML 4. HTML stands for Hypertext Markup Language and is the standard language that browsers and web servers understand. It was designed to present and format text on screen and does just that.

In order to begin you need to have some HTML tags (tags henceforth) that tell the computer that the page is written in HTML.

Here is an extremely basic web page.

</HEAD>

Welcome!

</BODY>

</HTML>

Notice that  was used. These are known as comment tags. Anything within  will not be processed by the web server in an HTML page. The page above would simply display:

Welcome!

Now let's get into making those web pages more interesting than just a simple message. But first we need to continue our look at some technical aspects of the HTML language and document.

Top-level Elements:

All tags are enclosed in brackets <> and closed with a /tagname i.e. <HTML> </HMTL>

<html>

Everything within this tag is part of the HTML document. There are two standard pieces to the document (see below). The tag is closed with </HTML>

<head>

The header information for the document including metadata like title, keywords, scripts (see below), and style sheets (see below). Closed with </HEAD> or a preceding <BODY> tag. Below is a list of tags normally used in the Header area:

Style – Can be used to define styles for text, background and links throughout the entire document (see below).
Title – This is the name of the document. Generally it will show up in the browser's title bar. It is highly suggested. <title>HTML 4 Overview</title>
Meta – A tag with multiple attributes that holds information about the document itself. The tag has a multi-part structure including the name, language and content. Commonly used for document description, keywords, author, etc.

Example: <META name="Author" lang="en" content="Christophor Rick">

An example of a complex <HEAD> area of an HTML document.

<HEAD>

<TITLE>HTML 4 Overview</TITLE>

</HEAD>

<body>

The document body. Everything within the body tag will be rendered by the web server (except for comments, see above). The tag has attributes that are defined for the whole page. The tag is closed with </body>

Attributes of the Body Tag: Attributes define particular parts within a tag. These will be applied to the entire page but can be overridden by using some text-specific tags later.

Background – An image to be used as the back. background="http://www.example.com/imagefile"
Bgcolor – May be used instead of or in conjunction with the background tag. Can use specific web-safe color names or hexidecimal codes for colors. bgcolor="Blue" or bgcolor="#000000" Color names are case-sensitive with the first letter capitalized. Color references can be found at the end of this document.
Text – Used to set the standard color for text on the page. text="color" (as above)
Link – Tag used to set the color of a hyperlink (an HTML <a href...> tag) that has not been visited and is not active. LINK="COLOR"
Vlink– Tag used to set the color of a link that has been visited VLINK="color"
Alink – Tag used to set the color of a link that is active alink="color"
ONLOAD/ONUNLOAD – Used to scripts that are to be run when the page is first loaded or when someone leaves a page. ONLOAD="url/script"

Here is an example of a BODY tag with attributes defined:

Alternately, this could all be done with a Cascading Style Sheet (CSS) or in the <HEAD> tag like so:

<HEAD>

<STYLE>

body

</STYLE>

</HEAD>

See Styles for inline and style sheet usage.

Return to ToC

Styles

With HTML 4 also came style sheets and cascading style sheets. The difference between the two is that one can be applied to a single page while the latter is a separate file and can be included and applied to all pages on a given website. Below are examples of what both an inline style sheet and an external CSS file may look like.

As stated above, the <HEAD> tag of an HTML document is able to hold style information, but you can also put in inline within the <BODY> tag as well.

An inline style is formatted slightly differently than a style sheet. For example, if we want to style a table with an inline style it might look like this:

That inline style would only be applied to that single table. Notice that the entire style is included in a style attribute within the <table> tag itself.

However, the power of styles and CSS come in when you use it in the header or in a different file. This allows styles to be applied to all instances of HTML elements.

Here is an example of an external cascading style sheet. Comments, unlike HTML are enclosed in /* and */

body

input, textarea, select

a:active

a:link

a:visited

The format for CSS styles is

SELECTOR

Selector is the HTML element to be styled and the property is the attribute. There must be a colon : between the property and value and each pair must be closed with a semi-colon ; All of the attributes for a specific Selector must be enclosed in bracket

There are numerous resource on the web, in print and software that are available to teach, assist and validate CSS.

Return to ToC

Special Inline Elements

Some elements and tags were created to serve a specific purpose that does not deal with the display or arrangement of text but include other parts necessary or useful in an HTML document.

<A> - Anchor, defines an interactive link to a portion of the same document or to other documents or files. Must be one of a specific set of linktypes Attributes include: NAME, CHARSET, ACCESSKEY, TABINDEX, ONFOCUS, ONBLUR, TARGET and several specific attributes below:

HREF - Provides a URI to the target of the link within the document or to an external file.
REV - Defines the relationship of the current document to the linked document. <a href="text.html" REL="Help"> - The current document is the Help for the text.html.
REL - Defines the relationship of the linked document to the current document <a href="toc.html" REL="Help"> - toc.html is the Help for the current document.
TYPE - Defines the media file type that the link refers to.
HREFLANG - Defines the language of the link i.e en - English, en-us - American English.
SHAPE - The shape of the clickable area in an image map Values: rect, circle, poly, default.
COORDS - Define the location of the clickable area in an image map. Formats are below and maybe in pixels or percentages.

Rectangular coordinates are from top and left side in format COORDS="left, top, right, bottom"
Default uses the entire image as one clickable area
Circle - Format is COORDS="Center-x, Center-y, radius" where center-x is from left edge and center-y is from top edge.
Poly - Format is pairs of X,Y coordinates that define the corners of the polygon. The area within will be clickable. COORDS=X₁,Y₁, X₂,Y₂...

Examples

A link within the same document:

A link to another document:

<A HREF="example.html">Example</A>

A link to compose an email in the default email program:

<A HREF="mailto:example@domain.com" TITLE="Feedback on The Big HTML 4 How-To">example@domain.com</A>

<applet> - Defines the parameters and location of a Java Applet. Attributes include: WIDTH, HEIGHT, NAME, ALT, ALIGN and

CODE - The name of the Java class file. Relative to the CODEBASE if defined.
CODEBASE - URI to the location for the Java Class files (if in a different directory).
ARCHIVE - A comma-separated list of archived files to be downloaded in one connection to decrease download time. Standard Java archives are .JAR files.
OBJECT - Not well supported by browsers. Defines a serialized representation of the applet.
HSPACE - Distance between Java applet's top and bottom edges and surrounding content.
VSPACE - Distance between Java applet's left and right edges and surrounding content.

<BDO> - Defines an override to the standard bi-directional algorithm that defines left-to-right and right-to-left for certain languages. More information at W3C.

<BR>- A line break, like a carriage return in word processors. Example: <p>This text is<br>broken</p>

This text is

broken

<IMG> - Defines the placement and display of an image. Attributes include: SRC, ALT, WIDTH, HEIGHT, USEMAP, ISMAP, NAME and LONGDESC which is a longer description of the image than the ALT tag provides. Generally supported formats are .gif .jpg and .png

<object> - Defines an object to be included in the document. Generally including video, audio Java and Flash. Attributes include: ARCHIVE, CODEBASE, WIDTH, HEIGHT, NAME, USEMAP, TYPE, TABINDEX and the following

DATA - A URI to the object that is to be embedded for display.
CLASSID - Used for implementation of embedded object. Useful for Python, ActiveX and Java.
CODETYPE - Defines the type of code so that browsers do not attempt to download and display files that they cannot.
STANDBY - Defines message that will be displayed while the object loads.
DECLARE - Prevents automatic loading and display of the object. Allows for a link or button to be clicked by the user to display the object.

<PARAM> - Provides additional parameters for embedded objects. Attributes include: NAME, VALUE, VALUETYPE (data, ref, object), TYPE and ID. More information at W3C.

<SCRIPT> - Defines a client-side script to be included when the page is loaded. Generally used to include Javascript that is contained in separate files. Attributes include: TYPE, SCR, CHARSET and DEFER which means that the execution of the script can wait after the rest of the document is rendered. More information at W3C.

<SPAN>- A generic inline container used to apply styles to the contents of the span. Used when no other inline element can be used to properly style the contents. Can only contain inline elements. <DIV> is the block-level equivalent.

Return to ToC

Text Formatting

Now that we have taken a look at the basics of the technical tags for HTML, it 's time to work with some text. Though images, sounds and video can all be displayed on web pages, text is still the most prevalent form of information transmission and so it is still important to know how to make it look good. Styles for text can be directly applied to specific text inline with HTML. Common text decorations include bold, emphasized, italic, strong, big, small, sub and superscript.

Inline Elements - Font Style

<b> - Bold, to give a heavy visual style to a specific piece of text <b>Bold</t> would give you Bold

<strong> - Strong, will also give the appearance of bold but generally refers to the text being given more importance than the surrounding text.

<strong>Strong</strong> Strong

<i> - Italic, will italicize, or give a lean to, some text.

<i>Italic</i> Italic

<em> - Emphasis, Also looks like Italic in most browsers but again is meant to impart more importance for some text

<em>Emphasis</em> Emphasis

<big> - Makes text bigger than the surrounding text Can be nested to produce even bigger text.

<big>Big</big> Big <big><big>Big</big></big> Big

<small> - Makes text smaller than the surrounding text. Can be nested to produce even smaller text. <small>Small</small> Small

<sub> - Subscript, to place words lower and smaller than the standard text

<b>Hi<b> <sub>there</sub> Hi _there

<sup> - Superscript, to place words higher and smaller than the standard text.

<b>Hi<b> <sup>there</sup> Hi ^there

<u> - Underline, draws a line beneath the text, similar to <ins> but without the implication that the text was inserted.

<u>Underlined</u> Underlined

<code> - Commonly used to show examples of HTML and other programming code. Uses a fixed width (monospace) font (see wikipediafor font list).

<code>This is code</code> This is Code

<tt> - Teletype Text, this is text that is rendered in a fixed width font.

<tt>Teletype</tt> Teletype

<kbd> - Keyboard, used when denoting directions and giving commands to type in a keyboard. Uses a Fixed Width Font

<kbd>Keyboard</kbd> Keyboard

<q> - Short Quotation, inserts quotation marks around a piece of text denoting a quote from another source.

<q>Short Quotation</q> "Short Quotation"

<cite> - Citation, shows that you are citing another source. Places the text in Italic. Commonly used for copyright lines on web pages.

<cite>Citation</cite> Citation

<var> - Variable, denotes when you are talking about a computer programming variable. Used for demonstrating programming code, not for actual coding.

<var>$Variable</var> $Variable

<bdo> - Text direction, choices are rtl - right to left meaning the text will display backwards. and ltr - left to right, standard for most languages.

<bdo dir="ltr">This is backwards</bdo> This is backwards

<abbr> - Abbreviation, used to show that some text is an abbreviation.

<abbr title="National Broadcasting Company">NBC</abbr>

<acronym> - Acronym, abbreviations spoken like words.

<acronym title="National Aeronautics and Space Administrations">NASA</acronym>

Block-level text elements

<address> - Address, used to define contact information, generally about the creator of a webpage.

<address> Company XYX <BR /> 1313 Mockingbird Lane <br />52010</address>

Company XYX

1313 Mockingbird Lane

52010

<blockquote> - Block Quote, shows that the text itself is a long quote from another source. Indents the entire block of text.

<blockquote>Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</blockquote>

Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

<ins> - Inserted, draws a line beneath the text. Used in conjunction with <del> it represents text that was inserted into a document during a correction.

<ins>Inserted</ins> Inserted

<del> - Strikeout, used when you want to show a correction was made do a piece of text. (Deprecated forms <strike> or <s>)

<del>Strike</del> ~~Strike~~

<pre> - Preformatted, replaced <listing>, <xmp> and <plaintext>. Allows spaces and carriage returns (/n for demonstration) to be preserved when rendering the text.

<pre>This is Preformatted/nText.</pre> (/n is a carriage return)

This is Preformatted

Text.

Headers

Headers have their own special set of tags which are based on the size of the header. They are used for showing that a section of sub-section of a document is beginning.

<h1> - Header level 1 - A main section - <h1>Header 1</h1> Header 1

<h2> -Header level 2 - A sub-section of an H1 section - <h2>Header 2</h2> Header 2

<h3> -Header level 3 - A sub-section of an H2 section - <h3>Header 3</h3> Header 3

There are actually 6 levels of headers <h1> to <h6>. They all contain the Align attribute with values: Left, Right, Center and Justify. This moves the header to the specified area of the line it is on. Headers can be styled with Inline styles and CSS (see Style section).

Font - Deprecated

The <font> tag was used to define aspects pertaining to the font that will be displayed on the HTML document when it is rendered. It has been deprecated in HTML 4. Instead it is recommended that you utilize style sheets (below). The font tag contained several attributes which included size, face and color.

Return to ToC

Text Containers

There are certain containers that allow you to manage text in HTML 4. These let you create groups of text and then you can apply styles to each one specifically by using a naming convention.

<p> - Paragraph - Groups a piece of text together in a paragraph. Styles can then be applied to entire paragraphs via styles and style sheets. (see example below)

<DIV>- Division, a generic block-level container. It allows styles to be applied to a block of content. Inside of a div can be other block-level elements (like div, span, p) and inline elements (see Text above). Headers are also considered block-level elements. A DIV can have an ID and a class, both of which can have styles applied to them separately. A DIV can also be inside of another block-level element.

Example:

<h1>A Block-level header</h1>

<p id="Para1"> Everything in this will be grouped together like a paragraph. No matter how many sentences or words. That is a block-level elements job.</p>

<p ="Para2">This will begin a new paragraph and so this text will be separate from that above</p>

</div>

<center> - A block element that will be centered on the page. It is technically shorthand for <div align=center> Deprecated in place of style sheets. It can contain other block level and inline elements but it is suggested that it not be used.

Return to ToC

Tables

Tables are used to display multi-dimensional data (arrays) or to organize text into rows and columns. In order for a table to be complete it must have at least one Row and one Cell.

<table> - The opening tag for a table. Attributes can be specified in the tag but are better used in the style sheet. Must be closed with </table>.

Attributes include:

WIDTH=pixels or percent
HEIGHT=pixels or percent
BORDER=pixels
CELLSPACING=pixels
CELLPADDING=pixels
SLIGN= left | right | center (where the table will be in relation to the page) Deprecated
BACKGROUND=URL (for an image background) Depre
BGCOLOR=color Deprecated

<tr> - Tag for a table row. Used to organize cells into a row. </td> Attributes include:

ALIGN= left | right | center | justify | char (horizontal alignment of cells in table)
CHAR=Character (a specific character for aligning text)
CHAROFF=Length (offset for character alignment
VALIGN= top | bottom | middle | baseline (vertical alignment of cells in row}

<td> - Tag for a Table Data cell. Must be closed with </td> Cells are held within rows.

Example - Basic Table, 1 row, 2 cells

<TABLE>

<TR>

</TR>

</table>

Result:

Text 1

Text 2

Return to ToC

Complex Tables

Tables can contain more than simple rows of data cells. They can also have specific types of cells including:

<caption> - Table caption, defines a summary or heading for the table. Must be the first element after the <TABLE> tag. Most inline tags can be used within this tag (strong, em, etc)

<col> -Table column, used to define attributes for an entire column in a table. Must be used after <caption> and before the <thead>. Most common usage is with the span attribute to force cells to span multiple columns.

<colgroup> - Column group, allows styles to be applied to groups of columns in a table Must be used after <caption> and before the <thead>. The span attribute defines the number of columns to be included in the group. Other attributes, when used, will be applied to all columns and cells in the group. Attributes - span, width, align, char, charoff, valign.

<thead> - Table Head, used to define a row or rows that are headers for the table. This allows the headers to be printed and displayed on every page of a printed table. Also allows for static headers and a long scrolling table. Not supported by all browsers. Must contain a <TR> (see example below). Attributes include - Align, Char, Charoff, Valign (see above)

<th> - The <THEAD> requires a special tag for the cells in them. This differentiates the cells from standard Data cells <TD> When the table is rendered in a compatible browser it will treat these cells as headers. Attributes include Align, Char, Charoff, Valign, (height, width, bgcolor, nowrap are all deprecated for style sheets)

Attributes

COLSPAN - Defines the number of columns the cell should span.
ROWPSAN - Defines the number of rows the cell should span.
HEADERS - Defines header cells by ID for non-visual browsers to render header information for a cell.
SCOPE - Defines cells covered by the header cell. Values - row | col | rowgroup | colgroup
AXIS - Provides a method for categorizing cells. (more information)

<tbody> - Table body, defines a group of data rows that represent the main information in the table. If <thead> or <tfoot> are used then this tag must also be used. Multiple <tbody> tags can be used in a single table allowing for each to have a style applied to them. Not supported by all browsers.

<tfoot> - Table Footer, used to define a row or rows that are a footer for a table. This allows the footer to be printed and displayed on every page of a printed table. Also allows for static footers and a long scrolling table. Not supported by all browsers.

Example of a Complex Table:

<TABLE>

<THEAD>

<TR>

<TH ROWSPAN=2>ID Number</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>John Smith</TD>

</TR>

</TBODY>

<TFOOT>

<TR>

Time listed is for entry into facility.

</TD>

</TR>

</TFOOT>

</TABLE>

Date	Time	Name	ID Number
22-01-2009	01:30:00 PM	John Smith	123456789
Time listed is for entry into facility.

Without a long table it is difficult to show exactly how these tags function. For more information see the W3C specification

Return to ToC

Lists

<dir> - Defines a directory list. Must contain <li> elements. Cannot contain block level elements. Deprecated in HTML 4, use <ul>

<dl> - Defines a definition list. Provides a list of words and definitions. May contain multiple definitions for each term and multiple terms for each definition. Must contain a <dt> and a <dd> tag.

<dt> Definition term, the word being defined in a definition list. Cannot contain block level elements. The closing tag </dt> is optional but its omission could create problem.

<dd> Definition description, the definition of the word being defined in a definition list. The closing tag </dd> is optional but its omission could create problem.

Example of a Definition List

<DL>

<DD>

<P>

Hypertext Markup Language, a markup language that is used to create documents on the World Wide Web incorporating text, graphics, sound, video, and hyperlinks

</P>

</DD>

</DL>

<menu> Menu list, a single level list. Deprecated in favor of <ul>.

<ul> - Defines an unordered list, which means the items in the list have no specific sequence. Must contain at least one <li> tag. Unordered lists are generally represented by an indent and a bullet before each item. Styles can be applied to change the appearance of the bullets and the list items. Deprecated attributes (use styles now) include type disc | square | circle (bullet style), compact (reduce spacing between lines).

<ol> - Defines an ordered list where the items in the list have a particular sequence (i.e. installation instructions). Must contain at least one <li> tag. Styles can be applied to change the appearance of the numbering/lettering and the list items. Deprecated attributes include type (for numbering/lettering) 1 | a | A | i | I (Roman numerals), start (the number to begin from), compact.

<li> - List item, items in a list. Must be used within a <dir>, <ul> or <ol> tag. When used inside an ordered or unordered list may contain block level elements. May also contain other <ol> or <ul> tags which allows for nesting (see below).

Example of unordered list

<ul>

</ul>

Results:

List item
List item

Example of ordered list

<ol>

</ol>

Results:

list item 1
list item 2

Example of nested list

<ul>

</ol>

</li>

</ul>

Results:

List item
List item
list item 1
list item 2

Return to ToC

Forms

Forms give you a way to create an interactive portion of an HTML document where the viewer can input information that can then be saved or acted upon.

<form> - Defines an interactive form. Should have controls including <input>, <select>, <textarea> and <button>.

Attributes include:

ACTION=URI, The server-side script that will process the information input into the form.
METHOD=get | post - How the form will send the information via HTTP
ENCTYPE=ContentType - What kind of information is being submitted. See a long list at the Internet Assigned Numbers Authority - http://www.iana.org/assignments/media-types/
NAME=CDATA - The name on the client-side for the scripting
ACCEPT-CHARSET=Charsets - Character sets that are acceptable - http://www.iana.org/assignments/character-sets
ACCEPT=ContentTypes - Types of files that can be uploaded through the form. (see IANA Media Types)
TARGET=FrameTarget - What frame on the document will show the results of the form. If none it will render results in the same window as the form was shown. Values include: _blank (a new window), _self (same as the form), _parent (in the parent of the current frameset), _top (a new unframed window).
ONSUBMIT=Script - A script that is triggered when the form is submitted
ONRESET=Script - A script that is triggered when the form is reset. Generally, used to clear out the input and reload the form.

<button> - Defines a button. Three types, a submit, reset or button (for other actions). Can be given a wide range of values including text and images.

Attributes include:

NAME=CDATA - The name of the actual button when rendered.
VALUE=CDATA - The value sent along with the form data.
TYPE=[ submit | reset | button]
DISABLED - If a button is not to be used it can be disabled. Allows for certain conditions to be met prior to the button being made available.
ACCESSKEY=Character - Allows a hotkey or keyboard shortcut to be designated for the button.
TABINDEX=Number Where the button is in the tabbing order, when a user hits tab to move to the next element.
ONFOCUS=Script - Some scripted action that is triggered when the focus is on the button. Can be another scripting language, commonly Javascript.
ONBLUR=Script - Some scripted action that is triggered when the focus is moved away from the button.

<fieldset> - Defines groups of fields within a form. Multiple fieldsets can be defined in a single form and they can be used. A fieldset must begin with a <legend> tag which will be the title for the form section and can also include an accesskey attribute. After the <legend> the fieldset can then contain block-level and inline elements and a nested fieldset. Within the fieldset there should be at least one form of input element. (see example below)

<input> - Defines a form control for input of data from a distinct list of types. Types include: text, password, checkbox, radio, submit, reset, file, hidden, image and button. (see example below)

Attributes include:

TYPE= text | password | checkbox | radio | submit | reset | file | hidden | image | button

NAME
VALUE
CHECKED - Defines default, pre-checked choice for radio and checkbox.
SIZE - Number of characters for a text input box.
MAXLENGTH - Maximum number of characters allowed for the value
SRC - the URI for an image for a button.
ALT - Text that will be shown if images are unable to be displayed.
USEMAP - Allows for client-side image maps. This creates clickable areas of a single image
ISMAP - For server-side image maps.
ALIGN - top | middle | bottom | left | right - Deprecated. Use styles.
DISABLED
READONLY - Input that cannot be changed by the user.
ACCEPT - Media Types allowed for upload via the form.
ACCESSKEY
TABINDEX
ONFOCUS
ONBLUR
ONSELECT - A script to be triggered when text in an input is selected.
ONCHANGE - A script to be triggered when text in an input is changed and focus is lost (user moves to another element).

<label> - Defines a label for a form control. Allows for clues and hints for users of non-visual browsers. Attributes - Accesskey, ONFOCUS, ONBLUR and FOR the value of which is the form field name. <LABEL FOR=example ACCESSKEY=U>Example</LABEL>

<select> - Defines a form control which will have a list of options. Will be displayed as a text box where one or more items can be chosen (depending on attributes). Attributes include: NAME, SIZE, DISABLED, ONFOCUS, ONBLUR, ONCHANGE, TABINDEX and MULTIPLE when defined allows for multiple selections by holding down the CTRL key and clicking on items.

<OPTION>English</OPTION>

<OPTION>Spanish</OPTION>

<OPTION>French</OPTION>

<OPTION>Italian</OPTION>

<OPTION>German</OPTION>

</SELECT>

<optgroup> - Defines a group of select options that are organized in groups within a select menu. Must contain at least one <option> tag. Attributes include: LABEL and DISABLED.

<option> - Defines the options within an <optgroup> tag. Attributes include: VALUE, LABEL, DISABLED and SELECTED which, when specified, acts like CHECKED.

<OPTION LABEL="Vista">Vista</OPTION>

</OPTGROUP>

</SELECT>

<textarea> - Defines a multi-line text area for user input. Attributes include: NAME, DISABLED, READONLY, ACCESSKEY, TABINDEX, ONFOCUS, ONBLUR, ONSELECT, ONCHANGE, ROWS (number of rows high) and COLS (number of columns wide). Initial value of the textarea is given in the tag.

<textarea name=Example rows=5 cols=30>This is the initial value.</textarea>

Example of a Complex Form

<LEGEND ACCESSKEY=I>Contact Information</LEGEND>

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

<LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

<LABEL FOR=addr ACCESSKEY=A>Postal Address:</LABEL>

</TD>

<TD>

</TD>

</TR>

</TABLE>

</FIELDSET>

<P>Which Web languages do you speak?</P>

<OPTION>English</OPTION>

<OPTION>Spanish</OPTION>

<OPTION>French</OPTION>

<OPTION>Italian</OPTION>

<OPTION>German</OPTION>

</SELECT>

<P> Choose your Operating System:</P>

<OPTION LABEL="Vista">Vista</OPTION>

</OPTGROUP>

</SELECT>

<p>Biography:</P>

<textarea name=Example rows=5 cols=30>Tell us a little about yourself</textarea>

<P>

</P>

</FORM>

Return to ToC

Linktypes

The currently defined list of linktypes for HTML 4.0 include the following:

Alternate Defines an alternate version of the document.
StyleSheet Defines an external style sheet for the document.
Start Defines the first document in a collection.
Next Defines the next document in a suggested sequence of reading.
Prev Defines the previous document in a suggested sequence of reading.
Contents Defines a table of contents for the document.
Index Defines an index for the document.
Glossary Defines a glossary of terms used in the document.
Copyright Defines a document with copyright information.
Chapter Defines the chapter of a collection of documents.
Section Defines the section of a collection of documents.
Subsection Defines a subsection of a collection of documents.
Appendix Defines an appendix for the collection of documents.
Help Defines a help document.
Bookmark Links to a key related document. The TITLE attribute can be used as a label for the bookmark.

Return to ToC | Next Page >>

The How To Guide To Learning HTML

Introduction:

Table of Contents

Top-level Elements:

<html>

<head>

<body>

Styles

SELECTOR

Special Inline Elements

Text Formatting

Inline Elements - Font Style

Block-level text elements

Headers

Font - Deprecated

Text Containers

Tables

Example - Basic Table, 1 row, 2 cells

Complex Tables

Example of a Complex Table:

Lists

Example of a Definition List

Example of unordered list

Example of ordered list

Example of nested list

Forms

Example of a Complex Form

Linktypes