Basic HTML Coding Technics

Using CSS In Your Web Site HTML

How would you like to have a tool that could make your web site load faster? What if it could also allow you to make changes across you entire site with just a few keystrokes? And while we're at it, let's make it the standard for new browsers, so that your site will still work properly in the future.

Well, that tool is here now and it's called Cascading Style Sheets (CSS). CSS is the part of the code that defines the appearance of a web site.

HTML 4 is the current version of the markup language that is used to control the structure of a web page. It was created by the World Wide Web Consortium several years ago, and one of the main goals of this version was to separate the structure of a web page from its presentation. This means that HTML is used only to create the overall structure of a web page, which includes things like headlines and paragraphs. This leaves CSS to describe what different size headlines should look like, and how paragraphs will appear on the screen.

The problem with many sites today is that they were constructed before HTML 4 had been released, or by designers who hadn't yet made the transition. These sites are more difficult to debug or update because the HTML was used i many creative way to do define the presentation as well as the structure, and it wasn't designed to do that. They also contain a lot more code, since each headline, paragraph and other text had to have its font, font size and color defined. This extra code adds to the time it takes to download a web page into someone's browser.

These sites are time-consuming to update, as well. If you decide to make all your largest headlines red instead of blue, each one has to be changed one at a time. If enough changes need to be made, there's always the chance one will be missed, or perhaps changed incorrectly.

CSS to the Rescue!

The CSS for your web site is in a text document separate from the rest of the HTML code. In the head, or invisible, part of the page code, is a line that links that web page to the style sheet. When a browser reads the code, it uses the information in the CSS to define the way the page looks.

So for instance you might write your CSS to make your largest headlines with a size of 20 pixels, in blue, using the Verdana font. The CSS code to create this looks like this:

<#h1 { font-family: Verdana, Helvetica, Arial, san serif; font-size: 20px; color: blue;}>

(The pound signs are only used in these examples so you can see the code.)

Remember, this will be just part of the CSS code that is in a text document that might have been typed up using Notepad, or any other word processor. The reason several fonts are listed is because HTML can only use fonts that are already on the visitor's computer, and since we can't know for sure what everyone has, we give the browser choices. If the browser has Verdana, that's the font this headline will use. If it doesn't have Verdana, it checks for Helvetica, and so on. If the computer doesn't have any of the first three, it will use whatever default san serif font is on that machine.

When a headline is created for a web page, the code might look like this:

<#h1>Buy Now!<#/h1>

If the page with this code is linked to the style sheet with the code we showed previously, this headline will be in 20 pixel blue Verdana on every computer that views the page. Without using CSS, this code will look different in different browsers, depending on what defaults have been set. On my computer, this would be in 24 pixel New Times Roman, and it would be black.

In the days before CSS, in order to get this headline the way we wanted it, we'd have to specifically spell out every feature, and the HTML code, which we saw a moment ago was so short, now would look like this:

<#h1><#font face="Verdana, Helvetica, Arial, sans-serif" #color="blue" #size="20px">Buy Now!<#/h1>

Make Things Simple with CSS

That's quite a bit of extra unnecessary code, especially when you multiply it by the number of headlines, paragraphs, lists, captions and links that also need this treatment. It's so much easier to define each type of text in CSS once and let all the pages linked to it use those settings.

You can now see why modifying a site would be so much easier with CSS. Without it, if you wanted the headlines changed from blue to navy, and the text in each paragraph made slightly larger, every headline and paragraph in the entire site would have to be changed individually.

With CSS, you make a small change to the headline code, another small change to the paragraph code, and your whole site is quickly and uniformly changed! This is just one simple example of the many ways CSS can be used in a web site.

Conclusion

Older browsers don't recognize all the current CSS standards, so many of its most powerful features don't work in them. As newer browsers are developed they are including more and more support for CSS standards, so in the future we can look forward to having more control over the layout and appearance of our web pages.

CSS As A Great Optimization Tool

