basic html commands

Basic HTML commands

This section covers some basic HTML commands and explains the steps involved in preparing a document for viewing via the World Wide Web.

Basic steps: using tagsHTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in < > symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.

For example, to create a title for a document you would do the following:

<title>My First HTML Document</title>The closing tag normally contains a "/" before the directive to indicate the termination of the action.

HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.

The HTML tagAlthough not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later.

The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.

The head tagJust like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively.

For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like

<html><head><title>My First HTML Document</title></head>

TitlesA title tag allows you to specify a Document Title in your browser window. When people make hotlists, this title is what they see in their list after they add your document. The format is:

<title>My First HTML Document</title>Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.

The body tagLike you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document.

The body should start after the head. A typical page might begin like

<html><head><title>My First HTML Document</title></head><body>

HeadersThere are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>

This is a header 1 tag











Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).

ParagraphsIn HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it).

<p> causes a line break and adds a trailing blank line

<br> causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.

Preformatted textThe preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font.

<pre>this is

an example of a preformatted text tag</pre>And this is how it displays:

this is

an example of a preformatted text tag

Boldface and ItalicsYou can add emphasis to text by using the boldface and italic tags or the emphasis and strong tags.

There is an underline tag as well, but most people don't use it since text that is linked is often underlined. The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis.

When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.

Physical tags

This is a <b>boldface</b> tag.

This is how boldfacing appears.

This is an <i>italic</i> tag.

This is how italics appear.

Logical tags

This is a <strong>strongly emphasized</strong> tag.

This is a strongly emphasized tag.

This is an <em>emphasized</em> tag.

This is an emphasized tag.

There is a subtle distinction between the above "physical" tags which merely change the displayed font, and "logical" styles which are used (or eventually will be) to make types of emphasis client specific (for instance, using the <em> tag would make text red). While either style is fine, be aware that differences in these two kinds of tags may be more apparent with advances in HTML.

ListsThere is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists.

When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.

Unnumbered lists

Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>.

For example, here is an unnumbered list with three items:

<ul><li> list item 1<li> list item 2<li> list item 3</ul>Here is how that list would display:

list item 1 list item 2

list item 3

Numbered lists Here is the same list using a numbered list format:

<ol><li> list item 1<li> list item 2<li> list item 3</ol>Here is how that list would display:

1. list item 1 2. list item 2

3. list item 3

Definition lists Definition lists allow you to indent without necessarily having to use bullets.

<dl><dt> This is a term<dd> This is a definition<dd> And yet another definition<dt> Another term<dd> Another definition</dl>And here is how this would be displayed

This is a term

This is a definition.

And yet another definition.

Another term

Another definition

Nested lists

Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).

<ul><li> list item 1 <ul> <li> nested item 1 <li> nested item 2 </ul><li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul><li> list item 3 <ul> <li> nested item 1 <li> nested item 2 </ul></ul>Here is how that list would display:

list item 1 o nested item 1

o nested item 2

list item 2

o nested item 1

o nested item 2

list item 3

o nested item 1

o nested item 2

BlockquoteThe blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:

<blockquote>...</blockquote>

and displays like this:

Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.

CenterYou can center text, images, and headings with the center tag:

<center>This is a centered sentence</center>This is a centered sentence.

The center tag automatically inserts a line break after the closing center tag.

Horizontal RuleTo separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows:

AddressesThe <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances.

Here is an example of how an address might appear:

<address>Introduction to HTML / Pat Androget / [email protected]</address>And it would appear as:

Introduction to HTML / Pat Androget / [email protected]

CommentsIt is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document.

Comments take the form:

The comment can even break lines



Strike-throughShould you want it, there is a strike-through tag which displays text with a strike.

<strike>This is struck through text</strike>displays as

This is struck through text

Special CharactersFinally, if you often use the characters which make up HTML tags (such as < >, and &), or you use special characters not in the ascii standard, you will have to use special tags. Here are the codes:

