<Previous Lesson


Next Lesson>




Hypertext links are used to connect HTML documents. Text can be links. Images can be links. Links can by used for email also. An attribute ‘href’ is used in anchor tag <A>, and its value is set as the URL of a web page or a file name which is required to be opened by clicking the hyperlink. Content enclosed between <A> and </A> becomes clickable. See the following example: <HTML> <BODY> <H1>Computer Science</H1> Welcome to <A HREF=http://www.vu.edu>Virtual University</A> in Pakistan </BODY> </HTML>

Result is shown in Fig. 1 below

. Fig. 1 In order to create a mailto link, one should use the following syntax: <A HREF=mailto:vtv@hotmail.com> email address</A>

Changing colors in a page

In order to provide a specific background color to a web page, an attribute ‘bgcolor’ is used in the body tag. We can also use ‘text’ and ‘link’ attributes, respectively, in the body tag to assign font colors to our text and hyperlinks, as indicated below: <BODY bgcolor=“Green” text=“white” link=“red”> Instead of giving the color name as value of ‘bgcolor’ one can also provide value in terms of a six digit code based on hexadecimal numbers called RGB values, e.g, #00FF00 refers to pure green color. RGB values are set according to following rule:

Red Green Blue

Where we want to provide an image as a background for the page then the ‘background’ attribute is used in the body tag keeping its value as the name of that image file, e.g, <BODYbackground=“filename”>. Consider the following example: <HTML> <BODY bgcolor=yellow text=red link=blue > <H1>Computer Science</H1> Welcome to <A HREF=http://www.vu.edu>Virtual University</A> in

24 Pakistan </BODY></HTML>

Result is shown in Fig. 2 below.

Fig. 2

Meta information

Meta information is the information about the web page content, and is located in the <HEAD> of your HTML documents. It helps make documents easier to locate through search engines. Meta tag is used within the head tag for this purpose, as shown in the example below: <html> <head> <title>Introduction to e-commerce</title> <Meta name=“description” content=“Ecommerce is a newly emerging field that uses internet as a medium of communication”> <Meta name=“keyword” content=“e-commerce, internet, medium, communication”> </head> <body> Page goes here</body></html>


Tables are used largely for page layout as well as for displaying information systematically. Any content that can go in the body of an HTML page can go inside of a table. It must accommodate the content put inside it. Tables are built row-by-row from the top to the bottom of the table.

Basics tags

Tables use the basic tag <Table> and </Table>. All other table tags fit between these two tags. <TR> (table row tag) and </TR> (corresponding end tag) are used to create/add a row. <TD> (table data tag) and </TD> (corresponding end tag) are used to divide a row into number of columns to create cells. <TH> (table header tag) and </TH> (corresponding end tag) labels each column as a heading. To provide the caption of a table <caption> and </caption> can be used. A basic 2 row, 2 column table <HTML><BODY><Table Border=1><TR><TD>Cell1</ TD> Cell 1 Cell 2 <TD>Cell2</TD></TR><TR> Cell 3 Cell 4 <TD>Cell3</TD><T>C ell4</TD></TR></Tab le></BODY></HTML >


Spanning text across multiple rows or columns

Attributes ‘colspan’ and ‘rowspan’ are used in <TD> tag for spanning the cells to a particular no. of columns or rows, respectively, as is shown in the examples below: <HTML> <HEAD><TITLE> Example - COLSPAN </TITLE> </HEAD> <BODY> <TABLE BORDER="1” align=center> <CAPTION>Spanning the text</CAPTION> <TR> <TD COLSPAN="2">This line is extended to two columns</TD> <TD>This does not</TD> </TR> <TR> <TD>First Column</TD> <TD>Second Column</TD> <TD>Third Column</TD> </TR> </TABLE> </BODY> </HTML>

Result is shown in Fig. 3 below:

Fig. 3 <HTML> <HEAD><TITLE>Spanning Text</TITLE> </HEAD> <BODY> <TABLE BORDER="1"> <CAPTION>Example - ROWSPAN</CAPTION> <TR> <TD ROWSPAN="2">This line is stretched to two rows</TD> <TD>First Row</TD> </TR> <TR> <TD>Second Row</TD> </TR> <TR> <TD>This does not</TD> <TD>Third Row</TD> </TR> </TABLE> </BODY></HTML>

