HTML bumpf: part II

a bit more COLOR

Before we go on to "more COLOR", you'll notice that HTML Part I is available above (just in case you forget something). Just move the dividing line to get more (or less) of it.
That's FRAMES we're using. We'll get to that soon enuff, but anytime you want to refer to some earlier portion of this part of the tutorial (that is, PART II), you can go to PART I (above the skinny line) and click on

continue to ...PART II

in which case the upper portion of the screen (originally devoted to PART I) will have both PART I and PART II. (Of course, you may want to push the skinny line right to the top.)

Okay, I want to talk about how to manage small changes in COLOR (just in case COLOR="red" or COLOR="magenta" etc. isn't sufficient for your purposes).

Would-you-believe that ALL the colours on the screen are made up of different amounts of just three colours: RED and GREEN and BLUE.

The colours on your TV screen are also different combinations of Red, Green and Blue (R,G,B, for short) and if you hold your eye right up against the TV screen you may be able to pick out the wee RED, GREEN and BLUE dots.

You can actually specify the amounts of each colour as follows:
There are 256 possible values for each of R, G or B.
(In case you're wondering, that makes 256x256x256 = 16,777,216 or millions of possible colours). It'd be nice if we could say "Please give me so-many parts of R and umpteen parts of G and whatzit parts of B".
Unfortunately we can't ... BUT we can say COLOR="#579943" and we'll get 57 Red and 99 Green and 43 Blue ... sorta.

The digits you must use (in computer-speak) are not the usual
0,1,2,3,4,5,6,7,8,9 but rather 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
So, when specifying the amount of RED you can ask for 57 or 9A or maybe B2 or even FF ...

If you wanted to write down all the two digit numbers (using 0,1,2,3,4,5,6,7,8,9) in increasing order, you'd write:
00,01,02,03,04,05,06,07,08,09
followed by
10,11,12,13,14,15,16,17,18,19
followed by
20,21,23,24,25,26,27,28,29
then (etc. etc. ... you see how it goes?)
and finally there's
90,91,92,93,94,95,96,97,98,99
where 99 is the mostest you can get with just two digits.

Okay, using the digits 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F to specify increasing amounts of, say, RED, we have:

00,01,02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F

Then, continuing, there's

10,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E,1F

Then

20,21,22,23,24,25,26,27,28,29,2A,2B,2C,2D,2E,2F

then (etc. etc. ... you see how it goes?)
and finally there's

F0,F1,F2,F3,F4,F5,F6,F7,F8,F9,FA,FB,FC,FD,FE,FF

where FF is the mostest RED you can get (and 00 is the leastest ... meaning no red at all!).
To get WHITE, you specify as much RED, GREEN and BLUE as you can get:
<FONT COLOR="#FFFFFF"> gives WHITE
To get BLACK, you specify no RED or GREEN or BLUE:
<FONT COLOR="#000000"> gives BLACK
To get YELLOW, you specify RED and GREEN (in equal proportion) but no BLUE:
<FONT COLOR="#DDDD00"> gives YELLOW

(I could have used #FFFF00 but I thought I'd give you a taste of a less intense YELLOW.
<FONT COLOR="#FFFF00"> would look like YELLOW.)

To get MAGENTA, you specify RED and BLUE (in equal proportion) but no GREEN:

<FONT COLOR="#FF00FF"> gives MAGENTA

and there's

<FONT COLOR="#00FFFF"> gives CYAN
<FONT COLOR="#999999"> gives GRAY
(There are lots of grays. I've chosen the lighter BGCOLOR="#DDDDDD" for the BackGround colour on your screen)
<FONT COLOR="#FFAA00"> gives GOLD
<FONT COLOR="#F05030"> gives PEACHy

Here's a range of BackGround Colours (BGCOLOR) in a TABLE (with BORDER="0"):

Of course, each browser (and monitor!) may present these colours differently.
Pale YELLOW may appear BROWN or perhaps OLIVE GREEN!

Anyway, it's been a colourful lesson ... but we've had enuff of colours.

a WEB PAGE

Now we consider setting up a web page (as opposed to the Bits & Pieces that go into that page, like IMAGES and HotLinks etc. etc.):

You start with:
<HTML>
and you end with
</HTML>

In between <HTML> and </HTML> goes your Bits & Pieces ... but the first thing after <HTML> is your TITLE:

<HEAD><TITLE> Your TITLE goes Here </TITLE></HEAD>

(For example, the TITLE for this HTML Tutorial is: HTML Stuff )

So it now looks like:
<HTML>
<HEAD><TITLE> My Home Page </TITLE></HEAD>
... your Bits & Pieces go here ...
</HTML>
The TITLE is something that the Browser displays (at the Top o' the Screen) when it visits your Web Site (and it's the label when the site is "Bookmarked" so don't use something like "My Home Page" cuz, six months later, a visitor who has bookmarked your site won't know from nothin' where he/she's been!).

Now you may want to provide a Heading to be displayed at the top of your Web Page and, altho' you could use <FONT SIZE="+2"> to get big letters, HTML provides some standard Headings called <H1> (ending with </H1>) and H2 (ending with </H2>) etc. etc.

Here's <H1>

and something

in <H2>

You get the picture.

You may also want a classy background color, say "cyan" (is that classy?) and maybe "black" text and maybe you want "links" in "blue" with "visited links" in, say, "green" and when you click, the link flashes "white" (like this ... try it!) ... so you add:
<BODY BGCOLOR="cyan" TEXT="black" LINK="blue" VLINK="green" ALINK="white">
Now you're ready for your Bits & Pieces, ending the Web Page with </BODY> as well as </HTML>

We now have:

<HTML>
<HEAD><TITLE> My Home Page </TITLE></HEAD>
<H1>Welcome to Mia Casa</H1>
<BODY BGCOLOR="cyan" TEXT="black" LINK="blue" VLINK="green" ALINK="white">
... your Bits & Pieces go here ...
</BODY>
</HTML>
OOPS! Let me change that to:
<HTML>
<HEAD><TITLE> Pietro's Home Page </TITLE></HEAD>
<H1>Welcome to Mia Casa</H1>
<BODY BGCOLOR="cyan" TEXT="blue" LINK="red" VLINK="green" ALINK="white">
... your Bits & Pieces go here ...
</BODY>

</HTML>

calling Names ...

At any point in your HTML document (that's one with the .htm ending) you may place an invisible NAME (or "magic marker"), using
<A NAME="TOP"></A>
where TOP can be any NAME you choose. Later (or earlier) in the document you can provide a Link to this location, using
<A HREF="#TOP">go to Top of Page</A>
which will appear as go to Top of Page

Frames

If you have TWO HTML files (each having the above <HTML> and </HTML> format) you can display them both ... using FRAMES.
Suppose the two documents are called First.htm and Second.htm remembering that y'all gotta end in .htm (even .html will do).

Now type up a simple HTML file called, say, Pietro_Home.htm which looks like:

<HTML>
<HEAD><TITLE>Pietro's Home Page</TITLE></HEAD>
<FRAMESET ROWS="100,*">
<FRAME SRC="First.htm">
<FRAME SRC="Second.htm">
</FRAMESET>
</HTML>

That's all!

It's this simple HTML file that becomes your Home Page (and visitors to your site can choose to gaze admiringly at either of your two HTML files, First.htm or Second.htm 'cause they're separated only by a skinny line (as y'all kin see in this Tutorial, where the skinny line separates my HTML Tutorial files: Part I and Part II).

Oh ... that funny HTML tag <FRAMESET ROWS="100,*"> just means that the browser should allocate 100 rows of pixels to First.htm and the rest of the rows to Second.htm ... but, of course, the visitor to your site will change that anyway by dragging the skinny line.

One last thing:
It's confusing, no?
Each HTML file has a name ending in .htm (like Test.htm or mebbe First.htm) and each file has a TITLE (between the <TITLE> and </TITLE> tags) and may also have a Heading (between the <H1> and </H1> tags) and ...

Mamma mia! Keeps y'all busy jest thinkin' up names!

To see the simple-minded FRAMES script for this tutorial, do a View/Source. Not much there, eh what? The script you see just puts the two .htm files (namely HTML_Praxis.htm and HTML_Praxis_2.htm) into FRAMES.

P.S.
It's kinda neat to do the following:

Give a NAME to each of the two HTML files to be displayed within FRAMES (like TOP and BOTTOM, for example). Do this in your FRAMESET script like so:
<FRAME SRC="Top.htm" NAME="TOP">
<FRAME SRC="Bottom.htm" NAME="BOTTOM">

Use "magic markers" such as
<A NAME="THERE"></A>
in one of the two documents being FRAMEd (say Bottom.htm)

Use a link to this location in the other document (say in Top.htm), such as
<A HREF="Bottom.htm#THERE" TARGET="BOTTOM">go There</A>
(which appears as go THERE)

so now the user can click on the link (in the Top FRAME) and jump to the Bottom FRAME, to the location of the "magic marker". (We'll see this later in these tutorials.)

Fancy Buttons ... with JavaScript

Okay, we want to do this with our web page:

We have a button (created with some Paint program) ... it's called spreadsheets_0.gif and it looks like this: and when the mouse pointer over the button we want it to change to this: and, if the user actually clicks on this button it'll take her to some webpage (let's say /spreadsheets.htm, filled, presumably, with spreadsheets).

Remember the startup stuff for our web page? Here it is again:

<HTML>
<HEAD><TITLE> Pietro's Home Page </TITLE></HEAD>
<H1>Welcome to Mia Casa</H1>
... your Bits & Pieces go here ...
</HTML>

We change it to this:

<HTML>
<HEAD>
< TITLE> Pietro's Home Page </TITLE>

<SCRIPT LANGUAGE ="JavaScript">

</SCRIPT>

</HEAD>
<H1>Welcome to Mia Casa</H1>
... your Bits & Pieces go here ...
</HTML>

We've now defined two images (or buttons), namely sp0 (which is our spreadsheets_0.gif) and sp (our spreadsheets.gif). To get the image(s) onto our web page we'd include somewhere in the your Bits & Pieces go here ... part of your HTML script:

You'll recognize the <A HREF="/spreadsheets.htm"> beginning and the </A> ending for a Link (to the spreadsheets.htm page). Aah, but the other bumpf ...

onMouseOver="SP.src=sp.src" says when the mouse is OVER the button, display the sp0 button. I'll let you guess what onMouseOut="SP.src=sp0.src" says.

The <IMG SRC="images/spreadsheets_0.gif" NAME="SP" BORDER="0"> defines the image which is to be displayed when the mouse is nowhere near the button (namely spreadsheets_0.gif).

Anyway, the final result is:

P.S. As you may have guessed, you can also put a border about the button by changing BORDER="0" to BORDER="5" (for example).
Oh, did I mention that these sexy buttons may not work with Internet Explorer?
and did I mention that gif (or GIF) stands for Graphics Interchange Format (and there are other graphic formats, like JPEG which stands for ... uh, can't remember ...)

continue ... to Part III