á .... á â .... â æ .... æ à .... à & .... & å .... å ã .... ã ä .... ä ç .... ç é .... é ê .... ê è .... è ð .... ð ë .... ë > .... > í .... í î .... î ì .... ì ï .... ï < .... < ñ .... ñ ó .... ó ô .... ô ò .... ò ø .... ø õ .... õ ö .... ö " .... " ß .... ß þ .... þ ú .... ú û .... û ù .... ù ü .... ü ý .... ý ÿ .... ÿ

Tag Name Usage

<a> Link.

<b> Bold the text within the tag.

<body> The information within this tag is the body of the HTML document.

<br> Line break.

<center> Center the text within the tag.

<font> Specify the font type, size, and color for the text within the tag.

<frame> Specifies the properties within each frame.

<frameset> Signifies that this HTML page is composed of frame(s).

<h1>...<h6> The text within these tags are treated as headers.

<head> The text within this tag specifies the header information for the HTML document.

<i> Italicize the text within the tag.

<img> Specifies the image to be shown on the HTML document.

<li> Itemized list.

<meta>Specifies information about this HTML page. This information is not displayed on the browser but may be used by search engines.

<ol> Ordered list, usually followed by one or more <li> tags.

<p> New paragraph.

<table> Signifies the presence of an HTML table.

<td> Specifies column properties in a table.

<tr> Specifies row properties in a table.

<title> The text within this tag specifies the title of the HTML document.

<u> Underline the text within the tag.

<ul> Unordered list, usually followed by one or more <li> tags.

HTML CommandsWe offer this table as a quick reference to supplement the HTML tutorial. It

shows the commands, a brief statement of their use, which attributes can modify them, and which commands they can inhabit or include, but it doesn't go over the basics of HTML syntax. If you're new to HTML, visit Spin Doctor's Web

Design 101 first.

Global Head

Body:

Character FormattingBreaks, Headings, and Titles

Images and FormsLists and Tables

Hypertext Anchors

Commands PurposeAttributes and

ExtensionsCan

Subsume:Can be

Nested inside:

http://www.transaction.net/web/tutor/index.html

http://www.transaction.net/web/tutor/cmdtable.html#hyper

http://www.transaction.net/web/tutor/cmdtable.html#table

http://www.transaction.net/web/tutor/cmdtable.html#list

http://www.transaction.net/web/tutor/cmdtable.html#form

http://www.transaction.net/web/tutor/cmdtable.html#image

http://www.transaction.net/web/tutor/cmdtable.html#break

http://www.transaction.net/web/tutor/cmdtable.html#format

http://www.transaction.net/web/tutor/cmdtable.html#body

http://www.transaction.net/web/tutor/cmdtable.html#head

http://www.transaction.net/web/tutor/cmdtable.html#global



Global

<<<Top Next>>

allows you to insert a line of browser-invisible comments in your document

some browsers may execute the tags inside comment lines, so it's best to avoid nesting commands within comments

<html>...</html>marks the opening and closing of an HTML document

<head>...</head>

<body>...</body>

surrounds all other HTML commands

<head>...</head> creates the head of an HTML document

<title>...</title><meta>

<isindex><base>

<nextid><link>

immediately after <HTML> and before <BODY>...</BODY>

<body>...</body>

creates the body of an HTML document

background= designates a file to be displayed as backgroundbgcolor="#(hexadecimal color code)" sets the background colortext="#(hexadecimal color code)" sets the color of plain textlink="#(hexadecimal color code)" sets the color of unfollowed text linksalink="#(hexadecimal color code)" sets the color of active text linksvlink="#(hexadecimal color code)" sets the color of visited text links

all lists,anchors, tables,forms, images, text, breaks, characters,and headings

inside<html>...</html>and after <head>...</head>

<isindex> activates HTML 3.0: <blockquote>

http://www.transaction.net/web/tutor/tutor3.html#body

http://www.transaction.net/web/tutor/tutor3.html#head


http://www.transaction.net/web/tutor/cmdtable.html#cmdtable

