BEC 0.01 alpha ready to roll

Just follow the link of Compendium on the right side of the page, or access it by this URL directly from the browser: http://www.kavoir.com/compendium.shtml.

This is not even a decent start, but it's well on its way now. I had a great time building it, and you should too, or you may not. If so, send me your comments at voir [-] kavoir.com. In case you have any more ideas, please let me know. You may want to revisit from week to week, because I will have more resources added at a regular basis. For now, enjoy!

It's about the information, not the quantity or completeness

I hate books that ramble on and on redundantly about an inherently very straightforward topic. The elaboration, showing the incompetence of the author, is unnecessary, annoying, and occasionally agonizing to readers who have come for information rather than the cumbersome speech. Most books, especially those specilizing in science and technology, should be written in a way that's both time-saving and informative. They are not autobiographies or things that're author-centralized. It's an age of information, we read, we watch, we listen, we surf, and for what? Information. So think about what may interests the readers instead of what interests you, find out what they have come for by the title, and provide exactly what they want in a precisely calculated amount, no more nor less.

Modern corporate theories tell us that 80% of the revenues are generated from 20% of the effort. Isn't it amazing to know that slashing more than half of your work time or amount hardly reduces the output or the reward you get. Of course, what work to be erased from your task list requires further consideration. Nevertheless in this sense, we can be better off if we have our time more focused on more important things. That's another first things first. Definitely.

As a result, I believe that BE does not pursue quantity and completeness in information that most webmaster websites pride on. Good excuse for my time shortage. :) But frankly, an appropriate amount of information benefit you more than a brimming pool of dazzles. Think of the ocean, what a hell of things in there, but it only cracks you with the uncertainty and helplessness. BE will only cook and present the most essential information. The references may well be inadequate from the perspective of a web professional, tutorials are too simple to learn, tips are so common and straightforward that even the most greedy crawlers don't shed their attention on them. Hmmmm, have I gone too far? But I love these ideas! They are as simple as a small orchid on the verge of a cliff, and as faint as a dawn star yet so bright in my heart.

Okay, what a feast of bullshit for today, I'm sure it will feed this blog for a little while. :P

11 good practices of CSS

CSS can be very flavorful, you can design a saucy website without even a single image if you are well versed in it. Yes, that's possible, only if you get to know every kiosk and trap of it with each of the major browsers. It can be quite tricky, and takes experience and experiments. Some of the good practices of CSS I know are:

1. Link pseudo-classes a:link, a:visited, a:hover, and a:active should always be ordered as a:link -> a:visited -> a:hover -> a:active, or L(O)V(E)/HA(T)(E) for the sake of memorization.
2. First give those common tags of HTML a good treat before fabricating more specific IDs and classes: body, h1, h2, h3, h4, h5, h6, p, table, thead, tbody, tfoot, th, td, blockquote, a, img, pre, form, and so forth.
3. Classes are used in situations where more than one peer texts or blocks are stylized the same way, otherwise, if the presentational target is unique throughtout each page, use IDs.
4. Don't rely on IDs excessively, though, in that it hampers the debugging. To simplify the selectors for clarity, type in the form of tag#ID/.class tag tag:pseudo, or something like that. In a word, try not to complicate, and use selectors as short as possible.
5. Stylize shared semantic components of your pages in different CSS files, and import them together into one core css file which is referred to from the head part of each of your pages. Or at least, separate the layout information from the in-line visuals.
6. CSS rules specifically designed for a single or group of HTML files will be imported to them from the head part in a separate file, like this:
   
   <style type="text/css">
   @import url(/css/specific.css);
   </style>
   
   
7. Don't quote the url when you want to set the background to an image. It's the same under other similar circumstances when specifying a url in CSS.
8. Use hybrid rules rather than separate ones, except for when you insert an exception after a collective prescript.
9. Use relative sizes em for fonts rather than absolute ones as px, pt, and so forth.
10. Don't make your CSS files look too fat, write casual styles directly in HTML files with a style="" property. It's totally acceptable.
11. Put different selectors together for a combined stylization where necessary. This helps your CSS files look neat.

This is the most unprofessional advice ever offered about the good practices of CSS, help yourself and be my guest, comment as you like!

It's not easy, indeed

