HTML.co.uk

If I was to state one thing that makes me uncomfortable and I dislike most while browsing any website, my answer would be its load time. It is the most common and the biggest problem that websites take a long time to load and is surely disliked by all the users. It a well known fact that every individual has a very short attention span because of which a person can keep his attention focused for not more than 8 to 10 sec while waiting for a web page to be loaded. Although, the most ideal response time for any website would be 1 second, but this is really not practical considering the bandwidths available. This is where the HTML optimisation plays an important role.

HTML optimisation is a method or technique of minimizing the HTML file size without compromising on the appearance and the functionality of the web page while maximizing the speed of the page display and thereby offering maximum reader satisfaction. Therefore, it is very important for any web designer to consider three main aspects while designing any web page which primarily include optimising the web pages, brutalizing the graphics in your web page and structuring your site for speed. As the complexity and the need of web design is increasing by day, web designers are ignoring the importance of the load time.

There are a lot of extra characters such as spaces, comments, redundant attributes and returns that are very commonly being used in the web page. Carefully removing or deleting these characters will definitely not affect the appearance of the web page but will definitely help in reducing the size of the web page. Web page is all about balance between bandwidth and beauty. A skilled web designer is able to draw that thin line between functionality and appearance and can wisely design pages that not only appear good but at the same time display also quickly.

Try to eliminate all the leech graphics, leech here means that a graphic that is too big and heavy to sustain its load on its own. Icons should not be confused with graphics. An icon need not be realistic; it just needs to be recognizable in order to be effective. Therefore, avoid the use of very large icons in your website. It is always better to have text based navigation rather than ubiquitous image maps which would chew up a lot of bandwidth. A great way to unify a website visually would be to use a well optimized and well placed logo graphic instead of the un-optimised banner graphic which can only kill the web page’s load time. GIF images of words are nothing more than just being wasteful. Simple plain text transmits faster than anything on the net.

It would not take much of the time to do optimisation of your HTML but it has remarkable effects on the load time and definitely the user satisfaction. It is practically quite easy and achievable to reduce the load time to half without really compromising on the appearance or the looks of the web page.

HTML images as discussed earlier, plays a very important role in attracting the web traffic towards your web site. Images are those elements of HTML documents, which add life to the web page and increase its worth. Images and other type of graphics can be used in a number of ways for different purposes but there are some important things, which should be considered before using them.

Why to use Graphics?

The first and foremost thing is to determine that why you should include graphics into your web page. Is there actually a need to use them? This is very important because images make the web sites heavy and it takes more time to load the web pages. Secondly, if you use too much of images then the user will get confused and the main subject matter of the document will get lost. Thus it should be well determined in advance that whether an image is required or not.

What type of graphics should be used?

If there is a scope for an image in the web site then a proper analyses regarding its design, color, size and position should be done. The size and the position of the image totally depend upon the type of content of the HTML document. The color, border style and the contrast too must be selected keeping in mind the background of the web site. The image should attract the viewer and it should give a soothing effect. If there is an ugly image with dark colors, then nobody will like to visit the web page.

Some important rules to be followed while using the images:

• Before using an image, check about its copyrights. One cannot use company logos, images, patented graphics etc.
• Never use any kind of offensive or pornographic images.
• Don’t use those images which make web pages heavy to load.
• Choose the right format for your image. If you want to use animation then .GIF is the best format to use otherwise if you want good resolution then go with JPEG/JPG.
• Images should be clear enough to view.

About Image size hints:

Size hints are used to explicitly define the height and width of the image. It has two main advantages:

1) If a user has disabled inline images in his browser the size hints for the image are not given, then instead of the image a small box will appear which will spoils all the formatting of the web page. If you give the size hints, then a blank box of the same size as of image will appear. This will preserve the formatting and appearance of the web page as it is.
2) Image size hints let the browser to display the formatted content/text quickly and download the image side by side. Thus, the user gets the main content even if the full image is not there and does not sits idle.

Size hints can be used by specifying HEIGHT and WIDTH attributes of <IMG> tag. For example:

<HTML>
<IMG SRC=”Content Mantra.jpg” WIDTH=”300” HEIGHT=”250”>
</HTML>

