HTML.co.uk

Whenever you create or design a Webpage design, the Layout of your Webpage is the most overlooked aspects in you design. Most of the people think on “how to do layout but forget the basics of Web layout.

Space and whitespace

You have to make use of the space that is available as a whole but do not be specific. In other words, you have to use layout sections that are relatively sized on your WebPages so that they can contract and expand to fit correctly fit the browser’s window. Here you have to keep in mind the screen resolution. Keep in mind that most of the Web designers have moved far away form the resolution of 640 x 480. Having only the logo on the monitor is not a good customer service.

Do use colours in order to define spaces. If at all you want to have specific width to your page, center your page on the browser screen and add a different colour to the background. By doing this way, it will help the page appear resizing for different browsers. Browsers which are large will have more background colours and the smaller ones will be having fewer colours.

Graphics and images

You need to align your images properly. Nowadays, the most common layout mistakes that is found is to put up images in to the pages in such a way that it looks more willy nilly without a proper or forgetting the layout. If you are just using the “img” tag and later write some text to follow the image, then you will be having the image and one line full of text to the right side of it. Make use of this “align attribute” and this will help you to make images to be the part of layout.

On your page, do balance text and graphics correctly. Along with animations and images, it’s pretty easy to get carried away and these both animations and images will make the page to read really hard. Whenever you’re considering the layouts for your WebPages, keep in mind that images are one of the major parts of your design bust not afterthoughts.

Width of your text

You have to mainly think of your text width. This text width is often called as “the scan length” and this refers that how many words will be displayed in one line. Many people will be able to read 7 to 11 words on a single line. If the line is longer than 11 words, it will not be able to read and it gets hard. If there are more words it will be very much distracting to read. When you are in to designing your layouts to your pages, ensuring that major areas in the page will display the text and that should be with readable width.

It is inadvisable to centre your text. The first technique that is learned a new designer in page layout designing is the center tag. Centring the pages is too hard and it is very much difficult to read.

From beginning to Advanced and Everything in Between:

There is just so much that is included within the realm of Web Design. It includes

• HTML
• Design
• Layout
• Programming
• Administration
• XML
• Graphics
• And much more

There is always a scope of learning and growing in the path of web design, no matter where you are placed in this path. But the biggest question is how to decide where to go? Fortunately there are many different path available that you can opt for whether you are new in this field of web designing and HTML or an established in writing DHTML and programs for years.

Beginning HTML:

This is your stop if you are just starting o the path of web designing. The basics of HTML and building a web page are all covered in the beginning HTML resources. There are a lot of tutorials and classes that will help you in getting started. New terms will be explained by new terms.

Advanced HTML:

Once you are clear with the basics of the HTML, the next step to be considered is Advanced HTML. It includes CSS, DHTML, frames and tables. There are a large variety of advances scripting tools available for the advanced HTML programmers. Also you can gain the information about updating your site using multimedia and cookies.

Once you are clear about the concepts of basic and advanced HTML, you will have sufficient skills for taking up web development as your career.

Professional web designers:

Professional web designers focus on both the feel as well as the look of the web page. It is quite imperative that the web designers should focus primarily on creating good layouts, writing and managing excellent content and then promoting and marketing both themselves and the sites created by them.

Professional web programmers:

The main job of the professional web programmer is to focus primarily on the unseen parts of the web pages. These mainly include the programs that make the websites work, scripts and CGIs. Also the programmers have to work on the servers as well in order to keep them up and running. The security of the web pages and the web sites is managed by them. They also manage the e-commerce portals and content management system. The role of a web programmer may not be as glamorous as that o the web designer, but it is certainly as important a role.

XML developers:

The next step of web design and development is XML. Many of the web programmers make a switch from normal web programming into the XML programming. There are a lot of directions that you can choose from within the XML. Whether you are interested in posting your documents for wireless devices with XHTML Basic or WML or you want to focus more on SMIL and multimedia, XML is the point where your programming begins.

Know where you are on the path:

In order to get the necessary resources and information for learning and growing in the field of your choice, it is quite essential to know where you are placed on your path.

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>