HTML.co.uk

While surfing the web we come across different types of data. Some of them are presented in the form of paragraphs while some information is presented in the form of lists. Lists provide the content more visibility, readability and understandability. It also improves the overall look of the web site. In HTML documents different types of lists can be inserted. There are countless number of designs and styles, which can be applied to a list. Broadly speaking, HTML lists can be classified into three main categories. One is ordered lists (also known as numbered lists), second one is unordered lists (also known as bulleted lists) and the last one is glossary lists (also known as definition lists).

Ordered lists are those in which each list item is numbered in either an ascending order or in descending order. The HTML tags which make up the ordered lists are <OL>……</OL>.

Example code of ordered list:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</OL>

The <LI> tag is always used within the <OL> tag. It represents the list items which have to be displayed. It’s not necessary that the numbered lists always put numerical in front of the each list item. You can also use alphabets and roman signs to them. In order to add these you can use the ‘TYPE’ attribute with <OL>. You can also start a list directly from any number or any alphabet by using ‘START’ attribute. Below is a comprehensive example explaining how to create different kinds of ordered lists.

HTML Code:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”A”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”a” START=”b”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”i”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”I” START=”!!!”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

It is clear that:

1) “1” specifies the standard Arabic numerals to be used in the ordered list.
2) “a” specifies the lowercase alphabets to be used in the ordered list.
3) “A” specifies the uppercase alphabets to be used in the ordered list
4) “i” specifies the lowercase Roman numerals to be used in the ordered list.
5) “I” specifies the uppercase Roman numerals to be used in the ordered list.

So far we have seen that the ordered lists numbers the list items in a flow like 1, 2, 3, 4 etc. or a, b, c….etc. but we can also break the sequence and directly jump to any number or alphabet of our choice. For this purpose we have to use ‘VALUE’ attribute with the <LI> tag. For example:

<OL TYPE=”1” START=”2”>
<LI> Content </LI>
<LI> Resume </LI>
<LI VALUE=”10”> Blogs
<LI> SMO
</OL>

Like the ordered lists, the unordered or bulleted lists are also used to present the data in a more meaningful, readable and understandable way. Unlike the ordered lists the unordered ones puts a bullet instead of a number or alphabet in front of every list item. The HTML tags used to create the unordered lists are <UL>…</UL>. Unordered lists can also be used in a variety of styles. By default most of the web browsers use bullets to delineate unordered list items. Some text browsers such as Lynx put an asterisk sign before the unordered list item.

Example code for creating an unordered list:

<UL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

The output of the above code will be as follows:

• Content
• Resume
• E-Book
• Blogs
• SEO
• SMO

Instead of simple bullets we can also use other symbols as far as they are supported by the web browser. In order to accomplish this we have to use ‘TYPE’ attribute with the <UL> HTML tag. For example:

<UL TYPE=”SQUARE”>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

Using the above HTML code we will get the following output:

• Content
• Resume
• E-Book
• Blogs
• SEO
• SMO

We can also use different types of symbols in the same unordered list and ordered list with the bulleted one. A sub-list under a main list can also be created. This process is popularly known as nesting of lists and such kind of lists are called ‘Nested Lists’. Below is a comprehensive example of a nested list which consists of both the numbered and bulleted styles.

HTML Code:

<HTML>
<OL TYPE=”I” START=”V”>Guess what we will be discussing today?
<OL TYPE=”1”>
<LI> Its all about vegetables </LI>
<OL TYPE=”A”>
<LI> Carrot
<UL>
<LI> Its red in color </LI>
</UL>
<LI> Tomato </LI>
<UL TYPE=”CIRCLE”>
<LI>Its also red in color </LI>
</UL>
<LI> Potato </LI>
<UL TYPE=”SQUARE”>
<LI> It’s the odd one out as it is brown in color </LI>
</UL>
</OL>
</OL>
</OL>
</HTML>

In this way we can try infinite combinations of tags to design our lists. Nested lists can be made more beautiful if non-breaking spaces i.e. < & nbsp > is used. It will increase indents and the sub-lists will be easily presented under the main ones.

World Wide Web Consortium, popularly known as W3C is an international organization which formulates policies and lays down the standards for World Wide Web (WWW or W3). W3C is in fact a consortium where all its members work together towards the development of WWW standards.

Why W3C was formed?

W3C was formed by Tim Berners-Lee in October 1994. It was created to develop universal standards for developing HTML documents. Before the evolution of the consortium, every vendor was providing a different version of HTML documents. This lead to web page incompatibilities and the purpose of Internet (that everybody should be connected) was getting into somber. Thus, there was an immediate need to standardize the process of web site creation. Now a days W3C develops interoperable technologies, specifications, guidelines, software and tools with an aim to enhance and utilize the web in a best manner.

W3C Members:

W3C is an international organization having a large number of members who are dedicated to manage and design the specifications for web. These efforts are made in order to ensure that people form different backgrounds and cultures can access the utilize the web easily. W3C is hosted by three universities:

