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

Understanding XHTML: A Basic and Simple Guide

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

The XHTML stands for Extensible HyperText Mark-up Language. XHTML is considered as a stricter and a cleaner version of HTML. XHTML is in the family of the XML mark up language. Prior to HTML 5 it was defined as SGML or standard generalised mark up language but XHTML is actually an application of XML or we can say a very restrictive subset of the earlier SGML. The XHTML has become had became World Wide Web consortium. The XHTML is actually a reformulation of three HTML 4 document type. It is believed that XHTML is the next step in the evolution of the internet. Hence we can say that XHTML has amazing future and backward compatibility.

Some people believe that XHTML is not as useful as it is said to be but it proves to be one of the most reliable product in the future. XHTML is somewhere related to HTML and this can be proved by the following points:

  • In HTML there are some tags which always remain empty and do not have a closing tag either. On the other hand in XHTML each and every element must be closed.
  • The XTML has some similarity with HTML which permits omitting the end tags for various elements.
  • In HTML each and everything is case insensitive whereas in XML every element and attributes are case sensitive. Well XHTML requires all the elements to be in lower case.
  • Some versions of HTML do permit quotes to be omitted from the actual attribute values. Whereas in XHTML all the attribute values should be enclosed by quotes it can be single or double.
  • HTML does permit attribute minimisation options in which a Boolean attributes can actually have their value entirely omitted.
  • Certain required elements can be omitted in HTML in which they are added by a parser. Whereas in XHTML the DOM must be determined without even knowing what all elements are actually required hence these tags should be specified properly.

XHTML is actually identical to HTML 4.01 which makes it even more user friendly. All browsers in the world support XHTML which is the biggest benefit of it. As it is so compatible hence it is used by a number of content management systems all over the world. It is very easy and interesting to learn how to publish XHTML 1.0 type of documents in the HTML compatible manner. Such sought of HTML compatible media content is actually sent using the HTML media types. Mostly all web browsers support the XHTML media types but the Internet Explorer of Microsoft does not support it.

The Internet Explorer does not render the file but actually a dialogue box opens which invites the user to save the content. The very latest versions of Internet Explorer show this tendency. The XHTML is not used preferred by everyone but it will be in great use in the coming future. XHTML is still evolving and will be very effective in the coming future. Learning and understanding XHTML is very easy and you can easily get all the information on the internet.


Jul
17th

Guide to Dynamic HTML attributes

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

When setting out to write the dynamic HTML, you’ll need to understand various ways where you will be able to impact the elements on pages. Normally, elements will be able to have one more of following attributes that will indicate an action moment in referencing the page. Once you have decided on when you will want to make the dynamic action to occur, you can add up your scripting language to anyone of these attributes and make the element more dynamic.

Some Notes
The common way to write all these attributes is with the mixed case but with the XHTML, the attributes must be written in lower case. This will mean that OnClick and onclick means same thing but in XHTML, onclick is valid.
Finally, all these attributes are very much valid but not all the browsers will support them in same ways, so you have to be sure to test your own scripts just before releasing them.

Event that are mouse related.
Onclick
Onclick attribute is the one which is commonly used DHTML attributes. This will tell browser to implement all the scripts when element is clicked rightaway with the mouse or with the pointer.
The onclick attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Ondblclick
Just like onclick attribute, this ondblclick attribute will take effect when element is double clicked. This not commonly found on the web pages but will give your WebPages the same functionality as that of OS icon.
The ondclick attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmousedown
When the pointer or mouse button is pressed down the element, the onmousedown attribute will activate.
The onmousedown attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmouseup
When the pointer or mouse button is released down the element, the onmouseup attribute will activate.
The onmouseup attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmousemove
When the pointer or mouse is moved within that element, then the onmousemove attribute will be activated.
The onmousemove attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmouseout
When the pointer or mouse is moved off from the element, the onmouseout attribute will be activated.
The onmouseout attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet.

Onmouseover
When the pointer or mouse is moved on to the element, the onmouseover attribute will be activated.
The onmouseover attribute will work with all element but will not work with few and they are title, style, script, param, Meta, isindex, iframe, HTML, head, frameset, frame, font, br, bdo, basefont, base and applet


Jul
15th

Beginners Introduction to DHTML references

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

When anyone says that they use DHTML (Dynamic HTML), what does that mean really? The DHTML is basically made of 4 things and they are

1.Valid HTML or XHTML
2.Cascading Style Sheets (CSS)
3.JavaScript
4.DOM (“The Document Object Model”)

