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.

While viewing any ecommerce site, it is a very common observance that you can maximise and restore the image within the same page. There is usually small clickable area on the image. Whenever you click on that particular area the image is maximized and on this maximized image there is yet more clickable area on which when you click the image is restored to its normal or original size. There is a special method where in there is no special clickable area but once you click on the image anywhere for that matter, it gets maximized covering all the minutest details even the text of any kind. And once you click again on the image it restores back to its original size.

One way of achieving this would be to buy a program that would do the required task wherein you are not really aware about the program that is being written but are just able to produce the image with effects. Another method that is not known to all and is a special method that uses HTML, CSS and java script called the layered method can also be used for achieving this. For this you just need to be aware about the basics of HTML, CSS and java script.

According to this Layer Method, the image as we all know has an event called the onclick event, which calls the Java Script function. In Java Script there is a special global variable which is used to indicate whether the image is maximized or not. The java script function makes use of this variable for changing the dimensions as well as the layer of the image by changing the CSS properties. Here the term Layering simply indicates that one HTML element is capable of appearing in front of the other HTML element thereby covering the rear image completely or partially. However many of the browsers do not actually support this concept of layering in the format that has been specified by the W3C.

Whenever you place the mouse on the HTML element its title attribute produces a tool tip. The image that is being considered is further given a title attribute which reads Click To Maximize. Therefore whenever the mouse is clicked the image gets to its maximum size and the value of tool tip changes to Click To Restore. When you further click the image the image is restored to its original size and the tool tip value further changing to Click To Maximise again.

It has most commonly been observed that whenever the image is increased in size or dimensions from its original size the resolution or the fineness is usually lost whereas the same is not true while reducing the size. The simple solution to this problem is to make the original size taken from the digital camera or the scanner to be the largest size that can be displayed on the web page. Let this be the size that would be downloaded on to the web page. Now the maximized size should never be greater than the original size which is obtained from the digital camera or the scanner.

Whenever the image is maximised its position is usually changed and it covers all the other elements around it. It may not be a major problem as during the enlargement of the image the main concentration is on the enlarged image rather than anything else. But still there is a solution to this problem. Browsers do not usually handle the CSS position: absolute property as it actually should. The maximised image is in the table cell. Therefore giving the Table Cell the attribute and value valign = top would perfectly solve the problem.

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.

Links and images make the page come alive. For this you need to know about the common tags and the character tags along with their key features such as formatting tags. Before doing the tags one has to know about links and images. A basic knowledge of these is needed in order to make your page reveal your persona with the links and images on it .Let us first go through what are tags related to links and images

Links are the basic hypertext constructs, which help you to navigate from one resource to another either on the same page or between two pages. Images on the other hand are basically used in the background of the document or in the web page and maybe sometimes even in the logo. So the need arises to format this image or even add a new image. For all these purposes we need some tags related to images and links. When you use the tag <BODY> and </BODY> as tag then you are referring to the body of the text document. To change or edit the visited colour code you use the tag

VLINK=”#Colour Code” and

For unvisited colour code, you can use the tag

LINK=”#Colour Code”.

<A Name = “Label”> moves to the other portion of the web page. This link tag helps in navigating between web pages. <A HREF=”Item Location> helps you go to the destination marked by this link. So links are basically used to get two items or pages linked. This way documents are shared on the web.

You can use similar tags for the images too. Let us study each tag one by one. This is indeed a fun way of learning the HTML tags. You don’t need to be a master to understand this. Even basic computer knowledge is helpful to understand the tags. When you wish to import an image from its location, you need to use the tag
<IMG SRC =”Image Location”>. You can either align the text at top middle position and bottom middle or align it left, right and center. For this you use the tag

ALIGN=”Left, Right” and ALIGN=”Top, Middle, Bottom”

For alternative text you use the tag ALT while for bordering the image use the tag border. You can even change the width of the image in pixels by using HTML by using the tag WIDTH. Similarly, the height can also be changed by using HEIGHT. You may also decide the amount of horizontal and vertical space you require around your image by using the tags VSPACE and HSPACE. Now this is easy and you don’t need to be afraid of HTML programming anymore. Not that tags form HTML programming but they are definitely the basis for this programming and without understanding this you cannot move ahead.

Let us see how to add an image to your web page. You need to use the following command to add the image:

<img src=” . . . “>.

In the area marked by dot, as shown above, you need to place the name of the file containing the image you are planning to use to add the image.