Some HTML bumpf
(That's HyperText Markup Language)
  1. Open the simplest, no-brain text editor you have (such as NOTEPAD). A word processor like M'soft Word is too sophisticated ... unless you save the file as "text only"
  2. Type out some HTML stuff (see below)
  3. Save this file, calling it test.htm and don't forget the .htm
  4. Run your browser ( you don't have to be on the Net, unless your test.htm file refers to something on the Net) and open the test.htm file
Go back-and-forth between the text editor (modifying & correcting the test.htm file then saving it again) and your browser (opening the latest saved version of test.htm), repeating steps 2, 3 and 4 ... until you're happy with what you see.

Here's a first sample for your test.htm file:

<OL>
<LI>Open the <I>simplest, no-brain</I> text editor you have (such as NOTEPAD). A word processor like M'soft Word is too sophisticated ... <U>unless you save the file as "text only"</U>
<LI>Type out some HTML stuff
<LI>Save this file, calling it <B>test.htm</B> and <I>don't forget</I> the <B>.htm</B>
<LI>Run your browser (you don't have to be on the Net, unless your <B>test.htm</B> file refers to something on the Net) and open the <B>test.htm</B> file
</OL>

Click here to see what your screen might look like.

After it looks right, change the <OL> to a <UL> (and the </OL> to a </UL>) and see what happens!

Now try this line in your "test.htm" file (a Hot Link):

<A HREF="http://www.fundlibrary.com/">Click Here, pleez!</A>

where I've indicated, in BOLD, the stuff which changes from one web site to another. It'll look like this: Click Here,pleez!
The hardest part is:

(1) remembering the space between A and HREF, and

(2) including TWO quotes (which surround the URL), and

(3) getting TWO < and TWO > and

(4) thinking of something clever (other than Click Here, pleez!).

P.S. There'll be a test at the end of the week.

Line up, pleez

The simplest way to "line things up":
  1. Type <TT> then type <PRE>
  2. Type a row of your "table"
  3. Type <BR>
  4. Repeat 2 & 3 above
  5. End with </PRE> and </TT>

For example, to get this

 HongKong  2:55AM  -.89% 
France 5:46AM -.53%
U.K. Nov.18 -.89%

You type this

<TT>
<PRE>
HongKong 2:55AM -.89%
<BR>
France 5:46AM -.53%
<BR>
U.K. Nov.18 -.89%
<BR>
</PRE>
</TT>

or even this:

<TT> <PRE> HongKong 2:55AM -.89% <BR> France 5:46AM -.53% <BR> U.K. Nov.18 -.89% <BR> </PRE> </TT>

NOTE: When you type the rows which will appear, put in the proper number of spaces between words so the rows will line up.

The <PRE> tag means PREformatted so your browser won't strip away all them lovely spaces you put in, to line things up.

The <TT> means your letters and spaces will all have the same width, like a typewriter, making it easy to line things up.

The <BR> tells your browser to move to the next line.

Odds 'n Ends


Oh ... did I mention how you get those big letters?
You stick <FONT SIZE="+2"> in front of (and of course </FONT> in back of) the word(s) you want bigger. For REALLY BIG, choose "+4" and for really small choose "-2", etc. etc.

... and also ...

x<SUP>n+1</SUP>   gives xn+1
A<SUB>k</SUB>   gives Ak

... and also ...

Everything between <FONT FACE="symbol"> and </FONT> is all Greek:

<FONT FACE="symbol"> p </FONT>   is   p
and <FONT FACE="symbol"> m </FONT>   is   m
and ... well, here's just a few useful ones:

abclmp tw DFLSW
a b c l m p t w D F L S W

... and the following gives sum good stuff:

<FONT FACE="symbol" SIZE="+2"> S </FONT> A<SUB>n</SUB> x<SUP>n</SUP>

S Anxn

Graphs 'n such

Suppose you see a graph (or neat picture), on the Net, somewhere.
  1. Click on the picture with your right mouse button and select View Image or, if that don't work, try Properties. What ya'll git with the right-mouse-button depends upon your browser.
  2. You'll see the URL for that image ... somewhere.
  3. Copy that URL and, to use that image yourself, type:
    <IMG SRC="URL"> where URL is the http://www.etc.etc bumpf you copied.
For example, here's a Sexy Lady* : Click me, Honeybun
Click on her (but be gentle) with your right mouse button, choose View Image (or Properties) and you'll see where she lives, namely:
/lady.gif
Now copy the URL and you can ... uh, use the Sexy Lady yourself by typing:

<IMG SRC="/lady.gif">

Since loading graphics takes some time, you can also provide a HotLink to the graph, using:

<A HREF="/lady.gif">Sexy Lady</A>
which is displayed by your browser as Sexy Lady

And you can arrange things so you can click on a graphic, as a HotLink, like so:
<A HREF="http://members.xoom.com/bylo_selhi/">
<IMG SRC="/lady.gif"></A>

which appears like so:    where you recognize the A HREF stuff, http://etc.etc/ (a HotLink which takes you to Bylo's site) followed by the lady.gif graphic which replaces Click Here, pleez! (and which, as we''ve said, lives at /lady.gif) and finally the </A> which terminates the A HREF HotLink.
Now y'all kin ... uh, click on the l'il lady.gif and go to Bylo's site.


Oops ... another thingy:

If you use the <A HREF="URL"> Click Here</A> or <IMG SRC="URL"> stuff for a link to somewhere on the Net, then ya gotta use the complete, unadulterated URL, like for example: http://www.etc./etc/.

But, if'n ya jest want to do a link to something which lives at the same Net location, then you can forget the http://www.etc./etc./ stuff.

For example, if this tutorial lives at http://www.golden.net/~mydir/, I don't have to use

<IMG SRC="/smiley.gif ">

but, instead, I can just use:

<IMG SRC="smiley.gif ">

The /smiley.gif sez to your browser:

  1. Go on the World Wide Web
  2. Go to the computer "golden.net"
  3. Go to the directory labelled "mydir"
  4. Select the file labelled "images/smiley.gif"

If your browser has already done 1,2 and 3 and is currently reading an HTML file (located in the collection of files at /), then it'll just look around for "images/smiley.gif" ... without heading back to the Web.

Let's see if'n it works. I'll just use <IMG SRC="smiley.gif ">

See? It works!

Uh ... something else. To separate one thing from another, it's convenient to use a Horizontal Rule, like this


or maybe like this
and it'll automagically run the width of the screen (or the TABLE ... see below).

Just include the code: <HR SIZE="4"> or <HR SIZE="4" NO SHADE>
and, of course, play with the 4 ...

 

Tables 'n Such

This'll create tables:

<TABLE BORDER=3 CELLSPACING="3" CELLPADDING="10">
<TD>Hello There</TD> <TD>Second Cell</TD> <TD>Next Cell</TD>
</TABLE>

which looks like:
Hello There Second Cell Next Cell
The magic <TD> and </TD> (meaning, I guess, Table Data) mark the start and end of the cells in a row (and I've indicated the contents of the cells in bold ... something you'll want to change).

If you want another row, do this:

<TABLE BORDER=3 CELLSPACING="3" CELLPADDING="10">
<TD>Hello There</TD> <TD>Second Cell</TD> <TD>Next Cell</TD>
<TR>
<TD>Second Row</TD> <TD>Cell #2</TD> <TD>Cell #3</TD>
</TR>
</TABLE>

See the magic <TR> and </TR> which mark the start and end of the Table Row?
You get:
Hello There Second Cell Next Cell
Second Row Cell #2 Cell #3
Of course, you'll want to play with the numbers P, Q and R in
<TABLE BORDER=P, CELLSPACING="Q", CELLPADDING="R">
and see what happens when you drop the quotes about the Q*
or leave out the CELLSPACING entirely
or the CELLPADDING
or forget the </TR> or the </TABLE> at the end of your table
or ... or ... well, just play with it!

* Some browsers don't seem to care about the quotes.
(I'd put quotes about all of P, Q and R jest to be safe.)

You'll have noticed that the above tables are just wide enough to accommodate the stuff you put inside, however, you can decide on the width yourself with:

<TABLE BORDER="3" WIDTH="80%" CELLSPACING="3" CELLPADDING="10">
<TD>Hello There</TD> ...
</TABLE>

where the WIDTH=80% says: "make the table width = 80% of the width of the screen", like so:

Hello there

Also, you can specify both the WIDTH and HEIGHT, in pixels, like so:
<TABLE BORDER="3" WIDTH="300" HEIGHT="200" CELLSPACING="3" CELLPADDING="10">
<TD>Hello There</TD> ...
</TABLE>

and it'll look like this:
Hello there

COLOR

I know! I know! It's a funny place to put it ...
BUT you've also got COLORS (not colours) to play with!

Like <FONT COLOR="red"> and <FONT COLOR="orange">
and <FONT COLOR="yellow"> and <FONT COLOR="green"> etc. etc.

Type (into your test.htm document) something like <FONT COLOR="red">Hello</FONT> and you get Hello (but don't forget the </FONT> else everything after the <FONT COLOR="red"> will be red.
(I like to use capital letters for HTML tags ... lower case will do, like mebbe: <font color="red"> then, later, you can end the red stuff with </font>.)

Even the cells in a TABLE can have a BackGround colour by starting the TABLE with:
<TABLE BGCOLOR="cyan" etc. etc.
For example, we can modify the above table (remember it?):

<TABLE BGCOLOR="cyan" BORDER="10" CELLSPACING="10" CELLPADDING="1">
<TD><FONT COLOR="blue">Hello There</FONT></TD>
<TD>Second Cell</TD>
<TD>Next Cell</TD>
</TABLE>

where I've hi-lighted the additions in "red".

It would look like:
Hello There Second Cell Next Cell
where you'll notice that we've stuck in a <FONT COLOR="blue"> as well as the <TABLE BGCOLOR="cyan" etc. etc. and we've changed the BORDER and CELLPADDING.

P.S. Uh ... almost forgot; if you set BORDER="0" and add a touch of CELLSPACING you can line things up like so:
HongKong 2:55AM -.89%
France5:46AM -.53%
U.K.Nov.18 -.89%

A NOTE: You can see everything I typed to create this tutorial by clicking on View/Source

... and check out: a beginner's guide to HTML

* I found the li'l Lady (at a site) in ... would-you-believe ... Milan, Italy!

P.S.

I forgot to mention that the WIDTH and HEIGHT of an IMAGE can be changed like so:

<IMG SRC="URL-of-IMAGE" WIDTH=50 HEIGHT=70>
which, for the li'l lady.gif, shows up as: To see her original WIDTH and HEIGHT just put her on the screen (by herself ... with the "right-mouse-button", remember?) and do a View/Document.
Anyway, the original lady.gif is 24 X 24 pixels ... which brings us to pixels.

All images are made up of tiny dots of colour called pixels. If I blow up the li'l lady (... pardon the expression) you can count the "pixels" to verify that she's a 24 X 24:


Well ... it ain't so easy to count, but if your screen is 800 pixels wide then 33 lady.gifs should fit across your screen.
Count 'em:

Don't quite fit? That's because some of the 800 pixels are used up by the scroll bar at the right of your screen ... and I removed the TABLE BORDER which would also use up pixels. (I'm sure you've guessed by now that I use TABLEs and TABLEs-within-TABLEs in this tutorial.)

continue ... to Part II