Pin Me

HTML Code for a Website Hit Counter

written by: S. R. Obbayi•edited by: Amy Carson•updated: 1/7/2011

Have you ever wondered how the HTML counter code is able to keep track of hits to a website? Or better yet do you want to implement your own website hit counter? This guide will show you how easy it is to make.

  • slide 1 of 4

    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.

  • slide 2 of 4

    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.

  • slide 3 of 4

    The HTML Counter Code

    hit counter sample 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.

    <div id="counter">There are<br /><span>2,389,987</span><br />hits this month</div>

    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.

    <Style>

    #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;}

    </slyle>

    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.

  • slide 4 of 4

    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 are<br /><span>new hit count</span><br />this 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.