I guess most business planners are, to some extent, a little bit too much more ambitious than they should be in the first place, at least in the beginning. Shame it was, that I, being no exception, embarrassedly supposed that it would totally be no problem to take on a big job such as this, especially under the circumstances that I'm already loaded with tons of study work. The goddess of time finally frowned and kicked my ass for the scorn and conceit. Consequently, I just have to make up my mind to build no more than an experimental project by the name of Build Easy, firstly to shape my web development knowledge and skill, and secondly to get started on discovering the mysteries of SEO. They are both essential to the success of my upcoming web undertakings. In fact, I have came through a profusion of wonderful but may-not-be-practical ideas and plans for future projects. I'm excited about them, but for now, I'll just stick to the bottom line of this experimental thing, because you know, time is what I fell short of.

Time is what we all come short of, maybe.

Blogger top navbar DIY

By the end, you should have generated something like this:



Yes, no search all blogs, no next blog, and no get your own blog. All relevant to your own blog site with a nice site search feature provided by Blogger.

At your blog administration, switch to the Template tab, and Change the Blogger Navbar to, say, Black. Save Template Changes, and Republish. Now you've inplemented the normal Blogger top navbar. Then open up your blog page, view the source HTML, find 2 snippets of codes that Blogger has inserted into your pages, they are:

1) The CSS for the navbar, at the end of all normal style information and immediately before the </head> tag, looking like

<!-- --><style type="text/css">@import url(http://www.blogger.com/css/navbar/main.css);@import url(http://www.blogger.com/css/navbar/3.css);div.b-mobile {display:none;}</style>

2) The HTML and javascript snippet of the navbar, immediately after the <body> tag and just before the header div(or not), looking like

<!-- --><div id="b-navbar"><a href="http://www.blogger.com/" id="b-logo" title="Go to Blogger.com"><img src="http://www.blogger.com/img/navbar/3/logobar.gif" alt="Blogger" width="80" height="24" /></a><div id="b-sms" class="b-mobile"><a href="sms:?body=Hi%2C%20check%20out%20%E4%B8%AA%E4%BA%BA%E7%9A%84%E6%80%A7%E8%B4%A8%20at%20cn.econguru.com%2F">Send As SMS</a></div><form id="b-search" name="b-search" action="http://search.blogger.com/"><div id="b-more"><a href="http://www.blogger.com/" id="b-getorpost"><img src="http://www.blogger.com/img/navbar/3/btn_getblog.gif" alt="Get your own blog" width="112" height="15" /></a><a href="http://www.blogger.com/redirect /next_blog.pyra?navBar=true" id="b-next"><img src="http://www.blogger.com/img/navbar/3/btn_nextblog.gif" alt="Next blog" width="72" height="15" /></a></div><div id="b-this"><input type="text" id="b-query" name="as_q" /><input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="ui" value="blg" /><input type="hidden" name="bl_url" value="cn.econguru.com/" /><input type="image" src="http://www.blogger.com/img/navbar/3/btn_search_this.gif" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='cn.econguru.com/'" /><input type="image" src="http://www.blogger.com/img/navbar/3/btn_search_all.gif" alt="Search All Blogs" value="Search" id="b-searchallbtn" title="Search all blogs with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=''" /><a href="javascript:BlogThis();" id="b-blogthis">BlogThis!</a></div></form></div><script type="text/javascript"><!--

