Mentat Consulting Pty Ltd - WebTips Commands Page - Professional Web Site Design and Consulting Services.

Mentat Consulting Pty Ltd - Web Design and Consulting Services

Specialising in Quality Graphics and Animations

Please note: you need Flash to view navigation links above.

[Webtips Home] [Webtips Commands] [Webtips Notes] [Webtips Links] [bottom]

This section contains the Basic HTML Commands.

It includes the following subjects:

Basic HTML Document Structure
BODY Content: Block and Inline Elements
BODY Content: Logical and Physical Highlighting Elements
Character and Entity References

Future subjects to be included:

Using Frames
Online Forms
Working with Tables
Cascading Style Sheets
JavaScripts
Event Handlers
Meta commands

Basic HTML Document Structure:

Every HTML document has two main parts:

Head: Contains info about the document, but is not displayed to the reader.

Body: Contains the part that will be displayed by a browser.

The following is an example of the basic structure of all HTML documents.
(It also includes the modification required if using frames)

<HTML>

<HEAD>
...elements valid in the document HEAD (ie: Title, Meta, JavaScript, Style)
</HEAD>
<FRAMESET ...>
....FRAME and FRAMESET Elements ...
</FRAMESET>
<NOFRAMES>
<BODY> ***
...elements valid in the document BODY (see below)
</BODY>
</NOFRAMES>
</HTML>

*** The <BODY> tag can contain the following attributes:

background (image source used for background);
text, link, alink or vlink (color of regular text, non-visited link, active link, or visited link)

BODY Content: Block and Inline Elements

Body content elements are divided into two broad categories: block and inline.

Block elements define blocks of text, such as paragraphs or tables.
Inline elements define sections of text or inserted objects
such as images or applets that appear inline within the text.

In general, Inline elements can appear inside a Block element, but not vice-versa.

The following is a list of Block Elements:
(This table is not exhaustive... just meant to get you started!)

DESCRIPTION START END ATTRIBUTES

Paragraphs <P> optional end tag </P> align

Center <CENTER> </CENTER> {centers enclosed text}

