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
26th

Converting Websites to XHTML and CSS

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

Many of the web designers and developers have been involved in creating web pages for years now and the best part is that one person alone is capable of creating a number of websites with any number of pages. The thought only of attempting to convert all of them is so overwhelming. But if your basic method of creating these websites has been either editors or hand coding then you would probably be having web pages that are not valid XHTML and at the same time make use of old HTML styles such as font tag etc. instead of the cascading style sheets.

The latest iteration of web designing is XHTML + CSS. The main advantage here is that, it allows the web designer to place his content in a document which is absolutely separate from the appearance or how the content should actually look. XHTML is easy to learn especially for those who are quite familiar with the HTML and at the same time is quite compatible and flexible with the databases, dynamic content and also to any kind of future developments in that field. CSS gives a lot of flexibility to the web designers in designing the look of the pages. Therefore, XHTML and CSS joined hands and collectively became XHTML+CSS.

The biggest issue that comes is here is the amount of work and effort that would be involved in converting those already existing websites to the XHTML+CSS format. But the fact is that it is really not that hard the way it appears and also the results obtained would be highly beneficial for the highly pro-active and forward thinking developers.

The advantages of using XHTML+CSS over the old HTML style are many; the most important would be maintenance. The sites are easy to maintain when designed using HTML+CSS as there are less number of tags that would be messing up with the display of the code. And also when the same design is passed on to the next designer, it would easier and simpler for him to understand the entire code. Also the web pages designed using HTML+CSS are faster and do not waste much time in downloading as these files are less bloated than the ones designed using their old counter parts.

There is less number of tables that are involved here because most of the design decisions are passed on to the CSS now, therefore less complexities. It is not only difficult to understand but also edit someone else’s designed tables, which in the case of XHTML+CSS is being handled by CSS. This concept is fairly new and the designers who have already got involved in using XHTML+CSS while designing their web pages are closer to the cutting edge as compared to the ones who don’t.

Instead of upgrading your editors you can just clean up your HTML by using making use of certain tools such as HTML Tidy. This tool will clean up your code entirely and the final result would be valid XHTML. And finally you just need to design the Cascading Style Sheet and attach to the XHTML produced earlier. All this can be achieved in just a matter of minutes.


Nov
26th

Using a Content Management System

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

Content Management is being used for a variety of reasons these days. Most of the companies are looking at the option of content management mainly because they are looking out for a way to either manage their content or get it managed. But the use and the advantages of CMS or content management system are not just restricted or limited to management of data or template web delivery. The primary reason till date for using CMS is that it can be used for managing the content on the website and most of the content management systems make use of XML for tagging the database and the content connectivity.

Many of the content management systems are capable of providing the ability to the content managers to validate as well as approve the content before it is actually put on to the web. They can even control the day and the time that a content element would go live. Content management system also helps in web templating. Web pages can easily be created by the templates thereby allowing the content developers to just concentrate on the writing of the content. Once the content is ready to be displayed on the web site, the content just has to be uploaded in the templates and the content will be automatically be displayed with the standardized branding of your website.

Content management system also helps in personalisation. Once you have uploaded the content on to your content management system, it becomes quite very easy create personalized web pages for the visitors of your web site. This is made possible as the content management has draws a solid line between the content and the web site design. Therefore, it becomes quite simple to deliver the content the way it has been requested by the reader. Content management system is also of great help to syndication.

Syndication allows the user to share its web site content with other companies. Similar to personalisation, both the content and the web design are separate entities in syndication as well. For example, an online vitamin store might be interested in syndicating the articles on vitamins; similarly Symantec might be interested in content related to online security. You being the copyright owner of the content, it becomes your prime duty to provide high quality content whether it is writing audio or video. Content management system is capable of providing the background so that you can manage the rights of you content.

Therefore, it is very important that all the companies make use of CMS or content management system for managing their regular day to day activities. Content management system, as we all know provides all its users with simple and easy ways and methods of managing your web content and at the same time personalizing and syndicating your web content.


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
14th

W3C Accessability Guidelines

Author: Editor | Files under Uncategorized

