 |
|
 |
 |
 |
|
 Print this Article (NS4) Netscape Navigator Internet Explorer Opera Neoplanet
|
 Forums
HTML General Programming Flash Site Dev Grafix (Art)
|
 Laboratory
Smart HTML Color Lab Generators
|
 HTML Editors
Simple Editor(Win*) EditPad(Win95) AOLPress(Win95) BBEdit(Mac) Dreamweaver CuteHTML
|
|
Related Files
Font Creator True Type Fonts WEFT Icon Creator
|
 Contents
Introduction to Ultimate Enlightenment
Body Works
Images and Eye Candy
Lists and Forms
Tables
Frames and those that Float
Meta Data
Sound of Music
Channel Surfing
|
Body Works
By Lisa Hui
If you went through that lengthy first part, you probably still have lots of questions that need answering. I haven't even had the chance to touch upon the fundamentals of customizing your page's background, color matching, adding hyperlinks and showing images on your page! So, let's crack that toughie. Ready?
We're now going to work with the <BODY> tag on your web page, so it should be right below your end </HEAD> tag. Currently, the latest Internet Explorer and Netscape Navigator browsers have as their default settings, a white background complemented with black text. Links are highlighted in an ugly shade of blue, and visited links are purple. The first thing we'll probably want to do is change that :)
To modify the default hyperlink color, add these two attributes to your <BODY> tag to specify the link colors you want: LINK and VLINK, which set the link and visited link colors. The ones used on this page are link=#c0c0c0 and vlink=#c0c0c0 (the hexadecimal code for grey) You can, of course, use color names instead.
Some other attributes that can be set in the <BODY>:
| Attribute | Parameter Example |
| TEXT Specifies the default color of the HTML page. The browser will default to black if this variable is not specified. |
TEXT=white |
| BGCOLOR Sets the background color of the page to the one you specify for this attribute. The browser's default is white (for 4th generation browsers) or gray (for older browsers). |
BGCOLOR=black |
| BACKGROUND This is especially useful if you want to use a seamless texture tiled as a background for your page (the background image). It works much like BGCOLOR except it takes in an image file. |
BACKGROUND="image.gif" |
| ALINK This specifies the active link color. For a brief second when you click the link, you will see this color. If not specified, it will default to blue or purple. |
ALINK=#c0c0c0 |
| BGPROPERTIES Most commonly used to freeze the background so that when the user scrolls down the page, the background will look like it stays stationary. (4th generation browsers) |
BGPROPERTIES=fixed |
| LEFTMARGIN
and MARGINWIDTH There are two invisible margins on your HTML page (like the pink margin lines on looseleaf paper). You can use these two attributes to widen or shorten the margin to the left. The first attribute is supported by Internet Explorer. The second attribute is supported by Netscape Navigation so you may wish to specify both, not only one. (4th generation browsers) |
LEFTMARGIN=0 MARGINWIDTH=0 |
| TOPMARGIN
and MARGINHEIGHT Same as above, except these are used to vary the margin at the top of the page. (4th generation browsers) |
TOPMARGIN=0 MARGINHEIGHT=0 |
Headers
Above the <BODY> tag, we have the option of adding <HEAD> </HEAD> tags. The space inbetween these two are used mainly to define the page and define JavaScripts, CSS properties and such.
To "define the page" you can specify the <TITLE> </TITLE> of the page. Any text within these two tags will appear in the bar at the top of the browser. You've seen an example of this in our introduction.
Hyperlinks
Now that we all know how to create a simple (custom-colored) page, we'll want to to link them up to other ones - lest they get too large and long to load. To do this, we need the <A> (anchor) tag with the HREF attribute to specify the destination of this "anchor" or link. <A HREF="nextpage.html">Click Here</A> would produce this: Click Here
Everything within the <A> </A> tags become anchored/linked to what you specify in HREF. You can link images too but we'll get to that in the next tutorial.
Notice that, by default, a text link is underlined as well as highlighted in the LINK color you specified in your <BODY>. You can get rid of this in any browser that has support for CSS - Cascading Style Sheets. This introduces a new tag called <STYLE>.
<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none; }
-->
</STYLE>
In other words, the following code, which is a text/css specification creates a style definition using the anchor tag. When using <A> as a link, you can specify that there be no "text decoration" (which would refer to the underline (underscore) of the link.
Why do we have the comment tags <!-- and --> in the style tag? Some older browsers, which do not even support the <STYLE> tag may ignore it and try to render all the code within them as text, which is not something you want to clutter up your page. Since these comment tags are HTML, it will only take effect if the text inside the style tags are being parsed as HTML code :) so it is just a painless safety precaution.
Cursors
What else can you do with this spiffy style tag? Internet Explorer 4.0+ browsers will allow you to change your mouse cursor while it is resting in the area of the page. How? Using the hover attribute:
<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none; }
A:hover { cursor:help; }
-->
</STYLE>
It would turn your cursor into a question mark while it is hovering over a link. Another common cursor value is "crosshair." If you know of any others, please send them to html@3dinfinity.com :)
Anchors
Jumping from one spot in the page to another on the same page is made do-able with anchors. All you have to do is anchor a word or phrase with <A NAME="SomeReferenceName">Reference</a>. (You're giving Reference an anchor name).
To go there, create a link somewhere else that looks something like: <A HREF="#SomeReferenceName">Click here to go to Reference</a>. Clicking that will insta-scroll down or up the page to where the anchor is.
What if you want to link to an anchor on a different page? Still do-able. Just make your link like: <A HREF="differentPage.html#SomeReferenceName">Click here to go to Reference</A>.
Link Effects
With the advent of Cascading Style Sheets, there are several special effects that you can add. Older browsers will just ignore these lines of code (if you use the HTML comment tags) but it gives your high-tech viewers something to be pleased with. The key is in using the hover attribute in conjunction with your anchor <A>. We've already covered changing cursor icons on mouseover, but here are a few more:
Changing Link Color onMouseover
<STYLE TYPE="text/css">
<!--
A:hover { color:#c0c0c0; }
-->
</STYLE>
It just tells the browser to change the link color to #c0c0c0 when the mouse cursor is hovering over the link. When it is not hovering over the link, it will be the normal color you specified in your <BODY> tag, and you now have a text mouseover.
Underscore onMouseover
Let's use the example from able and add to it.
<STYLE TYPE="text/css">
<!--
A:link { text-decoration: none; }
A:hover { color:#c0c0c0; }
-->
</STYLE>
The only difference here is that we took out the text decoration (underscore) to the link but kept it in (not turning it off) when we specified the hover attribute.
For a complete list of text and font properties (to mix and match as you please) click here.