the browser's searching function

prompt="..." allows you to specify the search prompt.(default prompt is "This is a searchable index. Enter search keywords:")

...</blockquote><body>...</body

><dd> or <li>

<form>...</form>

<head>...</head>

Head

<<Previous Top Next>>

<link>

this command, primarily used by HTML-generating tools, indicates a relationship to other documents (and unlike anchors, cannot indicate relationships to parts of documents)

href="url" of document linked to this onename=anchor (if the link is an anchor)rel="(linked to document in relation to this document)"rev="(reverse rel b/w this doc and other doc)" urn=uniform resource numbertitle="title of linked-to doc"methods="ftp, gopher, etc." (method of retrieving other document)

inside <HEAD>...</HEAD>

<meta> allows you to specify metacontent (self- referential content, or information about the

http-equiv="name" content="value" names a new HTTP header field whose data will be specified as CONTENTHTTP-Equiv="Expires content="never" name="key" of key/value pair.content="value" of key/value pair.



http://www.transaction.net/web/tutor/cmdtable.html#global

document itself--meant to be read by machines)

<base>

indicates the full URL of the current document

href="URL"

<title>...</title>allows you to select a title that will appear in the title bars of browser windows and in bookmarks (default is the actual filename of your document)

Body


Formatting


<center>...</center>

centersenclosed

text

<br> <a>...</a> or

<img><address>...</ad

dress><em>...</em>

<strong>...</strong>

<code>...</code>

<samp>...</samp>

<kbd>...</kbd><var>...</var><cite>...</cite>

<tt>...</tt><b>...</b><i>...</i>

<blockquote>...</blockquote>

<body>...</body>

<form>...</form>

<dd> or <li>

<th>...</th> or <td>...</td>

<font size=# >...</font> <br> <img>

<p><a>...</a>







Netscape extension

the value for the size attribute can be a number from 1 to 7 (default is 3), or (in quotation marks) a number relative to the current size, e.g. "+2".

<a>...</a> <em>...</em>


<code>...</code>

<samp>...</samp>

<kbd>...</kbd><var>...</var> <cite>...</cite>

<tt>...</tt> <b>...</b><i>...</i>

<address>...</address>

<b>...</b> <cite>...</cite>

<code>...</code><dd>, <dt>, or

<li> <h#>...</h#> <em>...</em>

<i>...</i> <kbd>...</kbd><pre>...</pre>

<samp>...</samp>

<td>...</td> <strong>...</stro

ng><tt>...</tt>

<var>...</var>

<basefont size=#>

Netscape extension

the value for the size attribute can be a number from 1 to 7. the default is 3.

<p><a>...</a>


<b>...</b><cite>...</cite><code>...</code

><dd> or <li>

<em>...</em><h#>...</h#>

<i>...</i> <kbd>...</kbd><pre>...</pre>

<samp>...</samp>


<tt>...</tt> <var>...</var>

can be used only once inside<body>...</body>

<b>...</b> emboldens enclosed text <br>

<img>

<p>

<a>...</a>


<em>...</em> tells browser to emphasizeenclosed text

<strong> tells browser to place

http://home.netscape.com/assist/net_sites/html_extensions.html


...</strong> stronger emphasis on enclosed text

<a>...</a>

<em>...</em>


<code>...</code>

<samp>...</samp>

<kbd>...</kbd>

<var>...</var>

<b>...</b>

<cite>...</cite>

<code>...</code>

<dd>, <dt>, <li>

<h#>...</h#>

<kbd>...</kbd>

<em>...</em>

<pre>...</pre>

<samp>...</

<cite>...</cite>

a citation

<kbd>...</kbd> distinguishes text to be typed

<samp>...</samp>

sample text

<tt>...</tt> renders text in monospaced typewriter font

<i>...</i> puts the text in italics

<pre>...</pre>preformatted t e x t

to be displayed with spacing intact


used to format, for example,signature files

and/or copyright information

at the end of a document