What is CSS? CSS stands for Cascading Style Sheets. It is a webdesign language that is used to improve the look and feel of your website. It can be great to use when you are optimizing your website for search engines. Search Engines go through your website as fast as they can. So usually its better to have less code and more content. CSS allows you to use simple tags in your code and have high effects. There are three forms of CSS. They are:

- Inline
- Embeded
- External

Inline
------
Inline CSS is used in the body of your webpage. Inline CSS is good to use to disallow the effect of External or Embeded CSS. I don't recommend using a lot of inline CSS but it comes in handy sometimes.

Example:
<h1 style="font: 16pt"> Using Inline CSS </h1>
<p style="font:8pt"> CSS is a very simple tool to implement to any website. </p>

Embedded
-------
Embeded CSS is used within the document again, but it is built in the heading of your website. This type of CSS is great for when you have a one-page website. Embeded CSS is a great way to start testing how powerful CSS can be. Some simple code at the head of your page can eliminate the use of <B>, <I>, <U> , and <FONT> tags.

Example:

<html>
<head>
<style type="text/css">
<!--
body
{color : blue ;
background : grey;}
p
{font-family: arial;}
-->
</style>
</head>
<body>
<p> This font will be in "arial" and it will be blue with a grey background. </p>
</body>
</html>

External
--------
External CSS is used the most in webdesign. External CSS is kept in a text file within your website. The best thing about External CSS is that you can have all of your pages within your website linking to this one CSS document. So that you don't have to go back to each page to make changes.

Example of the HTML document calling on External CSS:

<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="external.css" type="text/css" />
</head>

Example of a External CSS document

body
{color : blue ;
background : grey;}
p
{font-family: arial;}
UL {font-weight: bold;
text-decoration: none;
color: pink;}

An external CSS document is just a blank file that contains all of your CSS commands.

So, what are you waiting for? Get out there and try out this easy language!

Optimize HTML Tables for Search Engines

How To Optimize HTML Tables for Search Engines and keep your navigation on the left while maintaining SE Optimization efficiency!

by Stephen Mahaney

article reprinted with permission from Search Engine News

Perhaps you've heard that HTML tables reduce search engine optimization efficiency. The truth is, it isn't the HTML table layout that reduces the efficiency, it's the content order of appearance within the table that auses the search engine problems.

Specifically, it's when site navigation is placed inside the first cell of the table that causes search engines to erroneously catalog the navigation links as the theme of your site.

Simply put, site navigation utilizes words like Home, Products, Services, Contacts Us, About Us, Privacy Policy, etc. Such words are certainly not the primary "keywords" that an online business wants a search engine to index. However, when such navigation is placed into the first cell of an HTML table, as is typically the case, those are exactly the words a search engine sees first, and indexes -- much to the dismay of search engine optimization strategists.

Without a doubt, this is a top design concern that catches most webmasters between their understandable desire to build easily navigable pages and their company's need to score well in the search engines.

Here's a simple solution...

If you've faced this dilemma, fret not. We have a clever, yet simple solution to one of the most common search engine optimization problems known to site designers. Now you can use HTML tables to achieve a tastefully pleasing and predictably consistent design layout AND fully optimize your pages to score high in the search engines - here's how.

The technique involves using a blank table cell along with an appropriate rowspan specification on the subsequent table cell. Doing so allows you to set the contents of the main section of your webpage as the very first body text a search engine will "see" in the page's source code.

Then, by placing the navigation column within the next table cell, the webpage displays navigation on the customary left side in spite of the fact such navigation physically exists after the body text of the main section in the source code.

This strategy gives you the best of both worlds -- design appeal AND search engine optimization efficiency. Here's what it looks like...

<table border="1" cellpadding="5" cellspacing="0" width="450">
<tr>
<td valign="top" bgcolor="#eeeeee" align="left" width="140"></td>
<td valign="top" align="left" bgcolor="#efefff" width="450" rowspan="2">

Place your page contents and keywords here.

Take a close look at the code below and you will notice that this text appears first in the source code and above the text that appears in the table to the left. Therefore, a search engine will see this text and index it before it sees the text that is located lower in the source code of the page.

