COMPUTEREASE Sample HTML Page
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
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:
- normal body text: TEXT="#xxxxxx" (default is black)
- unfollowed links: LINK="#xxxxxx" (default is blue)
- followed links: VLINK="#xxxxxx" (default is purple; I'm using red)
- ALINK= is the color of an active or being visited link
The normal text size has been overriden with a <BASEFONT SIZE=n>
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.
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.
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.
Changing Your Password
- Choose Tools, User ID, Password, Set...
- Type your current case-sensitive password and press OK.
- Type your new password noting the minimum length and press OK.
- Type your new password again for confirmation purposes and press OK.
USING A DROP-LIST WITHOUT BULLETS
Optional heading line.
- 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.
- I think DT means drop text. DD means drop description.
- 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.
USING A MENU LIST
This is supposed to list things without any bullets or numbers.
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
this goes to the bookmark
Go to the definition of a "Weenie"
this defines the bookmark
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.
|| LEVEL TAUGHT
Windows and Windows for Workgroups
Macintosh O/S (System & Finder)
MS-DOS or IBM PC-DOS
| 1 |
| 1 |
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...
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.
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.
This image's size is directly controlled with WIDTH= and
HEIGHT= options. Size is measure in points, I think.
a border... (note spaces)
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...
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.
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.
- enter commands in upper case, makes HTML stand out from text
- document your code, please
- leave spaces between sections in HTML page to improve readability
- use American spellings for COLOR, CENTER, etc.
- keep graphics small, at least at the beginning, warn of big pix
- keep first or primary page of Web site short, to speed response
- try to use lowest common denominator, not all people use Super VGA or Netscape or a Pentium (sigh)
- tell visitors "end of page" so they don't sit there... waiting...
- tell visitors when you last revised the page (24 Oct 1995)
- keep the TITLE element very descriptive and short
- try to not use specific font settings; use STRONG and EM
- avoid using the TABLE command, particular if old browsers visit
- perform spelling and grammar checking
- Test. Test again. Fix fast. Edit. Update. Keep fresh.
- disagree with what you see
Go back to
Last updated: 21 September 1996
~end of page~