Tag Archives: Web Content

Hotlinking/bandwidth theft, check hotlinking and preventing hotlinking

Hot linking can also be called as “leeching” or “bandwidth theft” is a term referring to when a webpage of one website is direct linking to the images/videos or other multimedia files on the web host of another website (usually without permission, thus can be called as stealing bandwidth).


E.g. Like an <img  alt=”” /> tag to display an image you found on someone else webpage so it will appear on your site, eBay auction listing, weblog, forum message post, etc.


Bandwidth can be referred as the amount of data transferred from a website to a user’s computer. Whenever you view a web page, you use that site’s bandwidth to display the files. Since web hosts charge based on the amount of data transferred, bandwidth is the issue. If a site is over its monthly bandwidth, it’s billed for the extra data or taken offline.


One of the most common occurrences of “hot linking” is when people post on a forum and they hotlink pictures from another website to use as avatars or signature images on the message boards.


Some disadvantages of hot linking are that the webpage generally loads slower when you link to images stored on a different server than the webpage is hosted on, and the owner of the image has full control to disable hot linking, or delete, rename, or make worst it, do a “switcheroo” (i.e. switching the file name to be another image which is sure to cause the hot linker embarrassment) of the hot-linked image.


Common methods of preventing hot linking are by using an .htaccess file, using the “Hotlink Protection” offered in control panels such as Cpanel, or simply renaming image files periodically.



<img src=”image.jpg” height=”350″ width=”200″>
<img src=”http://notyourwebsite.com/image.jpg” height=”350″ width=”200″>

This img tag tells the site to request the image.jpg from a different server. Every time the page is loaded, the outside server has to use its bandwidth to display the image. To avoid this problem, don’t link to files on servers. To share images and files on your own web page, upload them to your own server’s directory or to a free image hosting service that allows direct linking.

Below are some free image/video hosting service providers




Hot linking can have a lot of undesirable results. One is the so-called “switcheroo“.
Displaying an image or file that doesn’t belong to could be a violation of copyright, making you open to litigation. The owner of the file could utilize DMCA law to have your site shut down and your information given for use in legal proceedings.



Enter the complete URL (ex: http://yoursitename.com/image.jpg) to see if your image can be loaded and hot linked by other server.



Below code can be written in .htaccess file to stop hot linking and bandwidth theft.

[sourcecode language=”plain”]
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://www.yourdomain.com/badimage.jpg [R,L]

Replace yourdomain.com to your domain name and badimage.jpg to your image which you want to show instead of hot linked image.

Please be sure your mod_rewrite is ON on your server before above .htaccess updates.


Use HTML5 On Your Website

Detect HTML5 usage

If you want to see that a website is using HTML5 elements or not, you only need to view the source of the website.
If the source code starts with the following declaration.


Then, website was marked up with HTML5.

By using the HTML5 DocType, you can let the browser know what to expect from your document.HTML4 required a DocType reference to a DTD (doc type declaration), and there were three different DTD’s that could be used but HTML5 doesn’t require such a reference.


Remove Internet Explorer HTML5 Compatibility Issues

Microsoft IE9 supports HTML5, but there are still so many people using MSIE 7 and 8 and even MSIE 6.Add below HTML5 enabling script to allow developers to use any HTML5 element on their page. It should place within the <HEAD> tags, and is referenced like this:


<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>


HTML5 Element Detection Techniques

When browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every html element is represented in the DOM by a different object. (There are also global objects, like window and document, that aren’t tied to specific elements.)

All DOM objects share a set of common properties, but some objects have more than others. In browsers that support HTML5 features, certain objects will have unique properties. Let’s discuss, which features are supported.

There are four basic techniques can be used to detect whether a browser supports a particular feature or not.

1.Check if a certain property exists on a global object (such as window or navigator).
E.g: test for geolocation support


2.Create an element, and then check if a certain property exists on that element.
E.g: test for canvas support


3.Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
E.g: test which video formats are supported


4.Create an element, set a property to a certain value, and then check if the property has retained its value.
E.g: test which <input> types are supported


Modernizr can be used to detect these easily as
Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. You should always use the latest version of this. To use it, include the following <script> element at the top of your page.
<script src=”modernizr.min.js”></script>


HTML5 Form Enhancements (New elements)

Autofocus Using HTML5
<input id=”example” name=”example” type=”text” autofocus />

Placeholders Using HTML5
<input id=”example1″ name=”example1″ type=”text” placeholder=”Your Text” />

Editable Content Using HTML5’s contenteditable
<p contenteditable=”true”>Put your mouse pointer in this text and you can update it!</p>

Also, it has also introduced some new elements as below:



HTML5 also defines new input types that you can use in your forms.

<input type=”search”> for search box
<input type=”date”> for calendar date picker
<input type=”month”> for month
<input type=”week”> for week
<input type=”time”> for timestamp
<input type=”datetime”> for precise, absolute date+time stamp
<input type=”datetime-local”> for local dates and time
<input type=”number”> for spinbox
<input type=”range”> for slider
<input type=”color”> for color picker
<input type=”tel”> for telephone number
<input type=”url”> for web address
<input type=”email”> for email address


Search Engine Optimization & SEO rich Web Content Development

Search Engine Optimization (SEO) is the process of improving the ranking in the search engine it involves editing its content, HTML, Images.

Content is always king and it should be very relative to its specific keywords. Content portion itself of the web development process is vital to the overall success of the website and Google raking and PR.


Web Content is the main reason that people come to your Web pages but if your designs, architectures, and interactivity don’t provide that content they will leave.


Keep in mind that content is still king.

Basically, there are two types of Web Content:



Text Web Content
It’s the written content that’s on the page, both inside images and in text blocks. The best textual Web Content is that text that has been written for the Web, rather than simply copy-and-pasted from a print source. Textual Web Content will also have good internal links to help readers get more information and aid in scanning the text. Finally, Web text will be written for a global audience as even local pages can be read by anyone around the world.


Multimedia Web Content
The other type of Web Content is multimedia. To put it simply, multimedia is any content that isn’t text, but it includes the following.










Images are the most common way to add multimedia to websites. Images on Web pages should be optimized, so that they download fast as it affect the site load speed.


Animation can be created using GIF images or using Flash, JavaScript, Ajax or other animation tools.


Sound is embedded in a Web page so that readers hear it when they enter the site or when they click a link to turn it on. Always keep in mind that sounds on Web pages can create frustration, especially if you turn it on automatically and don’t provide any way to turn it off easily.


Video is getting more and more popular on Web pages. But it can be challenging to add a video so that it works reliably and well across different browsers.


What should be there in your Web Content?


1)  It should be very simple, lucid and easy to read and understand.


2)  It should be original content (no copy-paste).


3)  Search Engine prefers the grammatically correct content first.


4)  Use optimum keywords and LSI (Latent Semantic Indexing) keywords after proper keyword analysis.


5)  Web Content should be written after proper SEO analysis.


Hope the above article will help you to write the content more SEO friendly & rich.