HTML Example Bank

	General
Tech Booklist Java Links OO/UML Links Aspect Links Tools Links Open Source Architecture Design Patterns Refactoring Methodologies HCI/HCD Links Rule Engines Workflow General Best Practices Quick References

	Web
Web Architecture SOAP/GLUE Web Services XML/EDI/UDDI/XSL HTML

	J2EE
General Servlets/JSPs RMI/JNDI EJB/CORBA JMS Jini/JavaSpaces SNMP/JMX Security/JAAS Connector JPDA

	Persistence
JDBC JDO ORM Java SProcs Data Warehousing

HTML Example Bank

This page contains examples of what I've learned about HTML so far.

Some good references:

NCSA--A Beginner's Guide to HTML

Netscape Color Palette Map - useful

HTML Color Names

HTML Quick Reference (8/20/96)

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

This is an ordered list:

You need to do an ol to open a list
Each item is then preceded with an li
Then you close the list using /ol.

You will be able to do overlays (overlay figures), shapes (polygon, etc), params (send parameters to java)?

This is an unordered list:

First list item
Second list item
Let's see what happens when you add a very large line for the menu, what does it do? Of course it would help if we went off the line. Does it indent a little better than the previous example?

Here is a list using gifs as bullets:

First

Second

And now for a really, really long line that wraps around; note that the text isn't indented properly, and you need to figure out how to indent if you want to have multiply nested lists.

Here is a "more advanced" way to do lists with images:

A proposed enhancement is a plain UL, but it's not here yet. What will this allow you to do, add your own bullets and have the proper indentation, which is what we really want.

Formatting

<S> will ~~strikeout~~ text.

<NOTE> is a mystery to me. I don't see any noticeable differences in how the text looks, so I'm not sure what this is really supposed to do.

is used to italicize text.

is used to bolden text.

is used to underline text.

<TT> is how you display computer type.

~~Strikethrough.~~

This is how you _subscript.

This is how you ^superscript.

This is a blockquote. I guess it's used when you want to quote something?

This is how you change colors: Red Blue Green

You can also have: Teal Maroon Olive Gray Silver Lime Fuschia Aqua

Note: When we forgot the , the text stays green. BUT, the text in the table remains black! Is this another attribute??

There are special symbols; check the symbol reference:

Now you can really do your résumé

Frames

Keywords FRAMESET, FRAME and NOFRAMES

Advantages:

You don't have to keep changing all of your navigation menus.
Makes page look cleaner.

Disadvantages:

Not supported by all browsers.
Can be abused!

Apparently the <META> tag can be used to help the search engines. Does this really work?

To really help the search engines,
http://www.the-vault.com/easy-submit lets you add your URL to just about every major search engine.

Background allows you to tile a gif.
Link is a first time link.
Vlink is a visited link.
Alink is active link, in other words, you are currently clicking on this item.

Tables

Table Heading
NOTE: This is how you create a row that spans multiple columns. You must use the COLSPAN keyword, and give the number of columns to span. So, how do you do a COLSPAN in the middle of the table, as opposed to the beginning?
Heading 1	Heading 2
This should pop up to the left.	This should pop up to the right.
Next row, TR is a ruler.	Yes, yes, I think we're getting this.

Forms

These are submit and reset types:

This is a file tag

This is a range?

This is a scribble?

Note that the marquee works in MS IE but not in Netscape.

This is a marquee

This is a text type:

			
Author:

These are radio types:

Radio One Radio Two

This is what a textarea looks like:

This is a password type:

				
Password:

These are checkboxes:

Check Box One Check Box Two

You can also have hidden fields.

You can create menus. Warning: Netscape won't create a scrollbar, but IE will.

Update, without the multiple keyword, the menu reacts the same in Netscape and IE:

And you will eventually be able to create a menu with submenus. This is not supported yet (2/4/2K)

You can create formal labels:

Name:

Fieldset is also new, it's understood only by IE and you can only align legends to the right or left:

Personal Information Name:
Address:

Corporate Information Employee ID:
Title:

Conventions

Capitalize HTML tag keywords
You can nest tags, but don't overlap them and don't forget any. Always test with Netscape because this is the least forgiving browser. Any typos with manifest themselves as incorrect output, or will actually crash the system.
Use ALT tags as alternates for non-image browsers.
Put tags on a line by itself.
Do tags go before or after?
Indent lists, especially nested ones. It's easier to read.

Does this work? No. Banners are supposed to allow fixed text, while the rest of the text can scroll.

Basefont Size 7
Basefont Size 6
Basefont Size 5
Basefont Size 4
Basefont Size 3
Basefont Size 2
Basefont Size 1

This will BLINK in Netscape, but not MS IE.

Browser Differences

The biggest challenge is that there are numerous different browsers out there, and while there is a specified standard, not everyone interprets that standard in the same way. This is what I've noticed:

Netscape tends to display your page incorrectly if you break HTML conventions or have errors. Use Netscape as a final sanity check.

Other Updates

There's a lot more you can do than from 3 years ago.

Nested lists:

Main

Test 1
Test 2

Test 3
Test 4

You can also:

set the tab order using TABINDEX
Add keyboard shortcuts using ACCESSKEY=
Make elements READONLY

	Quick Links
Touchgraph Wiki Web Eclipse.org Aspectj.org

	OpenSource
Metrics Plug-in

Last updated: Wednesday Apr 09, 2008 @ 06:53 AM

HTML Example Bank

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

Formatting

Frames

Tables

Table Heading

Forms

Conventions

Browser Differences

Other Updates