If your web site is small, consisting of only a few pages, you can have links to all these pages from one page – the site map.
On the other hand, if your site consists of hundreds of pages segregated into directories (hopefully!), the site map of your web site might run into 2 or more pages.
As the term suggests a site map is a map of the web site and can be a list of links or a more complex representation. However, my advice is to keep the site map as simple as possible.

Here is a basic site map of webdevelopersnotes.com
(I have only displayed the important links)

• Home page
• Tutorials
• Web design Templates
• Web Graphics Design
• Web Development Tips and Tricks
• Web Page Design
• Web Development Resources
• Web Development Services
• Feedback
• Link to WebDevelopersNotes.com
• The Webmaster
• Privacy Policy
• WebDevelopersNotes.com Charity Drive
• WebDevelopersNotes.com Disclaimer

Creating a Site Map for your web site

The simplest way to create a site map is to use the HTML Unordered Lists tag <UL>. The tag can be employed to create simple one-level lists and also display the hierarchical structure of your web site by nesting lists if your site s more complex.

The Unordered Lists tag <UL> supports a neat attribute called Type with which you can specify the type of bullet you want for the list – disc, circle or square.

Let us look at an example:

• Electronics
  • DVD Players
  • V.C.R.s
  • Computers
    • Desktops
    • Laptops
    • Palmtops
  • Portable MP3 players
  • T.V.s
• Automobiles
  • Cars
  • Buses
  • Motorcycles
  • Scooters
• Furniture
  • Beds
  • Tables
  • Chairs

The HTML code for the above is:

<ul type="disc">
<li>Electronics
	<ul type="square">
	<li>DVD Players</li>
	<li>V.C.R.s</li>
	<li>Computers
		<ul type="circle">
		<li>Desktops</li>
		<li>Laptops</li>
		<li>Palmtops</li>
		</ul>
	</li>
	<li>Portable MP3 players</li>
	<li>T.V.s</li>
	</ul>
</li>
<li>Automobiles
	<ul type="square">
	<li>Cars</li>
	<li>Buses</li>
	<li>Motorcycles</li>
	<li>Scooters</li>
	</ul>
</li>
<li>Furniture
	<ul type="square">
	<li>Beds</li>
	<li>Tables</li>
	<li>Chairs</li>
	</ul>
</li>
</ul>

Note how the hierarchical structure is displayed using nested Unordered Lists <UL> tag. We have also used the TYPE attribute and specified the kind of bullet we want for each list.

Why is a Site Map important for a web site?

An important point to remember ALWAYS is that people come to your site looking for information.
Net surfers are a ruthless lot. If they find information quickly, they stick around; else, they click the “Back” button on the browser, close the browser window or simply go to another web page.

So the most important reason a site map is indispensable is because it helps the visitors to understand the site structure and layout and thus, quickly gain access to what your site has to offer.
A site map is a page wherein the structure of a web site is clearly shown to a visitor. They can then choose the page to which they want to go with just one click.

In addition to the advantages a site map offers to “human” visitors, it is also important for “robotic” visitors from search engines. As a web developer your aim should be to get all public pages on your web site in the search engine database. Since a site map carries links to all pages from one page, it is an ideal candidate to submit to a search engines. Submission of the site map to a search engine might help in getting all web pages indexed quickly by the search engine. I may be incorrect since I have no data to support this point but it just seems logical. However, on a similar note, there are search engines that limit the depth of searching on a web site from the homepage. For example, if you have a page buried deep inside the directory structure on your web site, it might not be picked up by such search engines. In such cases, the importance of a site map is that it pushes the search engine to go directly to the page instead of hunting for links.

There have been clients of mine who got back saying that their site map ranks higher for a particular key word that the actual page which has been optimized for that key word. Some of them like this while others mention that they would prefer of visitors go directly to the actual page.
So if you don’t like the site map on your web site to rank high, you can always use the NOINDEX attribute of the META tag.

Two important links:
1. How does your web site appear in text web browsers (and, thus, to robots) – go to the Lynx viewer -> http://www.delorie.com/web/lynxview.html. This is such a good tool. It lets you see your site how a search engine would.
2. To know how may pages Google has indexed on your web site type “site:mywebsite.com” in the Google search field.

