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.
Jun
20th

META Tags

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

META tags are very important nowadays because modern web sites are optimized for search engines. Today SEO (Search Engine Optimization) has become a critical strategy to drive the web traffic towards the web sites. Thus it has become necessary for web developers that they design and create the HTML documents in such a way that it gains higher rankings in the search results. While creating a search engine friendly web site, the ‘Meta Tag’ of Hyper Text Markup Language (HTML) plays a vital role.

The Meta Tag is a special tag which is used to insert the description and keywords for the web pages. The content of these tags is not displayed in the web browser. It is only used at the backend by the search engines and web crawlers in order to prepare their indices. Unlike the other tags, Meta Tag does not affect the visual appearance of the web page. It does not format the characters, tables, forms etc. META tag does not have an ending tag with a slash ‘/’ too. These are only used to provide information about the website to the web crawlers and make them understand what the web site is all about. Meta Tag is inserted within the <HEAD>……</HEAD> tag.

There are different types of Meta tags which can be included in the HTML document. Each of them is used to provide different type of information which the search engines may use to rank the web page. Meta tags can be used to give information about page title, page description and page keywords. For the purpose of search indexing, the ‘Keyword’ Meta tag and the ‘Description’ Meta tag are the most important ones. The Keyword Meta tag contains all the keywords which are relevant to the web site. The Description Meta tag contains a short, best possible description of the web page. One thing which should be kept in mind is that keywords and description in the Meta tags should not be too short or too long. If it’s too short it will not be very much effective in getting your web page a good rank and if its too long, then it will be considered as a spam and the website will be blacklisted by the search engines. In order to avoid spamming make sure that the keywords are not repeated again and again. To increase the effectiveness, one must use those keywords which are commonly used by the web users while searching for web pages via search engines.

Example of Meta tag:

<HTML>
<HEAD>
<META name=”description” content=”Information about the deployment of meta tags.>
<META name=”keywords” content=”metatags,keywords,search engine,marketing”>
</HEAD>
</HTML>

In the above example, there are two META tags used. One is used with the description attribute and it will be useful in introducing the web site to the search engines. The second META tag is used with the keywords attribute which have metatags, keywords, search engine and marketing as the keywords. Now whenever any inter user will type any of these keywords during a web search, this HTML document will be taken into consideration by the search engine. How it is ranked, depends upon the web site content and search engine algorithms. If wisely used, the Meta tag can earn a good ranking for your web site.


No Comments
Jun
19th

Common Gateway Interface (CGI)

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

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.


No Comments
Jun
18th

Virtues and Vices of HTML Editors

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

As discussed earlier, the HTML editors are those software applications which are used to design, create and manage high end web sites without writing HTML code. With HTML editors like Microsoft FrontPage and Adobe Dreamweaver, anyone can make web pages. From novice to professionals to web experts, everyone is using these editors to effectively mange their web sites. But as every technology has its own merits and demerits, the HTML editors also have its own virtues and vices. Let’s have a look at both the positives and negatives of the editors, as it will lead to better understanding of these kinds of applications.

Advantages of HTML Editors:

1. HTML editors allow you to draft web pages quickly. The most impressive aspect of these editors is that you don’t have to know about HTML codes at all in order to design your web site.
2. HTML editors not only help in creating the web pages, but it also maintains the site map and global structure of the whole web site. Thus, if in future the web site becomes complex you don’t have to face any type of issues while updating and maintaining it.
3. HTML editors help in maintaining consistency throughout the whole web site. If your web site contains large number of pages and if you want a particular element to be displayed on the top of each web page (for example your company logo), then instead of putting the element one by one on each of the HTML document you can simply put it one any one page and the editor will update it on the remaining ones.
4. HTML editors let you to insert complex elements into the web page with ease. For example: you can quickly insert flash animations, fireworks file etc. into your web site.
5. Forms, tables, frames and other important elements can be easily managed via HTML editors.
6. Not only in web designing, but the HTML editor also helps in generating the scripts for the web sites.
7. HTML editors also let you to easily embed DHTML effects into your web page.
8. With the help of HTML editor library, you can easily manage and access the frequently used resources.
9. HTML editors are WYSIWYG (what you see is what you get) applications. So, you can easily know how your web page will finally look like on the web browser.

Disadvantages of HTML Editors:

1. No doubt that HTML editor makes it easy to create and maintain web sites but they are overloaded with lots of features. So, it is difficult for a newbie to first of all understand the working of the editor properly.
2. HTML editors are poor in error reporting. It may not very much effective in telling you about the bugs in the code.
3. The programming style (style of writing the HTML code) of a HTML editor is entirely different than your style. The editors write the code in a complex and professional manner. So, it would be difficult for an amateur web developer to understand it.
4. Due to lots of features, the HTML editors have become overcrowded. It is very difficult to know about all the available features and their usage.
5. No HTML editor is complete in itself. As the web standards are updated, these editors start getting obsolete.


No Comments
Jun
17th

HTML Forms

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

