VoyForums
[ Show ]
Support VoyForums
[ Shrink ]
VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

Login ] [ Contact Forum Admin ] [ Post a new message ] [ Search | Check update time ]


Full Pages ???

Here's why Voy/234999 has no lessons demonstrating how-to design full pages:

Throughout this entire tutorial,
you'll notice that I'm merely showing how-to-create sections & partials (rather than full-pages).
And, if the experts reviewed my material, they would criticize these methods.
Basically, I've chosen to place paragraphs within DIV lines.
The reason is because I'm attempting to create individualized small areas.
It's now time to explain why Full Page methods weren't used.

First, virtually every website already has all the necessary HTML or CSS code.
Even the most simple website builders are fully equipped.
This VOY forum is a perfect example.
Even when the starter page is completely empty, its layout has been perfectly pre-designed.
More importantly, I prefer to keep the initial settings chosen by the programmers.
And, it's not a good idea to risk these Standards.
(Their judgments will usually produce the best colors and text styles).

Here's a few examples of HTML Body which creates the entire page:
TagIndexComp·tech·docHtml-Html

here's the HTML Body which is being used on this Forum:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#3300FF"><table align=center border=0 cellpadding=4 cellspacing=0> The Entire Webpage here </body>

this is a standard format, created by VOY forums, as well as many other websites.
Thus, it's not necessary to create an entire BODY when building this webpage.
The primary work has already been done beforehand.

There's a more important reason why my tutorials choose minor effects.
It's better to target small areas, rather than harming the entire page.

If you tried to place the above body bgcolor="#FFFFFF" text="#000000" link="#0000FF" etc. anywhere on this page,
you'll quickly notice that all material will be affected.
(...even if this code is placed innocently near the bottom).

The CSS equivalent would look more like this:

notice:
both the Hover feature, and Active were not available in HTML.
These features were only made possible with CSS.


return to HTML home page

There are no messages in the main index.

Recap:
Using HTML, this is an example of <Body>, along with Text color, body background color, and vlink Color:

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#3300FF"> The Entire Webpage here </body>

Note:
I wouldn't recommend implementing these features, since your webpage already has one, pre-installed.
and, their settings are already perfectly configured.

Also, the above HTML code is considered obsolete & outdated.
and, CSS Code is considered the replacement.
CSS is simpler and more effective.

By the way;
Here's how CSS Code would appear.
(this is a similar translation to the above HTML, (<body bgcolor="# etc.) but vastly more effective)

a:link {
color: #0000ff;
}

a:visited {
color: #336699;
}

a:hover {
color: black;
}

a:active {
color: silver;
}

body {
background-color: #ccd9e6;
}


As far as I'm concerned;
the best addition of CSS is the hover feature.
<style type="text/css">
a:hover {
color: #111111;

}
</style>

This single basic code enables Links to highlight (or change color) when your cursor is placed over them.
and (of course), the highlighted color returns to normal when the mouse is released.
It's a basic feature previously not possible using HTML.

So, by all effects,
this one simple code enables all links to become highlighted..
....just by placing your cursor over it:
a:hover { color: #111111;}

------------------------------

simply choose your color#
a:hover { color: COLOR HERE;}

---
a:hover { color: #xxxxxx;}
replace xxxxxx with a 6-digit number.

or, choose a color name:
a:hover { color: orange;}

and...  if you're wondering why the ; always appears after {color: #xxxxxx;
it's just giving you the opportunity to add features later.
for example:
a:hover { color: orange; text-decoration: none;}

or, any possible combination, such as...
a:hover { color: green; text-decoration: underline; text-shadow: 2px 2px #ffffff; border: 2px solid green; }

needless to say,
it can start to look real tacky when too many features are added!
a:hover { color: orange; text-decoration: line-through;
text-shadow: 1px 1px orange; border: 2px solid orange; background-color:#00baba;}
etc. etc.


[ Contact Forum Admin ]


Forum timezone: GMT-8
VF Version: 3.00b, ConfDB:
Before posting please read our privacy policy.
VoyForums(tm) is a Free Service from Voyager Info-Systems.
Copyright © 1998-2019 Voyager Info-Systems. All Rights Reserved.