If you use the JavaScript in order to interact with the customers, you might have created the dynamic page but you will really do not have DHTML until and unless you use all the 4 parts into it. Interaction between the 4 elements will give your readers an experience that will use all the powers of the 4.0 browsers.

One of the best sources to learn the DHTML is by the books that are written by some of the experts. The books written by the experts will let you know on all the things such as DOM, JavaScript, CSS, and HTML

HTML 4.0 References
The very first thing that you must learn while starting off with the DHTML is the XHTML or HTML 4.0. Both the XHTML and HTML 4.0 are optimized for the DHTML and have the hooks built inside it in order to interact with DOM more seamlessly.
The structure of HTML 4.0 document from Web Design Group
This document will definitely give you a good overview on how the HTML 4.0 document will work exactly, that includes the structure of tags, on how to escape from the special characters, and at the end an HTML 4.0 validator as well.

JavaScript for the DHTML References
The JavaScript will be tricky as well but is an essential part of the DHTML pages.

CSS (“Cascading Style Sheets References”)
Along with the HTML coders who have designed HTML at their heart, CSS is the best tool that has ever come up with it.
The “Style Sheet Dependence” from Web Design Group
While most of the people are making use of the modern browsers, if at all you miss use the CSS, then you will be able to get some of the pages which will be pretty awful and this article will show on how to avoid this to happen.

DOM (“Document Object Model References”)
The DOM or “Document Object Model References” is one of the newest members of HTML family and also it is one of the hardest to master as it is very much stiff enough. You will definitely understand Dynamic HTML if you understand the DOM as it will be very much useful and important as well.
The DOM (“Document Object Model References) from W3
If at all you would want to start to learn the DOM, you must start at from the source.

Learning the Dynamic HTML
One of the best ways to learn the Dynamic HTML is by playing with it. You will be able to use the tools such as FrontPage or Dreamweaver in order to get started with coding but if you really want to know on what the Dynamic HTML is based on, then you should jump into learn the JavaScript and HTML.


May
11th

What is DHTML? (Dynamic HTML)

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

DHTML is really not a new pattern of HTML, but quite a new way of looking at it and controlling the standard HTML commands and codes.

When you’re thinking of DHTML, you should remember the qualities of the standard HTML and it should be remembered especially when once a page is loaded from a server and it will not be changed until and unless another request comes to that server. DHTML will give you additional control over the standard elements of HTML and also allows the user to change it any time even without returning to the main Web server.

There are actually 4 parts to DHTML:
Scripts
XHTML
CSS (Cascading Style Sheets)
DOM (Document Object Model)

DOM
Document Object Module (DOM) is the one that allows you to get the access for any part of the Webpage and to change the Webpage using the DHTML. By DOM, all the parts of the Webpage are specified and you can even access and also change their properties by using its consistent naming conventions.

Scripts
Scripts that are written in either ActiveX or JavaScript are the two common writing or scripting languages that are used to activate DHTML. In order to control the objects that are specified in the DOM, these scripting language are used.

CSS (Cascading Style Sheets)
Cascading Style Sheets are used in Dynamic HTML in order to control the feel and look of the Web page. These Style sheets will define the fonts and colors of the text, the images and background colors and also the placement of objects in the page. Using DOM and the scripting, you can even change the style of different elements.

XHTML
XHTML4.x or XHTML is used in order to create page for itself and also to build some of the elements for the DOM and CSS to work with. About XHTML for DHTML there is nothing more special– it is even more important to have a valid HTML, because there are more things to be worked on from it just more than the browser.

The Features that are included in DHTML
Actually there are 4 primary features of DHTML:
Data binding (Internet Explorer)
Changing the properties and tags
Dynamic fonts (Netscape Communicator)
Real time positioning

Changing the properties and tags
Changing the properties and tags are the most common uses of DHTML. DHTML will allow you to change the HTML qualities of tag depends on the outside event of the browser. You can even use DHTML to preload information into a page, and not to display the information until and unless the reader clicks on that specific link with the intention of clicking.

Real-time positioning
This DHTML will also allow you to play some of the games that are interactive with your readers or else animate some portions of your system screen.
Dynamic Fonts
Along with some dynamic fonts, the fonts can be encoded or downloaded with the page, so the page looks so stylish.
Data binding
This is a feature used in IE only. Data binding was developed by Microsoft in order to allow getting the databases from Web sites.


Mar
18th

