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.


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.


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.


Apr
1st

Ever wonder how much programming a Web Designer does?

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

If you want to decide what kind of Web developer you would like to be, this question is very tricky. There are several options where you can choose from.

Design:
It includes “Layouts” and “CSS” as well as “Graphic Designing”

Programming:
Writing “Flash Applications” or “Ajax Web2.0 Applications or “CGIs”

Content:
In this there will be creation of images and also writing the text that will be displayed on Websites.

Databases:
“Database Administration”, “Working with XML” and “Connecting Sites to Database”.

Information Architecture:
“Setting up of informatics behind Websites” and also “making the Websites easier to navigate and use”.

Metrics:
In this it is only to watch the page views and to track in order to validate the efficiency of “Web design work”.
There are many more options where you can choose from

If you want to be a Web Programmer, some of the languages like Perl. C++, JSP, ASP, Java or PHP will be heavily featured in your works daily. But, usually content writers and Web designers do not use these languages at all. C++ is one language you may use to write scripts and CGIs in order to make your WebPages more interactive and to have dynamic look.

In the field of Web, there are several other jobs that will not require any kind of programming and these jobs will be having the titles like program manager, designer, content co-ordinator, information architect and several other titles. Here you can choose either programming or non-programming route. Here you will be working with designers who will know programming and also with designers who will not know programming.

Money and job prospects in this Web Programming

It may or may not be true that only Web programmers are the ones who could make more money than Web designers and other than these both DBA would make more money. If you do Web programming only for the sake of money, you will not be able to do it and if you do it also, you will not be good at it. Here you will not be making money like the people who really loves doing Web programming and also the person who is really good at Web programming. This is also true with Web designing and with DBA as well. Before taking up any job, you have to be interested first.

When you take up a particular job, you have to even work on all the segments like content, code and design where you have to do some part of the equation as well. If you work with designers who do not know code writing, they will come up with the design the way that you might work and also the designs that they want to look. Then you might work on building some of the codes (JSP or CGI or other languages) that will be used to make the design work.

You have to focus on some parts of the job and have to enjoy working and you will get better.


Mar
23rd

Steps for including one HTML File in another File

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

If you have surfed Web for the whole day, in the Websites you will notice that almost all the Websites have themes for their site’s design and this design will be repeated across all the pages of that particular Website. On any of the Web design Website, there are lots of elements that will be repeated in many ways including left navigation and the header portion of that particular page.

When you write an article everyday, you don’t need to write HTML to add some of the standard elements. All you want to do is to write articles. The templates that are needed will be built by “content management tool and if you do not have the access to this tool, there are several ways to manage your Website without editing each and every page by hand.

What are includes?

In HTML, an include section is not just an HTML document itself but it is just a portion of another page and using programming these can be included in your complete Web pages.0020unofrtunately this is supported by HTML. So, you will require some type of scripts or programs to add your include files in to your pages. Most of the include files are the things that are repeated on several pages of a particular Website without changing the things like navigation, contact notices and copyright information.

“Server Side Includes”

SSI was the first one to be developed that allows the Web developers to include all the HTML documents in to another page. If at all your Web server supports SSI, you can easily create templates for your Websites.

Firstly, you have to save HTML for all the common elements of your Website as a separate file. For example: you can save your navigation files as navigation.ssi or as navigation.html.
Secondly you have to use SSI tag to add that HTML in each page of your Website. The SSI tag is “#include virtual” = “Path to File/include-file.html”.
Thirdly, you can use the same tag in all the pages which you want to include.

“PHP”
PHP is another level of server programming language. This language will let you to include all of your HTML documents in another page. This language is much like SSI. This PHP is also a Server level language like that of SSI. In order to add pages using PHP you have to follow these steps

Firstly, you have to save all your files separately in another document. For example: your navigation files can be saved as navigation.php or navigation.html.
Secondly, use this PHP code to include the page. The code is
<? Php
require ($DOCUMENT_ROOT. “Path to file/include-file.html”) ;?>
Thirdly, use the same code with each page to add your file.

“ASP”
ASP or “Active Server Pages” is just another way to add your files in another page. The method is same as PHP but the code is different. The code is
“#include file=”path to file/include-file.html”

JavaScript
This is also another way to add your files into another file. But this does not require server level programming. This is little bit complicated compared to other server level includes.

Firstly, you have to save HTML common elements in JavaScript style. In this file, any HTML written should be printed with the “document, write”.
Secondly you have to use the code “<script type=”text/JavaScript” src=”path to file/include-file.js”> < /script>”
Thirdly you can use the same code for including files in all the pages.


Jan
16th

