The Guide - Hypertext Markup Language(HTML) :

Hypertext Markup Language(HTML) : - A Tutorial Part 3
by Dr. T V Gopal Assistant Professor School of Computer Science and Engneering Anna University Chennai - 600 025 INDIA gopal@annauniv.edu

Introduction

Part 1 and Part 2 enabled you to create attractive multimedia documents that make reading on the web a pleasure. This part discusses certain advanced features such as lists, tables, frames and forms.

Lists

Often, you may find it necessary to display a list of things. HTML allows you to create such lists. In fact, it allows you to create three kinds of lists. They are,

Ordered list
Unordered list
Definition list

Ordered List : These lists are very similar to the numbered lists created in MS Word. In this case the item is preceded by a Arabic numeral (1,2,3 ….), upper or lower-case Roman numeral ( i, ii, iii, I, II, III…) or by upper or lower-case alphabet (a,b,c, A,B, C….). These lists are enclosed between the <OL> and the </OL> tags. Further, each list item is preceded by <LI> tag.

For example :

<OL>

<LI>Apples

<LI>Grapes

<LI>Oranges

</OL>

will be displayed as

Apples

Grapes

Oranges

HTML also allows you specify how you want to number your lists. This can be done by using the TYPE attribute with the <OL> tag. Listed below are some of the values and their effect when used with the TYPE attribute.

TYPE = "1"	1,2,3,…
TYPE = "A"	A,B, C,…
TYPE = "I"	I, II, III,…
TYPE = "I"	i,ii,iii,..

You can use the START attribute to specify the starting number of the list.

For example,

<OL TYPE = "1" START = "4"> will display the list as 4,5,6,…

Unordered List : These are like the bullet points created using MS Word. In this case, a round or square bullet precedes the list item. These lists are enclosed within the <UL> and the </UL> tags. Each list item is preceded by the <LI> tag.

For example:

<UL>

<LI>Potato

<LI>Radish

<LI>Onion

</UL>

Potato
Radish
Onion

The TYPE attribute can be used with the <UL> tag to specify the bullet style. TYPE = "Disc" displays a small disc. TYPE = "Square" displays a solid square and TYPE = "Circle" displays a hollow circle.

Definition Lists : As the name indicates, these lists are used for defining terms. They are enclosed within the <DL> and the </DL> tags. Each definition term is preceded by the <DT> tag and each definition is preceded by the <DD> tag.

For example,

<DL>

<DT> Dir

<DD> MS - DOS command used to display the contents of a disk.

<DT>Copy

<DD>MS – DOS command used to make a duplicate copy of files.

<DT> Del

<DD> MS – DOS command used to delete files.

</DL>

will be displayed a

Dir

MS - DOS command used to display the contents of a disk.
Copy: MS - DOS command used to make a duplicate copy of files.
Del: MS - DOS command used to delete files

The Anchor Tag and Images

Probably the most exciting and compelling aspect of HTML is its ability to link documents. A link is a part of document that you can click on to go to another document. The link may be to another document on your computer itself or to a document or a site on the web. If it is a link to a document on the web, then, to use to the link you should have an Internet connection. The link may also be to an image.

The following HTML code creates a link to an image

<HTML>

<HEAD>

<TITLE> Creating Links to an image </TITLE>

</HEAD>

<BODY>

<A HREF ="carpic.gif"> Click Here</A>

to see a Zen car.

</BODY>

</HTML>

Fig 3.1 A link to an image

When you click on the link, the browser will display,

Fig 3.2 Carpic.gif.

Tables

Information, when presented as a table is easier to read than when presented as continuous text. You can display information as a table using HTML. You can add a table to your document by using the <TABLE> and the </TABLE> tags. The <TABLE> tag is usually used with the WIDTH, CELLSPACING, CELLPADDING and the BORDER attributes.

The WIDTH attribute is used to specify the width of the table. Its value is usually given in as a percentage, so that, if the size of the browser window changes, the table resizes accordingly.

The CELLSPACING attribute is used to specify the space between cells. Its value should be given in pixels.

CELLPADDING refers to the space between the border of the cell and its contents. Its value should also be in pixels.

The BORDER attribute specifies the thickness of the border around the table. It should also be given in pixels. If BORDER = "0", no border will be visible.

Tables are created row by row. The first row is started, its cells created, the row is closed, then the second row is started, its cells created and so on. The <TR> and </TR> tags are used to open and close a row. The <TD> and </TD> tags are used to create a cell in a row. The <TH> and </TH> are also used to create a cell in a row. The contents of the cell created using <TH> tag appear bold and in the center of the cell. They are usually used for row and column heading in a table.

