HTML.co.uk

HTML 5 has brought lots of changes to the specifications of HTML. Doctype is the one thing that can be remembered easily. Apart from doctype, in order to build websites, HTML 5 has brought 25 new tags. Some of the new tags are a long time coming to the HTML and there are some others and they are complicated. However, the complicated tags are very useful.

Layout Tags

In HTML 5, the new layout tags will allow you to define all the sections of the WebPages as a layout area even without the need of div tag to define them. Header tag surrounds the header and nav tag surrounds navigation. Just use these tags normally just like div tags.

Article – is the main content in WebPages

Aside – extra content

Footer – is a footer for a page

Figure – is a peripheral content along with the caption

Header – header of the page

Section – any portion or section of the page

Nav – page navigation

Multimedia Content

HTML 5 attempts to make the both audio and video to add to a webpage. By providing the specific tags for both the video and audio, it can be put on the WebPages.

Audio – audio stream is denoted

Source – source files for both audio and video

Video – video stream is denoted

Web Applications and DHTML or Ajax

The HTML 5 adds some of the tags to the language specifically for the Web applications, DHTML and Ajax. More hooks are given to the scripting languages by these tags and for the browsers, it provides framework in order to deliver the application data.

Canvas – it is a place where dynamic graphics could be drew

Command – This denotes a command button, which has the information sent to the script or server

Datagrid – it is a references dynamic data in tabular data form or in a tree form

Datalist- list of data is referenced in the drop-down list

Details- this provides additional details of any page element

Output – this references the output or calculation of a script

Progress – this represents a progress bar

Ruby Annotations

Ruby is a short run of the text alongside a base text and is typically used in the East Asian documents in order to indicate short annotation or to indicate pronunciation. Through the help of three tags, HTML 5 provides access to ruby.

rp – this is a Ruby parenthesis for the user-agents that cannot handle ruby

rt- it is a Ruby text,

ruby –this is a span of the ruby annotation

Some of the other new tags

There are some new tags that will help you to mark the HTML effectively. These tags help the browsers to know exactly what different elements are there on the page.

Dialog – people talking or a conversation

hgroup – it is a grouping of header tags that must stay altogether

Mark – it is a text that has been marked for many reference purposes

Meter – it is a scalar gauge of a measurement

time – time or date

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

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.

Once the web pages has been designed it is very important that they are verified and tested completely before going live on the World Wide Web. Verification here means to check the HTML documents for a large number of errors and testing refer to the checking the reliability, functionality and compatibility of the web pages. During verification the HTML documents are generally examined with respect to their layout, typographic errors, grammatical mistakes and so on. In testing phase all the scripts, functions, applets, embedded tools, CSS (Cascading Style Sheets), DHTML effects etc. are checked.

If you are dealing with a complex web site containing a large number of HTML documents then verifying and testing each and every resource manually can be cumbersome. Therefore, in order to ensure high level of accuracy and to save time a large number of sophisticated computer programs can be used. Below are some popular verification services which can be used to test the web pages:

• Doctor HTML: This is a verification service which is used to analyze the contents of a web page in detail. It can be used for checking different aspects of the HTML documents such as spelling, images, the structure of the document, tables, hyperlinks, forms and much more. It should be noted that Doctor HTML is not a software which can be downloaded and installed in the computer, rather it is a web service (a Common Gateway Interface, CGI script) for which one has to subscribe in order to get his/her web site verified.

• Weblint: Just like Doctor HTML, Weblint is also a web based service which is used to test and verify the HTML documents. It can be used to check the basic structure of the website, to check for the unknown elements and attributes, tag context, overlapped tags, illegally nested tags, images, hyperlinks, obsolete tags etc.

• WebTechs: It is also a web based service which can be used to check whether a particular HTML document or web site conforms to the predefined standards or not.

• Some of the other web site verification services are Slovenian HTMLchek, U.S.M.A (United States Military Academy’s verification service), Harbinger and URL-Minder.

In case you have to verify a small number of HTML documents then it is recommended that apart from using the online verification services you check the web pages yourself also so that the chances of mistakes are minimized. While performing a manual check makes sure that there are no spelling errors, grammatical errors and formatting errors. The navigation structure of the web site should be checked for consistency, all the DHTML effects should be tested in order to see if they are working in the way they were supposed to and the tables should be checked for their alignment. Besides this, all the images, hyperlinks, background scripts and forms should also be checked thoroughly.

Site verification and testing is a continuous and dynamic process. As the web standards change from time to time the web sites are also updated frequently and retested according to the new standards and procedures.