CSS and HTML go hand in hand with each other

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

CSS was developed to make a way for Web developers to define their feel and look of their own WebPages in the year 1997. Its main intention was to separate design from content so that HTML performs more functions that was initially based on- the content mark up, without worrying much about layout and design.

Until 2000 CSS didn’t gain much fame, when Web Browsers started using more of color aspects and basic front of CSS. At present all modern browsers support all the levels of CSS like CSS level 1, CSS level 2 and CSS level 3. Web designers who weren’t using CSS for their development and design are becoming the matter of past and it pretty important to understand and learn CSS as it is known to HTML.

CSS- Cascading Style Sheet

Here style sheet directly refers to documents. For document designs, style sheets are in the use for many years. For a layout, these sheets are the technical specifications whether it may be online or print.

Cascading is one of the special parts. The intention of Web style sheets are to cascade through a number of style sheets. Each and every Webpage is affected by one style sheet at least, even if no styles are applied by the Web designer. These style sheets are the user agent sheets (default styles which are used to be displayed if no instructions are provided). If at all a designer gives the other instructions; here the browser should know which of the instructions are in precedence.

Why CSS used?

To style WebPages, CSS is used but there is more to CSS. CSS is also used to style XML and XHTML markup; this means to you that, if anywhere there is XHTML or XML mark up, CSS can be used to describe how it will appear. CSS is used in defining how WebPages should look like, when Webpage is viewed from other media than in a browser.

For example: you will be able to create a print sheet which is styled, which will describe how the WebPages will be printed out and another styled sheet where the Webpage will be displayed on a projector for the purpose of slide show.

Why is CSS vital?

It is one of the powerful tools available. A Web designer must or should learn CSS because as it affects the whole tone and mood of a particular Website. Well, a written style sheets can be quickly updated and allows the site to change what is preceded or without valuing the changes to the XHTML.

Challenge before the person who wants to learn CSS is, there is a lot to be learned but when you start learning it doesn’t seems to be bulky. In CSS level 1 there are 60 properties and in CSS level 2 there are 70 properties. Compared to attributes and HTML tags, learning CSS is a cake walk.

As CSS combines, cascades and the browsers here interpret the directives in a different way, CSS will be little tougher than what is Plain HTML is. Once the power of CSS is utilized you will come to what is CSS?


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
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.


Jan
21st

The Path of a Web Designer

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

From beginning to Advanced and Everything in Between:

There is just so much that is included within the realm of Web Design. It includes

• HTML
• Design
• Layout
• Programming
• Administration
• XML
• Graphics
• And much more

There is always a scope of learning and growing in the path of web design, no matter where you are placed in this path. But the biggest question is how to decide where to go? Fortunately there are many different path available that you can opt for whether you are new in this field of web designing and HTML or an established in writing DHTML and programs for years.

Beginning HTML:

This is your stop if you are just starting o the path of web designing. The basics of HTML and building a web page are all covered in the beginning HTML resources. There are a lot of tutorials and classes that will help you in getting started. New terms will be explained by new terms.

Advanced HTML:

Once you are clear with the basics of the HTML, the next step to be considered is Advanced HTML. It includes CSS, DHTML, frames and tables. There are a large variety of advances scripting tools available for the advanced HTML programmers. Also you can gain the information about updating your site using multimedia and cookies.

Once you are clear about the concepts of basic and advanced HTML, you will have sufficient skills for taking up web development as your career.

Professional web designers:

Professional web designers focus on both the feel as well as the look of the web page. It is quite imperative that the web designers should focus primarily on creating good layouts, writing and managing excellent content and then promoting and marketing both themselves and the sites created by them.

Professional web programmers:

The main job of the professional web programmer is to focus primarily on the unseen parts of the web pages. These mainly include the programs that make the websites work, scripts and CGIs. Also the programmers have to work on the servers as well in order to keep them up and running. The security of the web pages and the web sites is managed by them. They also manage the e-commerce portals and content management system. The role of a web programmer may not be as glamorous as that o the web designer, but it is certainly as important a role.

XML developers:

The next step of web design and development is XML. Many of the web programmers make a switch from normal web programming into the XML programming. There are a lot of directions that you can choose from within the XML. Whether you are interested in posting your documents for wireless devices with XHTML Basic or WML or you want to focus more on SMIL and multimedia, XML is the point where your programming begins.

Know where you are on the path:

In order to get the necessary resources and information for learning and growing in the field of your choice, it is quite essential to know where you are placed on your path.