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.
Aug
5th

What is DOM (Document Object Model)?

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

The DOM or the Document Oriented Model is an interface that allows the scripts and programs to update the style, structure and content of the documents dynamically. DOM is a platform and language neutral. DOM is neither in HTML nor in JavaScript. It is a type of glue, which binds both HTML and JavaScript together.

DOM Level 0
The level 0 DOM is just a mix of all the HTML functions, which have not been specified formally that will allow the scripting languages to interact with the Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0. All these basically mean that, if the DHTML pages are compliant with the DOM level 0 and then it has to work reliably fair with the old browsers.
The document master container of the DOM level 0 is the base structure. This mainly refers to the entire document and it includes all the elements within it and it is directly referenced as:

Document
It is directly referenced as document because, DOM level 0 is very much basic and it allows only the developer to manipulate the items on pages that have some level of interactivity already that is the forms. In the Web document, it is very much possible to reference the other items but most of the browsers do not support the interactivity with them at this level 0.

Referencing Forms
Using the DOM level 0, actually there are three ways to reference the form control and they are
It’s by name or by ID
This is one of the easiest ways of referencing a form control as you will be able to see in XHTML to which form you are referring to. For ex, this is the name which is named as ‘form1’.
“<form name=”form1″ id=”form1″>…</form>”
In the DOM, it can be referenced as
“document.form1”
If at all you want to reference one of the elements within the form, you would be able to name it as well:
“document.form1.fname”
References as
“<input type=”text” name=”fname” />”
In the form mentioned above
By number
each element and form within the form is just given by a number in one of the array and is starts with 0. They’re numbered with first <form> element found in flow of the document. In order to refer the second form on this page:
Document. Form [1]
Then, in order to refer the second form element within the second form will be
‘Document. Form [1].element [1]’
Combination of both
It is very much possible to use any type of combination using the name or number to reference a form element or form within the document:
“document.form [0].fname”
“document.form1.element [3]”
Other DOMs
W3C has many recommendations for various level of DOM. All these levels will provide more power and control over all the Web documents but there are DOMs for many other user agents and browsers as well. All these DOMs aren’t standardized but for a specific browser, if you want to write the DHTML it will really help you to learn the specific DOM for a particular browser.


Feb
11th

A Single Version of HTML is not enough

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

HTML History

HTML’s first version didn’t have the version number. HTML was just called as HTML. Back in 1989 to1995 HTML was used to put up some of the simple WebPages. HTML was standardized in the year 1995 by Internet Engineering Task Force (IETF) and numbered it as “HTML 2.0”.

W3C (World Wide Web consortium) presented the next version called “HTML 3.2” in 1997, in 1998 “HTML 4.0” and in 1999 “HTML 4.01” was released. Later on W3C made an announcement that, it would not be developing new versions of HTML and it would focus on extensible XHTML or HTML. W3C recommended web designers to use HTML 4.01 for their (web designers) HTML documents.

At this point of time, development of HTML split off. W3C drew its attention on XHTML 1.0 and from 2000 onwards basics of XHTML was recommended. As web designers weren’t interested to move to rigid parts of XHTML. In 2004, WHATWG (Web Hypertext Application Technology Working Group) began to develop the new version of HTML called HTML 5 which was not as rigid as XHTML. WHATWG are hopeful that their HTML 5 version will be eventually accepted as a W3C recommendation.

Deciding which version of HTML

While writing a Webpage, the first and foremost decision is whether to write in XHTML or HTML. If a webpage designer is using an editor like dreamweaver the choice of HTML is determined by the doctype chosen. If an XHTML doctype is chosen, then the page will be written XHTML or if an HTML doctype is chosen, then the page will be written in HTML.

Now XHTML is HTML 4.0 which has been rewritten as XML application. If XHTML is written, the attributes will be quoted, tags will be closed and it could be edited in XML editor. Than XHTML, HTML is lot looser because it can leave quotes of attributes like leave tags <p> without closing </p>tag and so on.

Why HTML is used

HTML occupies lesser space, where the download speed will be higher
Response of the older browsers will be more effective to HTML than to a XHTML.
Learning HTML is an easy process because it forgives, like if the tags in HTML are left off the codes still work.

Why XHTML is used

XTML is lot clearer at the beginning and at the end by which events and styles can be added in more easily. Because XHTML is XM, it integrates well into other programming languages. Some of the browsers available respond reliably to XHTML, so that the pages are displayed consistently.

Once decided on XHTML or HTML- which of these versions should be used

HTML
In this there are 3 versions still in regular use around the net. They are:
HTML 3.2, HTML 4.0 and HTML 4.01.

XHTML
In this there are 2 versions in current use, they are:
XHTML 1.0 and XHTML 2.0.

Once decided on a version

Ensure to use a doctype. Using a doctype is one more additional line in HTML documents. By using doctype, it ensures the pages are displayed the way they are intended to be displayed


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

Your new Website is Inside

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

Today’s internet is lot different from what it initially used to be. With the latest developments such as web standards and the search engine optimisation, it is just not possible to cut the websites the same old way. The W3C lays down certain regulations and guidelines, which have to be followed by all the web designers so as to make their website functional as well as accessible as far as possible. Making the website compatible with standards of W3C ensures that your site is able to achieve its maximum potential across a wide range of systems. But the W3C standards keep on changing on a daily basis. But does this mean that your website will be suffering aesthetically? The simple answer is NO. With the evolution of CSS the web designers have the freedom to do almost anything on web. CSS also has the capability of giving much better usability, foundation for SEO and compliance with the web standards.