<code>...</code> code sample

<var>...</var> placeholder or variable for some other value

<blink>...</blink>

makes the text blink. use at your own risk.

<h1>...</h1>

<h2>...</h2><h3>...</h3><h4>...</h4>

<h5>...</h5><h6>...</h6>

marks six levels of headings(1 is largest;6 smallest)

align=center (3.0)

<blockquote>...</blockquote><body>...</body

><pre>...</pre>


<form>...</form>

<th>...</th> or <td>...</td>

http://www.transaction.net/web/tutor/tutor2b.html#style

Refer to this chart if you plan to use special characters--machine-readable characters like <brackets>, "quotation

marks", & ampersands--in your text. Lists


<ul>...</ul><ol>...</ol><dl>...</dl>

allow you to create lists:1. ordered, unordered, orplain

Netscape type= sets the type of marker (1, A, a, i, disc, circle, square) introducing each list item start= overrides usual alphabetical/numerical sequence of ordered lists

<li>, for ordered and unordered

lists; <dt> and <dd> for definition

lists

<blockquote>...</blockquote> <body>...</body> <dd> or <li>

<form>...</form> <th>...</th> or

<td>...</td>

<li> [...</li>]

opens an indented list item (with a number, in an ordered list,or a bullet, in an unordered list)

type= sets the type of marker (1, A, a, i, disc, circle, square) introducing each list item value= allows you to set the number or letter of an ordered list item

<a>...</a> <img> <br> em

strong code samp kbd var cite tt

<b>...</b> i <p> ol ul dir menu dl <pre>...</pre> <blockquote>

...</blockquote>

dir menu ol ul

<dt><dd>

these tags mark the terms and definitions (respectively) in a definition list

<dl>...</dl>

Tables


<table>...</table>

creates a table

Netscape extensions:border=(width, in pixels, of the border to be

<tr>...</tr> <caption>...</

caption>

<blockquote>...</blockquote> <body>...</body> <dd> or <li>, <form>...</form

http://home.netscape.com/assist/net_sites/tables.html

http://home.netscape.com/assist/net_sites/tables.html








http://www.uni-passau.de/~ramsch/iso8859-1.html

http://d1.ph.gla.ac.uk/htmldocs/entities.html

http://www.georgetown.edu/labyrinth/general/entities.html

drawn around the table. a value of FRAME will enclose just the outside of the table; BASIC, the border and cells)cellpadding= (spacing between the contents of the cell and the cell borders)cellspacing= (size of the lines dividing the data cells) width= (width in pixels or a percentage of the window)

> <td>...</td>

<caption>...</caption>

allows you to label a table with a caption

align=top, bottom<table>...</table>

<tr>...</tr> creates a table row

align=leftrightcenter valign=(top middle bottom baseline)

<th>...</th> or <td>...</td>

<table>...</table>

<td>. . .</td><th>. . .</th>

creates a data cell or header cell in a table row

rowspan=(the number of rows spanned by the cell) colspan= (the number of columns spanned by the cell)align= (left, right, center: horizontal alignment of the cell contents)valign= (top, middle, bottom: the vertical alignment of the

<p><isindex> <hr><a>...</a><h#>...</h#>ol, ul, dir, menu, dl, pre, <blockquote>...</blockquote><form>...</form>

<address>...</address> table

<tr>...</tr>

cell contents)nowrap (indicates not to wrap the cell contents)width= (width in pixels or in a quoted percentage of the window)

Hypertext


<a>...</a>

creates a link to another document or to another segment of the same document

href="URL" or "file" or "#name" of subfile in the document

name="name of subfile in this document" rel, rev, urn, title, methods

<img> <br>

<em>...</em><strong>...</stro

ng><code>...</code

><samp>...</samp

><kbd>...</kbd><var>...</var><cite>...</cite>

<tt>...</tt><b>...</b><i>...</i>

<body>...</body>

<address>...</address> b cite

code <dd>, <dt> or <li>

<em>...</em><h#>...</h#>