Line Breaks <BR> none (empty) clear="..." (to have text start after the end of an image - to the left or right

Quotation <BLOCKQUOTE> </BLOCKQUOTE> align

Unordered Lists
    List Item (nested) <UL>
    <LI> </UL>
    optional </LI> type="..." (disc, circle, square - for bullet points)

Ordered Lists
    List Item (nested) <OL>
    <LI> </OL>
    optional </LI> type="..." (A, a, I, i, 1 - for bullet points)

Menu List <MENU> </MENU>

Description List <DL> </DL>

Preformatted Text <PRE> </PRE> {Preserves spaces and CR (carriage returns) - in typewritten font}

Block Division <DIV> </DIV> align

Table
    Caption
    Table Heading
    Table Body
    Table Rows
        Table Detail
    Table Foot
<TABLE>
    <CAPTION>
    <THEAD>
    <TBODY>
    <TR>
        <TD>
    <TFOOT>
</TABLE>
    </CAPTION>
    </THEAD>
    </TBODY>
    </TR>
        </TD>
    </TFOOT> *** (see explanations below)
align; valign; background; bgcolor; border; cellpadding; cellspacing; colspan; rowspan; height; width; hspace; vspace

*** Explanation of table attributes:

align (floats table to left, right or center of space available) - table
align (places caption to the top or bottom of table) - caption
align or valign (specifies how the cell contents should be horizontally or vertically aligned within the cell) - thead, tbody, tr, td, tfoot
background (image source used for background) - table, tr, td
bgcolor (color of background if no image is being used) - table, thead, tbody, tr, td, tfoot
border (width of outline around table & cells) - table
cellpadding (padding space w/in cell around text) - table
cellspacing (padding space between cells) - table
colspan or rowspan (# of columns or rows this cell covers) - td
height or width (% of space available or size of table in actual # of pixels) - table
height or width (% of table width or size of cell in actual # of pixels) - td
hspace or vspace (padding to left/right or above/below tabe) - table

The following is a list of Inline Elements:
(This table is not exhaustive... just meant to get you started!)

DESCRIPTION START END ATTRIBUTES

Font <FONT> </FONT> face (name of font type); size (1=smallest, 7=largest, default=3, "+n" or "-n" (increases or decreases size relative to surrounding font)

Horizontal Rule <HR> none (empty) align; width (length); size (height.. default=2); noshade (makes solid line)

Anchors <A> </A> href (hypertext link - external to current doc); name (reference within same doc)

Image <IMG> none (empty) src (location of image source); align; alt (text alternative for image); width; height; border (if zero, eliminates any border around image); hspace or vspace (spacing around image); ismap ("active" server-side image - must be within anchor element); usemap ("active" client-side image - contains href for map)

Map

    Area <MAP>

    <AREA> </MAP>

    none (empty) name (unique identification)

alt; coords (x1,y1 upper-left corner; x2,y2 lower-right corner); href or nohref (browser will or will not take action if user clicks within specified region); shape (type of shape being specified... circle, rect, poly)

Form

    Drop Down List

    Text Box

    Textarea <Form>

    <SELECT>

      <OPTION>

    <INPUT>

    <TEXTAREA> </Form>

    </SELECT>

      </OPTION>

    none (empty)

    </TEXTAREA> action (server program location)

name

{list items}; selected (indicates which item in list is displayed in the box by default

type (button, checkbox, file, hidden, image, password, radio, reset, submit, text); value (initial value of field)

name; cols (width); rows (height)

Object <OBJECT> </OBJECT> {embed data or program}; data (where data or program is located); type (data MIME type); align' width; height; hspace; vspace

BODY Content: Logical and Physical Highlighting Elements

HTML supports two types of phrase-level markup: logical and physical.

Logical markup is more in keeping with the markup language model, and marks blocks of text as pieces of typed computer code, variables or as something to be emphasized. The rendering details are then left to the browser, although hints as to appropriate renderings are part of the HTML specifications.
Physical markup requests a specific physical format, such as boldface or italics. This, of course, gives no clue to the underlying meaning behind the marked-up phrase. Thus, if a browser is unable to implement the indicated markup (e.g., if it is a dumb terminal that cannot do italics), it cannot easily determine an alternative highlighting style..

The following is a list of Logical Highlighting Elements:
(This table is not exhaustive... just meant to get you started!)

DESCRIPTION START END ATTRIBUTES

Strong emphasis <STRONG> </STRONG> {displays as bold}

Emphasis <EM> </EM> {displays as italics}

Headings <H1> </H1> {headings 1 thru 6 - used for web indexing tools}; align

Computer Code <CODE> </CODE> {marks as typed computer code, displays fixed-width font}

Keyboard input <KBD> </KBD> {marks as keyboard input, displays fixed-width typewriter font}

Variable <VAR> </VAR> {marks as variable name, displays italics and/or bold}

Definition <DFN> </DFN> {defining instance of a term, displays italics}

Citation <CITE> </CITE> {marks as citation, displays italics}

Address <ADDRESS> </ADDRESS> {marks as address, displays italics}; align

Abbreviation <ABBR> </ABBR> {marks as abbreviation}

Acronym <ACRONYM> </ACRONYM> {marks as Acronym}

Bi-directional override <BDO> </BDO> DIR (indicates flow of text direction)

Quotation <Q> </Q> {surrounds text with appropriate punctuation}

Literal Characters <SAMP> </SAMP> {marks as sequence of literal characters, displays as fixed-width}

The following is a list of Physical Highlighting Elements:
(This table is not exhaustive... just meant to get you started!)

DESCRIPTION START END ATTRIBUTES

Bold <B> </B> {displays as bold}

Italics <I> </I> {displays as italics}

Underlined <U> </U> {displays as underlined}

Typewriter font <TT> </TT> {displays as fixed-width font}

Small <SMALL> </SMALL> {displays as smaller text}

Big <BIG> </BIG> {displays as bigger text}

Span <SPAN> </SPAN> {style sheet-specified formatting applied to blocks of text}

Subscript <SUB> </SUB> {displays as subscript relative to preceding text}

Superscript <SUP> </SUP> {displays as superscript relative to preceding text}

Using Frames

THIS SECTION IS IN PROGRESS........
Target = "xxx"
"xxx" = Name of frame you want page to display.
If "xxx" is not a valid name - it will create a new window.

Valid "xxx" values: _blank = New unnamed window
_self = load into current location
_parent = load into parent location
_top = load into first successive parent (non-framed page)

Online Forms

THIS SECTION IS IN PROGRESS........
If an online form is submitted where you have used check-box options - when you receive your answers via email, you will see "on" listed next to the name of that field where the check box was selected. If you would like to customize that response (ie: to "yes" or "selected") you should add the attribute "value" with your choice of response (ie: "value=yes").

You can force wrap in text areas by using the attribute wrap = "soft" or "hard".

Use CSS to customized the font face and size within online form text boxes.

When the user selects to submit, this is the time to allow them to go back and change or add anything missing on form

Working with Tables

THIS SECTION IS IN PROGRESS........

Cascading Style Sheets

Need to have more control over where things are positioned on the Web Page?
Need to be more creative with Fonts.
Just tired of type <FONT> </FONT> all the time?

Try using CSS!

THIS SECTION IS IN PROGRESS........
Want to indent and not use <DIR> - try using CSS.

JavaScripts

THIS SECTION IS IN PROGRESS........

Event Handlers

THIS SECTION IS IN PROGRESS........
Standard Event Handlers:
onClick
onDblClick
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseMove
onMouseOut
onMouseOver
onMouseUP

Meta Commands

THIS SECTION IS IN PROGRESS........
To bring in the new page as a slide show use the following command within the head section:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=12)">

Character and Entity References
HTML supports mechanisms for representing any "defined" character using special sequences of ASCII characters. These mechanisms are called character references, which reference characters using numbers, and entity references, which reference them using symbolic names. For example, the character reference for the character é is é (the semicolon is necessary and terminates the special reference), while the entity reference for this same character is é.

A character reference represents each character by the numeric position of the character in the UCS character set. Thus, the character reference for a capital U with an umlaut (Ü) is &#220, since this is the character at position 220 (decimal) in UCS (Universal Character Set ).

As of HTML 4, character references can also be given as hexadecimal numbers. For example, the capital U with an umlaut (Ü) can be referenced as either of:
Ü Decimal character reference
Ü Hexadecimal character reference
where the letter "x" just after the hash (#) character indicates a hexadecimal character reference. Current browsers, however, do not understand hex character references, so this form should be avoided in HTML documents.

In HTML, the four ASCII characters (>), (<), ("), and (&) are interpreted in special ways (e.g., the < marks the start of a markup tag). To display them as ordinary characters, you should use entity references in their place. The references for the most common characters are listed in the following table. (For a full list go to Appendix A of the HTML 4.0 SourceBook by Ian S. Graham.)

Char- acter	Decimal	Hex	Entity Reference	Char- acter	Decimal	Hex	Entity Reference
"	34	22	"	&	38	26	&
<	60	3c	>	>	62	3e	<
	160	a0		¡	161	a1	¡
¢	162	a2	¢	£	163	a3	£
¤	164	a4	¤	¥	165	a5	¥
¦	166	a6	¦	§	167	a7	§
¨	168	a8	¨	©	169	a9	©
ª	170	aa	ª	«	171	ab	&laqno;
¬	172	ac	¬		173	ad
®	174	ae	®	¯	175	af	¯
·	176	b0	°	±	177	b1	±
²	178	b2	²	³	179	b3	³
´	180	b4	´	µ	181	b5	µ
¶	182	b6	¶	·	183	b7	·
¸	184	b8	¸	¹	185	b9	¹
º	186	ba	º	»	187	bb	»
¼	188	bc	¼	½	189	bd	½
¾	190	be	¾	¿	191	bf	¿
À	192	c0	À	Á	193	c1	Á
Â	194	c2	Â	Ã	195	c3	Ã
Ä	196	c4	Ä	Å	197	c5	Å
Æ	198	c6	Æ	Ç	199	c7	Ç
È	200	c8	È	É	201	c9	É
Ê	202	ca	Ê	Ë	203	cb	Ë
Ì	204	cc	Ì	Í	205	cd	Í
Î	206	ce	Î	Ï	207	cf	Ï
Ð	208	d0	Ð	Ñ	209	d1	Ñ
Ò	210	d2	Ò	Ó	211	d3	Ó
Ô	212	d4	Ô	Õ	213	d5	Õ
Ö	214	d6	Ö	×	215	d7	×
Ø	216	d8	Ø	Ù	217	d9	Ù
Ú	218	da	Ú	Û	219	db	Û
Ü	220	dc	Ü	Ý	221	dd	Ý
Þ	222	de	Þ	ß	223	df	ß
à	224	e0	à	á	225	e1	á
â	226	e2	â	ã	227	e3	ã
ä	228	e4	ä	å	229	e5	å
æ	230	e6	æ	ç	231	e7	ç
è	232	e8	è	é	233	e9	é
ê	234	ea	ê	ë	235	eb	ë
ì	236	ec	ì	í	237	ed	í
î	238	ee	î	ï	239	ef	ï
ð	240	f0	ð	ñ	241	f1	ñ
ò	242	f2	ò	ó	243	f3	ó
ô	244	f4	ô	õ	245	f5	õ
ö	246	f6	ö	÷	247	f7	÷
ø	248	f8	ø	ù	249	f9	ù
ú	250	fa	ú	û	251	fb	û
ü	252	fc	ü	ý	253	fd	ý
þ	254	fe	þ	ÿ	255	ff	ÿ

[top]

[ home ] [ company ] [ people ] [ services ] [ portfolio ] [ brochures ]
[ contact ] [ links ] [ tips ] [ testimonials ] [ templates ] [ site map ]
[ Terms and Conditions ]