Webcasting refers to the process of broadcasting the web content to the internet users regularly. For this purpose the Channel Definition Files, popularly known as CDF are used. These files are very important while creating the Active Desktop components. The type of content, its update interval and the amount of content to be uploaded and downloaded is specified in the CDF file.

Channel designing is a very important task. A properly designed channel is easy to manage, user friendly and have lots of exciting features.

Below are some tips and guidelines which can be followed in order to create a captivating online channel:

• If the channel contains large amount of content then it must be managed in a hierarchy and the Top Level should be very attractive yet simple. There should not be too much content at the top level. It should only contain the logo and main information about the channel.
• Keep the navigation between different levels as simple as possible because if it is complicated and uneven then the user will get confused and will not be able to find out particular information.
• In order to make the channel look more attractive you can make use of Dynamic Hyper Text Markup Language (DHTML) tools.
• One of the most important features which should be included while designing the channels is offline browsing. There may be chances when the user tries to browse the web page offline. During this phase many Java applets and Active X controls don’t work properly, especially the dynamically loaded images. Therefore the channel must be tested completely for offline browsing.
• Instead of stuffing a single page with loads of information provide the content in small chunks distributed over different pages. There are two main reasons behind this. First is that while surfing the internet the users browse one page after another very quickly and do not take interest in reading those web pages which are poorly designed and contains lots of textual information. Secondly, if the channel contains lots of information it will take more time to get loaded in the web browser. Therefore the channels should be as slim as possible so that they can be loaded with a snap otherwise the user will not wait for it and switch over to some another channel.
• In order to ensure scalability, uniformity and style it is recommended to use Cascading Style Sheets (CSS) while designing the webcast channels.
• To make channels arrest the viewer’s attention at the first glance it should be rich in multimedia. Apart from the textual data pictures, animations, videos, sound effects etc. should be used. Again it should be noted that the multimedia elements should not be used too frequently as it will make the web page heavier to load. The channel developer should intellectually balance the technical qualities and the visual quality of the channels.

Once the channel is properly designed it can be made more interactive and real time component with the help of CDF files. CDF files trigger the regular updates. The developer can also use the CDF files to log the hits to his channel.

Today almost every e-commerce website is integrated with a backend database to keep a record of all the transactions and customers. Database is a fast, easy, secure and reliable method of updating the records online. In fact database is an essential tool for the organizations which are involved into news-making, whether forecasts, networking, e-commerce, placement consultancy and many more. All the valuable information and knowledge base is stored in a database. There are different database softwares which are available in the market such as Oracle, Sybase, mSQL, Illustra, Microsoft SQL, FoxPro, Microsoft Access etc. One can choose any one or more than one keeping in mind his business requirements and budget.

In order to ripe the benefits of online databases, the web pages must be integrated with them in a proper manner. To accomplish this task a lot of database tools are available. There are various methods to integrate a database with the World Wide Web (WWW), popularly known as the internet and every database tool differs from the other with respect to its functions, features and capacity. Therefore the type of tool to be used should be carefully selected keeping in mind the type of database used.

Most popular database integration tools are:

1) PHP/FI: It is a CGI (common gateway interface) program which is developed in C programming language and can be used on any UNX system. You can use PHP to integrate mSQL and Postgres95 with your HTML documents.
2) Cold Fusion: It is an application which allows you to write scripts within your HTML code. It is basically a database interface which efficiently processes a script and then returns the information within the HTML text in that script. It works by processing a form created by the web developer and then sends a request to the web server. The server sends all the information entered by the user in the form to Cold Fusion engine and this way the information is processed, updated and stored. Cold Fusion is a very popular database tool.
3) w3-mSQL: It was created so that the mSQL database can be easily accessed via web pages. It works like a CGI script which reads the HTML code, processes all the queries and sends the final o\result to the web server which in turn redirects it to the end user’s web browser.
4) MsqlPerl: It is used to write the scripts in Perl language in order to access the mSQL database.
5) MsqlJava: Using this you can easily create Java Applets to access mSQL database.
6) WDB: It consists of Perl scripts which can be used to access Sybase, Informix and mSQL databases.
7) Web/Genera: This one is used to integrate Sysbase databases with the HTML documents.
MORE (Multimedia Oriented Repository Environment): It refers to those application programs that operate with a web server with an aim to provide access to the relational database systems (RDBMS).

Apart from these there are numerous other database tools which can be used with HTML and DHTML documents such as DBI, DBGateway, MS Visual InterDev etc. All of them come with different price tags and capacities. You can choose the one which matches with your requirements.