<i>...</i><kbd>...</kbd><pre>...</pre>

<samp>...</samp>


<tt>...</tt><var>...</var><th>...</th> or

<td>...</td>

Images


<img> loads an inline image

ismap=src=alt="text"Netscape extensions:align texttop/ absmiddle /baseline /bottom, vspace hspacewidthheightborder

<a>...</a> <address>...</address><b>...</b>cite code <dd>, <dt>, or <li> em<h#>...</h#> i kbd p samp strong tt var








lowsrc="file to be loaded with the main document"

Forms


<form>...</form>

creates a form

action="URL" of script to process form inputmethod="get" or "post" how the input willbe sent to the gateway on the server sideenctype="application/ x-www-form-urlencoded" only one value possible right now

<h#>...</h#> p, lists, pre, <blockquote>...</blockquote>, isindex table hr address input select textarea

<blockquote>...</blockquote> <body>...</body> <dd> or <li> <th>...</th> or <td>...</td>

<input>input widget for a form

type="(checkbox/ hidden/ radio /reset /submit /text /image)"name="name of this item as passed to the script (in name/value pair),"value="default value (for text or hidden widget);value to be submitted with the form (for a checkbox or radio button);or label (for Reset or Submit buttons)"src="source file for an image",\ checked indicates that checkbox or radio button is checked size="size in chars of text widget" maxlength="no of characters in a text field" align="(texttop/ absmiddle /baseline /bottom,)"

<form>...</form>

<textarea>...</textarea>

multiline text entry widget

name=" (name to be passed to the script as part of name/value pair)" rows="no. of rows"cols="(no. of cols.)"

<form>...</form>

<select> creates a name=name of <option> <form>...</

http://www.transaction.net/web/tutor/cmdtable.html#break



menu or scrolling list of possible items

data fieldsize=#of items to displaymultiple allows multiple selections

form>

<option>

indicates a possible item within a select widget

selected=default selectionvalue="data submitted if this option is selected"

<select>

Breaks, Headings, and Titles

<<Previous Top

<title>. . .</title>allows you to select a titlethat will appear above your browser window (default is the actual filename of your document)

inside <HEAD>...</HEAD>

<h1>...</h1><h2>...</h2>

<h3>...</h3><h4>...</h4>

<h5>...</h5><h6>...</h6>

marks six levels of headings(1 is largest;6 smallest) align=center (3.0)

<a>...</a> imgbr em strong code samp kbd var cite tt <b>...</b> i

<blockquote>...</blockquote><body>...</body><pre>...</pre> <address>...</address><form>...</form> <th>...</th> or <td>...</td>

<p>creates a paragraph break

<a>...</a><img> and <br>em strong code samp kbd var cite tt <b>...</b> i

<blockquote>...</blockquote> <body>...</body> <dd> or <li> <form>...</form>

<br> forcesa linebreak

clear=right, left, all (3.0) <a>...</a><address>...</address><b>...</b>citecode<dd>, <dt> or



<li><h#>...</h#>emikbd<p>, <pre>...</pre>sampstrongttvar

<hr> draws a horizontal rule line

