Skip Navigation - Doctype Favicon

On this page: - favicon


A Favicon is a small image of 16 by 16 pixels, 16 colors, included on almost all professional sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Often, the Favicon reflects the look and feel of the web site or the organization's logo.

A Favicon can be made with for example Microsoft Paint. Just make a 16 by 16 image in 16 colors and save it in BMP format. Next step is to convert it to an icon file. This goes very good with XnView. Then the icon has to be put on the web site, for example in the root directory. In the web page it has to be included with a "link" tag:

<link rel="shortcut icon" href="" />


Depending on the expected users something should be done on accessibility. This is important for example for blind people, they use special stuff to read the page. Anyhow, it is always good to think about readability - length of phrases, background colors, size of the text and many more...

  • A Dyslexic Perspective
    This paper gives the web developer an insight into the issues of web accessibility for users with Dyslexia (and/or other specific learning difficulties). This paper covers the four main areas of accessibility: presentation, content, structure and navigation.
  • Accessibility Validation Service
    This free service will allow you to test web pages and help expose and repair barriers to accessibility and encourage compliance with existing accessibility guidelines.
  • Seven tricks that Web users don't know
    Web developers have all sorts of browsing tricks that they have gained from years of experience. The fact that many people don't know these tricks -- and can get completely stuck as a result -- comes as a shock. This article describes seven Web site features that typical non-technical users aren't familiar with, based on data collected from the author's own usability studies.

Doctype and web Standards

Before making a site you have to chose the doctype. It is used by the browsers to apply the markup of documents in a particular way. Without a doctype the page will not validate.
Currently there are three doctypes for XHTML:

  • Strict
  • Transitional
  • Frameset

A complete list of doctypes can be found on Another page on the same site will help you with Choosing a DOCTYPE
The Web Standards Project is a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all.


When a xhtml page is made. it should be checked if there are any errors. This can be done at the validation section of the site. This validator will tel you exactly what is wrong in de code of the page. After the page if found to be good, the CSS file has also to be validated.


To make a html page you need an editor. In principle there are two types:

  • Plain html

The "What You See Is What You Get" is quick and dirty and hand coding in plain html is slow and clean. On several forums you can read about big fights between the fans of these two groups.

Well, I use both. With an empty page it is very convenient to start with a page editor to get a fast result. When this is good then I copy and past the relevant sections of the code to other files, to be used by the php interpreter.

Whe I have to enter a lot of text, I prefer to do that with Microsoft Word. This is only to the grammar and spelling correction. When it is ready I copy the plain text or direct inti the source code, or I use the Mozilla HTML editor. The general problem with all WYSIWYG editors is that they place a lot of unused and stupid code inside the HTML.
For editing the source code I use CSE Validator Light. It has syntax highlighting, a good help with tag inserting, a validation button to check the (x)html for errors, and, important for the Dutch people, it's free, it cost nothing.


The most used browser is now Microsoft Internet Explorer version 6. "Most used" does not say that it is the best one. In fact, it does not support several CSS2 features and it implements some CSS incorrect. The best is to design your XHTML site with a standard compliant browser, like Mozilla FireFox.

Another good browser is Opera. It has a special feature, press Crtl+Alt+V and the page in the browser window is send to the site for validation. This very nice for testing pages before uploading them to the server. Of course, you need to be online.

When you go to make a real site, to put on the web, not something for an intranet, then you must check the site with different browsers.


  • Internet Explorer version 6
  • Opera, latest version
  • Mozilla, latest version

The real professionals should look also with the version 5.0 and 5.5 of Internet Explorer and with a Mac and a Linux computer.


Is a "client side" interpreter: It is very powerful, but implementation can be a bit different from on browser to the other. It may also depend on safety settings etc. Some people like to disable completely JavaScript. If wrongly used, you can make very user unfriendly web pages.

For example you want to open a large image with a click on a thumbnail.
The "classic" method is like this:

<a href="javascript:openWindow('sec_home/img5/venoge01.jpg', '640','480','Waterfall in the Venoge')"><img src="sec_home/img5/venoge01small.jpg" alt="Click for a large photo" height="150" width="200" /></a>
Click for a classic Popup

A click on the small image opens a popup window with a large image. When JavaScript is disabled you see nothing, when you try to open in a new window it gives an error. Therefore this is not customer friendly.

<a href="sec_home/img5/bussignyzin.gif" onclick="openWindow(this.href,'451','453','Bussigny-près-Lausanne');return false;"><img src="sec_home/img5/vaudmap.jpg" alt="Click to zoom in" height="135" width="210" /></a>
Click for a better Popup

This solution is a bit longer, but can be used with JavaScript disabled, it can be opened in a new browser window and the link is standard, this means that it can be followed by a search machine. This is for a photo not so important, but when there is text in the popup page the search machine can read it. Read more about the "Perfect Popup".
Please note that in addition to the code above you need also to place some JavaScript in the head of the document. That is the subroutine that does the real work, the code above is only calling this subroutine.

There are many premade JavaScripts on the web, but many of them works only on some specific browsers.  To get it working on all modern browsers, the Document Object Model (DOM) as made by the W3 Consortium has to be used. More on the JavaScript tutorial.

PID: 7013 CLT: 0.002 LMD: 2013-Aug-17

Updated 2007 Oct. 09