Let us understand this better by creating the table shown below.

City	Max.Temp	Min. Temp	Rainfall
Chennai	32	27	1
Calcutta	32	24	5
New Delhi	33	17	0
Mumbai	32	24	3

This table has 5 rows and 4 columns. The rows will be created first and then the cells. The HTML code to create the table is given below.

<HTML>

<HEAD>

<TITLE> Creating a Table </TITLE>

</HEAD>

<BODY >

<TR>

<TH>Rainfall</TH>

</TR>

<TR>

<TD>Chennai</TD>

</TR>

<TR>

<TD>Calcutta</TD>

</TR>

<TR>

<TD>New Delhi</TD>

</TR>

<TR>

<TD>Mumbai</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Fig 3.3 HTML document containing a Table

The ALIGN attribute can be used with the <TD> and <TH> tags to align the contents of the cell to left, right, center or justified. The BGCOLOR attribute can be used to the background colour for that cell.

For example,

<TD BDCOLOR = "Red" ALIGN = "Center"> Chennai </TD> will display Chennai in the center of cell with a red background.

3.4 Frames

All the pages that we have created so far have occupied the entire browser screen. HTML also allows you to divide the browser’s window into different parts, so that, you can display different HTML documents at the same time. The different parts that the screen is divided into are called Frames. It is important to remember that not all browsers support frames and even those which do, may not display the page in the same way.

Frames can be created by using the <FRAMESET> and the </FRAMESET> tags. HTML documents using frames have a slightly different structure. They do not have the body tag. Instead they have a <FRAMESET> tag.

Two attributes are used with the <FRAMESET> tag to specify its size. They are COLS and ROWS. Their values can be given either as pixels or percentages. Remember the advantage of using percentages is that when the size of the browser window changes, these values also change correspondingly. An * indicates the rest of the browser window. Given below are some examples.

<FRAMESET COLS= "25%,75%"> will divide the window into 2 – the first column occupying 25% of the window and the second 75%.

<FRAMESET COLS= "50%, 10%, *"> indicates that the window will be divided into three parts. The first part will be 50% wide, the second 10% and the third part will occupy the rest.

<FRAMESET ROWS= "25%,75%"> will divide the screen horizontally into two parts.

The <FRAME> tag with the SRC attribute is used to specify the name of the HTML document to be displayed in each of these frames.

For example,

<HTML>

<HEAD>

<TITLE> Working with Frames </TITLE>

</HEAD>

</NOFRAMES>

</FRAMESET>

</HTML>

will be displayed as

Fig 3.4 HTML document with 3 Frames.

The </NOFRAMES> tag is used to specify alternate text for browsers that do not support frames.

To make your HTML document more interesting you can create a link between frames. Once this is done, by clicking on a link in a frame will display the linked page in the other frame.

Let us understand this better with an example.

Consider the HTML codes listed below.

<HTML>

<HEAD>

<TITLE> Working with Frames </TITLE>

</HEAD>

</NOFRAMES>

</FRAMESET>

</HTML>

This is the main document that creates the frames and specifies the documents to be displayed in each frame. In this case, there are 2 frames. The document "Main.html" is to be displayed in the left frame and the document "RBG.html" in the right frame. The NAME attribute used with the second <FRAME> tag simply names the second frame as "RBG". This name can be anything and will be used later to specify where other documents are to be displayed.

"RBG.html" is a very small file. It displays the message "Click on the colour of your choice".

<HTML>

<HEAD>

</HEAD>

<BODY >

<H3> Click on the colour of your choice </H3>

</BODY>

</HTML>

The contents of "Main.html" are

<HTML>

<HEAD>

</HEAD>

<BODY >

<UL>

<LI> <A HREF = "Green.html" TARGET = "RBG">Green</A>

</UL>

</BODY>

</HTML>

This code displays a list of 3 links. The TARGET attribute is used with each link to specify the frame in which the linked document should be displayed. Note that the frame name "RBG" that we specified in "Main.html" is being used here.

When the code "Main.html" is displayed using a browser, the screen looks as shown below.

Fig 3.5 The first frame contains a list

The file "Red.html" contains the following code.

<HTML>

<HEAD>

</HEAD>

<BODY >

<H1> <FONT COLOR = "Red">Red Colour </FONT></H1>

Roses are red.

</BODY>

</HTML

So, when you click on the link "Red", the display changes to