In generic terms accessibility can be described as the process wherein regardless of the circumstances and situations the access has to be provided. While in terms of World Wide Web accessibility can be best defined as the measure of how easy it would be access, read and understand the website’s content. The whole concept o accessibility becomes a little complicated mainly due to the fact that website cannot be merely compared to a living document which can be easily published on the net and thereby be easily interpreted in different ways by various browsers on several platforms.
There are different ways to experience a web page which primarily include an indexing browser or a speech browser. W3C has its own set of specifications or guidelines in terms of accessibility which is one of the major concerns of the markup language. There is a complete association of each of the guidelines with one or more checkpoints which very clearly give a detailed description of different ways of application of a guideline to any particular feature of a web page.
The first and the foremost guideline can be listed as providing equivalent alternatives especially to the visual and the auditory content. To explain this we take a simple example, if there is a certain graphical arrow on the web page which points to the left side of the screen just to signify that by clicking on the arrow the user can go back. According to the W3C guidelines, it is mandatory for any web site to provide with the alternative text to this graphical image which would read something like Go Back TO The Previous Page.
Secondly, don’t rely for any kind of description on colors alone or in other words use of colors as a visual cue should be avoided as far as possible. This is very important for the color blind people. And if at all you have to use them there should be a high level of contrast in the background and the text. Next is to make proper use of the style sheets and the markups. It will allow the users to distinguish properly between the content, presentation and structure and therefore easily navigate through the web page.
If you are making use of the natural language, it is very important that you clarify its usage. This can be achieved by using the LANG tag in the head of the document and setting its value as the ISO standards which would be a two letter abbreviation for each language. Only those tables should be created which transform gracefully. Tables should be used to hold the tabular data and not just for achieving a particular design or feature.
Always ensure that the web pages which are using new technologies are able to transform gracefully. This means that when you have finished created a web page and incorporated all the latest technologies, it is very important that your web page can still be viewed by older pages as well. If there are any kinds of time sensitive content changes such as blinking, moving or scrolling the user should be able to control them in terms of pausing or stopping. Always ensure that the embedded user interfaces are based on the principles of accessibility such as self voicing, keyboard operability and device independent access to functionality etc.
Always provide with consistent and clear navigation mechanisms to the users. For the older browsers and the assistive technologies to operate correctly, make use of interim accessibility solutions. There should be a proper design that should be given on your web page for device independency. Always ensure that all your documents are very clear and at the same time quite simple. And finally and the most obvious ones make use of all the technologies and the guidelines listed by W3C.
Therefore, the guidelines stated by W3C will help in making your web site highly accessible for all including the people with some kind of disabilities.


Nov
13th

Microformats

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

Microformats can be described as the set of open data formats which have been designed first for human and then for the machines and are truly based on the existing and widely accepted standards. Using these widely accepted standards there is an option of encoding still further semantics in the HTML web pages. This ultimately helps in giving a good meaning to your web pages and allows your HTML elements to be mashed up, consumed and remixed. For example if you add up any semantics HTML to describe the upcoming event then properties such as the event dates can easily be extracted and used by other software and services.

It’s not new including more semantic information directly into the HTML but the main idea behind the use of microformats is to include more classes, code libraries, documentation and tools to generate significant momentum. And this idea or concept is taking the form of reality. Use of microformats is not at all complex instead it is quite a simple concept. Microformats are used to publish majorly two kinds of data, firstly the ones related to events and secondly to people.

Microformats have been designed specifically to allow more meaning and value to be leveraged out of the information that has been published. The main reason for the success of microformats is that you do not need to change your published content completely. Instead you just need to make slight changes or modifications in your HTML.

You can make good use of microformats for publishing your profile. There would be numerous copies of your user profiles that would be existing on the web. Whenever you sign up any website such as twitter you have to add all the similar type of information which mainly includes email name, nickname, URL and many other details. By using microformats you can actually make the information much more useful. Don’t you think so it would be great to actually import your user information from one website to many other applications without actually copying or pasting the text? This will actually save you a lot of trouble and hassle as your profile can now be aggregated across the web thereby creating your internet wide profile.

For this purpose specifically hCard is a special microformat that has been developed which has been modeled on the vcard standard. Infact its quite surprising that the most commonly known application of the address book has been making importing and exporting vcards for quite some time now. Even the iPhones are capable of transporting contact details around in a vcard. And anything that is capable of reading of a vcard is also capable of reading the hcard but definitely with certain help and assistance.

Organizations, places and people can be marked up using hCard. Name is the only mandatory property of hCard that is required and rest everything is optional. This is very important point because it is an important principal of the microformats to not to change the format or the way the people have actually published. Therefore microformats are quite strong and vibrant and can be used for transforming the plain text content from your website to meaningful packets of information which can be either consumed in some ways or remixed.


Nov
12th

Using SSI to Boost Efficiency

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

