Creative Computing's Web Magic - Guide to HTML 3.2 Elements

Web Hosting by Netfirms | Free Domain Names by Netfirms

Web Master Tricks
Guide to HTML 3.2 Elements

This page of Web Magic contains a guide to HTML which includes basic page elements, page dividers, structural definitions, presentation formatting, and lists. Also some helpful tips regarding file and graphic naming.

HTML uses two types of elements: "empty" (open) or "container" tags. Empty tags represent formatting constructs, such as line breaks, paragraph breaks, and horizontal rules. These represent one time instructions and can be used independently within your page.

Container tags define a section of text (or the document itself) and specify the formatting for all of the selected text. A container tag has both a beginning and ending. Most containers can overlap and hold other containers or empty tags. Specific restrictions apply in some cases and you must be aware of what is acceptable. Improperly used tags may appear correctly in your browser, but will not display correctly in all browsers and will fail validation tests.

Very Poor formatting! Opening a container tag without closing a prior opening tag.

text here

Using Tags properly: The following are examples of the proper use of container tags.

<blockquote> text </blockquote>
 text

Keeping that in mind, now you are ready to review the HTML 3.2 codes to design your site.

[ Basic Elements | Dividers | File & Graphic Naming ]
[ Structural Definition | Presentation Formatting | Creating Lists ]

Web Hosting by Netfirms | Free Domain Names by Netfirms

HTML 3.2 Basic Elements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

This coding will vary depending on the specific standards being implemented on your site. Visit World Wide Web Consortium to find the correct coding for your site standards.

This is used by validation services when determining the standards to which you are testing your pages.

This will tell various browsers the type of document you have and the character coding your are in compliance with.

Document Type	<HTML> </HTML> (beginning and end of file)
Title	<TITLE> </TITLE> (must be in header)
Header	<HEAD> </HEAD> (descriptive info, such as title)
Body	<BODY> </BODY> (bulk of the page)

[ Back to Top ]

Dividers:

Paragraph	<P> </P> (closing tag often unnecessary)
Align Text	<P align=LEFT\|CENTER\|RIGHT></P>
Line Break	<BR> (a single carriage return)
Horizontal Rule	<HR>
Alignment	<HR align=LEFT\|RIGHT\|CENTER>
Thickness	<HR SIZE=?> (in pixels)
Width	<HR width=?> (in pixels)
Solid Line	<HR NOSHADE> (without the 3D cutout look)

[ Back to Top ]

Structural Definition (appearance controlled by browser preferences)

Heading	<H?></H?> (the spec. defines 6 levels)
Align Heading	<H? align=LEFT\|CENTER\|RIGHT></H?>
Division	<DIV></DIV>
Align Division	<DIV align=LEFT\|RIGHT\|CENTER></DIV>
Block Quote	<BLOCKQUOTE></BLOCKQUOTE> (displayed as indented)
Emphasis	<EM></EM> (usually displayed as italic)
Strong Emphasis	<STRONG></STRONG> (usually displayed as bold)
Citation	<CITE></CITE> (usually italics)
Code	<CODE></CODE> (for source code listings)
Sample Output	<SAMP></SAMP>
Variable	<VAR></VAR>
Author's Address	<ADDRESS></ADDRESS>
Large Font Size	<BIG></BIG>
Small Font Size	<SMALL></SMALL>

[ Back to Top ]

Presentation Formatting (author specifies text appearance)

Bold	<B></B>
Italic	<I></I>
Subscript	<SUB></SUB>
Superscript	<SUP></SUP>
Typewriter	<TT></TT> (displays in a monospaced font)
Preformatted	<PRE></PRE> (display text spacing as-is)
Width	<PRE width=?></PRE> (in characters)
Center	<CENTER></CENTER> (for both text and images)
Font Size	<FONT SIZE=?></FONT> (ranges from 1-7)
Change Font Size	<FONT SIZE="+\|-?"></FONT>
Font Color	<FONT COLOR="#$$$$$$"></FONT>

[ See Using Colors ]

[ Back to Top ]

Lists

Unordered List:	<UL><LI></UL> -- using <LI> before each list item
Compact:	<UL compact></UL>
Bullet Type	<UL TYPE=DISC\|CIRCLE\|SQUARE> (for the whole list)
	<LI TYPE=DISC\|CIRCLE\|SQUARE> (this & subsequent)
Ordered List	<OL><LI></OL> (<LI> before each list item)
Compact	<OL COMPACT></OL>
Numbering Type	<OL TYPE=A\|a\|I\|i\|1> (for the whole list)
	<LI TYPE=A\|a\|I\|i\|1> (this & subsequent)
Starting Number	<OL START=?> (for the whole list)
	<LI VALUE=?> (this & subsequent)
Definition List	<DL><DT><DD></DL> (<DT>=term, <DD>=definition)
Compact	<DL COMPACT></DL>
Menu List	<MENU><LI></MENU> (<LI> before each list item)
Compact	<MENU COMPACT></MENU>
Directory List	<DIR><LI></DIR> (<LI> before each list item)
Compact	<DIR COMPACT></DIR>

[ Back to Top ]

File & Graphic names:

The filename should indicate the purpose of the file and be easy to remember.
I've noticed many people are using mixed cased filenames for both links and graphics and also long file names. While the Windows/DOS environment is case-insensitive UNIX and perhaps other operating system environments are case-sensitive. The filename should fit in file naming restrictions of all common operating systems.

When you are providing files or graphics for others to download and they are not capable of saving in the long filename format, then they have to modify these file names to save them on their systems. This can cause problems! Suppose you provide code for linking that contains long file names and although the filename can be changed on the server, those that validate locally will have errors for that coding. Be aware of the working environment of all users.

People tend to search using lower case, so if you mix lower and upper case within your filenames or URL then you could be making it more difficult for people to locate your site.

[ Back to Top | Home ]

Web Hosting by Netfirms | Free Domain Names by Netfirms

Please Click To Visit Our Friends At:

Home

Web Hosting by Netfirms | Free Domain Names by Netfirms

HTML Tips
HTML Validation
CGI Tips
Web Security
Search Engines
Spam Mail

Online Services
META Tag
Generator
Web Whois

Site Resources
Site Links
Earn Cash

DBMan FAQ

Creative Computing

Contact
Guest Book