Fig 3.6 Red.html

The file "Blue.html" contains the following code.

<HTML>

<HEAD>

</HEAD>

<BODY >

<H1> <FONT COLOR = "Blue">Blue Colour </FONT></H1>

The sky is blue.

</BODY>

</HTML

So, when you click on "Blue", the browser will display

Fig 3.7 Blue.html

"Green.html" contains

<HTML>

<HEAD>

<TITLE> Green.html </TITLE>

</HEAD>

<BODY >

<H1> <FONT COLOR = "Green">Green Colour </FONT></H1>

Grass is green.

</BODY>

</HTML>

When you click on the link green, the browser will display

Fig 3.8 Green.html

Forms

While browsing, you must have come across web pages that expect some sort of input from you. This input may be some information like login name, password, credit card number and so on. Such interactive documents can be created using a feature of HTML called Forms. These forms are very similar to the paper forms that you fill up in schools, banks, etc..

Let us use the example of Hotmail to understand how forms work. Hotmail is a free e-mail site. Anyone can create a Hotmail account and send and receive mails. To go to the site, type Hotmail.com on the Address bar of your browser and press Enter. The home page of the Hotmail site opens in front of you.

Fig 3.9 The Hotmail home page

This page displays two text-box controls and waits for the user to enter his Login name and password. Once the user fills up the information, the browser sends it to the Web server. The web server, in turn, passes on this information to a specified program. This program processes the information received and takes the necessary action. In this case, it will verify the user name and password and displays the next page which may either be an error message or the contents of the user Hotmail account.

There are two steps involved in using forms. The first step is to create and format the controls used in the form. This can be done using HTML tags and attributes. The second step is processing the information. This is done by CGI (Common Gateway Interface) programs. These are programs written in languages like C, C++, JAVA and Perl.

To create forms, the <FORMS> and </FORMS> tags are used. The attribute ACTION is used to specify the URL to which control should be passed. The attribute METHOD is used to specify whether information should be sent or received from the URL specified.

Let us learn how to create a few simple controls.

Buttons

These are the simplest of the controls used in forms. These are very similar to the OK or Cancel buttons used by Windows in its dialog boxes. In HTML, a button is used to indicate that the user has finished with a current form and some further can be taken. The "Sign In" button on the Hotmail home page is an example of this type of button.

To create such a button, the <INPUT> tag is used. The attribute TYPE is used to specify the action to be taken. TYPE = "Submit" tells the browser to pass on the information in the form to the URL indicated in the <FORM> tag. TYPE = "Reset" tells the browser to ignore the contents in the form and to reset all the fields to their default values.

Here is an example that shows these buttons.

<H3>This is an example to illustrate the use of Buttons</H3>

</FORM>

The attribute in the <FORM> tag indicates that the information in the form should be passed to abc.net. As mentioned earlier, a form can also contain normal text with other tags. The heading is an example of this. The first <INPUT> tag creates the submit button and the second the reset button.

The browser displays this as follows.

Fig 3.10 A HTML document with Buttons

Text boxes

Text boxes are probably the most frequently used controls in forms. A text box is simply a box into which the user can enter his input text. To create a text box, the <INPUT> tag is again used. But, now, the TYPE attribute should have the value "TEXT". Other attributes associated with text boxes are :

NAME – this attribute is used to specify a name for the field into which the text being entered should be stored.

SIZE – The SIZE attribute is used to specify the size of the text box. Its value is given as a number of characters.

VALUE – This attribute is used to specify a default value for the text box.

Here are a few examples to illustrate the use of text boxes.

Example 1 :

The HTML code,

Enter your name : <INPUT TYPE = "Text" NAME = "Name">

will create a text box as shown below.

Fig 3.11 A form with a text box

Example 2:

Your favorite Web site :<br>

will be displayed as

Fig 3.12 A form with a text box.

Password controls

Have you seen forms that ask you to type your password but when typed, display a series of asterisks? Such text boxes can be created by giving TYPE = "PASSWORD". Now, the characters being entered will not be displayed on the screen.

Enter your password : <INPUT TYPE = "Password" NAME = "Passwd">

will be displayed as

Fig 3.13 A form with a password control

Check Boxes

In the Windows chapter, you have learnt about check boxes. These boxes are used to enable or disable an option. In HTML, such boxes can be created by using

TEXT = "CHECKBOX"

For example,

<INPUT TYPE = "Checkbox" NAME = "Ckbox"> Remember Password

