This is a series of simple examples of HTML pages. For some good explanations of HTML see Raggett's 10 Minute Guide to HTML and the W3C's HTML 4.0 Home Page. O'Reilly also has a good html book.

To see how each page is coded, right-click on the page, and choose "View Source".

You'll note the html "commands" are always enclosed in angle brackets. These angle-enclosed items are called "tags".

Here's a listing of all HTML tags.

Microsoft's comprehensive web authoring site

Of course you can get a good html editor for free these days (Front Page Express is included free with Microsoft Internet Explorer, and Netscape Composer is free from Netscape) but knowing how to write code directly can still be useful, especially when adding active elements with DHTML.

Getting Started:
First example: the minimum
The Paragraph, Italic, Bold, and Font tags
The Break and Horizontal Rule tags
Basic Tables
Links
Special Characters
Headings tags
Preformatted Text
Images
 
Now that you know how to add images to your pages, you'll want to grab a few images off of the web. Here are some places where you can do that without violating copyright laws: (to save an image to disk, right-click and choose "Save").
Animated GIFs Library
Textures, Backgrounds and Icons Library List
FreeGraphics.com
Big list of web development links

To create your own images, including soft shadow text and animated GIFs, a good, inexpensive program is PaintShop Pro.

Meta Content:
OK, that will get you a basic document, but you'll usually add a couple more tags for information about the document. Using the Head tag, you can specify some information that will not be displayed directly in the document, such as a document title, document expiration date, and language type.
The Head and Body tags
Tags in the head tag: Title tag
Other tags in the Head tag: Author, Language type, Document Expiration  The Document Expiration tells the browser that a new copy of the document should be fetched from the server rather than just viewing the cached copy. However, this sample also shows the "no cache" tag, so in this example, the Expiration tag is redundant.

Comments in an HTML page

Using the body tag, you can specify background color, background image, and other attributes.
Background Image and Document Colors

Colors:
Colors are specified by specifying the amount (0-16) of red, blue and green, for example:
"#FF0000", that is 16 (hexidecimal) red, 0 blue, and 0 green. You can also use color names.
Color Table

Style Sheets:
O.K., now that you've gotten this far, it is time for me to tell you that you're doing it all wrong! For one thing, you aren't supposed to use the <FONT> tag. HTML is supposed to be used just for document content description, for example, saying where paragraphs and headings start and end. Display information such as font size, color and face should be specified separately. That way it is easier to change formatting without having to go through the document itself, and it makes it easy to format a bunch of pages in the same way.

The way to to separate the content from the formatting is to use HTML for content description only, and to use "Cascading Style Sheets" to specify document formatting. Here's a few examples (more coming at some point here...). The style sheet info in these examples is in enclosed in the <STYLE> tag, but you can put the style info in another file and refer to it from multiple pages.

Style Sheet example 1: The body tag.
Style Sheet example 2: Formatting standard html tags.
Style Sheet example 3: Making redefined tags.
 
A couple of important notes: Style sheets are only functional in 4+ browsers. Using a stylesheet-capable editor like Dreamweaver makes working with style sheets very easy.

BTW, "Cascading Style Sheets" are called "Cascading" because you can apply multiple style declarations to a single element, in which case the last specified style takes precedence. Also, multiple style items can each specify different aspects, in which case they are combined.

More on style sheets: Check out the Microsoft web authoring site listed at the top of this page.

Active Pages:
The next step after creating static pages is to create pages that are active, that is, that have content that is created by a program and can change depending on various inputs. The program can be in the page or on the server. Here are a few simple examples to illustrate the basic concepts.

Client Side Examples: These run in the web page on the client, so you can see the script with View Source (right-click on page).
Simple script example 1
Simple script example 2
Simple script example 3 (Same as example 2, but uses VBScript. JScript is the default)
Simple script example 4
Open Window Go ahead, pop up a new window and annoy your users.
Timeout This one is also a bit rude, but can be useful in some situations.
Navigatation Script
Binary Counter #1
Base X Counter

All of the examples above except the first one will actually run only in IE4 or later, at least at the time of this writing. This is because they are demonstrations not just of the JScript language which is found in IE4 and Netscape (in Netscape it is called JavaScript), but also of the Document Object Model, first implemented in IE4 but proposed to the W3C and soon to be a standard. With the Document Object Model (apparently now called the Dynamic HTML Object Model), you don't just have a simple scripting language in the page with the ability to manipulate a few elements, the script can work on any page element or group of elements. The elements also can have behaviors and attributes attached to them, for example: window.close. In example 4, an element is given the name "NumberText". You can then change the innerHTML property of the element from a script in the page. And, any element can respond to just about any event (like onClick).

Microsoft calls this combination of a script (such as JScript or VBScript) and the Document Object Model Dynamic HTML. There are some more useful examples of DHTML at the latter site. For one particularly complex example, look at the Alien Head.

For more examples of JScript in particular, check out the Mining Co JavaScript site. Microsoft also has a comprehensive JScript site. You can generally copy examples from any site and paste them into your own pages, so it is often not necessary to write an entire script from scratch. If there are copyright restrictions on the script, it will say so in the source, in which case you can still use the script as an example for learning how to write your own.

Server Side Examples: These run on the server, so to display the source, I gave them an extra .TXT extension. Copy them to your web server, remove the TXT extension and then view them in your browser.

Server Side Includes allow you to include other files in a given html file. This means you can do things like put a document footer in all of the pages on your site. When you want to change the footer you can just change that one file instead of editing all of the pages on your site. (There are better ways to do this, like for example the Dreamweaver Library feature. Using SSI makes your server work harder.)
SSI example
ASP is basically DHTML that executes on the server. Except, you have more objects to work with. (A object is a type of element or element collection that has behaviors and properties. For example, in DHTML window is an object and close is one of its methods.) Even more importantly, you can write your own objects in any programming language and use those.

Here is one simple example:
ASP example 1

The main ASP objects are:
Request
Response
Server
Application
Session
ObjectContext

The Request object contains information about the client request. For example, if "submit" was click on a form, the Request object will contain info about all of the fields in the form (like what text is entered in each text box).
The Response object sets properties in the page returned to the client. For example, there is a write method that allows text to be written to the output page.

Here is a very simple example of using the Request and Response objects: (copy these to your server and run them).
ASP example 2: Input page Output page

ASP example 3: Display the source code of another page. (Requires ASP2HTM, available in the IIS Resource Kit. The Resource Kit also has more examples.) This displays the source of another page with the tags in blue and the text in black. Anyone want to work on this and make it more useful? (Like for example provide an input page and format the output more nicely.)

A few more asp examples:
Simple database access using ADO. You'll need to install the MS Access file test1.mdb as a System DSN (Do this in the ODBC applet in the control panel).
You'll need a personal certificate to test out the next two examples. You can get a free personal certificate from Thawte. After copying the following two examples to your website, turn on "Require Client Certificate" in the ISM.
Certificate example 1
Certificate example 2

Microsoft's Comprehensive ASP Site
Microsoft Developer Samples

Tidy (Utility for cleaning up HTML)

Last update 3/7/00