1) Massachusetts Institute of Technology, U.S.
2) The French National Research Institute, Europe
3) Keio University, Japan

There is no individual or a single organization or a group of organizations which own W3C. Every member of the consortium holds equally important position. Some of the well known members of this consortium are IBM, Microsoft, America On Line (AOL), Apple, Adobe, Macromedia, Sun Microsystems and much more which includes a large number of software vendors, content providers, telecommunications companies, corporate users, networking companies, international carriers like AT&T, academic institutions, research laboratories, government bodies, electronics and hardware companies etc. In total, there are 425 members of W3C till date (June 2008).

Goals of World Wide Web Consortium or W3C:

As mentioned above, the W3C is continuously engaged in the development of standards for the web. These standards are developed keeping in mind certain long term objectives. Following are the goals which form the basis of the standards developed by W3C:

1) Web for Everyone: W3C believes in non-discrimination and aims at giving equal opportunities to all the human beings irrespective of their caste, sex, religion, and their social and ethnic values. Thus, this consortium lays down some standards which make the web pages easily accessible to all the people.
2) Web on Everything: With the growth of telecom sector and communications technology now apart from the PC, there are a large number of devices which can support internet surfing. W3C develops standards and protocols to support the internet on these kinds of devices such as PDAs, Smart phones, Tablets etc.
3) Knowledge Base: W3C aims at enhancing the web content and its processing via databases and scripts so that people can use the internet as a useful knowledge source.
4) Trust and Confidence: W3C also lays down the standards for internet security and privacy so that people can confidently involve into activities like e-commerce.

Apart from creating the new ones, W3C also updates its existing standards whenever required and it is recommended that the web developers conform to these standards while creating HTML documents.

Glossary lists are those lists which are used to represent main terms along with their definition in HTML documents. These kinds of lists are used to make glossaries also. Glossary lists (also known as Definition lists) are different from the ordered lists as well as unordered ones in a way that it formats the content in a special way so that it looks like a list of items along with their description.

Glossary Lists have two main parts:

1) The Term
2) The Term’s Definition

The term is the main entry and the term definition is the description of that entry. In order to make a glossary list the <DL>…….</DL> tags are used and to insert the term and term definition <DT>…</DT> and <DD>…..</DD> tags are used.

Sample Code for creating Glossary lists:

<DL>

<DT> Natural Language Search Engines </DT>

<DD> These search engines allow the users to submit search phrases in natural languages such as English, Hindi, Japanese, Chinese, French and German etc. </DD>

<DT> Subject Directories Search Engines </DT>

<DD> These search engines present the results of searches in hierarchical subject categories instead of listing them in any order by how relevant the search engine thinks the site is to the search. </DD>

<DT> Subject Guide Search Engines </DT>

<DD> These search engines contain links of many important resources on a topic. They differ from subject directories search engines in the same sense that their search request interface has forms that contain databases of sites on many subjects, organized into a subject classification scheme. </DD>

<DT> Meta Search Engines </DT>

<DD> These search engines do not create their own databases but make use of the databases of other search engines. They quickly process the user’s search request by invoking several individual search engines at once and return the results complied into a convenient format. </DD>

</DL>

The output of the above code is as follows:

Natural Language Search Engines
These search engines allow the users to submit search phrases in natural languages such as English, Hindi, Japanese, Chinese, French, and German etc.

Subject Directories Search Engines
These search engines present the results of searches in hierarchical subject categories instead of listing them in any order by how relevant the search engine thinks the site is to the search.

Subject Guide Search Engines
These search engines contain links of many important resources on a topic. They differ from subject directories search engines in the same sense that their search request interface has forms that contain databases of sites on many subjects, organized into a subject classification scheme.

Meta Search Engines
These search engines do not create their own databases but make use of the databases of other search engines. They quickly process the user’s search request by invoking several individual search engines at once and return the results complied into a convenient format.

We can also use the ‘COMPACT’ attribute of

tag in case the definition terms are very short. List nesting can also be done in glossary lists with the help of ordered and bulleted lists within it.

Both the checkboxes and radio buttons are generally used when we create forms in HTML documents. Checkboxes are small sized squares and the radio buttons (which are also known as option buttons) are small sized circles. The main difference between the checkbox and the radio buttons is that the former is used to select one or multiple options simultaneously while the latter is used to select only one option at a time from a given set of alternatives.

Inserting the check boxes:

In HTML documents, the checkboxes can be inserted with the help of <input /> with appropriate attributes. For example:

<INPUT TYPE=”checkbox” NAME=”food” VALUE=”potato”> Potato
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”tomato”> Tomato
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”carrot”> Carrot
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”soup”> Soup
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”sweets”> Sweets
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”salty”> Salty

The user can choose any one of the above choices or it can select more than one. The TYPE=”checkbox” tells HTML that there should be a checkbox. The NAME and VALUE attribute is used at the time of scripting. Name also indicated that these options are of same category i.e food. All the options of the same category should have the same NAME.

