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.
Jul
22nd

Why does the invalid HTML work?

Author: Editor | Files under General Website Information
Tags for this article: , , , , , , , , ,

The reason why people do not validate the HTML is that whenever they test, the page will seem to display without any problem. Why that is the web browsers, will be able to display the HTML, which is technically incorrect? Does this mean that we need not worry about the HTML or the invalid HTML (or PHP or JavaScript or CSS)?

For this the answer is:

When the web browsers were invented, most of the programmers recognized that there was much possibility that there would be thousands of people writing the HTML and creating the web pages as well. When so many people are trying to use the markup language or programming language like that of HTML, then it could be more frustrating quickly if each tiny results are shown in the page. So then, the programmers of the web browser decided that the browsers should be more forgiving.

All these means is that if the web browser views the WebPages, then it has the rule of HTML and it attempts to interrupt them in order to display your own WebPages. However, when it comes across something or the other, which is unexpected, from the older specification or incorrect, then the browser will ignore and tries to guess what the designer will want.

This will mean that a lazy or a novice designer will be able to get away with the incorrect code and have the pages that will display in browser window eve without a single problem. Some of the errors that occur are minor and the errors will be like that of leaving off alt attribute in the image tag. This is invalid technically but in anyway the browser will display the image. Some of the errors that occur are bigger kike that of leaving the closing the table tag off. In the old version of the Netscape, this problem could cause a table and each and everything would be after it in the HTML in order to simply disappear. IE did not mind the missing of the table tag and it would also display the page. Most of the designers who all did this would not test in the Netscape and would not know what the problem is for about long periods.

Why do you want to bother with the valid HTML?
While almost all the browsers will try to attempt the HTML even if the errors are there, so there are few good reasons in order to validate the HTML.

The HTML might display and it might display entirely different than if it was written correctly.
The errors that occur will compound each other.
Most of the browsers are really forgiving.
The invalid HTML especially if it is been deprecated then it might be supported by the browsers

Therefore, it will be good if you test your WebPages in the Web browser but by validating the HTML and CSS will surely help you to make that stand the test of new browsers and time as well.


Mar
12th

Checklist for solving Problems in Web Design

Author: Editor | Files under General Website Information
Tags for this article: , , , , , , , , , ,

It will be frustrating job to find out what has gone wrong with your Web design. Some of the things will be impossible to fix and some other things will be difficult and can be fixed but if you are very much systematic regarding your analysis, you can fix the problem very quickly.

Your HTML should be validated

Whenever you have the problem with your WebPages, do validate your HTML. There are several reasons behind validating your HTML but when you have a problem in your WebPages do validate your HTML. There are a many people who validate HTML automatically. If you have the habit of validating your HTML every now and then, it is well and good. By validating, it makes sure that it’s not a small problem.

CSS should be validated

The next place where you will have most problems is with CSS. Validating CSS serves same as validating HTML. If there are some errors, validation will make sure that, there will be no problem with CSS and that will be not the cause of your problems.

Validate other dynamic elements and your JavaScript

As validating your CSS and HTML you have to validate your JavaScript, JSP, PHP and other dynamic elements.

Simplify your Pages

If you have been validating your CSS and HTML regularly and it didn’t help, you have to narrow down the pages to fix the problem. One of the easiest ways is to delete some portions of the page until the problem is solved. Now, you have to cut down your CSS in similar manner. The thought behind simplifying your page is not that you will leave the entire page with the fixed amount of content but you are focusing on how to solve the problem that has occurred.

Subtract and add back

Finally if you have found the problem, narrow down the page and start subtracting the elements that give you problems. For example: if you have found the problem in certain division and along with CSS that styles the division, start to delete each line one by one.
After every removal test your page. If you have removed or fixed the problem you will come to know what kind of problem is that. Once you have solved the problem, begin adding the elements that you have erased and ensure that you have to test the page after every change. When designing a Webpage, you will come to know certain little things will make vast difference. You have to test the page after every check because you will come to know that place where the problem is occurred.

First design WebPages for standard compliant browsers

The most common problem faced by these Web designers is around getting the pages looking similar in all the Websites. It is impossible sometimes or difficult to have all the pages of all the Websites to have the pages similarly.

Keep your code simple

Once you have solved all the problems, you have to keep watching that similar problem doesn’t arise again.


Feb
7th

Why Use DOCTYPE Declarations in HTML

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

Definition of Doctype: it specifies the version of the HTML used in the document

