Homepage
Frames off
Samples 2Samples for IE
Samples 1 Navigational tools
Style sheets
Services
Java Script
Remote control
Cookies
Forms
Clickable button
Static GIFs
Animated GIFs
GIF rollovers
Tables
Boxes
Wingdings
Samples 2 GIF rollovers
Shadows
Fonts
Popup window
System Info
Samples for IE IFrame
Filters
HomepagePopup Remote
Mike Cockburn's HTML Sample Page #1: sample.htm
HTML Samples
I use this page to save some samples of web page tools I have used. It provides me a good quick reference to handy facilities such as: JavaScript, CSS Style sheets, forms processing, transparent and animated GIFs, hit counter, cookies, tables, fonts and more.
These are for the most part intended for use with Internet Explorer 3 (or later) or Netscape 3 (or later).
For samples using more recent browser functionality see Samples 2 or Internet Explorer samples.
Navigational Tools
- Drop down address selector - see the top of my main homepage. These do not work on old browsers as they use JavaScript!
- List of links using frames - see this site using frames.
- Navigation bar on left using a table - see the left side of this page.
- Quick reference table - see an example on my main homepage.
Style sheet
There is a single style sheet used by this page and all the pages on this site. Some of the things it does are as follows:
- The links on the left are set to change color as the mouse goes over. This is done in the definition for the <a> tag.
- The headers have all been set to have the grey box around them
Services available on the internet
- See my homepage for examples of a web page hit counter. Also a link to a live weather forecast for Ottawa.
Javascript is used to create and operate this Popup Remote control
Click here to try it!Javascript is used to update these form boxes
Javascript sample using cookies
| This will take you to another page which will prompt for your name. This just stores your name as a cookie on YOUR computer for later use in greeting you in a nice friendly way. Nothing is sent back to me so I cannot see what name you entered. Subsequent invocations of this will display to you the answer you gave before. |
Javascript SelectorSet Object
This tool is useful if the use must select one or more values from a long list.Click here to see Details
Form processing - serverless response via email
|
Please complete this form the choose the send button below. JavaScript is used to verify the required fields name and phone have been entered before the form is submitted. If your browser does not support Java or if it is disabled then this will submit the form without validation. |
* indicates a required field.
Popup details using forms
Buttons, without needing graphic download
Static GIFs
![[mikec2.gif (34kb)]](mikec2.gif)
![[me.gif (15kb)]](me.gif)
![[mikec.gif (3kb)]](mikec.gif){kind=small}
Animated GIFs
Here's a silly little joke for you...
|
Here is a little animation I created of a kayak roll. I even did the drawing myself... |
| Click on the following image for a short movie of Mauro and I. We we're doing a trick where one canoe drives over top of another one. While there were several failed attempts at this as Mauro will attest we did, in the end, manage to do it without dumping. (Don't try this at home!) |
![[photo.gif (189kb)]](filmcanu.gif)
[189 kb, 6 frames]
GIF Rollover using javascript
If you want to stay here without jumping in Explorer just omit the href=. For Netscape the actions will not happen without the href so it must be there.Here's a silly little joke for you...
A table with some style attributes
|
Guess how this is done???
|
This gives the effect of a shadow around the box.
This could be done with a graphic file but it might slow down the
loading of the page.
|
||
|
|||||
|
|||
Wingdings
| These fonts may only be available if you are running a Windows operating system. Note that if you use these the client viewing your site must also have the font installed. |
| a-z | abcdefghijklmnopqrstuvwxyz |
| A-Z | ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 0-9 | 0123456789 |
| Lower case symbols `-=[]\;',./ | `-=[]\;',./ |
| Upper case symbols ~!@#$%^&*()_+{}|:"<>? | ~!@#$%^&*()_+{}|:"<>? |
| Other ALT codes |
|
| a-z | abcdefghijklmnopqrstuvwxyz |
| A-Z | ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 0-9 | 0123456789 |
| Lower case symbols `-=[]\;',./ | `-=[]\;',./ |
| Upper case symbols ~!@#$%^&*()_+{}|:"<>? | ~!@#$%^&*()_+{}|:"<>? |
| Other ALT codes |
(skipped) |
| a-h i-s t-z{}|~ | a b c d e f g h ijklmnopqrs tuvwxyz{}|~ |
| A-Z | ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 0-9 | 0123456789 |
| Lower case symbols `-=[]\;',./ | `-=[]\;',./ |
| Upper case symbols ~!@#$%^&*()_+{}|:"<>? | ~!@#$%^&*()_+{}|:"<>? |
| Other ALT codes |
|
| a-z | abcdefghijklmnopqrstuvwxyz |
| A-Z | ABCDEFGHIJKLMNOPQRSTUVWXYZ |
| 0-9 | 0123456789 |
| Lower case symbols `-=[]\;',./ | `-=[]\;',./ |
| Upper case symbols ~!@#$%^&*()_+{}|:"<>? | ~!@#$%^&*()_+{}|:"<>? |
| Other ALT codes |
|
| a-z | abcdefghijklmnopqrstuvwxyz |
| A-Z | A B C D E F G H I J K L M N O P Q R S T U V W X Y Z |
| 0-9 | 0123456789 |
| Lower case symbols `-=[]\;',./ | `-=[]\;',./ |
| Upper case symbols ~!@#$%^&*()_+{}|:"<>? | ~!@#$%^&*()_+{}|:"<>? |
| Other ALT codes |
|