Don’t Catch a Virus from your Web Page

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

Nobody would even think that the web developers would be worried about the viruses in particular. But the fact is that it is getting harder to hide from the smart virus writers. The most common SirCam virus is so dangerous that it is capable of searching the cached web pages or the email addresses. As this virus has an inbuilt mail server, it makes use of those email addresses for sending out the annoying spam email messages. The worst part is that this spammer is not used for sending any mail, but instead sends a virus to all the recipients.

How to protect yourself?

• Add anti-spam messages to your email addresses: These are special messages that cannot be recognised by a virus or a spambot but a person would easily be able to strip out.
• Take off your email address from your web pages: Make use of feedback forms where your email address was embedded in the CGI and not the HTML. The main reason of using the CGI here is that CGI cannot be cached and at the same time, you can still get your comments.
• Convert your email address to an image: Viruses and spammer programs cannot cache the images in the same way as they would be grabbing the email addresses. Always ensure that your email address is not included in your alt text.
• Make use of the JavaScript for building your mailto field: Try to use the JavaScript with variables which has been used for splitting up your email address, for building up mailto link, which cannot be read by the spambots.

Anti-Spam Messages in the Email Address
The easiest method of preventing the viruses and spam from spreading is by making use of the Anti Spam messages. Just add the words that would be recognised and should be removed from your email address in the mailto field.

The biggest drawback o using this method is that people easily skip out on the email addresses while clicking on the mailto link. And there is every possibility that if a bounce back message is received by them, it will be simply deleted.

Removing the email addresses
The most effective method of avoiding span or viruses would be to remove completely your email addresses. You just need to create a web form and send the mail using the CGI. Although there are variety of forms to email CGI is available but it is quite imperative to concentrate on the one which has the ability to store the email addresses in the CGI itself. Virus or a spambot can easily get the email address it is in the HTML.
The biggest drawback of this that people avoid using them as they feel more impersonal. Many of the customers who would have otherwise intimated you about the broken link will think twice before intimating you.

Convert Email Addresses to Images
If you have the comfort with the graphics, you can easily convert your email addresses to the images. There is a free Windows tool available for converting the email addresses to the image format for hiding from the spammers.

The biggest drawback o this is that once your email address is converted to an image, it cannot be used in the mailto tag. Also, your email address will have to be written by the customers themselves which can also cause typographical errors.

JavaScript to hide the email addresses
It is considered to be the most effective ways of hiding your email addresses from the viruses and the spambots, but always ensure that your customers have the convenience o using the mailto link.

The biggest drawback of this is that certain people work with the JavaScript turned off due to security reasons. The mailto link for these people will not be effective at all.


Dec
4th

Including One HTML File in another using Dreamweaver

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

One of the most common problems that all the web developers come across is how to include one bit of the HTML code into some other web page without actually rewriting the code every time. Unfortunately that cannot be achieved using straight HTML; you will have to opt for some other technology especially the server technology such as PHP or SSI or JAVA Script. HTML’s editor, Dreamweaver understands this problem and comes to rescue. Any web developer who would have got involved in building a website with more than ten pages would definitely recognize the value in having shared include files which once edited can be used for updating the entire website.

These special include files are most commonly referred to as the library files and are generally stored in the Files tab in the assets of your web site. Before creating a library file it becomes quite essential to first create a Dreamweaver site and then the library item can be made available as an asset to the entire site. In order to create Dreamweaver library Include file first you will have to open the library panel simply by clicking on the window Assets and then getting on to choose the library button. Now you will have to select that particular portion of the HTML that you would want to be converted to the HTML. This could be either a either a block of HTML or simply a section of the page in design view.

This selected HTML block is now to be dragged the library pane and finally dropped it there. Finally a name should be given to the library item which will help you in the future reference. Once your library item has been created it can further be used onto any page on your website by simply dragging the library item onto the new page and then Dreamweaver will do its part of job by displaying the relevant code and displaying it as a library item. The work does not get over just by creating the library item. Its main power is by re-using them as and when required.

The library can easily be placed on any page on the Dreamweaver website where it has been defined in. Once you edit this library item Dreamweaver will automatically update all the pages that are making use of this library item. You can achieve this by first opening the library item that needs to be edited by simply double clicking on that particular library item in the asset pane. Edit the library item whatever you want to and simply click save. Dreamweaver would immediately ask you if all the files that use this particular library item need to be updated; you will have click update and finally close all the log windows. If a lot of files need to be updated, it would take a little till the entire process is over. Always remember, once you have finished updating all the files it is mandatory to upload all the files on to your server. If this is not done then your customers will not have the access to the changed content.


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.