Any good and latest web designer would always want to make sites that not only look great but also are quite fast to maintain and at the same time quite easy and simple to build. Server Side Include which has always been considered to be quite complex proves to be an amazing option especially for the small sites which need not be updated on a daily basis. If SSI is used properly it can definitely reduce the time that would be invested in the creation and the maintenance of any website.

The best part about SSI is that it is supported by all major leading web server platforms such as IIS and Apache. If IIS is the web server platform that is being used by you then SSIs are automatically enabled for all the files with extensions .stml, .stm or .shtml. But in case of Apache web server platform you would need to enable the SSI manually. As you can make it out from the name only that the main function of SSI is inserting the contents or the information contained in one file into another especially when the served up. Not only this you also have the option of inserting some other information such as file sizes, including the dates of the file modification and last but not the least the values of the server environment variables.

You can use the #include directive for including or inserting one file into the output of the other file. <! — #include virtual = “ /virtual/URL/to/file” –> It’s quite possible that this virtual attribute may appear a little funny if you have ever used SSI before or for that matter worked with IIS. This should not be mistaken with the file system path to the file but instead is a URL on the local server to the file. Thereby making the SSI files easier to move around from server to server as well as on the file system. Though the file attribute is widely accepted yet virtual is the general preference. If you are still persistent in using the file, you may end up in trouble while moving your web site from the development server to the production server.

Now once the basics are done it is now time to put it into action. In order to consider a typical situation wherein you would be first developing on the local machine and then later deploying it onto the server then you would have to get on developing a local web server. As there is definitely a difference between the two servers therefore it is always advisable to use the same local web server for the development and the production machines. And just in case if you have the plans of deploying on the Apache server and currently you are operating on the Windows desktop then you will have to make sure that the web server that is being used by you is surely an Apache server. And finally enable the SSI.

It is quite surprising though that you can actually reduce the redundancy by approximately 40% just by putting the navigation, footers and headers into your SSI files. This is surely a perfect way of reducing time especially during maintenance and construction. In case if you have certain download pages that have certain items that need to be updated regularly then you can make good use of the #flastmod directive as it is capable of keeping the download pages up to date. Therefore, it can well be seen and noted that SSI is a boom for the site developers and can be widely used for increasing the efficiency.


Nov
11th

HTML Email: Rich Media the Right Way

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

Although Java scripts are known to be an exceptional and proprietary element but still it can cause a major problem for the HTML email. The major reasons for this is that there are a wide variety of email clients, updates, browsers, service packs and security settings thereby making it difficult predicting the behavior of the java script against any given email client. It’s quite surprising that Java scripts are actually capable of disabling any kind of active scripting that would be contained in the email document. Therefore it is always advisable to always test the java script that you would be interested in including in your email.

All the email clients are actually not capable of handling the java scripts. And in fact, most of the web based systems are known to disable the script by default just for preventing any kind of malicious code from getting executed in the system. Although you can make use of Java based navigation forms but that is also possible only with the email clients which are not web based. This is because most of the java script navigation forms do not work with maximum number of web based email clients. It is a very important point to note that almost all the web based email browsers are FORMS themselves and always make use of Java script in some way or the other. Therefore, it is very important that the script is always safe so that it doesn’t really interfere with any of their products.

These days Flash has been greatly used in the emails for actually impressing the clients, news letter subscribers or for that matter the prospects. As a matter of fact email HTML browsers are just no in no way equal to their web browsers. The complexity is further increased because of the settings, versions, preferences, third party applications and the security settings. Always remember to avoid the use of flash as far as possible in your HTML email unless and until you are absolutely sure that the email client that is being used by your recipient client is actually capable of handling the Flash content. Further, you should only think of sending the Flash content only to those clients who have actually requested for it or with whom you have certain marketing relationship.

And in case you have no other option but to send the Flash content via email then there are certain important considerations to be made in order to avoid any kind of problems. Firstly one should never try controlling the Flash content by making use of active scripting. Secondly, it is very important that one should try and consider the option of sending links. It has been most commonly seen that the majority of the web based clients are actually capable of stripping the flash content. Therefore it is always better to attach or a send a link instead of actually including the content in the email itself. This way you can have the option of playing around with a lot of limitations that are imposed b y the browsers and the email clients. And last but not the least always ensure that your files should be controlled by a trigger, an onClick or any other event but should not immediately start playing. The main reason for this is to give the user or the recipient time to open to the flash content whenever ready instead of a surprise and thereby causing unnecessary problems.


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.