function BlogThis() {Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) { Q=y.getSelection();} else if (x.getSelection) { Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475, height=300,top=175,left=75,status=yes,resizable=yes');void(0);}
function blogspotInit() {}
--></script><script type="text/javascript"> blogspotInit();</script><div id="space-for-ie"></div>

In your cases, cn.econguru.com should be other domains such as *.blogspot.com. Highlighted lines are those that you are going to get rid of. After erasing them, save the altered snippets in your computer.

Once you're ready, go back to the blog administration, switch off Blogger Navbar, insert those snippets that you have saved to where they were in the Template editing box, Save Template Changes and Republish. Done!! Check your blog site for a hooray!

Fascinating and dazzling world

It's a big world. Sometimes you do wonder what it is that you come to it for, what you want from life, what the heck you are supposed to do, what is the right thing, and what is not. I have been recently and frequently occurred to this question, that what will Build Easy be?

There are plenty of rocking websites that provide information and services for webmasters, some of them very successful. I don't know how Build Easy will distinguish itself, or never it would. I thought I could build a perfect website with tons and tons of guidelines of the "best kind" from scratch that will undoubtedly beat its peers. These guidelines change and change as you come to new information and new friends. Now it seems that quite a few beginners of web development think this way at the very beginning. Now that I've got everything in control, why not learn to be God?

Things may happen, good or bad, but they all take time to accumulate their power to strike. I should be more patient, why not pretending to be trying to build a website that's both useful and elegant in a way that's benefiting and educating to people, not for SE or things like that. Do not begin everything with big success in mind, very probably, they won't. Even they do, they might not make money for you. Build them for fun and for your visitors, so you have incentive to move on to your 2nd project. Expecting it to be huge success and making money only frustrates you. Nevertheless, it takes time. Time, is the ultimate resource and limitation in an economic world.

And, don't bother yourself with something that's beyond your abilities and luck, just keep doing what you can, and time will take care of the rest.

I assume readers of Build Easy are web development beginners, as I am now. Here is a list of web forums you shall frequently visit if you are or will be doing serious web development. Those are professional web forums renowned in the webmaster world of the nowaday internet. They are:

• Cre8asite
• DigitalPoint
• HighRankings
• Search Engine Watch
• SitePoint
• WebProWorld
• WebmasterWorld
• SEOChat

I believe it's a good idea to frequent these forums the day you start your website or even before. Spreading your information in these forums also benefit the publicity of your website. However, it's also a good idea to know first some of the guidelines on using them at seo-blog.com. Behave yourself on the web, respect others and others will respect you.

Internet Explorer Developer Toolbar

A toolbar developed by Microsoft to help web developers of Internet Explorer explore and understand web pages. Composed of a variety of useful tools, including DOM explorer, layout elements outliner, HTML & CSS validator, one-click screen resizing, cache management, and page color picker, it also enables you to disable images, cookies, and scripts; view classes and IDs, as well as accessibility facilities like tab indices and access keys.



These features enable you to:

1. Explore and modify the document object model (DOM) of a Web page.
2. Locate and select specific elements on a Web page through a variety of techniques.
3. Selectively disable Internet Explorer settings.
4. View HTML object class names, ID's, and details such as link paths, tab index values, and access keys.
5. Outline tables, table cells, images, or selected tags.
6. Validate HTML, CSS, WAI, and RSS Web feed links.
7. Display image dimensions, file sizes, path information, and alternate (ALT) text.
8. Immediately resize the browser window to a new resolution.
9. Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
10. Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
11. Display a fully featured design ruler to help accurately align and measure objects on your pages.

Downloadable by http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en, the newly released beta 2 is more stable and more enhanced in that you can now selectively enable and disable CSS parsing, read link reports, and select an element in the DOM explorer to make the IE scrolls it into view if it is not already visible in the browser window.

Besieged buttons

Okay, I give in. When it comes to HTML, blogger seems a little too kibitz. It arbitrarily alters your codes the way it wants to, no reasons given. Sometimes it's just annoying and stupid. I have to provide an image for this besiged button, instead of simply inserting the HTML and CSS in this entry if I don't want to show you a distorted one. After all, let's take a look at 'em.




The HTML:

<table><tr>

<td class="sir">
<div class="sir2">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</td>

<td class="sir">
<div class="sir2">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</td>

</tr></table>

The CSS:

.sir {
padding: 0;
background: #d4d0c8;
border: 1px solid;
border-color: #eee #404040 #404040 #eee;
}

.sir2 {
padding: 2px;
margin: 0;
border: 1px solid;
border-color: #eee #808080 #808080 #eee;
}

An enhanced version of besieged buttons:



with more real besiegers.

The HTML:

<table><tr>

<td class="sir">
<div class="sir2">
<div class="sir3">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</div>
</td>

<td class="sir">
<div class="sir2">
<div class="sir3">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</div>
</td>

</tr></table>

The CSS:

.sir {
......
}

.sir2 {
......
}

.sir3 {
border: 1px solid #808080;
}


All codes are tested in IE 6.0 and Firefox 1.5, copy and modify as you want to.

Jog or blog?

I made a decision one year back in my sophomore, that I would go for a joging every night, for my body really needed something tough to keep fit since my enrollment of college - except for those body building camps every other week, which, barely seemed enough in that every time we just gooffed around, and fled for the easier life the instant our coach released us.

So, you can see why I haven't keeped diaries the past 2 days, cause' I prefer fiddleness to blogging. Finally, I have begun to get to do what I had in mind for a whole year. It's exciting and refreshing. A sport never fails lightening your life, really. I shouldn't have seen it a favor to myself, and do it in a hard way; I should enjoy it, not for the future, but for the moment. We might never know the reason why we do sports, but it keeps us thinking we're alive, isn't it!

Nevertheless, I managed to make up one and a half hour for my SSI framework project. It's almost finished, and passed all the requirements. Only when a real situation comes up, this would very probably become different. Many of the defects and flaws of software projects emerge themselves not in the process of actual assessment immediately after birth, but in the long-term implementation, that is, in the real world. In a way, I haven't done the work yet. Or, maybe the Work can never be done.

Just let me figure out a way to jog and to blog in the same day. oHHHHH, my schedule just doesn't let go!

Modern CSS techniques for HTML lists of links - Horizontal

With

<ul id="navlist">
<li id="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

, you can easily build

1. A horizontal link list by employing:
   
   #navlist li {
   display: inline;
   list-style-type: none;
   padding-right: 20px;
   }
   
   
