[worker]

COMPUTEREASE Sample HTML Page

[CE logo] This page is really just a test. I have tried to use every valid and permitted (and proposed) HTML command to illustrate what you can do with the language. I should re-phrase that: this is every command I have come across SO FAR. I've tried 2.0 and proposed 3.0 commands to let you try them under different browsers.

Like with all software products, I cannot find a procedural listing of HTML. There must be a few out there to be sure but I haven't found them in very obvious places. Since COMPUTEREASE is committed to making technology more understandable, I thought I'd make my own sample page. Despite all the rapid advances in the net, there are still a few black hole discrepancies of helpful information.

I hope you find this useful.

Copy whatever you are interested in.

[*] BACKGROUND AND BODY COLOURS

The background of this page is a repeated JPEG image called ALIENSKI.JPG that I found on a MIT archive (I think). You may also use GIFs as repeating backgrounds.

Check out the other backgrounds at MIT. Dr. Randy D. Ralph has a web page with interesting info, tools, and backgrounds. The people at TextureLand seem to have nothing better to do all day but make very interesting backgrounds.

You may override the default colour of text with the <BODY> command. The quotes and the pound symbol noted below are required. Substitute a hexadecimal colour code for the xxxxxx's. Default colours are set in your Web browser.

Here are a couple of sites that display the colours: palette 1
palette 2

The normal text size has been overriden with a <BASEFONT SIZE=n> command.

[*] STYLES

I often leave spaces after the <Hn> and before the </Hn> code to ease editing. There are 6 heading styles available.

This is Heading 1 Style

This is Heading 2 Style

This is Heading 3 Style

This is Heading 4 Style

This is Heading 5 Style
This is Heading 6 Style
This is the Address Style

This is the TT style, a non-proportional font

It is very easy to centre text.
Everything stays centred until I clear it.
These lines have been broken with the <BR> code.

[*] HORIZONTAL LINES

You can draw horizontal lines or "rules" on your Web pages. They will be automatically centred. They are shortened automatically if an object, a graphic, is in the way. Don't forget that screen width is not absolute; depends of VGA and super VGA.

The following line, without options, is drawn across 100% of the screen.

This next line, with WIDTH=50% option, is shorter.
This next line is a different SIZE=10 and colour NOSHADE.
Right justified this short line is, way over here --->.

[*] DIRECT FONT CONTROL

You may directly control font display, to a point. Particular fonts and sizes you should not attempt using because you really don't know what people at the other end have. Still, these techniques are more direct than the styles.

Welcome to COMPUTEREASE

The <FONT SIZE=+n> command is used to increase the font size. I don't know what the number actually means. You may also descrease size. </FONT> stops all font changes. Note, the <I> command to enable italic. Bolding is done, not surprisingly, with the <B> command. These may not work with some browsers. There exist <STRONG> and <EM> commands that are more flexible with different browsers.

You can also make text blink!

[*] LISTING ITEMS WITH BULLETS

This is an "unordered" list meaning it has no numbering, just bullets. <LH> is the optional list header. <LI> is a line element. The <LI> commands are sensitive to a preceding space... Similar commands are <DIR> or <MENU> commands.

[*] LISTING ITEMS WITH NUMBERS

This is an "ordered" list meaning it has numbering, not bullets. See above.
    Changing Your Password
  1. Choose Tools, User ID, Password, Set...
  2. Type your current case-sensitive password and press OK.
  3. Type your new password noting the minimum length and press OK.
  4. Type your new password again for confirmation purposes and press OK.

[*] USING A DROP-LIST WITHOUT BULLETS

Optional heading line.
Bob
Here are several lines of information about Bob. Notice how the text is indented in the "hanging paragraph" fashion. Quite pleasing. Note I bolded the names.
Here's a separate item with Bob's stuff.
Mary
I think DT means drop text. DD means drop description.
Albert
I embed lots of spaces in my HTML code for this object to make it easier to edit and read. You may even leave extra spaces after the <DT> and <DD> codes.

[*] USING A DIR LIST, WITH COLUMNS