Today, almost every web site contains highly interactive and dynamic web pages in order to make internet more captivating and to support e-commerce. Users can perform various tasks on the World Wide Web like chatting, polling, blogging, shopping, gaming, audio/video streaming and much more. In order to interact with the user in real time, web browsers need to connect with web servers frequently especially when a user is doing online banking. In that case the customer’s data is updated instantly. There is no space for delay or any other kind of web error. So, in order to facilitate such a high level of user interactivity on the internet, CGI (Common Gateway Interface) was developed. CGI is a standard which specifies the way for web servers to communicate wit the external programs/scripts and vice versa. CGI allows the information to effectively travel between the web browser, web server and any other external script or application (applets) which is needed to perform some specific tasks on the web.

CGI fully supports the functioning of dynamic pages. In fact the DHTML is of no use without CGI standards. CGI can be used to perform various dynamic tasks such as a hit counter, online banking, online polling, video conferencing etc. It has become very popular now a days because of the following reasons:

1) CGI is the quickest way to support dynamic pages.
2) CGI standards are supported by most of the web browsers. Thus there are no compatibility issues.
3) CGI codes are available easily. There are lot of codes each written for a specific purpose.

The basic CGI programs can be easily written in C, C++, Shell scripts and Perl language. Every CGI program has its own ‘Method’ of communication, processing and functioning. In total there are three methods which can be used:

1) GET Method
2) POST Method
3) HEAD Method

The GET Method is used you want that the CGI program should receive the data/query. After receiving the query data the CGI program interprets it and executes the expected tasks. GET Method should be used when you want to retrieve the data from the web server which you will not change. On the contrary, POST Method is used when you want to send data to the web server which will change the existing one or when you want to send large amount of data to the CGI program.

There is one more CGI Method called HEAD. It is similar to the GET Method, but while using the HEAD the web server only sends the HTTP headers instead of the actual data to the web browser.

CGIs are widely used for web site linking. It facilitates the search capability within a website. For example; at yahoo.com one can search for any resource in the search bar. Here the yahoo’s web page acts as a front end panel where the user can specify the search criteria and at the backend the web page is linked with the databases via CGI.

Now a days, as the Java language is also being used for web sites, there are chances that CGI will become obsolete after sometime because Java provides better options and its processing time is less than CGI programs.

HTML is used to create and design static web pages. It proved to be very useful and easy to understand and soon after its evolution it gained world wide popularity rapidly. But with the growth of internet and its related applications the internet users demanded something more in the websites. Web surfers were vigorously expecting more interactive, entertaining and exciting web content. Thus DHTML was introduced. Some people call DHTML as an advanced version of HTML, but some did not consider it a language or a new specification of HTML. Rather, they perceive DHTML as a new way of controlling the HTML commands and functions. DHTML is basically an amalgamation of four different techniques i.e. HTML, Scripting, Cascading Style Sheets (CSS) and Document Object Model (DOM). Using all these tools we can create more interactive and animated web pages to arrest the attention of the internet users. DHTML is used to insert special effects to a website such as mouse rollover effects, drop down lists, animations, advanced marquee effects etc. It allows you to control the HTML elements and change them.

The four techniques which are harmonically used in DHTML are:

1) HTML: DHTML uses the standard HTML code as its base.
2) Scripting: A client side scripting language such as Java Script is used to control the elements in DHTML
3) CSS: Cascading Style Sheets are also used to define and manage the style and layout of the web pages.
4) DOM: Document Object Model allows you to access any portion of a DHTML document and change its properties.

DHTML adds life to static HTML pages. The user feels that he is interacting with the website in real time. DHTML can add an effect with any event. For example when you click on an image, it background changes. In this the effect is related with the mouse click event. Similarly a lot of events such as mouse rollover, drag n drop, scroll etc. can be associated with one or more DHTML effects.

The four properties of DHTML are:

1) DHTML is used to modify and control the standard HTML tags and their attributes.
2) DHTML gives you real time interactivity with the web page. It can position different objects, images and text dynamically within the web page.
3) DHTML is also used dynamic fonts. Only Netscape Navigator supports this function.
4) Another important feature of DHTML is Data Binding. With the help of this property the web surfer can easily access databases from the websites. This feature is only supported by Microsoft’s Internet Explorer.

It is clear from the above discussion that DHTML has many advantages and some disadvantages too. DHTML is more complex than HTML. The DHTML editors are very costly. Apart from this some of the features of DHTML are browser specific but still DHTML is used worldwide as it has proved itself a great utility to enhance the quality and usability of web pages. Anyone can use DHTML in any form. From a small piece of creativity to large complex codes, DHTML can be used to make web sites better than ever before.