When a doctype is used in one of your WebPages, you are telling the web browser how your webpage should be displayed in what versions of (X) HTML. Here the browser gets a list of supported tags from the DOCTYPE and it doesn’t include either proprietary tags (the tags of HTML that works on in the internet explorer) or deprecated tags (attributes and elements which has been deprecated in the latest versions of XHTML 1.0 and XHTML) in the list.

But generally HTML editors allow you to write any non HTML or HTML tags you wish to write inside your documents, even if a strict DOCTYPE is specified. Even if it’s incorrect, HTML editors allow you to write and save anything that you want unlike many XHTML editors.

Web Browsers are fairly forgiving

You can write incorrect or invalid HTML codes and get away with it because most of the Web Browsers which are being used are astonishingly forgiving. Web Browsers do not require a well informed or valid HTML because Web Browsers will display anything given to them as long as it is defined as text or HTML.

Unlike xml applications, Web Browser attempts to find at what the Web Page writer is aiming at and it displays however what it can display.

Web Browser Quirks Mode

When most of the Web Browsers are in the quirk mode it will display the WebPages slight differently. If your WebPages doesn’t have a DOCTYPE or a DOCTYPE without DTD attached to it you might notice some of the quirks, they are:
Class names of CSS are case insensitive
Colours of HTML are parsed differently (# is not necessary, missing digits are filled in a different way).
If a unit is left off sizes are calculated in pixels (px).
In its place of Modern Browsers, pages try to view similar to that of Netscape 4.

From where did the scroll bar come from?

IE 6 has an amazing feature to it that it adds to the documents that have got HTML tags which are proprietary from within its page and deprecated. It adds a horizontal bar to it.

One of the possible way to avoid the horizontal scroll bar, is to get rid of the HTML tags which are proprietary and deprecated HTML tags with a DOCTYPE declaration from with in a page

Why Use a DOCTYPE Declarations
It’s a pretty good idea to get in the habit of using DOCTYPE declarations on your web pages. You won’t be amused in that way that, how they display.
Do validate your HTM (to validate CSS, HTML and other web files with these HTML validators, they are: CSS validators, HTML validators, RSS validators, an XHTML validators and a p3p validator. They are all easy to use, just put the URL of the HTML and just click on the validate button to get validated) once you are comfortable using them, by validating the HTML you will not end with the surprises like horizontal scroll bar in IE 6.


Feb
2nd

An Introduction to the new Elements in HTML 5

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

Since the last millennium HTML 5 has introduced new elements to HTML. Aside, figure and section are the new structural elements. Time, meter and progress are the new inline elements. Video and audio are the new embedding elements. Details, data grid and command are the new interactive elements.

In 1999 the development of HTML had stopped with HTML4. The world wide website consortium’s (w3c) changed its focus in the underlying syntax of HTML to XML (extensible markup language) from standard generalized markup language(SGML) and it also focused on languages like Scalable Vector Graphics (SVG),X Forms and MathML. Browser features like tabs and RSS readers were focused by browser vendors. The languages like CSS and JavaScript came in handy to the web designers to build their own applications on top of the existing frame work using Asynchronous XML (Ajax) + JavaScript, but in the next eight years HTML grew itself very hardly.

Recently the 3 browser vendor major’s – Apple, Opera and Mozilla foundation came together as the web hypertext application technology working group(whatwg) to develop the classic version of HTML to an updated and upgraded version. With Same members, w3c started developing its own upgraded version of HTML taking note of the developments of the three major browser vendors. These two upgraded versions are likely to be merged, but many details are left to be argued, the next version of HTML outlines is becoming clear.

HTML5 the new version of HTML known usually, though it goes under the name web application1.0, it is recognizable by a web designer frozen in the year 1999 and today thawed. It includes no namespaces and schemas. Elements need not be closed. Errors will be forgiven by browsers. Desk is still a desk and TV is still a TV.

At the same moment some new and confusing elements would encountered by the unfrozen caveman Web designer. Now HTML includes new elements like section, header, footer, and nav with old elements like div.But now it includes audio and video and also em,code and strong are still present with meter, time, and m. img and embed which are continued to be used. Closer inspection by caveman designer however would reveal that all these elements are not different. Back in 1999 the designer might have needed these things, but wasn’t developed. The designer can understand all these new elements by simple analogy where he might have learned earlier. Than Ajax or CSS it is lot easier to learn.

At last, laptop running on windows 98 with 300 MHz was fired by caveman which was frozen way back in 1999, they might have astonished to know that the display of the new pages are fine in Netscape 4 and Windows® Internet Explorer® 5. Page still displays and all the contents are present, and the browser does anything or wouldn’t recognize with new elements.

It’s not a happy feature, HTML was designed explicitly to degrade browsers gracefully that won’t support it. The reason behind this is simple, as we all are cave people. Browsers now have XmlHttpRequest, tabs and CSS, but in 1999 their renderers of HTML stuck. Without accounting the installed base, web cannot move forward and HTML5 understands it.


Jan
8th

CSS: The Low Down on Cascading Style Sheets

Author: Editor | Files under General Website Information
Tags for this article: , , , , , ,

It has been around ten years since cascading style sheets or most commonly known as CSS have been around, considering from the beginning during its development in the year 1997. But, surprisingly it has been into public consciousness relatively for a short time now. The main reason for this is that until 2000, its features were not supported and recognized by most of the web browsers. Gradually down the line there have major improvements where almost all the web browsers support atleast the minimum level 1 of all the web browsers and a few support level 2 and some have even gone way beyond and support level 3 as well.

As a matter of fact, you cannot find even a single site which would not be utilizing CSS in some for or the other in their development and design. In fact, all the web sites that are completely developed using HTML are becoming extinct or following the footsteps of dinosaur. There are no two thoughts to the fact that both HTML and CSS are important aspects of web design and will continue to do so for years to come. CSS has been successful in bringing in a widespread impact upon W3C.

Originally CSS was developed just with the intent of providing the web developers a means for defining both the feel and the look of the web pages. Using this, web developers were able to treat both the design and the content of the web page as two different entities. As a result of this HTML was able to perfume its functions more in accord with its actual intended purpose which is to focus only on the markup of the content of any particular website.

The style sheet in CSS or cascading style sheet here refers to the document itself. This concept is nothing new for the web developers, infact the documents have been used by the web developers for many years now. To be more specific, style sheet can be defined as those specifications which are used for governing the layout of the particular website, whether it is on print or online. The cascading style sheets are not only capable of determining the technical specifications of any particular document on the web but also provides with an added functionality of communicating with the viewing vehicle, here the web browser. The most important thing to be remembered here is the keyword Cascade. The cascading style sheet, by virtue of their nature, is capable of flowing or cascading through any number of separate style sheets or documents.

In the areas of XML and XHTML markup, cascading style sheets go way beyond the font specifications. This clearly indicates that Cascading style sheets can be used for defining the look of any XML and XHTML markup language that is being used by you in your website. Cascading style sheets can be considered to be one of the most powerful tools that can be used by the web designers which can undoubtedly impact the entire feel and look of the website. It is crucial to have a thorough knowledge of CSS if you are planning to be a web designer.


Oct
30th

Progressive Enhancement

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

We all know by now that primary goal of web designing is to allow all the users to have an easy access to all the information that is required by them. Although this may sound and appear quite simple and easy but the fact remains that it is quite a job to actually make this situation possible with such a cast variety of web browsers available in today’s world. Of course no business would ever want to restrict or limit its audience from accessing their piece of information just because they are using PDA, text reader or for that matter a mobile phone. It’s an un-denying fact that by day we are becoming more mobile and therefore require that all the information required by us should be available and accessible all the time.

Graceful degradation is a process which makes your site to step down in a way that it does not fail completely but instead operates in a way that it provides a reduced level of service. Although graceful degradation is undoubtedly a great concept but it fails especially with non desktop browsers whose devices do not necessarily have bandwidth, memory or for that matter the resolution capabilities in order to display such pages. And this is where the concept of Progressive Enhancement comes into play.

Progressive Enhance is an approach for web designing which builds the documents for the least capable devices first ad then finally moves on for enhancing further the presentation of these documents in such a way that it does not really put any kind of undue burden on the baseline devices but instead provides a richer environment especially for those users that use modern graphical user interface. In this concept only one markup document is used but a wide variety of style sheets are used which thereby aid in providing a progressive and an enhanced experience across a wide variety of browsers available.

Progressive enhancement can therefore be described as the process of not only separating the content from its presentation but also making distinction in the manner of displaying the web content in different browsers right from the lowest common denominator one and also for building the structure in order to add more features especially for those browsers which can really handle them. The internet technologies are increasing at very rapid speed and there are more and more devices that are available in diversified forms for users so as to have access to all the information anywhere and anytime. Therefore it is becoming quite imperative that the organizations make up websites which have features that support the wide audience.

Progressive Enhancement therefore provides a viable approach so as to enable the delivery of information as required by the customers while embracing accessibility, future compatibility and also determining user experiences especially dependent on the capabilities of new devices. It is progressive which gives all the web designers freedom of preparing once and presenting it anywhere. Therefore just make one document and keep on using it on all levels of browsers just by using wide variety of cascading sheets.


Oct
14th

Cross Browser Compatibility

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

Cross browser compatibility can be well stated as compatibility of any given website with all the major browsers available such as Internet Explorer, Netscape, Firefox, Safari, Opera and JAWS. It is a very common feature that your ideal version of the site is not able to create a pixel perfect replication in all the browsers. A website designer always writes the code considering any particular web browser, most commonly internet explorer; as a result a website may be working fine with one browser but not supporting the other browsers the same way. Therefore it is very important that each website owner should always test for the cross browser compatibility of their respective websites.

Although you may be having your own preference for a browser but the visitors for your website may not be using the same web browser as you. This is where the cross browser compatibility makes all the difference. Cross browser compatibility mainly deals with the functionality of the website and not with how it would look like. Infact, it has very little to do with browsers as well and can be well stated as multi user agent compatibility. When we refer to the term compatibility here, we do not mean looks and behaves identically; instead here it typically means that it performs equivalently under alternative conditions.

Functionality is simply the absolute key to cross browser compatibility. A lack of cross browser compatibility does not mean that the site looks different on all the different types of browsers but it simply means that the site doesn’t work on all the other browsers except for one, for which it has been designed. It is entirely possible though occasionally, to make two browsers renders a same design, but only on a condition that you make certain factors such as the user settings constant. Everything would just go out of the window if you try to tamper with those settings. It is always desirable to make the designs of your website as similar as possible between various browsers, but at the same time it is quite important to understand that there are always certain limitations to it.

It is very important to take certain factors into consideration which designing any website which would aid in cross browser compatibility. Firstly, it is very important to use only standard compliant coding. The HTML tags and features used while coding should not be browser specific. As these would only work in those browsers that they have been created for and can even lead to breakage of the web page when viewed in any other browser. Always remember to validate all your web pages which include the HTML or XHTML coding and cascading style sheets using the free validation service from W3C.

There is nothing much that can be done to keep a similar view across all the different browsers, instead you should try and guarantee something which is achievable, i.e. an equivalent view for all. Equivalent here means that the users should be able to get the similar information and also use the website to perform similar functions. Our main goal with cross browser compatibility is to make the website viewable in all major browsers and at the same time have the pages rendered correctly. Always remember that a website that doesn’t work in any choice o browser will surely drive the visitors away.


Jul
21st

Introduction to VRML

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

In today’s world the internet is growing at the speed of a jet. Day by day websites are being improved in terms of interactivity, entertainment, multimedia, graphics and animations. HTML documents now do not refer to the static pages which were used as the source of information only. In fact, the web is being used as the all in one entertainer for every age group.

Web sites based on gaming, animations, 3D graphics etc. are designed to provide the children the whole package of fun and excitement on their fingertips. Customers can look at the product features and virtually use the products before they actually buy it by real time simulation on World Wide Web. These miracles are possible only because of VRML language.

VRML, short for Virtual Reality Modeling Language is a language impeccably designed to facilitate hi-end 3 dimensional real time simulations on the internet. Initially, the SGML and its derivative HTML, both were designed to support two dimensional structures. But with the evolution of VRML, the internet standards have been redesigned in order to full utilize the 3D powers of the web. VRML uses various types of virtual reality objects and virtual worlds which uses three dimensional paradigms for different purposes. These placements of these objects with respect to each other can be defined using the VRML co-ordinate system. Once the positioning has been done, you can define the behavior of different elements of your virtual world.

VRML can be used to beautifully design the HTML documents. This language invokes life in the static web pages. You can do a number of tasks via VRML such as:

• Adding motion to an object
• Creating a virtual world
• 3D simulation of products
• Improving graphics
• Inserting event oriented tasks
• Controlling the behavior of various elements of the virtual world
• Embedding and controlling animations in HTML documents
• Inserting real time games in web sites

How to view VRML worlds?

To view a VRML world we need a VRML browser. A VRML browser is just like the other web browser but it has got additional features which support fascinating world of VRML. VRML browser reads a VRML file and displays the complex geometry, animations and lightning effects as a 3D world. If the 3D world allows navigation, you can examine the different objects of VRML world and navigate through it in an exciting way. VRML browser can be installed as a standalone software application or it can be embedded in the existing web browser as a plug-in.

The best VRML browser

There are a number of VRML browsers available in the market but no one is best. Every VRML browser has got its own set of benefits and constraints. While choosing a VRML browser one should keep in mind the cost, features, objective of using the VRML browser, extra features, hardware acceleration, scripting and overall performance. If you are using the VRML browser as a plug-in, you should also keep in mind that for which browser you need VRML before you select a particular one because for different web browsers different types of VRML plug-ins are developed.