Large web sites might have hundreds of pages. For such sites, the developer might create dynamic and interactive navigations JavaScript drop down menus making it easy for the human visitors to go quickly to a desired web page. However, a robotic visitor would not understand such menus at all and thus, it is very important of such web sites to have site maps.

If you use a JavaScript navigational drop down menu on your site make sure you include a link to the sitemap page inside the <NOSCRIPT> tag. So if a visitor is using a browser which does not support JavaScript or has JavaScript turned off, he or she will at least know the site structure.

A site map helps you in planning your site before you even start creating it. Once you decide which pages you want, your job is actually made a lot simpler when you start designing the web pages. At the beginning of each web site project, I ask my clients for the site structure. This is simply the site map. A site structure helps me in understanding the number of pages on the site and how they would be laid out. For example, if there are only 6 main pages, I would put links to these pages in a horizontal navigation menu. However, if there are more than 12 main pages, I would prefer to go for the standard left hand side navigation menu system as it would be difficult to put 12 links horizontally in one row.
Thus, another important point is that a site map should actually be the first step in planning for a web site.

A final point to push my argument of the importance of a site map – Google in its Webmaster Guidelines recommends that sites should have a site map.

Important points for a good site map

Here are some hallmarks of a good site map, which helps visitors at finding information quickly on your web site

• The site map should be the simplest page on your web site.
• Do not give a fancy name to the site map link such as “Web Site Tree” – keep it as “Site map”, this way your visitors understand immediately what you mean.
• You should always avoid “dynamic” site maps. Those in which the visitors have to “work” their way to get hold of information. Remember, the reason visitors comes to a site map page is because they are lost. To make them work again for something that you can display as a simple static link will just kill the purpose of having a site map.
• If the site map is list of text links, be sure to use the TITLE attribute of the anchor tag and include keywords inside it.
• It is a good idea to put a sentence describing the page contents below the link for that page on a site map.
• A site map should not be the primary navigation on your web site it should complement it.
• A link to the site map page is very important and all pages should carry this link. The site map link can be included with other links in the main menu on your web site or placed at a section on the web page from which is it clearly visible.
• Other important aspects on a web site should complement site maps. For example, the link color for visited links should be different from that of non-visited links so that visitors understand which pages they have already seen and thus, save time.

Site maps and other nice ways to help visitors quickly locate information on your site

In addition to including a site map on your web site, you should also to display at the top of each web page, the hierarchical position of that web page. You can find this on this page too – just above the title “Site maps and other nice ways to help visitors quickly locate information on your site” you can find the hierarchical position on this web page on www.webdevelopersnotes.com.

If your hosting service allows you to create your own error pages, you can develop each of the error page (esp. the 404 Page Not Found) as a site map. I usually do this for errors, 400, 403, 404 and 500. Click for details on server error codes.

A question: if the web site is small and all pages link to each other… is there a need for a site map?
Well, you should always have several paths to go to a page to assist both human as well as robotic visitors and there is no harm in actually creating links to pages… is there?

Finally, it’s always a good idea to use a “Search” on your web site. There are several ways you can go about this – write a search program (script) for your web site is a server-side language, download a free, shareware or a paid one and install it on your web site, use one of the several services available on the web, including Google search!

Now you might ask why we need a site map once we have a web site “search” feature? Remember, a site map is created for both “human” and “robotic” visitors. A human would know what to search for but you need to help the webbot to locate pages.

Scripts to create Site maps for your web site

I have describe before how you can create a site map using the HTML Unordered list tag. However, if you prefer to automate the creation of the site map on your web site you can find several scripts and programs online.

The site map creation programs and scripts differ in features but all result in a good looking site map for your site.

Likno’s AllWebMenus
AllWebMenus allows you to create site maps in HTML format, making your web sites search engine friendly!
You can choose among ready-made templates for the look of your site map and of course you can edit the produced HTML file with your favorite authoring tool to give it your own look and feel.
The best news is that this feature is FREE and no purchase of AllWebMenus is required!

