You can click on each (below) to get a bit more detail.

   a Web Page   

HTML beginning
Looks like
HTML ending
<HTML>
<HEAD>
<TITLE>Pietro's Home Page </TITLE>
</HEAD>
<BODY TEXT="blue" BGCOLOR="cyan">
<H1>My Home Page</H1>
Bits 'n Pieces of HTML
<A HREF="http://etc./over_the_rainbow.mid">Click!</A>
Pietro's Home Page - Netscape
File Edit View Go Communicator Help
My Home Page      
Bits 'n Pieces of HTML
  
Click!
</BODY>
</HTML>

   Text Stuff   
HTML beginning
Looks like
HTML ending
<B>
Bold
</B>
<I>
Italics
</I>
<U>
Underline
</U>
<S>
Strikethrough
</S>
go to <BR> a new line
go to
a new line
No ending!
go to <P> a new paragraph
go to

a new paragraph

No ending!
Not this<BR><CENTER>but THIS Not this
but THIS
</CENTER>
&nbsp;
Use these wherever you want a space that
your browser won't     strip   away!$#@%&
No ending!
<FONT COLOR="purple">
purple text
</FONT>
<FONT FACE="arial" SIZE="-3">
small text
</FONT>
<FONT FACE="arial">
"ARIAL" font
</FONT>
<FONT FACE="symbol">
"GREEK" font
</FONT>
<TT><PRE> leaves     spaces
PREformatting doesn't discard the spaces:
DOW     12345
Nasdaq 2345
</PRE></TT>
X<SUP>N
XN
</SUP>
A<SUB>k
Ak
</SUB>
14 <SUP>15</SUP>/<SUB>16
14 15/16
</SUB>
To get indented stuff:
<BLOCKQUOTE>
Indented stuff, line 1 <BR>line 2 ...
To get indented stuff:
Indented stuff, line 1
line 2 ...
</BLOCKQUOTE>
Ordered List
<OL>
<LI> First
<LI> Second
<LI> Third
  1. First
  2. Second
  3. Third
</OL>
Unordered List
<UL>
<LI> First
<LI> Second
<LI> Third
  • First
  • Second
  • Third
