If You wish You can
CLIPBOARD the following HTML
direct from the screen.
This is done in the tradition of
WYSIWYG,
What You See Is What You Get.
You only need to add Your own URL's
( Uniform Resource Location's ) and
Your own TEXT.
START with locating Your cursor
UNDER the -START-sign, then SELECT
until the -STOP-sign and
COPY the selected area into Your
clipboard.
The first example is the
MINIMUM to make a HomePage:
-START-
<HTML><HEAD><TITLE>
-PAGENAME-
</TITLE></HEAD>
<BODY><P>
-YOURTEXT-
</P></BODY>
</HTML>
-STOP-
COPY THIS TEXT INTO YOUR CLIPBOARD!
The best advice I can give You is to
SAVE THIS AS ASCII-TEXT!
At least You can applicate it!
But what do You applicate in this
example? Let us take a look at the
parts that I expect You to fill in:
PAGENAME and YOURTEXT.
If You omit PAGENAME a browser will
pick the FILENAME on the fly out of
Your directory. Then this will
appear as a header at the top of the
screen and looks like this:
methode://dom.ain.name/directory/filename
This comes in handy if You have a
lot of files on the Internet. You
always know where You are. If that
is what You want, then it is ok.
But if You make pages for people to
see, it is problable more in Your
interest to give it an intuitive
title what looks like this:
My First Home Page.
Even the period is then placed at
the top of the screen. Please try to
use a name with at maximum 32
characters, more looks a little odd.
It is not a must, just a Good
Working Habit, shortened: GWH.
This part of the HTML-document is
called the HEAD.
After this opening comes the BODY.
That command does a lot for how Your
document goes to appear on screen.
In the example however it only
separates the HEAD from the BODY.
The BODY is then divided into
sections using the P-command and are
called PAGEBREAKS. This is like a
typewriter pushed to a new rule.
After a P You can put YOURTEXT.
Edited text is useless because the
browser will put every word after
the previous word until the width of
the screen is reached and then it
goes to the next line and so on.
Of course You may put a P after each
character You want, no problem.
Except when You are ready. Then
there comes something very
important:
You need to close all Your given
commands in Your document.
That is done by using the same
commands but then with a / before
the command.
With the P command it is especially
neccessary at the end of a page.
GWH: Always as last command of a
page write a /P!
Do that and a browser will not do
things You do not want to happend.
Then You close the BODY with /BODY.
Finally You close the whole page
with /HTML.
SAVE it under the filename and point
You like with the extension:
HTM for DOS- or
HTML for MAC-machines.
If You use this the first time and
You did not have a HomePage before:
The server will problable ask You to
make some HTML-file as above and to
name it INDEX.HTM or INDEX.HTML.
It will be stored in Your main
Internet directory.
This is then the file You access if
You type such an URL:
methode://dom.ain.name/~yourname/
and see for Yourself; You may omit
the FILENAME in this case however
this could mean that You are send to
a file with the extension HTML and
You maby want the file ending with
HTM!
To make it worse: You never know!
That is why the whole name,
officially called: FQURL, need to be
filled in. GWH. Do not forget it to
mention if You give somebody an URL.
If there is no INDEX.HTML or HTM,
the browser makes a list of all the
files in Your main Internet
directory on the fly.
The same if You access
subdirectory's without an INDEX.HTML
or HTM.
But finally You load it up to Your
server.
So every browser in the world can
show it on the screen!
But problable You want more... Ok..!
Color? I think so, because now Your
text is black on a grey background.
That is a job for BODY. By adding a
few tags to the command You achieve:
Color! And more..!
-START-
<HTML><HEAD><TITLE>
-PAGENAME-
</TITLE></HEAD>
<BODY
BGCOLOR="#AA00FF"
TEXT="#FF00AA"
LINK="#00FF00"
ALINK="#FF0000"
VLINK="#0000FF">
<P>
-YOURTEXT-
<A HREF="FQURL">
-LINKTEXT-</A>
<A HREF="FQURL#NAME">
-LINKTEXT-</A>
<A NAME="NAME">
-YOURTEXT-</A>
</P></BODY>
</HTML>
-STOP-
COPY THIS TEXT INTO YOUR CLIPBOARD!
The difference between this and the
example You started with are 5 tags
in the first and only BODY command.
By default the colors are:
BGCOLOR=grey, TEXT=black, LINK=blue,
ALINK=red and VLINK=purple.
Always start with the BGCOLOR tag,
what makes the BackGroundCOLOR.
The # sign tells the browser to
expect numerical input.
Your browser expects the RGB format:
You choose the color by using 3 pair
of hexadecimal numbers from 0 to
255:
R means Red, G stands for Green and
the B is for Blue, and every color
can be adjusted from 0: no light to
FF (255): maximum light emmission.
Then the TEXT, LINK, ALINK and VLINK
tags are adjusted the same way in
the only BODY command in a file.
The TEXT tag is for the color of the
text of course.
LINK the color for an anchor in Your
document, a button. Press the button
and You go where the anchor is
pointing to.
To confirm that You pressed it,
ALINK flashes another color to let
You know it is Active.
Finally if You decided to come back
VLINK colors the link You have
accessed again different as Visited.
Of course, knowing this You can
chanche this behavior by making all
the LINK colors the same.
But where are those links?
You see the A HREF command, it is
below -YOURTEXT-.
If You use this on a server it will
give an error message when You
activate it. Fill in a FQURL there.
You can steer the browser now to
another document You wrote.
Or to a document from somebody else.
In that case You can return to the
document You started from by pushing
the standard button BACK that every
browser have.
Or even to a place within the same
document. How is that done?
Look at the second A HREF:
The difference with the first is
that direct after FQURL a #name tag
is placed.
That is not a FQURL but an example!
It is not working yet because the
browser still needs to know where
You expect it to go. That is done
with the command:
A NAME="NAME"-YOURTEXT-/A
on the spot where You want the
browser jumping to.
Again You go back to Your starting
point with the BACK button.
You can also use this to access a
certain part of another file if it
has an A NAME command in it.
Perhaps You want to give it a nice
finishing touch with a photograph.
I assume You have it scanned and
stored on a disk somehow already and
uploaded it to Your server.
-START-
<HTML><HEAD><TITLE>
-PAGENAME-
</TITLE></HEAD>
<BODY
BGCOLOR="#AA00FF"
TEXT="#FF00AA"
LINK="#00FF00"
ALINK="#FF0000"
VLINK="#0000FF">
<P>
-YOURTEXT-
<A HREF="FQURL">
-LINKTEXT-</A>
<A
HREF="FQURL#NAME">
-LINKTEXT-
</A>
<A NAME="NAME">
-YOURTEXT-</A>
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
</P></BODY>
</HTML>
-STOP-
COPY THIS TEXT INTO YOUR CLIPBOARD!
The FQURL for an IMG SRC command
must be pointing to a file with an
image format like GIF or JPG.
The WIDTH and HEIGHT tags ensure
that the browser not automatically
resizes Your picture.
The ALT tag must be placed ( GWH )
in case someone uses a textbrowser.
In that case the browser writes the
ALTernative text on the screen.
Now You have enough to start
building. Use Your imagination to
figure out what You want to build.
For example You can combine an
A HREF command with as LINKTEXT the
IMG SRC command!
How will this appear? Look for
Yourself:
-START-
<HTML><HEAD><TITLE>
-PAGENAME-
</TITLE></HEAD>
<BODY
BGCOLOR="#AA00FF"
TEXT="#FF00AA"
LINK="#00FF00"
ALINK="#FF0000"
VLINK="#0000FF">
<P>
-YOURTEXT-
<A HREF="FQURL">
-LINKTEXT-</A>
<A
HREF="FQURL#NAME">
-LINKTEXT-
</A>
<A NAME="NAME">
-YOURTEXT-</A>
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
<A HREF="FQURL">
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
</A>
</P></BODY>
</HTML>
-STOP-
COPY THIS TEXT INTO YOUR CLIPBOARD!
As You can see the /A comnand is put
after the IMG SRC command. When You
try this You find out that the image
You choose is function as a button.
Are You satisfied with this lay-out
now? No,.. I do not think so...
There can be done a lot with the
typographic. The size of the
characters can be chanched with
these commands:
H1, H2, H3, H4, H5, H6.
The H1 command gives the biggest
character, H6 is the smallest.
Now are the characters standard.
To change that use the commands:
BLOCKQUOTE, CITE, EM, STRONG.
With BLOCKQUOTE Your text will be
written in italic type characters.
The same applys to EM.
With CITE and STRONG Your text is
written in bold type characters.
GWH: Never put 2 H commands after
each other, even not a /H after a H!
Put always a different command in
between, opening or closing.
The only command that You may use in
such a case is a HR command. It makes
a Horizontal Rule in Your document
or use a BR what only makes a BReak.
Both function as a P command. They
have no closing command.
Ok, there are a lot more commands.
I only teach You the most useful to
get Your job done the right way.
This is then my interpretation of
how this document should be written:
-START-
<HTML><HEAD><TITLE>
-PAGENAME-
</TITLE></HEAD>
<BODY
BGCOLOR="#AA00FF"
TEXT="#FF00AA"
LINK="#00FF00"
ALINK="#FF0000"
VLINK="#0000FF">
<P>
<H1>
-YOURTEXT-
</H1><P>
<H2>
<A HREF="FQURL">
-LINKTEXT-</A>
</H2><P>
<H3>
<A HREF="FQURL#NAME"
>-LINKTEXT-</A>
</H3><P>
<H4>
<A NAME="NAME">
-YOURTEXT-</A>
</H4><P>
<H5>Here is an Image.
</H5><P>
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
<H6>Here is the Image Button.
</H6><P>
<A HREF="FQURL">
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
</A>
<HR><H1>
The End?</H1><BR>
<H6>Almost!</H6>
<HR>
</P></BODY>
</HTML>
-STOP-
COPY THIS TEXT INTO YOUR CLIPBOARD!
Are You ready to rock and roll now?
Yes, technically if You clipboarded
one of these programs, filled in the
URL's and TEXT, saved it, You are!
That what You have is called the
SOURCE HTML DOCUMENT.
It simply works. But can You make it
a good structured logic document?
Something You can show a programmer?
Yes, the finishing touch, very well!
Therefore You put the following in
Your document, at the top below OR
at the end above the HTML command:
and then this is the final document:
-START-
<HTML><HEAD>
<!--HULPROG1.HTM written by:
Rdr.Dhr. Ilja Ruben Witsel ©
1995
New version: © Sunday
03 March 1996 23:00
Declaration
variables: none
Purpose of
program:
To make it possible to
clipboard
an instant HomePage
direct from
the screen and use it
for Yourself!-->
<TITLE>
-PAGENAME-
</TITLE></HEAD>
<BODY
BGCOLOR="#AA00FF"
TEXT="#FF00AA"
LINK="#00FF00"
ALINK="#FF0000"
VLINK="#0000FF">
<P>
<H1>-YOURTEXT-
</H1><P>
<H2>
<A HREF="FQURL">
-LINKTEXT-</A>
</H2><P>
<H3>
<A HREF="FQURL#NAME"
>-LINKTEXT-</A>
</H3><P>
<H4>
<A NAME="NAME">
-YOURTEXT-</A>
</H4><P>
<H5>Here is an Image.
</H5><P>
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
<H6>Here is the Image Button.
</H6><P>
<A HREF="FQURL">
<IMG SRC="FQURL"
WIDTH=NUMBER HEIGHT=NUMBER
ALT="YOURTEXT">
</A>
<HR><H1>
The End?</H1><BR>
<H6>Almost!</H6>
<HR>
</P></BODY>
</HTML>
-STOP-
COPY THIS TEXT INTO YOUR CLIPBOARD!
The whole meaning of this is to give
another programmer an idea of what
You intended to do.
If You want to do it absolute
logically structured:
Start with the name and type of the
file, TimeStamp ( Date and Time )
the file is made and declare all
variables You use. Finally describe
the function of the document.
You are allowed to put it at the TOP
of Your document, but most common
place is in the HEAD between HEAD
and TITLE. Make it as brief as You
can because it cost time to load.
Even when You put Your comments at
the end of the document after the
/HTML command!
Ok, here comes my last lecture:
In a HTML document You may not use 5
signs because they have a function:
the ampersand-,
the greaterthen-,
the littlerthen-,
the quotationmark-
signs.
But You just have them copyed from
the screen, how did I do that?
I used the PRE and /PRE command to
put the explaining text between it.
To let You clipboard the source I
used " for ", > for >, <
for < and for & that I did not
used exist & for &. Satisfied?
- Web Developer's Virtual Library: HTML
I want to write EMAIL
NEXT