Forms are one of the vital elements of HTML. Today almost all the web pages are dynamic and interactive in nature. They are capable of receiving the input from the user and process it. As the e-commerce gained popularity, it became necessary for web developers to create web sites which are capable of taking the input from each user and update their records. For this purpose HTML forms were introduced. A HTML form is like a console where you can provide all the required information and submit it on the web.

To create a form in HTML, <FORM>….</FORM> tags are used. Below is the different attributes of form tag:

1) Action: It represents the URL which will accept the details of the user via form. If this attribute is not mentioned, then it means that the base URL will accept the form. Base URL is that URL where the form is located on the web server.
2) Enctype: It specifies the media type.
3) Method: It indicates the method that will be used for processing the action script. Method has two possible values. One is ‘get’ and other one is ‘post’. Get is used when the form does not make any changes in the database, hypertext or any other value. On the contrary, Post is used when after submission, the form affects the database, hypertext or changes any other value.

Example of form tag:

<FORM Action=http://www.contentmantra.com/submit Method=”POST”> contents of the form </FORM>

In the above example the Action=”http://www.contentmantra.com/submit” specifies the query program to the server on which the particulars of the form has to be submitted.

ELEMENTS of FORM

Form elements build up the contents, design and layout of the form. The different form elements are: INPUT, SELECT, OPTION and TEXTAREA.

A) INPUT: It is used to take input form the user using variety of tools and options. The INPUT element defines the graphical user interface of the form. Via INPUT the web developer can insert drop down menus, radio buttons, text boxes, check boxes etc. In order to specify the type of input, ‘TYPE’ attribute is used. For example:

• <INPUT type=”text” size=”40” name=”content_mantra”>
• <INPUT type=”radio” name=”radio1” value=”M”> Male
<INPUT type=”radio” name=”radio1” value=”F”> Female

B) SELECT and OPTION: It allows the user to choose one option form a set. It is used to insert drop down menus in the form. The OPTION element is used with SELECT in order to make the list of available options. For example:

<SELECT Name=”select1”>
<OPTION> Bangalore
<OPTION> Delhi
<OPTION> Mumbai
<OPTION> Chennai
<OPTION> Gujarat
<OPTION> Patna
</SELECT>

C) TEXTAREA: This element is used to take textual data from the user. The difference between TEXTAREA and INPUT is that in TEXTAREA the user can enter several lines (like while giving feedback for a product), but in INPUT the user can enter only one line (like his name). For example:

<TEXTAREA NAME=”feedback” ROWS=”4” COLS=”40”></TEXTAREA>

The ROWS and COLS indicate the maximum limit to which the user can write in the text area. Another important thing is that with each HTML form element, ‘NAME’ attribute is used. This is very important because while writing the scripts for the form these names are used.


No Comments
Jun
16th

Cascading Style Sheets

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

Cascading Style Sheets (CSS) refer to the language which is used to design the layout and presentation of a web document created in HTML, DHTML, XHTML or any other type of XML document. Via CSS, the designers can define the fonts, colors, styles and overall layout of a web page. CSS improves the web designing work by reducing the complexity. They provide more flexibility and control over the presentation of characters and their style on a web page.

CSS acts as the base platform which is responsible for the format and layout of an HTML document. It allows the same HTML content to be viewed in different styles for different purposes like for print, for web viewing etc. CSS are very useful when the structure of the HTML document is repetitive. For example; if you are making an HTML document in which you have used <Font color=red face=comic sans ms> a lot, then instead of writing this code again and again a CSS can be created in which you can define the type of font you want. This way all the tags and their attributes which helps in designing the appearance and style of the web page such as background styles, borders, character size, heading styles and many more can be defined using CSS. The main advantage of using CSS is that for a single HTML document, multiple CSS can be used. In this way the appearance and layout of the web page can be changed whenever needed in no time. CSS can be used as a separate document or it can be embedded in the HTML.CSS can be created by different people in different styles. It is prepared by both the web authors and the users. The web author makes the CSS having different styles which can be applied to the HTML document. A user prepares a local CSS which is applied to all the documents of a website. CSS are also created in ‘user agent style’ which specifies the default settings for a web browser to display the web page.

Advantages of CSS:

1) CSS allows us to create templates for the HTML documents in which we can predefine different visual styles and appearances.
2) CSS reduces the structural complexity of HTML documents.
3) CSS separates the designing part and the content part of a web page. This leads to the better management and understanding.
4) CSS can be used with any XML language.
5) CSS really helps in managing large websites having a number of interlinked web pages. It assures consistency in the layout and design.
6) CSS can be used to view a web page in different styles depending upon how you will be using the final output. For example; for viewing on web the layout of the web page is different and for printing purposes another layout may be needed.

Apart from these remarkable advantages, CSS suffers from some disadvantages too. There are some issues which creates hindrance while using them. The most common problem is that not all the web browsers support all types of CSS. There are some other issues regarding the expressions and their usage in CSS. Thus, developers are finding more tools and techniques which can improve the functionality of CSS in future. The World Wide Web Consortium (W3C) maintains all the CSS specifications.