</UL>
Definition List
Start: <DL>
<DT> First
<DD> Indented stuff
<DT> Second
<DD> More stuff ...
Start:
First
Indented stuff
Second
More stuff (that can go on and on and ... and, of course, it'll stay indented even when it goes to the next line just like in this example).
</DL>

Links & Graphics
HTML beginning
Looks like
HTML ending
<A HREF="http://www.etc.">a Link
a Link
</A>
<A HREF="http://www.ibm.com" TARGET="new">link to IBM
... in a "new" browser window
link to IBM
</A>
<IMG SRC="URL goes in here">
no ending!
(a graphic resized)
<IMG SRC="URL" WIDTH="100" HEIGHT="30">
no ending!
(a graphic that links)
<A HREF="URL-1">
<IMG SRC="URL-2">
</A>
<IMG SRC="images/happy-new-year.gif">

where the "http://www" bumpf refers to an internet site that has the animated graphic (in this case, MY site)

no ending!
I'm in the middle <IMG SRC="URL" ALIGN="middle"> Me too.
I'm in the middle Me too.
no ending!
<IMG SRC="URL" ALT="Hi there, Honeybun"> run yer cursor over the graphic
Hi there, Honeybunrun yer cursor over the graphic
no ending!
<HR SIZE="3" NOSHADE>

no ending!
<A NAME="TOP">
Nothing is displayed, but the location (on your page) is invisibly "marked" by the name "TOP". Later on, you can use <A HREF="#TOP">Go to Top</A> (which appears as Go to Top) and, when the viewer clicks on this link she jumps to wherever you placed this "marked" location. (If you click NOW, you'll jump to the beginning of this page, because I've put a marker there ...)
no ending!
<A HREF="#TOP">Go to Top
Go to Top
</A>

Click a Map
<MAP NAME="test_map">
<AREA SHAPE="RECT" COORDS="60,60,120,120" HREF="NEWTON.htm">
<AREA SHAPE="RECT" COORDS="150,180,180,200" HREF="EULER.htm">
etc. etc. </MAP>
<IMG SRC="test_map.gif" USEMAP="#test_map">
Newton Euler


Tables 'n Such
HTML beginning
Looks like
HTML ending
<TABLE BORDER="5"
BGCOLOR="cyan"
CELLSPACING="3"
CELLPADDING="3">
<TR>
<TD>first row</TD> <TD>second cell</TD>
</TR>
<TR>
<TD>second row</TD> <TD>next cell</TD>
first rowsecond cell
second rownext cell
</TR>
</TABLE>
If you have a nice picture (?) called lady.gif
<TABLE BORDER="5"
BACKGROUND="lady.gif"
CELLSPACING="3"
CELLPADDING="3">
etc. etc.
first rowsecond cell
second rownext cell
</TR>
</TABLE>
... and don't forget:

<TABLE WIDTH="25%" BORDER="1"
etc. etc.

width is 25% of the available width ...
</TR>
</TABLE>
... or maybe:

<TABLE WIDTH="100" HEIGHT="50" BORDER="1"
etc. etc.

a 100 x 50 pixel table
</TR>
</TABLE>

   Colours   
COLOR definition
Looks like
Comments
COLOR="red"
COLOR="yellow"
COLOR="green"
COLOR="cyan"
COLOR="blue"
COLOR="magenta"
COLOR="gray"
etc. etc. and
COLOR="#000000"
to
COLOR="#FFFFFF"
    
    
    
    
    
    
    
etc. etc.
Use
BGCOLOR="..."
within the BODY or TABLE HTML tags
or for text, with
FONT COLOR="..."
and click here for a more complete list

   Frames   
We want to divide the screen into two "frames", the top displaying the file Top.htm, the bottom displaying Bottom.htm.
They are given names (NAME="TOP" and NAME="BOTTOM", why not?) so that we may introduce clickable Links to "magic markers" in these TARGETs.

Although our file Top.htm may be anything, we'll fill it with the <A HREF="URL#Name_of_Marker"> type of links (see Links & Graphics, above) which will link to "marked" locations on the other file, namely Bottom.htm.

You see, we'll stick all kinds of "markers" (like <A NAME="HERE"></A> and <A NAME="THERE"></A> etc.) into the Bottom.htm file so we can link-jump to these "marked" locations by including in Top.htm, bumpf like

<A HREF="Bottom.htm#HERE" TARGET="BOTTOM">click to go Here</A>
and
<A HREF="Bottom.htm#THERE" TARGET="BOTTOM">click to go There</A>
Neat, eh what?
You'll notice that that's exactly what I've done to get the "menu"
the Beginning    Text Stuff    Links & Graphics    Tables 'n Such    Colours    Frames    the End   
in the upper frame which is now displaying a file called HTML_Praxis_menu.htm which has all these links to "marked" locations in the bottom file which is called HTML_Praxis_4.htm ... but you should really load the file HTML_Praxis_menu.htm (only the menu will be displayed) then do a View/Source to see the HTML bumpf in living color ... uh, colour.

Frames Script
Top.htm
Bottom.htm
<HTML>
<HEAD>
<TITLE>HTML Overview</TITLE>
</HEAD>

<FRAMESET ROWS="50,*" BORDER=0 FRAMEBORDER=NO>

<FRAME SRC="Top.htm" NAME="TOP" SCROLLING=NO>

<FRAME SRC="Bottom.htm" NAME="BOTTOM">

</FRAMESET>
</HTML>

<A HREF="Bottom.htm#HERE" TARGET="BOTTOM">click to go Here</A>
&nbsp;
<A HREF="Bottom.htm#THERE" TARGET="BOTTOM">click to go There</A>
which appears as:
click to go Here   click to go There
...
Bits 'n Pieces of HTML stuff
<A NAME="HERE"></A>
more Bits of HTML stuff
<A NAME="THERE"></A>
more Pieces of stuff
...

In case y'ain't noticed, it's the stuff in BOLD (above) that y'all kin change
... but don't go changin' COLOR to COLOUR 'r </HEAD> to <FEET>.


A work (?) ...

P.S. For additional tips on HTML, take a look at HTML Goodies!

and you can click on each (above) to get a bit more detail.