SearchBliss Site Map Generator
Create a site map instantly and make your site surfer friendly and easier to navigate. You may also purchase your own with NO links back to SearchBliss and increase your website “stickiness” by offering this free resource to your own visitors!

FreeFind
FreeFind’s site map creator is integrated with their site search technology and can be used together with their search engine, or separately without the use of their search engine.

SiteMapper

sitemap
sitemap indexes all pages under the current directory and writes an HTML map page to standard output. The code looks for description information for each page in a meta `description’ header; if it doesn’t find one, the page is omitted from the index.

<style>
<!--

a   {text-decoration:none}

-->
</style>

The entire code has to be placed inside the <head> of the HTML document or can reside in an external style sheet (.css) file.

There are a few more features that can change the look of links on a web page. Experiment with them. Here is a code that makes all links appear in bold Verdana font, size 10 in orange color.

<style>
<!--

a   {text-decoration:none;
        font-family:Verdana;
        font-weight:bold;
        font-size:10;
        color:#FF9900}

-->
</style>

Important
Links on the Internet are identified by underlined text. You can read about the pros and cons of removing underlines from links.

Two different colors for links

Only one color can be set through the link attribute. With Style Sheets, you can have links of different colors and styles in the same document.
Styles sheets can be applied to documents in three different ways. In this article, I’ll cover two ways to embed style information on a web page.

Inline Styles

<a href="someplace.html" style="color:#FF00FF">Someplace</a>

With inline styles, the style information is placed inside the <a> tag. The style consists of a property:value pair. In this case, the color property makes the link pink (hexadecimal code for pink is #FF00FF).

Here is a link to Someplace

In addition to color, style sheets also allow you to set other values for the link such as font size, font face and text decorations.

<a href="someplace.html"
style="color:#CC0000;text-decoration:none;font-size:14pt;
font-face:Arial, Verdana, Sans-serif">
Someplace</a>

There are four property:value pairs each is separated from the other by a semi-colon. font-size sets the size to 14 points, text-decoration removes the underlines from the link and font-family specifies the font to be used.

Here is another link to Someplace

Embedded Styles

Inline styles are similar to the <font> tag. Populating a page with these is considered bad programming practice. It’s better to include all the style information inside the document HEAD section. The Styles placed in the head are enclosed in the <style>-</style> tags.

<style type="text/css">

a.implink        {color:#FF9900;
                  font-size:12pt;
                  text-decoration:underline;
                  font-family:Verdana, Arial, Sans-serif}
</style>

• The style has four property:value pairs separated by semicolons.
• All the property:value pairs are placed inside curly braces.
• The style information applies to A, which is known as the selector. Furthermore, the selector is given a name, implink, through which it will be called from the class attribute.

<a href="someplace.html">Someplace</a>

So if you have a program in .exe format or a .zip file you can attach it to a link like:

<a href="brahms.zip">Download Brahms Waltz #3 (zip file)</a>

When you click on such links, and your browser is not able to display the file on its own, it pops up a window asking you to “open” or “save” the file. If you choose to open the file, the browser will launch the application to which such files are attached or else display a window asking you to pick the software, if it cannot open the software that uses such file formats. You can also specify a target location on your systems’ hard drive to save the file to a desired location.

Do you want a newspaper kind of layout for your web pages? This tip will show you how to do that using a thin (1 pixel width) vertical separator.

It involves designing pages with fixed sizes and a good working knowledge of the <TABLE> tag. If you want to know more about HTML tables, go to the advanced HTML tutorial.

The layout above consists of a table 301 pixels wide. This table has only one row with three cells. The first and the last cells are 150 pixels wide while the middle one is 1 pixel wide. It’s the center cell that makes the vertical separator.

The code is:

<table width="301" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>So you want a newspaper kind of...</td>
<td width="1" bgcolor="#000000"><img src="1-1.gif" width="1"
height="1" border="0" alt="" /></td>
<td>It involves designing pages with...</td>
</tr>
</table>

Important points

• Width of the table is specified in pixel values. This yields a fixed table size. You can use % values in the width attribute but then would have to test the code in both Internet Explorer and Netscape Navigator.
• The cellpadding attribute is set to zero. Any other value will result in thickening of vertical separator.
• Cellspacing will add some space around the text in columns, which indents in from the separator. You can choose any value for this attribute to suit your needs.
• The width of the middle cell determines the thickness of the vertical separator. In this case, its set to 1 because that’s what we want.
• The bgcolor of the middle cell is black (#000000). This results in a black colored separator. You can thus change the color of the separator by changing the background color of the table cell.
• The content of the center cell is a 1 X 1 transparent pixel image – 1-1.gif in the code above. Some web developers might use the Netscape Communicator specific <SPACER> tag, but I suppose that this will be dropped in the next version of the browser and is best avoided. The 1 X 1 pixel image is only 49 bytes! You can download its zip file from here. (Note: You cannot leave the center cell empty. You can’t use &nbsp; since this will thicken the separator. The best bet is to use a 1 X 1 pixel transparent gif.

That said, creating rounded corners in no rocket science. We simply employ HTML tables to create the layout accomplish our task – which is to produce something like the table with rounded corners below.

	This is a Rounded table You would typically place your content here.

Remember, all elements on a web page are rectangular and this includes images! This should come as no surprise because the screen on our monitors is rectangular and so is the browser window and the active space in the browser (the space that displays the web page). Take a look at the image below. Though it might look circular it’s actually a rectangle (a square to be precise) – read more about why images are rectangles.

The background color of the image above is the same as that of this web page (white – hexadecimal code #FFFFFF) and because of this it seems that the image is only the green colored circle. However, this is not true. The green circle us surrounded by white color which is actually our image background color. If we place the image is a table with a blue background, we can then see the area occupied by the image.

Now you see the white space that surrounds the green circle – don’t you?
OK! So what does all this have to do with creating tables with rounded corners? A lot, my good visitor! Now that we understand that though images are rectangles, they can be employed to give a semblance of other shapes. The shape that we would use are the four quarters of a circle. But before jumping to all that, let us create our HTML code on which we will work further.

The first step is to understand that a table with rounded corners is created by a table with 3 columns and 3 rows; thus, a total of 9 table cells – like the table below:

Cells 1, 3, 7 and 9 will contain the four quarters of a circle, cells 2, 4, 6 and 8 will form the top, left, right and bottom edges and Cell number 5 will have the actual contents. The four quarters of a circle that we plan to use are four different images. And to create these images you need the assistance of your favorite graphics editing tool. Any graphics tool will let you create a circle. Once you have done so, you need to split it into 4 squares and these will be the four quarters.

For example, in Paint Shop Pro or Adobe Photoshop, start by creating a new image of 28×28 pixels. Draw a circle right in the middle of the image. IMPORTANT note: be sure that you have the anti-aliasing option selected before you draw the circle. Then with the selection tool extract 14×14 pixels from the top left. You can repeat this for other quarters or simply flip and mirror the first quarter that you’ve created. you need to save all the four images with different file names. So starting with an image of a circle, we can get 4 quarters as below:

Our starting image

Top-left corner

Top-right corner

Bottom-left corner

Bottom-right corner

We will now place the four images in 3×3 table inside the corresponding cells as detailed above, remove the borders, padding to give us our rounded rectangle.

<table width="200" cellpadding="0" cellspacing="0" border="0"
style="background-color: #9C084A">
<tr>
<td width="14"><img src="rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>

<td width="172"></td>

<td width="14"><img src="rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>

</tr>
<tr>

<td></td>

<td align="center">ACTUAL CONTENT</td>

<td></td>

</tr>
<tr>

<td><img src="rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>

<td></td>

<td><img src="rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>

</tr>
</table>

Pay close attention to the code marked in blue.
The width of the HTML table can be anything number that you want, BUT be sure to that the cellpadding, cellspacing and border attributes are set to a value of zero (0). You would also need to give a background color to the table which should be the same color as that of our circle (now split into quarters). I would recommend that you use styles to specify the background color as I have done with style=”background-color: #9C084A;” instead of using the BGCOLOR attribute as its been deprecated.
You will notice that some table cells are empty… you can put a transparent 1×1 pixel gif resized to the correct width and height it you want.
Lastly, DO NOT forget the ALT attribute for the images as this is now a required attribute and your HTML page will not validate correctly if you skip it.
The above code will render a table similar to the one I displayed at the beginning of this article – View the table with rounded corners.

Changing the height and width of the table with rounded corners

As I mentioned above, the width of the table with rounded corners can be anything you want. However, the beauty of this table code is that you dont have to do anything about its height. The height of this table is controlled by the actual contents… the contents placed in cell #5. So depending on the amount of content we place in this cell, the height of the table will increase on its own. Take a look below:

	Scarborough Fair Are you going to scarborough fair? Parsley, sage, rosemary and thyme. Remember me to one who lives there. She once was a true love of mine. Tell her to make me a cambric shirt, (a hill in the deep forest green) Parsley, sage, rosemary and thyme; (tracing of sparrow on snow-crested brown) Without no seams nor needle work, (blankets and bedclothes the child of the mountain) Then she’ll be a true love of mine. (sleeps unaware of the clarion call) Tell her to find me an acre of land, (on the side of a hill a sprinkling of leaves) Parsley, sage, rosemary and thyme; (washes the grave with silvery tears) Between the salt water and the sea strand, (a soldier cleans and polishes a gun) Then she’ll be a true love of mine. Tell her to reap it with a sickle of leather, (war bellows blazing in scarlet battalions) Parsley, sage, rosemary and thyme; (generals order their soldiers to kill) And gather it all in a bunch of heather, (and to fight for a cause they’ve long ago forgotten) Then she’ll be a true love of mine.

This was the first part of the creating a table with rounded corners. Now let us see how we can create more advanced and complex corners of such tables. This is discussed in the next part – Complex and more advanced rounded corners for HTML tables.

Before we delve on how to create complex rounded corners, let me point out that the roundedness of the table depends on the curves of the image and thus the size of the circle that you started with. So if your circle image was large, it will result in a table with smoother and larger curves and if the circle was small, the rounded curves would be tighter. Take a look at the examples below.

This is a Rounded table You would typically place your content here. Each corner image is 50×50 pixels

This is a Rounded table You would typically place your content here. Each corner image is 8×8 pixels

By now, I guess you would have realized that the secret (if there was any) lies in the images that we have used for the rounded corners. So let us start on creating complex rounded tables.
Here is the simplest of the complex rounded tables that we are going to create.

	This is a Rounded table You would typically place your content here.

This rounded table is made using 8 images – 4 for the rounded corners and the rest are employed for the borders of the four sides. Here are the four images used for the corners:

16×16 pixels Corner for top-left

16×16 pixels Corner for top-right

16×16 pixels Corner for bottom-left

16×16 pixels Corner for bottom-right

The four sides are made by very thin images – The top and bottom edges are created using images that are 1 pixel in width and the left and right edges are of images that are 1 pixel in height. Since each of our corner image is 16 pixels in both width and height, the images for the top and bottom edges are 16 pixels in height (to match the corners) and the ones for the left and right sides are 16 pixels in width. Thus, the images for top and bottom edges are 1 pixel in width and 16 pixels in height and images for left and right edges are 16 pixels in width and 1 pixel in height. Because these images are too small (or thin, if you like) to be displayed at their present dimensions, I have magnified the top-left corner of our table to show you two of the four images – the image used for the top edge and the left edge.

The above depicts 3 of the images used in the rounded rectangle – the image for the top-left corner, the image used for the top edge and the image that makes the left border.
Now an important point: The four borders are made up of very thin images and hence these images are employed as backgrounds for their respective table cells. Here is the code:

<table width="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="16"><img src="rounded1.gif" width="16" height="16"
border="0" alt="..."></td>
<td width="168" style="background-image: url('back1.gif');">
<img src="blank.gif" width="1" height="16" border="0" alt="..." />
</td>
<td width="16"><img src="rounded2.gif" width="16" height="16"
border="0" alt="..."></td>
</tr>

<tr>
<td style="background-image: url('back4.gif');">
<img src="blank.gif" width="16" height="1" border="0" alt="..." />
</td>
<td>ACTUAL CONTENTS</td>
<td style="background-image: url('back2.gif');">
<img src="blank.gif" width="16" height="1" border="0" alt="..." />
</td>
</tr>

<tr>
<td>
<img src="rounded3.gif" width="16" height="16" border="0" alt="...">
</td>
<td style="background-image: url('back3.gif');">
<img src="blank.gif" width="1" height="16" border="0" alt="..." />
</td>
<td>
<img src="rounded4.gif" width="16" height="16" border="0" alt="...">
</td>
</tr>
</table>

The code in blue is the one I would like you to pay attention to. Here I have employed the background-image style property and have specified the four images as backgrounds of their respective table cells which will then make the top, bottom left and right borders. Note the use of blank.gif image which is a 1×1 pixel transparent gif. This blank image will help you in adjusting the width of table cell without spending time and messing things up.

Before I end this article, here are some nice looking tables with complex rounded corners – remember, it’s all in the images!

	This is a Rounded table You would typically place your content here.

	This is a Rounded table You would typically place your content here.

Now for an example. Below is issue which we are taking about.

Do you notice the extra space after the login button? Good. Now, let us see how we can remove this space. First check the incorrect code. The code for the above form is:

<TABLE WIDTH="200" CELLPADDING="1" CELLSPACING="0" BORDER="0"
BGCOLOR="#878787">
<TR>
<TD>
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
BGCOLOR="#EEEEEE">
   <TR>
   <TD BACKGROUND="greygrad.gif"><B>Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform">
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>
</TD>
</TR>
</TABLE>

Notice the <FORM> tag surrounds the table in which the form fields occur.
In order to remove the extra space/padding, we take the help of Style Sheets. Now CSS (Cascading Style Sheets), allow us to set the margins and padding properties around HTML elements and we employ these two properties to remove the extra space and padding around the <FORM> element. Our code thus becomes:

<TABLE WIDTH="200" CELLPADDING="1" CELLSPACING="0" BORDER="0"
BGCOLOR="#878787">
<TR>
<TD>
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
BGCOLOR="#EEEEEE">
   <TR>
   <TD BACKGROUND="greygrad.gif"><B>Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>
</TD>
</TR>
</TABLE>

With CSS we specify the margin and padding style sheet properties to have a value of zero (0) pixels (px). This results in the removal of any extra space around the HTML form. The result is below:

Don’t go away yet – there is more.
The purpose of the first TABLE (the one that encloses the FORM and the second table) is ONLY to create a thin grey colored border. Most web developers and designers used this technique because it was cross-browser compatible. However, with the important browsers (Internet Explorer, Mozilla, Netscape, Opera…) now supporting style sheets and (imp) with the same results, we can again employ style sheets to create a 1 pixel thin border and do away with our outermost TABLE. Check the code below:

<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
STYLE="background-color: #EEEEEE; border: 1px solid #878787">
   <TR>
   <TD STYLE="background-image: url('greygrad.gif');"><B>
   Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>

The code in blue reflects three cascading style sheets properties that I have introduced. These Style Sheet properties are placed inside the STYLE attribute of an HTML element (the <TABLE> and <TD> elements in our case). You will notice that each of the three properties (background-color, border and background-image) is given certain values. Before I detail each of the style sheets properties and their values, let us first check up how our form looks with this new code:

Style sheets can be included in an HTML document in three ways – External Styles, Embedded Styles and Inline Styles. We don’t have to go into those “gory” details for now, but just for your information, we are including styles sheets in our document as Inline Styles – Styles placed inline with the HTML code.

The Style sheets background-color property

The property simply specifies the background color of the HTML element. I am a fan of Hexadecimal color codes, so I have used the hexadecimal code for light grey – #EEEEEE. Note, the value of the style sheet property is separated from its name with a color – :

The Style sheets background-image property

This property specifies the background image to be used for that HTML element. The image is refered by its URL which can be a absolute or a relative URL. I have used a relative URL here.

The Style sheets border property

The way I have used this style sheet property is more complex that the above two. Here I have specified 3 values to it – 1px, solid and #878787. Note, there are no commas separating the three values. So what I have essentially done is to direct the element to have a 1px (one pixel) thin #878787 colored solid border. Taking a step further in our understanding, let us create the same table with a 2 pixel thick, orange (#FF9900) colored border with dashes.

<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
STYLE="background-color: #EEEEEE; border: 2px dashed #FF9900">
   <TR>
   <TD STYLE="background-image: url('greygrad.gif');"><B>
   Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>

That was a glimpse of what style sheets can do to your HTML document. Not only can they help you in creating those visuals which we either not possible with HTML or just too painful and complicated to implement, but they also help in segregating design and content which is what all web developers should strive for. Style sheets are the future so eventhough you might feel that their implementation is not the same across different browsers, it is a good idea to get a grasp their essence quickly.

The type attribute of <ol> list determines which kind of bullet will be used for listing elements.

We can use three types of bullets for the <ol> lists – Alphabet, Roman numerals and numbers/digits.
Take a look at the code below:

<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

The type attribute has been set to 1, Arabic numerals (digits). This is the default and you don’t need to specify it.
The above code is rendered in a browser as:

1. Item 1
2. Item 2
3. Item 3

To change the bullets to roman numerals, the TYPE attribute needs to be set to i (lowercase alphabet i) or I (uppercase alphabet I). Let us check these out.

<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ol>

<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ol>

Another attribute, though you may not encounter it often, is START. It takes a number as value and this specifies the number (or alphabet) with which the list would start.

<ol type="1" start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

is rendered as:

1. Item 1
2. Item 2
3. Item 3

<ol type="A" start="10">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

is displayed as:

1. Item 1
2. Item 2
3. Item 3

The type attribute of <ol> list determines which kind of bullet will be used for listing elements.

We can use three types of bullets for the <ol> lists – Alphabet, Roman numerals and numbers/digits.
Take a look at the code below:

<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

The type attribute has been set to 1, Arabic numerals (digits). This is the default and you don’t need to specify it.
The above code is rendered in a browser as:

1. Item 1
2. Item 2
3. Item 3

To change the bullets to roman numerals, the TYPE attribute needs to be set to i (lowercase alphabet i) or I (uppercase alphabet I). Let us check these out.

<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ol>

<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ol>

Another attribute, though you may not encounter it often, is START. It takes a number as value and this specifies the number (or alphabet) with which the list would start.

<ol type="1" start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

is rendered as:

1. Item 1
2. Item 2
3. Item 3

<ol type="A" start="10">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

is displayed as:

1. Item 1
2. Item 2
3. Item 3

• top: Aligns the image to the top of adjoining object.
• middle: Aligns the text baseline to the middle of the image.
• bottom: Text baseline is aligned to the bottom of the image. This is the default value.
• left & right: Image is aligned right of left with text wrapping around it.
• absmiddle, absbottom and baseline: Aligns the image with respect to the middle, bottom or baseline of the text.
• texttop: Aligns the image top with respect to the ascenders of the text. This attribute value is Netscape specific.
• center: works same as align=”middle”.

However, a situation might arise when you would like to place only some text, say, a small description, on the left or right side of the image with the rest to flow after the image.

In our example, we want to align “What a fine idea!” to the left of the image with other sentences to be placed after the image.

If you use the following code, you shall not get the desired results.

<img src="bulb.gif" width="128" height="220" alt="Fine idea" 

align="right">

What a fine idea!<br>The bulb in this ...

What a fine idea!
The bulb in this image represents an idea that I have cherished over the months but did not get time to implement.

You’ll notice that the next line – “The Bulb in this …” – also lies to the left of the image, while we wanted to place it below the image.

To force the next line to place below the image, we use clear attribute of <br> tag with “all” as value. Thus, placing <br clear=”all”> right after the phrase will force the next line to start at a new line.

<img src="bulb.gif" width="128" height="220" alt="Fine idea"

align="right"><

What a fine idea!<br clear="all">The bulb in this ...

What a fine idea!

The bulb in this image represents an idea that I have cherished over the months but did not get time to implement.