banner
Welcome to HTML.co.uk, the number one resource for all news, information, and happenings regarding HTML.

Updates: HTML.co.uk has just been relaunched. Subscribe to our RSS Feed to stay on top of HTML news and techniques.
Nov
17th

Accessibility and Usability are Very Important

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , ,

Both usability and accessibility are becoming increasing important as well as critical for any kind of internet experience. These are the two important features which are most commonly missed out. In fact, usability is one of the most important features for the survival of any website. If your web page is difficult to use, people will leave it immediately. And accessibility means that developing those sites that are accessible to all the users who are interested in using them.

Accessibility can be defined as designing those websites which have an easy access by all regardless of their disabilities. You can also refer these sites as Universal Web Sites. Although the World Wide Web is increasing and gaining its popularity on a regular basis, yet there is large number of users who use speech browsers, have disabilities in the form of visual or hearing, do not have latest plug-ins and graphical users surf the web through slower mediums or reside in low lying areas or make use test only browsers and do not support graphics. In such situations accessibility is a major topic of concern.

Accessibility not only increases benefits for website providers but also for users to a great extent. It is quite critical issue for the success of any website. Once the website becomes accessible, the users regardless of their disabilities, barriers or constrains can now access the information, buy the products and can talk to the people associated with each and every web site. To sum it up, you can say that if a user is satisfied, he becomes loyal and ultimately keeps on using the web and recommends to others as well.

And with this the provider also gets benefited in a way that the targeted audience is increased, efficiency and the maintainability is further improved and as a result reputation is regained and enhanced. Therefore one single factor is responsible for delivering a win-win situation for both the end users as well as the providers.

Usability in generic terms can be described as the measure of the user’s experience whenever interacting with any system, website, technology or a product. If the web page is either not easily usable or is not able to describe its functions and features properly, people would not like to use it further. The web site should be very intuitive as well as should support an extremely well user interface because no user would get down reading the user manual or details and descriptions about its usage.

The website is usable if and only if it is easy and quick to learn, allows rapid recovery from errors, efficient to use, usage is enjoyable, aesthetically easy and last but not the least easy to remember. If the website with the above characteristics is prepared, it will not only benefit the users but also the providers. Users are satisfied, able to achieve their goals effectively and efficiently and therefore are able to cultivate confidence in both the product and the website. Similarly the providers reduce on time, cost and a lot of errors. It has been proved that this feature alone is capable of providing very high return on investments.

Therefore, always strive to make your website usable as well as accessible so as to make your users happy and thereby making your wallet more comfortable.


Nov
10th

Maximising and Restoring HTML Images

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

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.


Oct
20th

Email and CSS: Like Kissing in a Tree

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

I think most of us are aware about the most common problem of designing HTML email using CSS. Almost all web designers who have tried recreating a sophisticated and descent HTML email design using the cascading style sheets have always had a bitter taste of disappointment, either in the form of a pronouncement by the email administrator that they don’t support CSS, or inexplicable mangling by email clients.

I am neither contradicting my earlier statement nor am I wrong when I say that your HTML email can still be deployed using CSS. Though all the attributes will not be invited to the party but still some will surely work flawlessly. Email as we all know is the best and the most commonly used method of communicating. The better displayed and explained your message the more people are likely to read and get benefitted from it. Styled emails with the use of different colors and highlighting make the message readable and understandable with much ease.

Whenever an email that is designed using an external style sheet is blasted to various clients version 6.0 of AOL will invariably bounce back or reject the email. If at all, the code of the mail is analyzed the results will definitely be more than surprising. The main reason for the entire problem of bouncing back or rejecting or not supporting is that the HTML code is not what we had sent, but is definitely the most unexpected i.e. a mixed breed code and proprietary tags. The reason for this unexpected behavior is that each email has its own way of rendering the code, methods of handling CSS and unique bugs and quirks.

Each problem always has a solution following it. When two body tags are displayed on the HTML email, then the simple solution to the problem is enveloping entire content of the email in a div tag and further applying the intended body attribute to the div. At times it happens that certain clients are not able to render any kind of style what so ever when they receive the mail. They are just able to see the plain text. But if the source code is analyzed it will not show any kind of discrepancy. The main reason for this is that the dots preceding the names of the styles were getting stripped resulting in feature instead of .feature, which is absolutely meaningless. The only solution to this problem is to begin a feature with a letter instead of a dot. This may sound a little weird, but it really works and is compliant as well.

Different people use different style sheets thereby there is a common problem of sender’s cascaded style sheet over ruling the receiver’s style sheet thereby altering the element definitions and pseudo classes. The solution is customizing every definition so as to accommodate links in both the documents. Although there are many such problems relating to various attributes, but these are the most common ones.


Jul
14th

A Good Web Page

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

So far we have studied and understood a variety of elements, tags and options of the HTML language. Now it is the right time to discuss about the appropriate usage of elements in the web document. The sole objective of a company’s web site is to spread the business and increase profitability. In order to achieve this goal the web site should be captivating enough so as to pull the customers towards it. In fact, if a web page is not created for money minting, then also it should be good looking, readable and presentable so that the audience can judiciously use it.

So, what type of web page can be called as the perfect one? No one! Every web site has its own pros and cons and there are no hard criteria to compare different web sites and judge their perfection. But in order to make web more useful and fruitful, there are some basic guidelines which should be considered before designing the HTML page.

Image is not EVERYTHING

The first and foremost thing which is to be kept in mind is that ‘Images’ are not everything. People generally think that the images will make their web site more beautiful (which is partially right) and put too much images in their HTML documents. This results in the loss of the main theme.

If too much images are used on a web page the visitor gets confused and cannot get hold of the intended meaning of the web page. Thus, images should be used only when it is important.

Too much of Flash work?

Just like the images, animations also need appropriate planning before it finds a place in your web site. Too much graphics and animations overwhelm the website and hides the core message.

Web Site content

The content written on the web site should be as crisp and concise as possible. Internet users are addicted to fast scanning. They only read the first few lines in order to decide whether to visit your web site further or not. Thus the content or the HTML stuff should be focused and to the point.

• Break long topics into small paragraphs, each portraying one distinct idea.
• Use lists wherever possible.
• Provide intuitive hyperlinks at appropriate places in order to give the user a hassle free navigation system.
• Maintain consistency with respect to the main style and design. For this purpose make a site map of your web site.

Maintain RELEVANCE of your HTML document

Information system is highly dynamic in today’s era. What is new and important today might become a crap after few hours. Thus, the web pages should be updated from time to time in order to maintain its relevance. Updation process becomes real time process in case of web sites related to stock markets, news and similar ones where the web pages are updated in fraction of a second.

Web Etiquette

It refers to all the rules which have to be followed by every web developer.

• Do not use offensive language
• Do not criticize any other web site, religion, race etc.
• Do not copy patented images and logos of others.
• Do not copy-paste the content of any other web page onto yours. Stop plagiarism.
• Do not hack any resource on the web
• Avoid the use of offensive images and cheap language.