EXPERIMENT NO.
03
DATE OF PERFORMANCE: GRADE:
DATE OF ASSESSMENT: SIGNATURE OF LECTURER/ TTA:
AIM: Implementation of Advanced HTML Tags.
THEORY:
TABLE IN HTML:
The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.
The HTML tables are created using the <table> tag .Each table row is defined with the
<tr> tag. A table header is defined with the <th> tag. By default, table headings are bold
and centered. A table data/cell is defined with the <td> tag.
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell.
Example:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
Page 1 of 13
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
CELLPADDING AND CELLSPACING ATTRIBUTES:
There are two attribiutes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines the width of the border,
while cellpadding represents the distance between cell borders and the content within a
cell.
Example: <table border="1" cellpadding="5" cellspacing="5">
COLSPAN AND ROWSPAN ATTRIBUTES:
You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.
Example:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Page 2 of 13
TABLES BACKGROUNDS:
You can set table background using one of the following two ways:
bgcolor attribute - You can set background color for whole table or just for one cell.
background attribute - You can set background image for whole table or just for
one cell.
Example: <table border="1" bordercolor="green" bgcolor="yellow">
HTML FRAMES:
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.
CREATING FRAMES:
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame.
THE <FRAMESET> TAG ATTRIBUTES:
Cols: specifies how many columns are contained in the frameset and the size of each
column.
Rows: This attribute works just like the cols attribute and takes the same values, but it is
used to specify the rows in the frameset.
For example to create two horizontal frames, use rows="10%, 90%". You can specify the
height of each row in the same way as explained above for columns.
Border: This attribute specifies the width of the border of each frame in pixels. For
example border="5". A value of zero means no border.
THE <FRAME> TAG ATTRIBUTES:
Src: This attribute is used to give the file name that should be loaded in the frame. Its value
can be any URL. For example, src="/html/top_frame.htm" will load an HTML file
available in html directory.
Page 3 of 13
Scrolling: This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means
it should not have scroll bars.
Noresize: By default you can resize any frame by clicking and dragging on the borders of a
frame. The noresize attribute prevents a user from being able to resize the frame. For
example noresize="noresize".
Marginwidth: This attribute allows you to specify the width of the space between the left
and right of the frame's borders and the frame's content. The value is given in pixels. For
example marginwidth="10".
noframes<>:
The <noframes> tag is a fallback tag for browsers that do not support frames. It can
contain all the HTML elements that you can find inside the <body> element of a normal
HTML page.
The <noframes> element can be used to link to a non-frameset version of the web site or to
display a message to users that frames are required.
The <noframes> element goes inside the <frameset> element.
Example:
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Page 4 of 13
IFRAME:
The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear
anywhere in your document. The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate document, including scrollbars and
borders.
The src attribute is used to specify the URL of the document that occupies the inline frame.
Example:
< body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
HTML Forms:
HTML Forms are required when you want to collect some data from the site visitor. For
example during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform
required processing on the passed data based on defined business logic inside the
application.
There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
FORM ATTRIBUTES:
Action: Backend script ready to process your passed data.
Method: Method to be used to upload data. The most frequently used are GET and POST
methods.
Target: Specify the target window or frame where the result of the script will be displayed.
It takes values like _blank, _self, _parent etc.
Page 5 of 13
HTML FORM CONTROLS:
TEXT INPUT CONTROLS:
Single-line text input controls - This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag.
Password input controls - This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.
Multi-line text input controls - This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using HTML
<textarea> tag.
Example:
<form >
First name: <input type="text" name="first_name" />
<br/>
Last name: <input type="text" name="last_name" />
<br/>
Address:<textarea rows=”10” cols=”10”></textarea>
<br/>
Password: <input type="password" name="password" />
</form>
CHECKBOX CONTROL:
Checkboxes are used when more than one option is required to be selected. They are also created
using HTML <input> tag but type attribute is set to checkbox.
Example:
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="science" value="on"> Science
RADIO BUTTON CONTROL:
Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set to radio.
Example:
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="science"> Science
Page 6 of 13
SELECT BOX CONTROL:
A select box, also called drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.
Example:
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
FILE UPLOAD BOX:
If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element
but type attribute is set to file.
Example: <input type="file" name="fileupload" accept="image/*" />
BUTTON CONTROLS:
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button. The type attribute
can take the following values:
Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
This creates a button that is used to trigger a client-side script when the user clicks
button
that button.
This creates a clickable button but we can use an image as background of the
image
button.
Example:
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
HIDDEN FORM CONTROLS:
Hidden form controls are used to hide data inside the page which later on can be pushed to
the server. This control hides inside the code and does not appear on the actual page. For
example, following hidden form is being used to keep current page number. When a user
Page 7 of 13
will click next page then the value of hidden control will be sent to the web server and there
it will decide which page has be displayed next based on the passed current page.
Example: <input type="hidden" name="pagename" value="10" />
PROGRAM 1: DESIGN A WEB PAGE WITH TABLE HAVING FIRST
NAME, LAST NAME AND CITY.
<html>
<head>
<title> Table heading </title>
</head>
<body>
<table border="1px" width="30%" bgcolor="black" style="color:white">
<caption style="color:black"> Details </caption>
<tr>
<th> FIRST_NAME </th>
<th> LAST_NAME </th>
<th> CITY </th>
</tr>
<tr>
<td> Ragini </td>
<td> Khanna </td>
<td> Mumbai </td>
</tr>
<tr>
<td> Anushka </td>
<td> Mehra </td>
<td> Delhi </td>
</tr>
<tr>
<td> Varun </td>
<td> Sharma </td>
<td> Mumbai </td>
</tr>
<tr>
<td> Meera </td>
<td> Khanna </td>
<td> Hydrabad </td>
</tr>
</table>
</body>
</html>
OUTPUT:
Page 8 of 13
PROGRAM 2: DESIGN A WEB PAGE WITH HTML FORM.
<html>
<head>
<title> Form </title>
</head>
<body>
<form>
<fieldset>
<legend> Personal </legend>
<h1> Personal details </h1>
First_name: <input type="text" size="10">
<br/>
E-Mail: <input type="text" size="30">
<br/>
Mobile_No: <input type="text" size="15">
<br/>
</fieldset>
<br/>
</form>
<form>
Gender:
Page 9 of 13
<br/>
<input type="radio" name="gender" value="male"> Male
<br/>
<input type="radio" name="gender" value="female"> Female
<br/>
</form>
<form>
Country:
<select>
<optgroup label="Country">
<option value="United States">United States </option>
<br/>
<option value="United Kingdom">United Kingdom </option>
<br/>
<option value="Australia">Australia </option>
<br/>
<option value="India">India </option>
<br/>
</optgroup>
</select>
<br/>
</form>
<form>
Subject:
<input type="checkbox" name="sub" value="Applied Maths">Applied Maths
<input type="checkbox" name="sub" value="CPI">CPI
<input type="checkbox" name="sub" value="C++">C++
Page 10 of 13
<input type="checkbox" name="sub" value="Java">Java
<br/>
</form>
<form>
<input type="button" value="submit">
</form>
</body>
</html>
OUTPUT:
PROGRAM 3: DESIGN A WEB PAGE WITH FRAME WITH TWO FILES.
Page 11 of 13
<html>
<head>
<title> Frame </title>
</head>
<frameset cols="35% , 60%">
<frame src="HTML_TABLE.html">
<frame src="HTML_FORM.html">
<noframes>
Sorry, Your browser does not support frames.
</noframes>
</frameset>
</html>
OUTPUT:
PROGRAM 4: DESIGN A WEB PAGE WITH IFRAME.
Page 12 of 13
<html>
<head>
<title> Iframe </title>
</head>
<iframe src="bird.jpg" style="height:150px;width:200px">
Bird
</iframe>
</html>
OUTPUT:
Page 13 of 13