2. Rollover of horizontal lists is also possible:
   
   #navlist {
   padding-left: 0;
   margin-left: 0;
   background-color: green;
   float: left;
   width: 100%;
   }
   
   #navlist li { display: inline; }
   
   #navlist li a {
   padding: .1em 1.3em;
   background-color: green;
   color: white;
   text-decoration: none;
   float: left;
   border-right: 1px solid White;
   }
   
   #navlist li a:hover {
   background-color: yellow;
   color: black;
   }
   
   
3. Tabbed navigation bar can be built through:
   
   #navlist {
   padding: 3px 0;
   margin-left: 0;
   border-bottom: 1px solid black;
   }
   
   #navlist li {
   list-style: none;
   margin: 0;
   display: inline;
   }
   
   #navlist li a {
   padding: 3px 1em;
   margin-left: 3px;
   border: 1px solid black;
   border-bottom: none;
   background: #DDD;
   text-decoration: none;
   }
   
   #navlist li a:hover {
   color: black;
   background: orange;
   }
   
   #navlist li#active a {
   background: white;
   border-bottom: 2px solid white;
   }
   
   
4. Wordpress.org top horizontal navigation bar emulation:
   
   #navlist {
   margin: 0;
   padding: 0 0 20px 10px;
   border-bottom: 1px solid #000;
   }
   
   #navlist ul, #navlist li {
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
   }
   
   #navlist a:link, #navlist a:visited {
   float: left;
   line-height: 16px;
   font-weight: bold;
   margin: 0 10px 4px 10px;
   text-decoration: none;
   color: #192A72;
   }
   
   #navlist li#active a:link, #navlist li#active a:visited, #navlist a:hover {
   border-bottom: 5px solid black;
   padding-bottom: 2px;
   }
   
   #navlist a:hover {
   border-bottom-color: #BBB;
   color: #345BFE;
   }
   

And that's all for simple lists of links. If you are looking for nested list structures, give Listamatic2 a go. Or, if you are tired of writing CSS yourself, List-O-Matic will generate the styles for you upon your choice. It provides dozens of popular list styles, including both verticals and horizontals. Enjoy!

Modern CSS techniques for HTML lists of links - Vertical

Navigational links are mostly placed in HTML lists, below is a collection of CSS techniques for making your navigation bar more stylish. For the sake of illustration, I'll use the HTML example below:

<ul id="navlist">
<li id="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

Emphasized texts are those that deserve extra attention, think about the reason of their presences and the way they are used. All the styles have passed the survival test with Win IE 6.0 and FireFox 1.5, modify and experiment freely!

1. Using images for bullets rather than built-in plain shapes:
   
   #navlist { list-style-image: url(images/arrow.gif); }
   
   wherein images/arrow.gif is the tiny image in place of the default bullets. Better be no more than 6 or 10 pixels by width.
2. Background images for bullets:
   
   #navlist {
   list-style: none;
   }
   
   #navlist li {
   padding-left: 10px;
   background-image: url(images/arrow.gif);
   background-repeat: no-repeat;
   background-position: 0 .5em;
   }
   
   padding-left extends the content of element li left by 10 pixels, clearing space for arrow.gif. Setting background-repeat to "no-repeat" prohibits the arrow.gif from populating the entire li element. A background-position of "0 .5em" prescribes how arrow.gif should be placed in respect to the top and left boundaries of the containing element, li.
3. Separaters:
   
   #navlist {
   padding-left: 0;
   margin-left: 0;
   border-bottom: 2px solid green;
   width: 200px;
   }
   
   #navlist li {
   list-style: none;
   padding: 0.25em;
   border-top: 2px solid green;
   }
   
   #navlist li a {
   text-decoration: none;
   }
   
   Borders do the job.
   
4. Rollover lists:
   
   #navlist {
   width: 200px;
   margin-left: 0;
   padding-left: 0;
   list-style: none;
   font-family: Arial, Helvetica, sans-serif;
   }
   
   #navlist a {
   display: block;
   padding: 3px;
   width: 170px; /* 100% won't work with IE */
   background-color: #036;
   border-bottom: 1px solid white;
   }
   
   #navlist a:link, #navlist a:visited {
   color: white;
   text-decoration: none;
   }
   
   #navlist a:hover {
   background-color: #369;
   color: white;
   }
   
   Displaying elements of a with a designated broad width is the key to achieve rollover effect. More stylish rollover effects can be produced by manipulating those color, background, and border properties of the a, li, and ul elements. Check out this 3D enabled rollover menu for inspiration, http://css.maxdesign.com.au/listamatic/vertical13.htm.
5. Bulletted rollovers:
   
   #navlist {
   list-style: none;
   }
   
   #navlist li a {
   padding: 2px 9px 2px 0;
   margin-left: 20px;
   color: #4169E1;
   text-decoration: none;
   }
   
   #navlist li a:hover {
   color: #6B8E23;
   background: url(/image/isit.gif) no-repeat right;
   }
   
   Check econguru.com for this bulleted rollover, when you hover over the links of home, accessibility, feedback, and contact, a gold question mark emerges to the right of each of them.

How exactly to provide Google with the sitemap for your website?

Now that you know the importance of the sitemap, maybe you want to submit a sitemap to Google so that its crawlings miss none of your pages. Most search engines accept general HTML, text or the ROR sitemaps, but Google has its own standards. AuditMyPc.com provides a free service of google sitemap generation that abstracts your site into a sitemap.xml in the schema of Google Sitemaps (BETA). It is presented as java applet with easy to use interface. Follow me in 16 steps, and lead yourself to your own sitemap.

1. Click http://www.auditmypc.com/free-sitemap-generator.asp to open up the instruction page of the Google Sitemap Generator, and respond to your browser's warning for java applet with yes, if any, until you see a clickable image on the right side of the page, looking like:
   
   
   
   
2. Click it to launch the AuditMyPc.com's Sitemap Builder.
   
   
   
3. Type your website URL and make necessary changes to the default options as you like. In most cases, leaving them as implied will be OK. For more information of robots.txt and robots meta tags, please visit http://www.robotstxt.org/ .
4. Hit the Start crawling button to initiate the process and switch to the Crawling panel so that you can monitor the crawling.
5. Switch to the Site map panel, make sure the "xml" is checked for Output format, and click Save.
   
   
   
   
6. Now that you have a sitemap.xml, transfer it to your hosting server and put it directly under your domain, that is http://www.yourweb.com/sitemap.xml, and browse to http://www.google.com/webmaster .
7. Proceed with Site status wizard.
8. Type in the URL of your website and press Next.
9. Proceed on Take me to Google webmaster tools.
10. Sign in with your Google account if not.
11. Click on the domain you just added, or add it again if it doesn't appear in My sites.
12. After the click, you should be taken to a small information portal with 3 tags, Diagnostic, Statistic, and Sitemaps. You can easily debug the problems your sites' suffering from with the search engine of Google here, for now, let's go to Sitemaps.
13. You can now provide Google with the sitemap you just generated with AMP's Sitemap Builder, by clicking Add a Sitemap.
14. Choose Add General Web Sitemap.
15. Specify the URL of your sitemap.xml, http://www.yourweb.com/sitemap.xml and click Add Web Sitemap.
    
    
    
    
16. Done! You have submitted your sitemap.xml to Google successfully, and it will help it index your site more effectively!
    
    
    

Other search engines offer webmasters the opportunity to provide a sitemap, too, such as Yahoo! and MSN. Sitemaps can be provided in HTML, text, and XML. Go check 'em out!

Now I know how it feels :)

Now I can tell how it feels when you know some big page links to you, :) It's delightful and encouraging. After 3 days of intermittent debugging and optimization, this afternoon I wrote an email to Bill Goffe, the editor of RFE(Resources for Economists), to try my luck. To my surprise, he replied me in no time, and kindly accepted my request to add econguru.com. He even asked me to inform him if anything new arises. This is such an encouragement that I could reall use, and sure, there will be something new from time to time. I will do my best, only time seems to be always running ahead of me. :(

Well, the last last time I believe, in one of the entries, I talked about SSI framework the 2nd; still working on my tight schedule for it, though, but almost there. It is much more nimble than the 1st release, and does no less. You can move and reshape the hierarchy of the website as you like, which means, you can move directories freely along the structure and no worries about navigation builds and keywords/description/title generation. They will all be automatically dealt with after 2 tiny alterations, namely the subcategory information of the directory into which the mobile directory is moved and that of the directory it is previously in. Doesn't matter how many directories or articles are in it or how they are structured. It is also possible to rename any of the directories or articles without the troublesome according alterations of the navigational information for all directories or articles.

Once It's got up and running, I will start immediately constructing other unbloggish pages of kavoir.com, with technological references, small tutorials, handy tools, and experimental dynamic components. It's so exciting, and yes, it will be. I want to write very small tutorials with exercise pad on the side, big characters, lively text. The less words, the better. And I will write handy web-based tools for small website building, yes, and now that I came up with this small website thing, I think everything here at Build Easy, are for small website building. Write crisp and neat pages that pleases, and compose short texts that every word is valuable and affable; unassuming logos, clear navigation. Isn't it pretty? :)

I'm closing in to the end of the SSI project, it should be concluded in 3 days or so. Really tired, and really really wish I had a girlfriend. :(

(I shouldn't have dragged my writing to this point when I feel uncomfortable to go on. But I really have no clue on how to achieve a real fluent writing style the way you speak them out. Am I supposed to write slowly first and be conscious of every possible mistake or to write in a flowing manner which gives no attention to anything else but my eagerness to express?)

Neat'n'Nice accessibility advice that are easy to follow

More accessible website! Why not? People love it, and search engines love it! Let's go!

1. See your HTML sources, if there's no <!DOCTYPE ... > in the beginning, specify a document type for it. You can achieve this by choosing one of the examples below:
   
   HTML 4.01
   
   HTML Strict DTD
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   
   HTML Transitional DTD
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   
   HTML Frameset DTD
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
   
   XHTML 1.0
   
   XHTML Strict DTD
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
   XHTML Transitional DTD
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   XHTML Frameset DTD
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
   
   
2. Identify your language by adding a property to the html tag. Let's assume your website is in English, then write the beginning html tag like this:
   
   <html lang="en">
   
   
   Refer to Code for the Representation of the Names of Languages for more language codes. If you are using XHTML document types, add one more property so it looks like:
   
   <html xml:lang="en" lang="en">
   
   
3. Construct descriptive page titles that make sense of the content, optionally with more hierarchical information.
4. Use real HTML built-in links rather than pseudo-links such as one that's powered by JavaScript.
5. Provide titles to your links, at least to those whose texts are not adequatly descriptive of the target linked to, like this:
   
   <a href="http://www.kavoir.com/" title="Build Easy">A blog on web building</a>
   
   
6. Try not to open up new windows. If it's necessary, throw a warning.
7. Make good use of the semantic features of HTML. For instance, real tables should always be equipped with <caption></caption>, <thead></thead>, <tbody></tbody>, and <tfoot></tfoot>. Plus, a proper summary property to the table tag would also be nice:
   
   <table ... summary="this table is about ... ">
   ...
   </table>
   
   
8. Similarly, make good use of the headers tag, h1, h2, h3, h4, h5, and h6 for your content.
9. Lists should always be favored for lists. No tables. No manually numbered fake list with <br />, please.
   
10. Always provide a alternative text for images in the following manner:
    
    <img src="..." alt="me and my grandma" />
    
    
11. It's the same with image maps, don't forget to add an equivalent alt="" property to the <area ... /> tags.
12. Label your form elements:
    
    <input id="ss1" ... ></input><label for="ss1">label information for ss1 goes here ... </label>
    

Above are the quickest steps you can take to achieve a more accessible website, for more suggestions on making your website accessible, Mark's Dive into Accessibility is a good start. Good luck and be accessible!