THANK YOU FOR USING GOARTICLES.COM
The Articles Search Engine
Take A Moment To Visit Our Other Top Web Sites:
http://www.dropjack.com http://www.seo-news.com
http://www.sitepronews.com http://www.exactseek.com
http://www.blog-search.com http://www.smartwebgadgets.com
Use and distribution of this article is subject to our Publisher
Guidelines at http://www.goarticles.com/publisher.html
================================================================
Title: CASCADING STYLE SHEETS AND SERVER SIDE INCLUDES
Author: Amrit Hallan
Article:
Highlight: Below, first we learn how to define individual tags
with multiple definitions using the Cascading Style Sheets, and
then we learn how to include common components on multiple web
pages with minimum effort.
We packed up with external Cascading Style Sheets in the
previous section, and I had mentioned like a sage that their
could be a point in your life when you would like to implement
different CSS definitions for different sections of the same
HTML page. I understand that as you go through these HTML
gospels, you're growing wiser and wiser, and your unquenchable
thirst for wisdom is attaining new heights. Good!
We use the CLASS attribute to render different CSS definitions
to same tags. Ok, before we move ahead, today I read in an
article that tags in an HTML file should be used in small caps
so that they can be used in sync with the emerging trends like
XML etc. So small caps from now on.
Supposing, in one section, we want <a> </a> to look purple, and
in another, we want <a> </a> to look black. If we do it in the
usual
a { font-size : 10 pt; font-family : Arial; font-weight : bold;
color : Purple; text-decoration : none; }
a:hover { font-size : 10 pt; font-family : Arial; font-weight :
bold; color : Purple; text-decoration : underline; }
manner, we'll only have a purple colored <a> </a> tag because
the definition is applied universally. So what do we do. We uses
"classes" in this manner:
a.sec1 { font-size : 10 pt; font-family : Arial; font-weight :
bold; color : purple; text-decoration : none; }
a.sec1:hover { font-size : 10 pt; font-family : Arial;
font-weight : bold; color : purple; text-decoration : underline;
}
a.sec2 { font-size : 10 pt; font-family : Arial; font-weight :
bold; color : black; text-decoration : none; }
a.sec2:hover { font-size : 10 pt; font-family : Arial;
font-weight : bold; color : black; text-decoration : underline; }
If you're the noticing type, you'll notice the use of sec1 and
sec2, which we can take as the two sections. We execute these
definitions in the HTML page somewhat like this:
<a class="sec1" href="http://www.hereforever.alive.org">To see
the site of the immortals, click this purple text.</a>
<a class="sec2" href="http://www.goneforever.dead.org">To see
the site of the dead, click this black text.</a>
Let's now life the CSS affairs and move on to the SSI - Server
Side Includes.
Although in the real world, it depends on the guy/girl managing
your server whether you can use the SSIs or not, assuming you
can use them, you should know how and why to use them. First,
why?
The use is somewhat akin to the external CSS. One change, and it
is reflected through the entire web site, even if there are
thousands of pages.
The ideal use is the navigation bar. Of course you know that
every web site deserving to be called a web site must have a
navigational system so that you can explore it in an amiable
manner. On this web site - http://www.Bytesworth.com - if you
can see those gray buttons on the right hand side, they help you
navigate through hundreds of information pages.
To facilitate hurdle-less navigation, these buttons should be on
every page, so that you can immediately click to the section of
your desire, irrespective of where you are loafing around.
This is achieved by including the line
<!--#include file="nav.inc" -->
Where "nav.inc" is some file you deem fit to include. The
extension "inc" does not have any technical implication in this
case - you can have any extension. Whatever code is there in the
included file, gets included in the HTML file. So wherever you
want to use the include file's content, append the above line
where you want the output to appear.
There is another way to include file such as <!--#include
virtual="nav.inc" -->, but for the time being, you can do
without it.
Including a navigation bar is not the only utility of the SSI's.
You can come up with complex ASP and CGI codes to include in
your page, but that is beyond the scope of this tutorial, at
least at the moment.
Another thing to keep in my mind while making pages that are
destined to have included files in them: there extension should
be SHTML rather than HTML or HTM. This extension informs the
ignorant server that the file being loaded is going to use the
SSIs.
In the next section, we are going to deal with a navigation bar,
and how to use tables (remember them?) for it. We'll also learn
how to define bulleted list.
About the author:
Amrit Hallan is a freelance web designer. For all web site
development and web promotion needs, you can get in touch with
him at http://www.bytesworth.com. For more such articles, visit
http://www.bytesworth.com/articles and
http://www.bytesworth.com/learn You can subscribe to his
newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks
by sending a blank email at Bytesworth-subscribe@topica.com
================================================================
FORGET EXPENSIVE PPC ADVERTISING
Give your Website Top 10 Exposure across 100's of Search
Engines and Web Directories delivering 150 Million+ Searches/Mo.
$3 - $4/Month - Quick Inclusion - World Wide Placement!
Your Keywords - No Bidding - No Click Fraud - Stats Tracking
< http://www.exactseek.com/featured_listings.html >
================================================================
No comments:
Post a Comment