How to Create HTML Counter Code

How to Create HTML Counter Code
Page content

Why A Website Hit Counter

By using some HTML hit counter code to create a website hit counter you can be well on your way to having better control and have a better understanding of just how well your website is performing. Having HTML counter code that displays a website hit counter publicly is also a great way to brag to your competition about your performance. In a more humble way it also tells your visitors that they are not the only visitor on your website and therefore instills greater confidence.

Getting Started

Creating a website hit counter is pretty simple. With the right server technologies you can be able to create a website hit counter in a matter of minutes. The reason why I mention web server technologies yet HTML is known to run on the users' client computers is because we are going to be storing shared data. In this case the number of hits.

These hits must be recorded on the web server and not the users' computers because on any individual user’s computer there is no way of telling who else the web server is serving without the web server passing on that information.

The HTML Counter Code

The role of HTML here is primarily to display the website hit counter. All the HTML can do to improve the experience to probably just add additional styling to make the presentation better. Supposing our message is going to read, “There are 2,389,987 hits this month” The HTML will simply display that content using the conventional methods. An example of the output code could look similar to this.

There are2,389,987hits this month

That will ouput plain text and that would not be very pretty so we can add some basic CSS styling. Here is a simple style sheet youcan use.

#counter{border: 2px solid #cc0000; color:#ffffff; text-align:center; padding:4px; width:150px; background:#000000; font:normal 12px tahoma, verdana, Arial; }

#counter span {font-weight:bold;}

What this HTML style does is it creates a rectangle 150 pixels wide, with a black background and red border which is two pixels thick. The text inside the rectangle is center aligned and is white. The hits will be marked bold. This HTML counter code can be embedded in your wep page where you want the hit counter to appear. Every time this page s pulled up, it will count as a hit.

Server Side Code

You can use several server side technologies to process the hits most of which are beyond the scope of this article. I would suggest, depending on the server you use, either going with ASP or PHP. Here is some pseudo-code in no particular language that represents how to process the hits on the server. Pseudo-code is human friendly code that can represent a computer programming language. This is what happens when the file is called on the server

connect to the database

open the hit count log table

read the current hit count

increment the current hit count by 1

save the new hit count back into the hit count log table

memorize he new hit count

close the hit count log table

disconnect from the database

insert the memorized new hit count into the specified HTML format text to read…

There arenew hit countthis month

send the specified HTML formatted text back to the user’s web browser

That is all there is to creating HTML counter code for a Website Hit Counter. Be sure to also check out this article on HTML counter code as well as these other free web design elements.