In this case, "Remember Password" will be the label displayed with the check box. The browser will display this code as shown below.

Fig 3.13 A form with a Check box.

You can enable the option by clicking on the small square. A tick mark in the check box indicates a selected option.

Radio Buttons

You have also learnt about Radio buttons in Windows. They are used to allow the user to choose one of the options displayed. To create radio buttons, the attribute TYPE is given the value RADIO. The VALUE attribute is used to specify the value to be stored in the variable if an option is selected. CHEKED attribute can be added to make one of the options the default option.

For example,

You wish to be intimated by <BR> <BR>

<INPUT TYPE = "Radio" NAME = "Optn" VALUE = "ph" CHECKED> Telephone

<INPUT TYPE = "Radio" NAME = "Optn" VALUE = "pst"> Post

<INPUT TYPE = "Radio" NAME = "Optn" VALUE = "cr" > Courier

Note that the same field name is used in all the three statements. This is because, only one of them will be used.

This will be displayed as

Fig 3.14 A form with 3 Radio buttons

Multi-line Text Area

These controls are used when the input from the user may extend to several lines. In this case, instead of the <INPUT> tag, the <TEXTAREA> and </TEXTAREA> tags are used.

For example, to create a text area of 6 lines and 40 columns,

<TEXTAREA ROWS = "6" COLS = "40" NAME = "Comments"> Please enter your comments here. </TEXTAREA>

This will be displayed as follows.

Fig 3.15 A form with a Multi-line text area

Menu Controls

Menu controls are like the drop-down lists used in Windows dialog boxes. Such menu controls can be created using the <SELECT> and the </SELECT> tags. The <OPTION> tag is used to specify the different options in the list.

For example,

Your favorite vegetable :

<OPTION> Potato

<OPTION> Brinjal

<OPTION> Radish

<OPTION> Drumstick

<OPTION> Capsicum

</SELECT>

This code will create a drop down list with 5 elements.

Fig 3.16 A form with a Drop-down list box

List boxes can also be created using the <SELECT> tag. To do so, use the <SELECT tag with the SIZE attribute.

For example,

<OPTION> Potato

<OPTION> Brinjal

<OPTION> Radish

<OPTION> Drumstick

<OPTION> Capsicum

</SELECT>

will create a list box as shown below.

Fig 3.17 A form with a list box.

Hosting Your Web Page

So far you have learnt to create an HTML document on your computer. Now, only people who can use your computer will be able to see it. This is true even if you have an Internet account. If you want the millions of Internet users to see you page, you have to make your page a part of the Web. This process is called Hosting. You can either host a single page or create an entire site for yourself. Hosting a page is a fairly simple process. Hosting a site is a more complicated and costly proposition.

Hosting means transferring your HTML code from your machine to a server. To do this, you should have some space on the server. Normally, server space costs money. But, with the increasing popularity of the web, many sites give you free space to host your pages. Some of these sites are Yahoo.com, Rediff.com, AngelFire.com, ListBOT.com, etc.. These sites ask you a series of questions and walk you through the process of hosting your page. Once you page is hosted, you can see it using your browser, like any other web page. And so can millions of other users.

Advanced Concepts and trends

HTML has become popular today. However, there have been minor differences in the tags supported by different browsers. Thus, there was a felt need to define the set of standard tags for HTML. The current standard is HTML 4.0. The intention is to ensure that all the browsers adhere to the same names of the tags and attributes specified in the standard. This would ensure that all browsers display the HTML page similarly. This is still not a reality. There are browser specific tags and attributes. It is wise to see how the document is displayed using more than one browser before hosting it on the web.

You have learnt that an image can be used in an anchor tag to act as a link. The browser clues the user in some special way that the image is a link. The user simply clicks on the image and goes to the link. HTML allows you to define different links for different parts of the same image. As the mouse moves over a part of the image, the corresponding link is clued. These are called mouse-sensitive images or image maps.

HTML documents can be made searchable based on specified index terms provided by the user. Identification of these terms is rapidly becoming a profession in itself.

HTML has a provision for including Visual basic script, Java script and Active X controls within the document. This is done using the <OBJECT> and <APPLET> tags. Using these facilities makes the documents interactive. You can also include several advanced features in the document.

There are two important trends to note. One is DHTML and the other is XML. DHTML stands for Dynamic HTML and it achieves the effect of using the script languages by providing special tags. XML is an emerging standard and is being used primarily to work with the data contained within the documents. These documents may be done in HTML. XML is promising but is currently being used to work on retrieving and storing data within the documents on the server.