No Comments
Jun
13th

Dreamweaver

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

Just like Microsoft FrontPage, Dreamweaver is also a WYSIWYG (what you see is what you get) web development software. It was originally created by Macromedia, but later on in the year 2005 it was owned by Adobe systems. Thus Dreamweaver is now known as Adobe Dreamweaver. This application is used for developing high quality web pages without getting involved in HTML coding. All the designing can be done in the design mode easily.

If we look at the sole objective, there is no difference between FrontPage and Dreamweaver. Both of them offer excellent tools to create exciting web sites. But still, some people prefer Dreamweaver as they find it more interesting, easy and rich in functions than FrontPage. Dreamweaver allows viewing websites in many popular browsers. It has got a variety of tools and functions which can be used to add multimedia in the web pages. For example tools like flash tool, real player tool, windows media player tool and quick time tool can be used to embed and watch movies in different formats on the web sites.

One unique feature of Dreamweaver is that you can configure it to write the HTML code in the way you want. For example; if you want that all the tags should be in bold, then you can configure the Dreamweaver to generate the code in that way. Dreamweaver also supports syntax highlighting for the codes. It makes it easy to use java scripting and DHTML to control the behavior of different objects. There is a library which makes it comfortable to use and modify an HTML element which has been repeatedly used in different web pages of a web site. For example; suppose you need to use and design a navigation table on every page of your web site. In that case instead of putting the formatting the table on every page, you can define it in the Dreamweaver library. Once added in the library, you need to put the table and design it on any one page of the web site and it will automatically get added and updated on the rest of the web pages.

Apart from this, Dreamweaver supports a lot of other useful functions such as CSS, templates, forms, tables, automatically updatable hyperlinks, interactive frames, rollover images and much more. Adobe Dreamweaver can be used on both Macintosh and Windows operating systems. The recent version of the application has been improved to support CSS, java scripts, ASP.NET, ColdFusion, java server pages and PHP. Overall, Dreamweaver is fully power packed with captivating features. This program is used worldwide and is a real head turner. It is a mighty competitor of FrontPage.

The whole look and design of Dreamweaver is better than any other HTML editor. FrontPage 2003 supports Dreamweaver compatible web templates. You can use both of them creatively to make stunning web pages. Dreamweaver has been improved to work hand in hand with Microsoft Word and Excel. The latest version of Adobe Dreamweaver, Dreamweaver CS3 is fully loaded with high end features such as fireworks, spry effects, browser compatibility check, CSS management and lots more. No doubt, Dreamweaver is all time favorite of most of the web designers and HTML professionals.


No Comments
Jun
11th

DHTML

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

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.


No Comments
Jun
10th

Applets

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

An applet is a small piece of software code, which runs in the web browser. It is developed to perform a very specific function. An applet cannot run independently; it proves to be useful only when it is used with some other applications such as HTML, DHTML etc. Applets are written in Java language and they can be embedded within the HTML page. To execute the applet web browsers use a virtual engine known as Java Virtual Machine (JVM). Applets should not be confused with general programs written in different programming languages.

They are different from the programs. The major difference between the two is that unlike the applets, the programs can run independently. An applet is written in a different language. It is used with the HTML documents and other programs but is not written in HTML or any other language. HTML only provides static web pages and with the help of scripting it can be enhanced a little more. But this does not result in the state of the art web sites, which we see today. The web pages have changed a lot since their evolution. Everyday the Internet users are expecting the websites to give them more interactive features and options. The use of websites is now far more than just e-mailing and reading information on them. A lot of multimedia components such as streaming video, audio, dynamic pages, sounds, slideshows, smileys etc are used to make the web pages more useful and captivating. These multimedia components are invoked with the help of applets. For example, java applets, flash movies, fireworks, shockwave, windows media player applets etc. are used to embed a variety of real time animations and videos that are rich in colors and sound effects in the web pages. Applets are helping professionals in different fields. Applets can be used for creating 3D simulations of an object. They make it possible to give a 360o view to the end users which helps them to understand the product features more efficiently by rotating and zooming in or out. Not only the programs, but most of the online games are also using applets to increase its performance.

Some more advantages of the applets are:

  • As the applets run independent of the platform, thy can be used on different operating systems such as Windows, Unix, Linux and Mac OS.
  • Applets are supported by a number of different web browsers like Microsoft Internet Explorer, Apple Safari, Mozilla Firefox and Netscape Navigator etc.
  • Applets shift the work load from server to the client. Thus they are helpful in increasing the performance and scalability of the web servers.

Applets have changed the whole look and end user’s perception about the Internet. They have become inseparable elements of web surfing now a days. The only major issue with the applets is that they need Java plug-ins and Java Virtual Machine (JVM) to operate. Applet cannot work without JVM, and JVM itself takes time when started for the first time. Companies are considering these issues and are trying to improve and reduce the latency time of JVMs. In the near future, the applets will extend the dimensions of entertainment on the web.


No Comments