From the perspective of web designing, the biggest advantage of CSS is the cross browser compatibility. Almost every web designer would have tested his website on other computers just to ensure that layout is not mangled. The main reason for this is that different versions of the same web browsers as well as different web browsers would always display different websites differently. As a matter of fact, all the web site designers have to forcefully test their websites on as many browsers as possible so as to minimize these unwanted problems. As a web developer, it is virtually impossible for you to control all the variables present in your code but can definitely try to minimize these problems. It’s a well known fact that if the user has the ease and the comfort level on your, he will surely return back to the site.

Though all the website users are conversant with the powers of CSS but surely many of them have never utilised to its maximum capabilities. The cascading feature of CSS is actually the most important part of the web designing, yet it is most overlooked. The designer can easily alter one file, which is the style sheet and the entire site can be modified just by making the necessary changes in one file. CSS is capable of creating the code that is less bulky and cleaner as compared to the other scripting languages. Less code would just imply that the search engine would have a better access to the content of your web site. As a result of this your website will be indexed more effectively and will have more targeted users or clients.

Another great benefit of CSS that cannot be overlooked is its increased efficiency and ease in its use. Once you have successfully attained knowledge about the programming techniques, it is quite easy to control the designs of your website using CSS. For a website to work properly, it is not essential that it should be boring and simple. CSS surely does not limit the designing capabilities of your web site; instead it gives the designers the power of creating fully functional and aesthetically pleasing site.


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

The Four Essentials of Modern Web Design

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

We all know the web is quite a new medium, and in its current state is maybe around 14 to 15 years old. Can you think about the cinema or for that matter television when they are around 14-15 years? There are four essential pillars of the web designing namely valid code, accessible code, semantically correct code and separation of content and presentation. Each one of the four essentialities is not a complete solution in itself instead each of them together or collectively contributes for perfect and complete web designing.

Most of the products when manufactured are done with certain standards. And all the standards that are made or exist are there for a reason and it would highly unprofessional to ignore them. All the web pages whenever designed should invariably go through a validation test process following the W3C HTML validation service although there are a few web pages that are not able to clear these tests. If your web page is really not validating then there has to be some major reason for the same.

The site should at any point be easily accessible. Accessibility problem is majorly caused because of the discrepancies in the basics. Some of the most common ones would be that the title and the header should always contain the description about the specific page that is being displayed, the website should not only be accessible by the mouse but for surely by the keyboard as well, use the ALT for all the images and the SUMMARY for the tables in your web page, SUMMARY is quite similar to ALT tag which is used to describe the images and many more. Basically it is not difficult to achieve what we call the factor of accessibility it definitely requires certain efforts but surely saves a lot of agony to quite a many users. Therefore it is always advisable to make a positive contribution to the web by being World Wide.

We have often read that the code should be semantically correct and structured. But there has always been a major issue in the basic understanding about the semantics. Semantics basically refers to the relationships between symbols and signs and what they collectively mean. Every symbol or tag or sign that is being used in the HTML code should be able to depict or represent the correct meaning what it is actually meant to perform rather than just being interpreted as something else. For example, when using the <TITLE> it should describe the title of that particular page rather than displaying the title of the entire website, similarly the headers <h1> to <h6> should be used to chunk down your document into meaningful pieces rather than anything else.

Separation of content and presentation literally means that the HTML does not include any presentation markup which means that it contains nothing which should actually describe as to how it looks. All the instructions related to how it looks are included in the CSS. There are a lot of benefits of this approach wherein there is increased bandwidth, improved accessibility, faster download and allows the developers to work on the sites independently and concurrently. All these four pillars are the basic and the most important factors that should always be considered while designing the website.


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

XML: The new Language of the Web

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

Since its evolution, the HTML (Hyper Text Markup Language) has been revised and upgraded a number of times in order to make the World Wide Web a better place to live virtually. HTML is a derivative of SGML (Standard Generalized Markup Language), but its major flaw is that it is not extensible. Thus HTML is not appropriate for deployment under a network environment.

So, the World Wide Web Consortium (popularly known as W3C) decided to develop a new breed of extensible language and came up with XML, which stands for eXtensible Markup Language. Web developers use XML to dynamically describe the information stored on a web page. Though XML, the new generation web pages describes themselves which is helpful to gain good rankings in search engine listings and help the developers to write codes for custom search tools.

• XML shall be straightforwardly usable over the Internet.
• XML shall support a wide variety of applications.
• XML shall be compatible with SGML.
• It shall be easy to write programs that process XML documents.
• The number of optional features shall be kept to the absolute minimum, ideally zero.
• XML documents shall be human-legible and reasonably clear.
• The XML design should be prepared quickly.
• The design of XML shall be formal and concise.
• XML documents shall be easy to create.
• Terseness in XML markup is of minimal importance.

(Source: http://www.w3.org/TR/REC-xml/)

XML is referred as a Metalanguage which describes other languages. It is called so because XML allows the web developers to create documents which describes themselves to their reader. Though the XML tags look like the HTML ones, the main difference between the two is that the HTML documents do not tell the web browser how to display the web page. On the other hand, the XML documents are downloaded by the web browser along with a style sheet or Document Type definition (DTD) which guides the web browser on how to display the web page.

In its raw form, an XML document looks like the HTML and SGML documents, but all are functionally different. The main difference between the HTML and XML coding is that the XML tags are very rigid. For example; the HTML language has tags which have a closing and which don’t have a closing section. But in XML either all the tags must exist in pair or announce to the reader that a closing tag is not present.

For example: in HTML you can use <BR> tag without having to close it, but in XML you have to use it as <BR>…</BR> or simply as <BR/> which announces that there is no closing tag for BR.

Another prominent difference between the two languages is that the XML requires all the tag attribute values to be enclosed within quotation marks. For example:

<font color=red>……</font>, this is wrong in XML. It should be like <font color=”red”>…….</font>