To prove it, copy and paste the code below and save it as an HTML document. Upon viewing the page your end result will look exactly like this green and yellow table combination you see here giving you a ready-made search engine friendly table-template.

</td>
</tr>
<tr>
<td valign="top" align="left" width="140" bgcolor="#eeeeee">

Place your navigation links here.

Although it LOOKS like it is the first text when viewing a page, in the eye of the search engine it isn't because the text contained in <B><I>the cell to the right</I></B> actually appears <u>first</u> when viewing the source code. (see below)

</td>
</tr>
</table>

Copy the example in green above and then insert your own text into the format. I'm sure you'll see right away how easy it is to place your keyword content strategically in the path of the search engines even when using HTML tables. Don't you wish all your optimization problems could be solved so easily!

Question: How much money could a tip like this mean to your company's bottom line. $100? ...$500? ...more? ...because it improves your positioning on the search engines, maybe a LOT more! If you answered yes then you owe it to yourself to check out Search Engine News.

Update Your Site Instantly with SSI (Server Side Includes)

Summary: In a large site, updating identical information (such as the copyright date) on every page is a time-consuming task. Make short work of it using Server Side Includes (SSIs).

Update Your Site Instantly Using SSI

There are probably two main ways you currently update your site. The first, and most important, is adding new content. Whether you are updating a calendar, adding a new page, or putting in a photo of a new product, you are enhancing the value of your site for your visitors.

The second, and more time-consuming changes are those that are made to every page of your site. These might include copyright dates, contact information, the date and time, or navigation links. If you have a large site, changing just your company phone number on every page can be a time-intensive, boring job.

Modern web development tools such as Macromedia's Dreamweaver offer a template feature that allows your web designer to change one section of a single page (say the contact info) and have the software automatically change all the pages that were made from that template. Those changed pages are still on the designer's computer, however, and must be uploaded to your server one page at a time. Depending on the number and size of the pages, and the speed of your designer's modem, updating a site this way can take awhile.

A simpler and faster method uses something called Server Side Includes (SSI). We'll use the example of updating your contact information, which is currently found at the bottom of every page of your site.

Here's How It's Done
Your designer originally creates a new page that only contains your contact information. This page is saved as a regular HTML page.

Next, the designer decides where on each page of your site to place the contact info. In that spot, instead of typing in your address, phone number and email, he places a single line of code that might look something like
< !--#include virtual="../includes/newsSSI.html"--> .

This code tells the server to take whatever is on the SSI page and place it in this location.

Each page is then saved with the .shtml suffix instead of the plain .html ending. For instance, the URL of your home page might be www.yourcompany.com/index.shtml. This tells the server that hosts your web site that this page has a Server Side Include in it which must be dealt with before the page is sent back to the visitor. Every time this page is called, the server will check the SSI page and load its content into the designated area of the web page.

How This Saves Time
Once the system is in place, updating every page of a large site is a two-step operation. The SSI page is changed (perhaps the phone number) and that one page is uploaded to the server. That's it! Now every page with a dot shtml ending will show the change instantly, without the entire site having to be uploaded to the server.

I use this on my site every time I add a new article. At the top of each page is a pointer to my SSI page. On that page it just says, "This week's article is..." with the article name and a link to it. Every time I add a new article to the site I just change the title and link on the SSI page and upload it to the server. Instantly, every page on the site has the new article name and link.

Probably the most common use of SSI is to automatically post the current date and time. Just insert the code < !--#echo var="DATE_LOCAL" --> where you want the date and time to appear and the server will take care of the rest.

Conclusion
If you have a relatively small site, you probably don't need to use SSIs, but as your site grows, these little snippets of code can save your designer a considerable amount of time, which should save you a corresponding amount of money.

How to Use HTML Meta Tags for Search Engine Optimization?

Statistics show that only one of every four Web Sites use Meta tags. However using these tags can give your site an advantage over other sites that do not. Meta tags enable most visitors to initially find your site from the search engines.