Netscape extensions:size=(in pixels, the width of the line itself)width=(in pixels, or a "#%" of the screen, the width traversed by the line)align=(horizontal placement of the line, if it doesn't cross the entire screen)noshade eliminates the line's shadow

<blockquote>...</blockquote> <body>...</body>, <form>...</form>, <pre>...</pre>, <td>...</td>

Table Tags

<table>The <table> tag specifies the presence of a table. This is very often used in conjunction with the <tr> and the <td> tags. The following attributes are commonly used to define the properties of this table:

width: This specifies the width of the table. Can be specified in pixels or in relative terms (for example, 100%).

border: This specifies whether the table will have a border. The number indicates the thickness of the border.

cellspacing: The amount spacing between the cell wall and the cell border. The area enclosed by the cell walls are the maximum amount of area that text can be displayed in a cell.

cellpadding: The amount padding between cells and the each cell wall in a table.

bgcolor: This specifies the background color for this table. The color value may be specified as the color name or the six-character color code.

<tr>The <tr> tag specifies the presence of a row. The following attributes are commonly used to define the properties of this row:

bgcolor: This specifies the background color for this row. The color value may be specified as the color name or the six-character color code.

height: This specifies the height of the row.


rowspan: This specifies the number of rows this particular row occupies.

<td>The <tr> tag specifies the presence of a column. Columns are specified within each row. The following attributes are commonly used to define the properties of this column:

valign: width: This specifies the width of the column. Can be specified in pixels or in relative terms (for

example, 50%).

bgcolor: This specifies the background color for this column. The color value may be specified as the color name or the six-character color code.

colspan: This specifies the number of columns this particular column occupies.

Example 1

HTML:<table border=1><tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr><tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr></table>

Display:

Element 1 Element 2 Element 3


Example 2

HTML:<table border=1 width=500><tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr><tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr></table>

Display:



Example 3

HTML:<table border=1 width=500><tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td width=150>Element 3</td></tr>

<tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr></table>

Display:



Example 4

HTML:<table border=1><tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr><tr><td colspan=2>Element 4</td><td>Element 5</td></tr></table>

Display:


Element 4 Element 5

Example 5: cellspacing and cellpadding attributes.

HTML:<table border=1 cellspacing=10 cellpadding=0><tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr><tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr></table>

Display:





Display:





Display:



List tag

This section lists the tags often used with HTML lists: <ol>, <ul>, and <li>.

<ol>The <ol> tag specifies that the following list is ordered.

<ul>The <ul> tag specifies that the following list is unordered.

<li>The <li> tag lists each item, whether ordered or numbered. Note that each item is indented.

Example 1: ordered list.

HTML:<ol><li>Unordered list 1.</li><li>Unordered list 2.</li></ol>

Display:

1. Unordered list 1. 2. Unordered list 2.

Example 2: unordered list.

HTML:<ul><li>Unordered list 1.</li><li>Unordered list 2.</li></ul>

Display:

Unordered list 1. Unordered list 2.

Forms tag

<form action=xxx> ... [section specifying the value for each key] ... <input type=submit value=Go> </form>

The text after action= specifies the script to be executed after the user submits the information. <input type=submit> gives a button that the user clicks when she is ready to submit the information. The value=Go piece specifies the text appearing on the button, in this case 'Go'. This is shown below:

The following list gives the most common ways for users to specify the value:

Text input Radio button

Checkbox

Drop-down menu

Text input

One way users can enter data into a HTML document is via text. The most common scenario is when users have to enter a username and password to enter a site. There are three common types of text input:

text: In this type of input, we get a single-line text box to enter data. The texts typed appear directly on the web page.

The syntax is <input type=text name=c>. Here, the key for this text input value is 'c'. Below is an example:

Text example:

password: In this type of inpu, we get a single-line text box to enter data. The text typed do not appear directly on the web page.

http://html-codes.1keydata.com/drop-down-menu.php

http://html-codes.1keydata.com/html-checkbox.php

http://html-codes.1keydata.com/html-radio-button.php

http://html-codes.1keydata.com/text-input.php

The syntax is <input type=password name=pwd>. Here, the key for this password input is 'pwd'. Below is an example:

Text example:

textbox: In this type of input, we get a multi-lin text book to enter data. The texts typed appear directly on the web page.

The syntax is <textarea rows=[row height] name=area>. The key for this textarea input is 'area'. Below is an example, with [row height] = 2:

Radio Buttons

A second type of input is the radio button. Radio buttons are used when you want users to be able to select one and only one of the options. Below is an example:

Code: <input type="radio" name="color" value="red">Red<br> <input type="radio" name="color" value="green">Green<br> <input type="radio" name="color" value="blue">Blue<br>

Red

Green

Blue

In this case, the key is color, and the values can be either red, green, or blue, depending on the radio button selected.

If we want to pre-select a radio button, we'll specify "selected" at the end of the <input> tag, such as follows:

Checkbox

Another type of input is the check box. Check boxes are used when you want users to be able to select more than one of the options. Below is an example:

Code: <input type="checkbox" name="color" value="red">Red<br> <input type="checkbox" name="color" value="green">Green<br> <input type="checkbox" name="color" value="blue">Blue<br>

Red

Green

Blue

In this case, the key is color, and the values can be either red, green, or blue, depending on the check

box(es) selected. If multiple check boxes are checked, the "color" key will then have multiple values.

If we want to pre-select a check box, we'll specify "checked" at the end of the <input> tag, such as follows:

<input type="checkbox" name="color" value="red" checked>Red<br>

Drop Down Menu

Drop down menu is another common way to specify input data. For example, selecting a state is often done via a drop down menu. Users can select one or more items in a drop-down menu. Below is an example for a single-selection drop down menu:

Code: <select name=color> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option>

In this case, the key is color, and the values can be either red, green, or blue, depending on the item selected.

If we want to pre-select a check box, we'll specify "selected" at the end of the <input> tag, such as follows:

<input type="checkbox" name="color" value="red" selected>Red<br>

If we want to select multiple items, we specify "multiple" at the end of the <select> tag, i.e.,

<select name=color multiple>

Remarks: An attribute value must be quoted if it contains any character other than letters (A-Za-z), digits,

hyphens, and periods; use quotes if in doubt. Here is an example:

<a href="http://www.math.uh.edu" name="start">Dept. of Math.</a>

NONE in the "value" field below means that one can use the attribute without a value.

HTML commands:<a>, </a>

purpose: anchor, for links and labels example: <a href="http://www.math.uh.edu" name="start">Dept. of

Math.</a>

attributes:

Attribute Values Meaning Remarks

href URL address of link

name text label of this position in the file

target name_of_frame frame in which the link should be rendered

o These items might be case-sensitive!

o If the named frame does not exist, the link is rendered in a new window (unless overridden by the user).

o _self is useful for overriding a BASE TARGET

_blank renders the link in a new, unnamed window

_parent renders the link in the immediate FRAMESET parent

_top

renders the link in the full, unframed window

_self renders the link in the current frame

<img>

purpose: inline image example: <img src="../picture.jpg" height="20%" alt="campus map">

attributes:


src URL source file

height number, percentage pixel size, % of page height

width number, percentage pixel size, % of page width

alt text show if no image

align top, middle, bottom, left, right

deprecated, use <br clear> instead

border number size in pixels border="0" means no border

<br>

purpose: line break attributes:


clear left, all, right, NONE clear floating objects

<p>

purpose: new paragraph attributes:


align left, center, right, justify deprecated; horizontal alignment

<hr>

purpose: horizontal rule example: <hr noshade size="2" width="50%" align="center">

attributes:


noshade solid line

size number height in pixels

align center, left, right

width number, percentage pixels, % of page-width

fonts & co.

purpose: use a particular font, select size, heading etc. tags:

Tag and endtag Effect, Meaning Remarks

<font>, </font> see below

<pre>, </pre> preformated text

creates a separate paragraph spaces and line-breaks matter

<h1>, </h1> level-one heading

headings create a separate paragraph levels go from 1 (largest) to 6 (smallest)

<h6>, </h6> level-six heading

<i>, </i> italic text

<b>, </b> bold text

<tt>, </tt> teletype text

<em>, </em> emphasis

<strong>, </strong> strong emphasis

<cite>, </cite> citation

http://www.math.uh.edu/~torok/math_6298/html/commands.html#fonts

<big>, </big> big text

<small>, </small> small text

<sub>, </sub> subscript

<sup>, </sup> superscript

<u>, </u> underline deprecated; use cite or strong

<s>, </s> strike-through text deprecated

<strike>, </strike> strike-through text

better supported than <s>; deprecated

<code>, </code> computer code use it to stress the meaning of the text

<del>, </del> deleted text not implemented yet; preferred to <strike>

<font>, </font>

purpose: change font size, color, type etc. example: <font size="+1" color="red">larger red words</font>

remark: a better way to achive this is using style sheets

attributes:


size

1, ..., 7

specifies size to be used

default starting size is 3

-3, ..., +3

changes size from that previously in use

color red, #FF00FF

value or word to describe color

Color attribute values give a color definition. The value can be any hexadecimal number, specified according to the sRGB color space, or

http://www.htmlhelp.com/reference/css/

one of sixteen color names. Hexadecimal numbers must be prefixed by a "#" character. Here is a list of colors.

face

specifies list of fonts to be used (in order of preference)

the browser will use the first one available from the list

lists

there are three types of lists: o ordered lists: <ol>, </ol>

the elements of the list are introduced by <li> (list item) the end tag </li> is optional to change the current label to 30, use <li value="30">

o unordered lists: <ul>, </ul> the elements of the list are introduced by <li> (list item) the end tag </li> is optional

o definition lists: <dl>, </dl> the elements of the list are pairs term-definition introduced by

<dt> (definition term)

<dd> (definition definition)

the end tags </dt> and </dd> are optional

lists can be nested examples:

Type of list How it looks HTML code

Ordered List 1. first item

2. second item

o third item, but we want it to have label 33

o next item; note the label

<ol> <li> first item <li> second item <li value="33"> third item, but we want it to have label 33 <li> next item; note the label </ol>

http://www.math.uh.edu/~torok/math_6298/html/colors.html

Unordered List

o first item

o second item

<ol> <li> first item <li> second item </ol>

Definition List

Texas

state of US

Houston

city in Texas

<dl> <dt> Texas <dd> state of US <dt> Houston <dd> city in Texas </dl>

Nested lists o cities:

11 Athens

11 Sparta

o continents:

Africa

America

Asia

Europa

<ul> <li> cities: <ol> <li> Athens <li> Sparta </ol> <li> continents: <ul> <li> Africa <li> America <li> Asia <li> Europa </ul></ul>

tables

simplified example (from HTML 4.0 Reference):

Character Entity Decimal HexRendering in Your Browser

Entity Decimal Hex

non-breaking space

quotation mark = APL quote " " " " " "

ampersand & & & & & &

less-than sign < < < < < <

http://www.htmlhelp.com/reference/html40/tables/table.html

Character Entity Decimal HexRendering in Your Browser

Entity Decimal Hex

greater-than sign > > > > > >

the HTML code that produced it:

<TABLE border="1"> <THEAD> <TR> <TH ROWSPAN=2>Character</TH> <TH ROWSPAN=2>Entity</TH> <TH ROWSPAN=2>Decimal</TH> <TH ROWSPAN=2>Hex</TH> <TH COLSPAN=3>Rendering in Your Browser</TH> </TR> <TR> <TH>Entity</TH> <TH>Decimal</TH> <TH>Hex</TH> </TR> </THEAD> <TBODY> <TR> <TD>non-breaking space</TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> etc. </TBODY> </TABLE> ingredients:

o <table>, </table>: encloses the table

o <thead>, </thead>: encloses the table head; this helps the browser display the head on each page, if the table is longer.

o <tfoot>, </tfoot>: encloses the footer of the table; it must precede the <tbody>

o <tbody>, </tbody>: encloses the body of the table

o <tr>, </tr>: table row

o <th>, </th>: table header cell; used within <tr>

o <td>, </td>: table data cell; used within <tr>

arguments of <th> and <td>:


colspan number columns spanned by the cell

rowspan number rows spanned by the cell

align center , left , right , justify horizontal alignment

valign top , bottom , middle vertical alignment

nowrap suppress word wrap

the example with more features.

To be added: more about table arguments <center>

<basefont>

<blockquote>, <q>

<base>

<address>

forms

frames

http://www.math.uh.edu/~torok/math_6298/html/tables.html