Purportedly if the entries in a "directory" are short, they will be automatically arranged into multiple columns. Neither Netscape nor AirMosaic render this properly.
  • Bob
  • Mary
  • Ted
  • Albert
  • Ernie
  • Francis

    • [*] USING A MENU LIST

    This is supposed to list things without any bullets or numbers.
  • Bob
  • Mary
  • Ted
  • Albert
  • Ernie
  • Francis

    • [*] BOOKMARKS

    Bookmarks are used to reposition within a page, as opposed to moving to a new page. However, you may refer to a bookmark when going to a different page, so to bullseye the location on the new page.

    this goes to the bookmark Go to the definition of a "Weenie"

    this defines the bookmark "Weenie" Defined

    [*] DISPLAYING A TABLE

    Warning: 3.0 specific command. Proposed. Looks like crap in many browsers.

    Note the table does not go across the entire screen, only 80% of it. This is determined by the <TABLE WIDTH=x%> option. If omitted the table takes up the complete width of the screen. Don't forget that screen width is not absolute; depends of VGA and super VGA.

    The table border is optional. Omit the word in the <TABLE> command for it to be invisible. BORDER=6 makes the outer border thicker. The thickness of the inner lines is controlled with CELLSPACING=n.

    Note that individual columns can be set to use a percentage of the table's dimensions and can have distinct alignment. Table cells may contain graphics, multi-line elements, word-wrap, and distinct formatting.

    PRODUCT VERSION LEVEL TAUGHT
    Windows 95
    Windows and Windows for Workgroups
    Macintosh O/S (System & Finder)
    MS-DOS or IBM PC-DOS
    UNIX     		1
    2
    3
    4
    5     		1
    3
    3
    3
    3

    [*] DISPLAY A COLUMNAR LIST

    Use the "preformatted text option." This is a better method to use for tabular lists until the HTML standard is officially set to support tables. Sure, everybody and their dog uses Netscape (which supports tables) but a few people (and their cats?) use text only or other intolerant browsers. 
              Jan  Feb  Mar
nuts      300  500  100
bolts     200  900  400
washers  1000 1110 1150

    [*] INCLUDING AN E-MAIL REFERENCE

    You can help people send e-mail by, not only listing the e-mail address, but letting browsers click on it. For example, to send an e-mail to me, you merely need to click on the hyperlink. Try it: email me. This uses the MAILTO reference. I think what happens after a person clicks on a link depends on the Web browser one uses.

    [*] LETTING VISITORS DOWNLOAD A FILE

    You can help access files for download by using the FTP reference. Try it: download Alien Skin wallpaper
    DOES NOT WORK! Still testing...

    [*] EMBEDDING GRAPHICS

    HTML supports embedded GIF and JPEG graphic formats, if not more. Text flows automatically when an image is large; rules stop short. I have seen the ABSMIDDLE option from time to time but it doesn't seem to do anything.

    This image is displayed without options. It will appear immediately after the text it is positioned beside. [*] Here is some text immediately after the small image.

    This image is display with RIGHT alignment. Look waaaaay over ---->. [*]

    You may also use TOP, BOTTOM, and MIDDLE alignments. LEFT, RIGHT, and CENTER are proposed options for the next version of HTML.

    If an image is not available, the web browser will display a little broken icon. If the browser used does not support text, you can substitute some text, using the ALT="[text]" option. [well, it's not here] I've seen the ALT text appear when attempting to display an HTML document when off-line.

    This is a downloadable image. If you have Netscape 1.1b or higher, [Click] with your right mouse button to download.

    [outer space] This image's size is directly controlled with WIDTH= and HEIGHT= options. Size is measure in points, I think. a border... (note spaces) [SPIDER] Note! It seems to me that you should you a full path to the location of your graphics. Partial paths work but it causes problems later on...

    [*] MISC STUFF

    Non-breaking space: the ampersand followed by NBSP
    To generate the ampersand in a page: the ampersand symbol followed by AMP;

    [*] EXTRA BLANK LINES

    Most, if not all browsers ignore repeated <P> codes.

    For example, there are 5 <P> codes between this sentence and the above. They are implemented as one only. Here's the trick...






    Use a bunch of <BR> codes instead.

    [*] ALL COMMANDS

    Here's a list of all the HTML commands!

    A, ADDRESS, B, BASE, BASEFONT, BLINK, BLOCKQUOTE, BODY, BR, CENTER, CITE, CODE, DD, DFN, DIR, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HP, HR, HTML, I, IMG, INPUT, ISINDEX, KBD, LI, LINK, LISTING, MENU, META, NBR, NEXTID, OL, OPTION, P, PLAINTEXT, PRE, SAMP, SELECT, STRIKE, STRONG, SUB, SUP, TEXTAREA, TITLE, TT, U, UL, VAR, WBR, XMP

    [*] RULES OF THUMB

    You don't have to do these things but it will make your like easier and others will thank you for it. Well, I will anyway.

    [Home]   [Up]   [Le Menu]   [Suits]   [Calendar]   [PSION]   [HTML]   [small world]
    Home | Top | Services | Resources | Availability | PSION | Samples | blake's world

    Go back to COMPUTEREASE .

    Last updated: 21 September 1996

    ~end of page~