You're Almost there now, Keep going and Practice, Practice, Well
you Know.
There are many things in html usage that I don't understand. One of them is
using frames. There are some examples below, but you just need to have a
place to play with this and see for yourself what each command does.
Have Fun!!!
Now we come to the frilly stuff. I've shown you how to make a basic
page
and how to create the structures and links that go into it. Now I'll teach you
how to make it pretty. That includes backgrounds, color, and frames.
Let's start with color. The first thing you need to know about color
in HTML
is the way it's always coded. Colors are coded as a 6 digit hex RGB number.
English translation: colors are represented by their composition: red, green,
and blue, hence RGB. The amount of each of the prime hues present in a color
ranges from 0 to 255, which is 00 to ff in hexidecimal. Since each color
contains mixtures of the three primary hues, each taking 2 digits to represent
in hex (short for hexadecimal or base 16), the whole color takes 6 digits.
The Easy Solution, go here.
Here are some examples:
| Red: | ff0000 |
| Green: | 00ff00 |
| Blue: |
|
| Magenta: | ff00ff |
| Purple: | 9900dd |
| Light Gray: | bbbbbb |
You Can also use the color names..i.e.
.....red....black....yellow...etc... but the name
must to be off a netscape acceptable color chart..most are acceptable..Try It.
Colors can be used in several ways. Here's a list:
Background Color
Overall Text Color
Unvisited Link Color
Visited Link Color
Inverse Link Color (The color the
link turns while your clicking on it)
Individual Text Color
All but the last item are done in the <BODY> statement. The
last is done similarly
to font size. (From here out, I'll use "RRGGBB" to represent colors.)
To add color to the body statement, you just add your color statement
to the body declaration, like this:
Each thing you want to color has a different tag to replace colortag.
To make the background some color other than the usual dull gray, use
BGCOLOR=RRGGBB. To change the overall text color, use TEXT=RRGGBB.
The individual text color tag will override
the overall text color for the text it encloses. (See below.)
To change the color of links that haven't been visited yet, use
LINK=RRGGBB.
To change the color of links that have been visited, use
VLINK=RRGGBB.
When you click on a link, it momentarily changes color.
(I believe the default is red.) To change that color, use
ALINK=RRGGBB.
On this tutorial, I have LINK, VLINK, and ALINK all set to the same color to
maintain a solid and orderly appearance. Also, remember to make your text color
readable over your background color!
The individual text color will only show up in Netscape 2.0. If
someone using
any other browser tries to view such text, it will just be the same color as the rest
of the text. Coloring specific text is done very much like changing the font size.
The tag is:
This tag can be combined with the font size, so you'd have:
This font coloring will override the TEXT color, but not LINK, VLINK or ALINK.
To add a background image, add BACKGROUND="path/picture" to
the body
declaration like we did with background color. the path and file name should be
specified as though it were an image link. (See Links.)
The image you specify has to be a GIF.
I have put together a library of backgrounds
you can use.
Example: <BODY BACKGROUND="texas.gif" TEXT=d0d0ff LINK=a0a0ff>
That's all there is to it. With these few tags you can do some pretty
amazing stuff.
The real key to a great looking page is a good background image. One that tiles
well is preferable. To find out how to get a copy of a background someone else
is using, try the HowTo on this tutorial.
Ever wonder how to allow people to send you
mail from your page? Well, it's easy!
Here's how:
<A HREF="mailto:username@address"> text </A>
Replace the username and address with your own, and you've got email!
Comments are an important part of any coding.
They let you annotate your work
so you know what you were thinking when you wrote it. In HTML, comments aren't
as useful as in conventional programming languages, but they are still pretty handy.
The comment tag looks like this:
Nothing inside the comment tag will show up when your page is viewed. It's there just
to leave a note to yourself or to anyone else who views your source code. I've seen
comments used to note places for future changes and even to give copyright information.
Frames are a really spiffy new feature
introduced by Netscape.
With frames, you can divide up an HTML page into an arbitrary number of frames,
each of which can display another web page.
NOTE: When you write a page
using frames, be sure to include a
no-frames version, because many browsers don't understand frames.
In a page with frames, you don't use <BODY></BODY> tags.
Instead, you use
<FRAMESET></FRAMESET>. You cannot include background or color tags in the
<FRAMESET> tag. If you want to use backgrounds or colors, each individual page in
the frames can specify it's own.
Between the <FRAMESET></FRAMESET> tags, you should have only
<FRAMESET></FRAMESET> tags, <FRAME> tags, or
<NOFRAMES><NOFRAMES> tags.
<FRAMESET COLS="150,*,30%">
<FRAMESET ROWS="50%,*,2*">
<FRAME SRC="Example1.html" NAME="Bob">
<FRAME SRC="Example2.html">
<FRAME SRC="Example3.html" SCROLLING="yes">
</FRAMESET>
<FRAMESET ROWS="*,200">
<FRAME SRC="Example4.html">
<FRAME SRC="Example5.html">
</FRAMESET>
<FRAME SRC="Example6.html" NORESIZE>
</FRAMESET>
The <FRAMESET> tag can have two modifiers: ROWS and COLS.
ROWS="..." defines the numbers of rows the frameset will have. Each row can
be specified in three ways. A number means that the row will be that number of pixels
wide.
A percentage means that the row will take up take percentage of the window.
An asterisk means that the row will take up whatever space is left. If there is more
than one row of size *, they divide the remaining space evenly. If a number is used
before the asterick, like 2*, then that row gets that number of "shares" of the
remaining space.
See the above example. COLS="..." works the same as ROWS, except that it
specifies
the number of columns.
<FRAME> defines each individual frame. The <FRAME> tag
can have several modifiers.
SRC="..." sets which page will be loaded in the frame. If a frame has no SRC
tag, the
frame will be an empty block. NAME="..." gives the frame a name. later, when we
talk
about TARGETs, this will be important. SCROLLING="yes|no|auto" allows you to
control the scroll bars on the frame. "yes" forces the frame to always have
scroll bars.
"no" forces the frame to never have scroll bars. "auto" allows the
browser to decide
if scroll bars are necessary. If no SCROLLING tag is used, the frame
defaults to "auto".
NORESIZE allows you to keep the frame from being resizable by the viewer.
MARGINHEIGHT="#" lets you set the top and bottom margins of the frame to
# pixels. If the tag is not included, the browser will choose appropriate margins.
MARGINWIDTH="#" is the same as MARGINHEIGHT="#", except that it
controls
the left and right margins.
<NOFRAMES></NOFRAMES> is used to create a frameless
alternate.
When the page is viewed by a frame-capable browser, everything between the
<NOFRAMES></NOFRAMES> tags is ignored. When the page is
viewed by a frame-challenged browser, everything EXCEPT what is between the
<NOFRAMES></NOFRAMES> tags is ignored.
The pages specified by the SRC tag can be normal HTML pages,
or can also contain frames.
The thing that makes frames particularly useful is TARGETing. TARGETs
allow you to make links appear in specific frames or windows.
Here's the code for the frames:
<FRAMESET COLS="50%,50%">
<FRAME SRC="TExample1.html">
<FRAME SRC="Example1.html" NAME="Frame2">
</FRAMESET>
And here's the code for one of the links in the left frame:
<A HREF="Example1.html" TARGET="Frame2">Example Page 1</A>
As you can see, the TARGET tag for the link points to the NAME of
the left frame. That's all there is to TARGETs. Using the very same set up,
you can create a table of contents on one side, with the links loading
on the other side. Thusly, your table of contents will always stay visable.
There are a couple of other tricks with TARGETs.
The
on the page open in the TARGETed frame. Individual TARGET tags
will override the <BASE...> tag.
There are also some "magic" TARGETs.
"_blank" will always open the link in a new window.
"_top" will open the link in the whole page, instead of in a single frame.
"_self" makes the link open in the frame it's called from. This is useful when
the
<BASE...> tag is used."_parent" opens the link in the immediate frameset
parent of
the frame the link is called from.
Example:
<A HREF="Advanced.html" TARGET="_blank">Advanced</A>
And, TARGET can also be added to the <FORM> tag to make the
output from the script got to the specified frame or window.
The best way to get a good feel for frames is to look at the pages of
people who are using them. When you come across such a page,
be sure to view the source code.
Page Design By
**FREE** INCREASE YOUR HITS AND GET 20MB'S OF WEBSPACE! **FREE** |