Inserting the radio buttons:

For the radio buttons also we have to mention the type with the input tag. For example:

<INPUT TYPE=”radio” NAME=”clothes” Value=”western”> Western
<INPUT TYPE=”radio” NAME=”clothes” Value=”Indian”> Indian
<INPUT TYPE=”radio” NAME=”clothes” Value=”fusion”> Fusion

The user can select any one of the above option. Note that in the HTML code the NAME of all the options are same i.e. clothes. This tells the HTML that these options are under the same category and only one of them can be selected at a time. If the name is differs, then HTML will consider each of the options under different categories and the user will be able to select all of them. Thus, the naming should be carefully done. Each option under the same category must have a same name and two different categories should not have the same name.

The SELECT Tag:

So far we have seen that how the checkboxes and radio buttons can be used to provide the user with an array of different options to choose from, but the main disadvantage of checkboxes and radio buttons is that both of them occupies a screen space as per the number of options. Imagine if there are hundred options then how much space the checkboxes or radio buttons will take? It will ruin the look of the web page. In order to solve this issue there is one more option which we can use and i.e SELECT tag. It inserts a drop down menu in the web page which can contain infinite number of options without affecting its size.

HTML code for using SELECT Tag:

<SELECT NAME=”drink”>
<OPTION> Coke
<OPTION> Pepsi
<OPTION> Mirinda
<OPTION> Sprite
</SELECT>

The <OPTION> tag is always used with the SELECT in order to list the options in the drop down menu. There is no need to close this tag with a / sign.

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.

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.

Tables are used in web pages to present the information in a more useful way. Information about lists, calendar, mark sheets, product catalogue etc. can be easily provided with the help of HTML tables. Tables make it easy for the user to identify the relevant information quickly. If you want to put some details category wise, then tables are the best choice. HTML tables can be created in various designs, sizes, patterns and colors, but there are some common attributes which forms the basic structure of any table. Table can be inserted in HTML using <TABLE>….</TABLE> tags.

The basic elements of TABLE are:

1) TR (Table Row): It is used to enter rows in a table
2) TD(Table Data): It is used to enter data in the table
3) TH (Table Header): It is used to give headings in the table
4) CAPTION: It is used to give a caption to the table

Below is a HTML code used to create a simple table:

<HTML>
<TABLE>
<CAPTION>Content Mantra</CAPTION>
<TR><TH>Sn.no</TH><TH>Services</TH><TH>URL</TH></TR>
&ltTR><TD>1</TD><TD> Blogs </TD><TD>mantrablogs.com</TD></TR>
<TR><TD>2</TD><TD>Content writing </TD><TD> contentmantra.com</TD></TR>
<TR><TD>3</TD><TD>Resume writing</TD><TD>contentmantra.com</TD></TR>
<TR><TD>4</TD><TD>E-book</TD><TD>contentmantra.com</TD></TR>
</TABLE>
</HTML>

The output of the above code is as follows:

By default the TH element is marked as ‘Bold’ and it is aligned towards the center and the TD elements are aligned towards the left. Apart form the simple tables you can also create the complex ones having attractive layout and design. Different attributes which are commonly used to design and format the tables are:

1) Align: It is used to set the horizontal position of the table (not its contents). The values used with align are bleedleft, bleedright, center, justify, left and right. If Align is used with the TD and TH elements, then it will affect the contents of the table.
2) Border: This attribute is used to design a border for the table. The thickness of the table can be adjusted with the help of integers.
3) Cellpadding: This attribute is used to give spacing between the cells if a table.
4) Cellspacing: It is used to give spacing between the cells and the data contained in the cells of the table.
5) Width: It is used to define the overall width of the table.
6) Colspan: It is used with the TD and TH elements to specify the number of columns the cell spans.
7) Rowspan: Used with TH and TD to specify the number of rows the cell spans.
No wrap: The contents of the cells are not wrapped. It is also used with TD and TH
9) Valign: Used with TD and TH in order to define the vertical alignment of data within a cell. The possible values which can be used with Valign are top, middle and bottom.

HTML code for a Table using different attributes:

<HTML>
<TABLE border=”2” cellpadding=”3 cellspacing=”3”>
<CAPTION>Content Mantra</CAPTION>
<TR><TH>Sn.no</TH><TH>Services</TH><TH>URL</TH></TR>
<TR><TD Align=”center” >1</TD><TD Align=”center”> Blogs </TD><TD Align=”center”>mantrablogs.com</TD></TR>
<TR><TD Align=”center”>2</TD><TD Align=”center”>Content writing </TD><TD Align=”center”> contentmantra.com</TD></TR>
<TR><TD Align=”center”>3</TD><TD Align=”center”>Resume writing</TD><TD Align=”center”>contentmantra.com</TD></TR>
<TR>
4</TD><TD Align=”center”>E-book</TD><TD Align=”center”>contentmantra.com</TD></TR>
</TABLE>
</HTML>

Output of the above code: