What are favicons?
Favicons (pronounced “fav-eye-cons”), short for “favorites icon”, are 16 x 16 pixel icons that are displayed by your web browser. Favicons are typically displayed in the address bar of the web browser, on the left of the web page’s URL. An example of a favicon in the browser’s address bar:
The traditional way of creating graphical buttons is using two gif images, one for the default and one for when the mouse cursor hovers over or clicks the link. One would have to use some javascript to show one image and then the second image when the link is being hovered or clicked.
CSS allows the creation of graphical looking buttons, but without using two separate images. Try using this tutorial to create your own graphical buttons using CSS. It basically uses background colors and borders to create a simple graphical button.
To make a graphical button where the button looks pressed when hovering, use the following two style definitions for a standard link, and a hovered link.
a:link.nav {
color: #FFF;
background: #00C;
text-decoration: none;
padding: 0.2em;
border: 3px solid;
border-color: #99f #008 #008 #99f
}
a:hover.nav {
color: #FFF;
background: #00A;
text-decoration: none;
padding: 0.2em;
border: 3px solid;
border-color: #008 #99f #99f #008
}
To use the above styles, you would write your links as:
<a href="/" class="nav">link 1</a>
The above style definition creates a button that looks like the following. Hover over the button to see the effect of the button being “pressed”.
Here’s a simple way of creating a tab menu using unordered lists and CSS.
First you will need your menu items in a list, preferably unordered, but ordered will work as well. Give the list an id, for example, “tabmenu”.
<ul id="tabmenu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
Next, define your tabmenu id either in the head section of your html or in an external CSS stylesheet. You will need to set the display to inline, the list-style-type as none and padding on the right to about 20px.
#tabmenu li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
Here’s what the above example looks like:
Back in the good-old-days, search engine optimization was largely based on on-page factors, that is, the layout of your web page was the major determining factor of how well your page would rank in search engines.
Today’s search engine optimization techniques are vastly different to those of the old days. Links and linking are the major determining factors for ranking in search engines, and on-page factors rarely influences it. While on-page factors doesn’t seem to contribute much to your rankings anymore, they are still useful in creating a easy to read web page for your visitor.
So what are the on-page factors?
Here’s the quick list:
The things some webmasters do for link exchanges never cease to amaze me. This page lists, in brief, some of the shady practices I’ve witnessed while processing link exchange requests.
I’m always open and willing to consider any and all link exchange requests, but these practices simply wastes webmaster’s time and patience.
More details of these shady link exchange practices can be found here.
Firstly, before you start any rewrites, make sure your rewrite engine is turned on. The following line of code should be one of the first lines in your .htaccess file, before any RewriteCond, RewriteRule and redirect, etc.
RewriteEngine On
To permanently redirect a single page, simply add the line:
redirect 301 old-url new-url
To permanently redirect your root page, for example, you have chosen http://www.yourdomain.com/ as your root page and want all requests to http://yourdomain.com/ to permanently redirect to http://www.yourdomain.com/, use the following code:
RewriteCond %{HTTP_HOST} !^www\..* [NC]
RewriteCond %{HTTP_HOST} !^[0-9]+\.[0-9]+\..+ [NC]
RewriteRule ^(.*) http://www.%{HTTP_HOST}/$1 [R=301,L]
Here’s a quick set of rules to follow for search-engine-spider-friendly URL and linking structure.
1. Absolute vs Relative Links
Absolute links have a forward slash (”/”) before the URL path. This tells the web browser and search engine spider to look for the URL from the root of the domain. In essence, this means that with absolute links, it’s like specifying “http://www.yourdomain.com” before the URL path.
An example of an absolute link:
<a href="/yourpage.html">Absolute linking</a>
In the above example of absolute linking, the web browser and spider will look for the URL: http://www.yourdomain.com/yourpage.html, regardless of the current directory.
Relative links don’t have a forward slash before the URL path. Relative links tell the web browser or search engine spider to look for the URL from the current directory.
An example of a relative link:
<a href="yourpage.html">Relative linking</a>
In the above example of relative linking, the web browser and spider will look for the page, “yourpage.html” in the current directory. Therefore, if the relative link is located on a page in a directory, such as, http://www.yourdomain.com/directory/page1.html, the browser and spider will look for the page, “yourpage.html” in the directory called “directory” and not in the root directory.
Using absolute links tend to be a little search engine friendlier than relative links. Search engine spiders, whether it’s Google, Yahoo, MSN or some other spider, tend to get a little less confussed with absolute links than relative links.
2. www vs non-www
With search engines, it really doesn’t matter whether you use www before your domain name or not, as long as you keep it consistent! For example, if you choose http:www.yourdomain.com/ as your root page, then any requests for http://yourdomain.com should be permanently redirected to your chosen root page. This permanent redirect can be done using a .htaccess file, see this page for instructions.
Looks like Google may be using human testers to evaluate the quality of a web site. Henk van Ess has reported Google’s use of human raters in his new blog SearchBistro.com (which was Slashdotted). The page, Google’s Human Quality Evaluation makes an interesting read. You can even see a quick flash movie showing the Google’s Raters Hub in action.
Although human raters have been hinted to exist a while ago (since April 2003 on a Webmastworld thread), this is the first time we’ve seen evidence of Google using human testers as part of their quality control. This new revelation is no doubt this is likely to cause controversy among the webmaster community.
So how would the results from the human testers be used? It’s unlikely that Google will actively modify their search results based on the human testers, but rather passively evaluate the quality of their results and possibly tweak them by modifying their ranking algorithm.
Further reading on this topic:
And of course, keep your eye on SearchBistro.com.
Google has stirred the webmaster’s pot this weekend as their toolbar no longer shows PageRank. This is not a localized event, webmasters from all over the world from Scotland to Australia are witnessing and reporting the same “gray-bar” in their toolbar.
So the question is….
Not all fonts are installed on both PC and Macintosh computers. If a font isn’t installed on the visitor’s computer, they won’t be able to see the web page as you intended.
There are 12 fonts that are installed on both PC’s and Macintosh computers. These fonts are the safest fonts to use for a html web page.
In addition to using “safe” fonts for web pages, it’s also a good idea to specify more than one font when defining the font face (in HTML) or font-family (in CSS). By specifying more than one font, the browser will use the second or third font specification if the first font is not installed or supported. To specify more than one font, use a “comma” (”,”) to separate the fonts.