What are Meta Tags?

These are HTML tags that provide information that describes the content of the web pages that the visitor will be viewing. Web Site owners use this resource to control their positioning and descriptions in the search engines. Most search engines incorporate reading meta tags as part of their indexing formula.

Where to Place Meta Tags

They should go in between the <head> and </head> tags in your html page.

Types of Meta Tags

The Doctype tag The DTD (Document Type Definition) tag precedes the opening <HTML> tag. It is generally the first element to be used on any page. It distinguishes the version of HTML in use from other versions of HTML and tells the browser what tags to expect when laying out the page.

<!doctype html public "-//wc3//dtd html 4.0 transitional//en">

If a browser doesn't understand a tag, it just ignores it. This, in effect, renders useless. For the proponents of strict standardization, a statement like would ensure standardization. If a browser didn't recognize the statement, it could ignore the page.

META Tags and Document Identification

The syntax for the tag is:

<meta name="namevalue" content="contentvalue">
or
<meta http-equiv="namevalue" content="contentvalue">

The tag requires the CONTENT attribute and adds either the NAME or HTTP-EQUIV attribute. These define the general information you are creating or changing in the document, and the CONTENT attribute defines the value of the general information.

HTTP-EQUIV Attribute

<META HTTP-EQUIV> tags are equivalent to HTTP headers. To understand headers, you must understand the process that occurs when you use a Web browser to request a document from a Web server. You request information using your browser and the Web Server receives your request via HTTP, the standard Web protocol. When the server finds the page you requested, it generates an HTTP response. The initial data in that response is called the HTTP header block. This header gives the Web browser information useful for displaying the page.

Common Examples of the HTTP-EQUIV Attribute Value

Language META Tag This is an optional tag. It declares to users the natural language of the document being indexed. Search engines which index websites based on language often read this tag to determine which language(s) is supported. This tag is particularly useful for non-english and multiple language websites.

<meta http-equiv="content-language" content="en">

Content-type Tag

The Content-Type entity-header field indicates the media type of the entity-body sent to the recipient. This is an optional tag.
<meta http-equiv="content-type" content="text/html;charset=windows-1252">

Expires META Tag

An optional tag that defines the date when the file will be considered expired in cache and a new page will be generated. Only use when your website is running a limited time event or there is a preset date when your document will no longer be valid.

<meta http-equiv="expires" content="Tue, 04 Dec 1993 21:29:02 GMT">

Refresh META Tag An optional tag used as a way to redirect or refresh users to another web page after X number of seconds. This META tag is often used as a "bridge" page which is accessed first by users and are then redirected to another web page.

<meta http-equiv="refresh"
content="seconds;url=http://www.website.com/index.html">

<META> NAME Attribute tags with a NAME attribute are used for information types that do not correspond to HTTP headers.

Common Examples of the HTTP-NAME Attribute

Keyword Tag Search

Engines that support META tags will often use the keywords found on your pages as a means to categorize your website based on the search engines indexing algorithms (proprietary algorithms which index your website in search engine databases).

Ensure you choose keywords that are relevant to your site. Avoid excessive repetition as many search engines will penalize your rankings for attempting to abuse their system. Search engines give priority to the first few words in your description, so focus on your main keywords and then elaborate further by using synonyms or other related words.

<meta name="keywords" content = "keyword1,keyword2,keyword3">

Keyword values are usually separated by commas. The maximum keyword allowance is 1000 characters, however, it is believed that anything over 255 characters is ignored.

Description Tag

Search engines that support META tags will often display the Description META tag along with your title in their results. When creating your META tags, make the first sentence of your description field capture the attention of a user and use the rest of the description tag to elaborate further.

<meta name="description" content="This camping site is about
outdoor camps">

Keep this description to no more than 25 words (maximum allowance is 150 characters). Not all search engines recognize this tag.

Conclusion

Don't let your site be one of the four web sites on the Web that do not have Meta Tags. Optimize it now, so you have a greater chance to be listed in the search engines. Getting listed, will bring more traffic which may mean more sales.