Mentat Consulting Pty Ltd - Web Design and Consulting Services Specialising in Quality Graphics and Animations Animation and Flash Movies
Using HTML, DHTML, Java Script, CSS, Tables, Forms, Image Mapping, and Digital Photo Editing
Australia's Finest
Customised Graphics
Please note: you need Flash to view navigation links above.
[Webtips Home]  [Webtips Commands]  [Webtips Notes]  [Webtips Links]  [bottom]

Horizontal Line


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


Horizontal Line


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)



Horizontal Line

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




Horizontal Line

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



Horizontal Line


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 &#233; (the semicolon is necessary and terminates the special reference), while the entity reference for this same character is &eacute;.

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:
&#220; Decimal character reference
&#xDC; 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 &quot; & 38 26 &amp;
< 60 3c &gt; > 62 3e &lt;
  160 a0 &nbsp; ¡ 161 a1 &iexcl;
¢ 162 a2 &cent; £ 163 a3 &pound;
¤ 164 a4 &curren; ¥ 165 a5 &yen;
¦ 166 a6 &brvbar; § 167 a7 &sect;
¨ 168 a8 &uml; © 169 a9 &copy;
ª 170 aa &ordf; « 171 ab &laqno;
¬ 172 ac &not; ­ 173 ad &shy;
® 174 ae &reg; ¯ 175 af &macr;
· 176 b0 &deg; ± 177 b1 &plusmn;
² 178 b2 &sup2; ³ 179 b3 &sup3;
´ 180 b4 &acute; µ 181 b5 &micro;
182 b6 &para; · 183 b7 &middot;
¸ 184 b8 &cedil; ¹ 185 b9 &sup1;
º 186 ba &ordm; » 187 bb &raquo;
¼ 188 bc &frac14; ½ 189 bd &frac12;
¾ 190 be &frac34; ¿ 191 bf &iquest;
À 192 c0 &Agrave; Á 193 c1 &Aacute;
 194 c2 &Acirc; à 195 c3 &Atilde;
Ä 196 c4 &Auml; Å 197 c5 &Aring;
Æ 198 c6 &AElig; Ç 199 c7 &Ccedil;
È 200 c8 &Egrave; É 201 c9 &Eacute;
Ê 202 ca &Ecirc; Ë 203 cb &Euml;
Ì 204 cc &Igrave; Í 205 cd &Iacute;
Î 206 ce &Icirc; Ï 207 cf &Iuml;
Ð 208 d0 &ETH; Ñ 209 d1 &Ntilde;
Ò 210 d2 &Ograve; Ó 211 d3 &Oacute;
Ô 212 d4 &Ocirc; Õ 213 d5 &Otilde;
Ö 214 d6 &Ouml; × 215 d7 &times;
Ø 216 d8 &Oslash; Ù 217 d9 &Ugrave;
Ú 218 da &Uacute; Û 219 db &Ucirc;
Ü 220 dc &Uuml; Ý 221 dd &Yacute;
Þ 222 de &THORN; ß 223 df &szlig;
à 224 e0 &agrave; á 225 e1 &aacute;
â 226 e2 &acirc; ã 227 e3 &atilde;
ä 228 e4 &auml; å 229 e5 &aring;
æ 230 e6 &aelig; ç 231 e7 &ccedil;
è 232 e8 &egrave; é 233 e9 &eacute;
ê 234 ea &ecirc; ë 235 eb &euml;
ì 236 ec &igrave; í 237 ed &iacute;
î 238 ee &icirc; ï 239 ef &iuml;
ð 240 f0 &eth; ñ 241 f1 &ntilde;
ò 242 f2 &ograve; ó 243 f3 &oacute;
ô 244 f4 &ocirc; õ 245 f5 &otilde;
ö 246 f6 &ouml; ÷ 247 f7 &divide;
ø 248 f8 &oslash; ù 249 f9 &ugrave;
ú 250 fa &uacute; û 251 fb &ucirc;
ü 252 fc &uuml; ý 253 fd &yacute;
þ 254 fe &thorn; ÿ 255 ff &yuml;

[top]
Australia's Finest
Australia's Finest
Customised Graphics
Created: Mentat Web Design.  Updated: 13 Aug, 11
Copyright © 1999-2011   Mentat Consulting Pty. Ltd.
[Best: IE V4+ 800x600 Java & Flash enabled]   [ ]
[ home ]   [ company ]   [ people ]   [ services ]   [ portfolio ]   [ brochures ]
[ contact ]   [ links ]   [ tips ]   [ testimonials ]   [ templates ]   [ site map ]
[ Terms and Conditions ]