Result is shown in Fig. 4 below

. Fig. 4

Table tag attributes

Border - <table border=“5”> displays the cell boundaries, accordingly. Width - <table width=“75%> sets the width of the table, accordingly. Height - <table height=“100%”> sets the height of the table, accordingly. Cellpadding - <table cellpadding=“10”> refers to distance between the cells in pixels.

26 Cellspacing - <table cellspacing=“5”> refers to distance between cell boundaries andcontent enclosed in terms of pixels. Color - <table bgcolor=“#cccccc”> provides background color to the table (you can also provide color name instead of RGB value code). <table background=“tablebg.gif”> supplies an image in the table background.

Attributes for <TD> tag

Width - <td width=“50%”> specifies width of a cell with reference to the table width. Align - <td align=“center”> is used to align the text in a cell accordingly (you can also use left and right as values of ‘align’). Valign- <td valign=“top”> is used to vertically align the text in a cell (you can also use bottom or middle as values of ‘valign’).

Using a table to set up a page with a margin

Set the table’s height to 100% using the <table> tag’s height attribute. First column is the margin. Use ‘bgcolor’ or ‘background’ attribute to define color or image for the margin. Also set width of the margin as desired. Second column is where one can put all the regular text and the graphics. Note the following example: <HTML> <HEAD><TITLE>A Page with a Left-Hand Margin</TITLE> </HEAD> <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <TABLE HEIGHT="100%"> <TR> <TD BACKGROUND=“image2.gif" WIDTH="100">&nbsp;</TD> <TD VALIGN="TOP"> This section contains the contents of your web page. </TD> </TR> </TABLE> </BODY> </HTML>

Result is shown in Fig. 5 below.

Fig. 5 ‘&nbsp;’ is the code for a blank space in HTML.


A form is a web page populated with text boxes, drop-down lists and commands buttons to get information from the user. Its basic tag is <form> and </form>. ‘Action’ and ‘Method’ are the two attributes used in the form tag as shown below to transport the information received form the user to a particular URL or a file: <Form action=http://www.forms.com Method=post>


Submit/Reset button Text boxes Text area Check boxes Radio buttons Lists

Submit and reset button

To create a submit or reset button use the following instruction within the form tag: <Input type=“submit” value=“label”> <Input type=“Reset” value=“label”> “Label” is the value that appears on the button. You may not want to use ‘value’ attribute. When the submit

27 button is clicked, the form data is shipped to the URL specified by the <form> tag’s action attribute.

Text boxes and text area

To create a text box the value of ‘type’ attribute is set as ‘text’ in the input tag. To create abigger box called text area we use <Textarea> and </Textarea> tag. The size of the text area is fixed on the basis of value of attributes ‘cols’ and ‘rows’. Note the following example: <HTML> <HEAD><TITLE>Text Area Example</TITLE> </HEAD> <BODY> <H3>Today's Burning Question</H3> <FORM ACTION="http://www.gov.pk/scritps/test.asp" METHOD="POST"> First Name: <INPUT TYPE="TEXT" NAME="First"> <P> Last Name: <INPUT TYPE="TEXT" NAME="Last"> <P> Today's <I>Burning Question</I>: <B>How to make Pakistan a developed country?</B> <P> Please enter your answer in the text area below: <BR> <TEXTAREA NAME="Answer" ROWS="10" COLS="60"> </TEXTAREA> <P> <INPUT TYPE="SUBMIT" VALUE="I Know!"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML>

Result is shown in Fig. 6 below.

Fig. 6 In the above example ‘name’ attribute used in ‘input’ and ‘textarea’ tags is the unique name for the field. A field name is the information normally used by the server side to respond to the client side after the form has been submitted to it.

<Previous Lesson


Next Lesson>


Lesson Plan


Go to Top

Next Lesson
Previous Lesson
Lesson Plan
Go to Top