Images are an important part of web pages nowadays. There is hardly a website which does not contain at least one image. Images describe the idea and the concept in an easy way and more beautifully. They are used to enhance the user interactivity with the web page. Good images arrest the attention of the user and boost his interest in the website. Images can be used to say something, to make the website creative, to attract the user etc. One of the important ways the images can be used in a website is in the form of hyperlinks. Images can be linked to hyperlinks, they are used as hyperlinks and they can be used as the download links so that the user can download them via internet. When we use an image as a hyperlink, it redirects us to a new location, or a new web page or to another image. To use an image as hyperlink, first of all we have to insert an image in our HTML document by using the <img alt=”" /> tag. We can set the border, height, width and other attributes of the image as required. Once the image code is written, just add <a> tag before it and at the end of the code put </a>. This will transform the image into the hyperlink. For example:

<A HREF=”URL”><IMG SRC=”d:\my folder\image1.jpg” WIDTH=”300” HEIGHT=”100” BORDER=”10” ALT=”This is the main page”></A>

The URL specified after the HREF attribute will tell the hyperlinked image where to redirect the user when he clicks on it. This URL can be a path to a .html document or it can be the name of an image file also.

For example:

<A HREF=”image2.html”><IMG SRC=”image1.html”></A>

Or

<A HREF=”http://www.yahoo.com”><IMG SRC=”image2.html”></A>

We can also make a hyperlink to point to an image. It means that when the user will click on the hyperlink it will be shown the image associated with that hyperlink. The code for this can be written as:

<a href=”http://www.contentmantra.com/image1.jpg”>Click here to display image</a>

Whenever the user will click on the ‘Click here to display image’ text, he will be shown image1.jpg located at http://www.contentmantra.com. After the image is displayed, you can right click and save it to your computer’s local hard drive. You can also use the target attribute of anchor tag to tell the web browser where to open the new image. The most commonly used predefined values of target are _blank, _self, _parent, and _top. Each of them will open up the image or the document associated with the hyperlink at different locations. The details of all the four values are as follows:

1) _blank: This will open the linked image/document in a new browser window with no name.
2) _self: This will replace the current html page to show the linked image/document. If the original document which has hyperlink on it is in a frame or frameset, then the _self will open up the linked image/document within that frame.
3) _parent: It will replace the html page it came from.
4) _top: This will load the linked image/document in the current browser by replacing anything within the browser.

The use of the targets is not mandatory. They are optional attributes which may or may not be used with <A> tag.

You can make the web page interesting with Graphics and texts and construct an interesting web page. Then the question is, what makes the difference between any two web pages, when the input for page construction-Graphics and Text-are the same. In other words, what is the basis of considering whether a particular page is good or bad?

Surprisingly, it is the same resource-Graphics and Text-that make the difference. For example, images are used to give a different look to the overall design of the page. But the visibility or clarity of the image makes the difference. To give a classy look, the image must be clear. Once that is done, you need to put in good pieces of information because it is the quality of content that pulls visitors.

There is another way to make the web page interesting. All you have to do is ton add some music and sound to it.. These days a lot many websites are doing this to attract people to browse them. It is wonderful for when you open the site, the musical sound automatically turns on and when you navigate, it runs off. This is called adding different sounds to different pages. This is not difficult at all to add sound to your page using html programming. The following 2 options are there and they both are simple and easy.

1. Link a sound file in your computer to the web page. The people visiting the web page will download this file and then it will play
2. Embed the sound you want to play into the page itself.

We will go through both the options to see their functionality with HTML. Sounds cool, well let us go ahead to analyze the first option of linking the sound file to the web page. Now you will have a practical go at your tags. Remember the tag HREF which is used for the link. Well here we will use the same tag to link the sound. The command will look something like this.

<a href=”http://www.pageresource.com/sounds/mattdum.mid”>A Cool MIDI Song</a>

When a person clicks on this link he will be given an option to download by the browser and he can get the sound onto his computer. This is quite simple to use. So now even you can add sound to your web page. Well here MIDI type file is used. But if your sound file is of .wav, .aud or some other extension type then you can use that and create the link. Now let us see the scene when you download the song. You will be allowed to play in the player, which uses the particular extension. Once the player is run online, you have the tools present on it to start or pause the sound. This way all the controls for the sound are present with you along with the sound itself.

Next, let us see the other method of adding sound to the web page i.e. embed method. Well in the embed method you need not produce a link. You just need to embed it to the page that is the sound will play as soon as you open the page and it can be repeated all over again if you wish to. This is another cool and better way of adding sound. Here you need to specify the source of the file and other commands.

The command used for embedding the sound into your web page.

<embed src=”http://www.pageresource.com/sounds/mattdum.mid”></embed>