PRGM

Exercise 1
Objective:
Design simple web page with heading tags.
Apparatus Required:
Text editors(note pad, sublime text), Browser
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>heading tags</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Result:
The program is successfully executed and output is verified.
Exercise 2
Objective:
Format text, change background color and apply superscript and subscript.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>format text</title>
</head>
<body bgcolor=”pink”>
<pre><center><u><b>form controls</b></u></center>
<big>Check box</big>
<small>Text box</small>
<strong>Option Button</strong>
<I>Command button</I>
<EM>Toggle button</EM>
Log<sub>2</sub>10
(a+b)<sup>2</sup></pre>
</body>
</html>
Result:
Exercise 3
Objective:
To change font style.
Apparatus Required:
Text editors (note pad, sublime text), Browser
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>font tag</title>
</head>
<body>
<font color="blue" size="20" face="algerian">WORLD WIDE WEB
</font>
</body>
</html>
Result:
Exercise 4
Objective:
Insert picture in webpage.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>insert image</title>
</head>
<body><center>
<img src="C:\Users\Admin\Pictures\Sample Pictures\Tulips.jpg" alt="image1" height=20%
width=10%></img></center>
</body>
</html>
Result:
Exercise 5
Objective:
Design simple webpage with ordered list.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<b><u>Protocols</u></b>
<ol type="1">
<li>FTP</li>
<li>HTTP</li>
<Li>SMTP</Li>
<Li>TCP/IP</Li>
<li>UDP</li>
</ol>
</body>
</html>
Result:
Exercise 6
Objective:
Design simple webpage with Unordered list.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Unordered list</title>
</head>
<body>
<b><u>Cables used for networking</u></b>
<ul type="square">
<li>Sheiled Twisted Pair cables</li>
<li>Unsheiled Twisted Pair cables</li>
<Li>Fibre OpticCables</Li>
</ul>
</body>
</html>
Result:
Exercise 7
Objective:
Design simple webpage with Description list.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Description List</title>
</head>
<body>
<b><u>MS Office</u></b>
<dl>
<dt>MS WORD</dt>
<dd> Microsoft word or MS WORD(often called Word) is a graphical word processing
program that users can type with.It is made by the computer company Microsoft. Its purpose is to
allow users to type and save documents.</dd>
<dt>MS EXCEL</dt>
<dd> Microsoft Excel is a spredsheet developed by Microsoft for windows, MacOs,
Android and iOS.</dd>
<dt>MS ACCESS</dt>
<dd> Microsoft Access is a database management system(DBMS) from Microsoft
that combines the relational Microsoft Jet Databases Engine witha graphical user interface and
software- development tools.</dd>
</dl>
</body>
</html>
Result:
Exercise 8
Objective:
Design simple webpage with nested list.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<b><u>MS OFFICE</u></b>
<ul type="circle">
<li>INPUT DEVICES</li>
<ul type="disc">
<li>KEyboard</li>
<li>Mouse</li>
<li>Scanner</li>
</ul>
<li>OUTPUT DEVICES</li>
<ol type="a">
<li>Printer</li>
<Li>Plotter</Li>
<li>Monitor</li>
</ol>
<li>Memory Devices</li>
</ul>
</body>
</html>
Result:
Exercise 9
Objective:
Design a webpage with tables.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<b>Particulars of Government ITI(Women)</b><br><br>
<table border="4" cellpadding="5" cellspacing="10">
<tr>
<th>SNO</th>
<th>NAME OF THE TRAINEE</th>
<th>TRADE</th>
<th>SEMESTER</th>
</tr>
<tr>
<td>1</td>
<td>NEETHA S</td>
<td>COPA</td>
<td>II</td>
</tr>
<tr>
<td>2</td>
<td>VENI T</td>
<td>IT</td>
<td>II</td>
</tr>
<tr>
<td>3</td>
<td>PRIYA M</td>
<td>ICTSM</td>
<td>II</td>
</tr>
</table>
</body>
</html>
Result:
Exercise 10
Objective:
Design simple web page with Marquee and link to other webpage.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Marguee</title>
</head>
<body>
<h1><marquee BGCOLOR="YELLOW">
NATIONAL INSTRUCTIONAL MEDIA INSTITUDE, CHENNAI</marquee>
<a href="Table.html">Visit to table webpage</a>
</body>
</html>
Result:
Exercise 11
Objective:
Create a vertical frameset to run 3 html in that frame.
Apparatus Required:
Procedure:
PRG1
<!DOCTYPE html>
<html>
<head>
<title>PRG1 </title>
</head>
<body bgcolor="CCAABB">
<H1>
<OL>MEMORY DEVICES<BR><BR>
<LI>PRIMARY MEMORY</LI>
<BR><BR>
<LI>SECONDARY MEMORY</LI>
<OL>
</html>
PRG2
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="AABBCC">
<H1>
<OL>PRIMARY MEMORY<BR><BR>
<LI>RANDOM ACCESS MEMORY</LI>
<BR><BR>
<LI>READ ONLY MEMORY</LI>
<OL>
</html>
PRG3
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="CCBBAA">
<H1>
<OL>SECONDARY MEMORY<BR><BR>
<LI>HARD DISK</LI>
<BR><BR>
<LI>DVD</LI>
<OL>
</html>
FRAMEST
<!DOCTYPE html>
<html>
<head>
<title>vertical frameset</title>
</head>
<frameset cols="35%,30%,*">
<frame src="PRG1.html">
</frameset>
</html>
Result:
Exercise 12
Objective:
Design a webpage of bio data from.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form>
<h1>STUDENT INFORMATION SYSTEM</h1>
<B>Name:</B>&emsp;&emsp;&emsp;<input type="text"><br><br>
<b>Father's Name:</b><input type="text"><br><br>
<b>Mothers Name:</b><input type="text"><br><br>
<b>Date of Birth:</b><input type="date"><br><br>
<b>Gender:</b><br>&emsp;&emsp;<input type="radio" name="gender">Male<br>
&emsp;&emsp;<input type="radio" name="gender">Female<br>
&emsp;&emsp;<input type="radio" name="gender">Other<br><br>
<b>Communication Address:</b>
<textarea rows="6" cols="50"></textarea><br><br>
<b>TRADE:</b>&emsp;
<select name="trade">
<option value="1">COPA</option>
<option value="2" selected>Information Technology</option>
<option value="3">Information Communication Technology & System
Maintenance</option>
<option value="4">Computer Hardware & Network Maintenance</option>
</select>
<br><br><br><br><br><br>
<b> Languages you know:</b><br><br>&emsp;&emsp;&emsp;
<select name="language" multiple>
<option name="tamil" selected> Tamil</option>
<option value="hindi">Hindi</option>
<option value="english"> Malayalam</option>
<option value="malayalam" selected>Malayalam</option>
<option value="kannada"> Kannada</option>
</select><br>,br>
<b>Computer Knowledge</b><br><br>&emsp;&emsp;&emsp;&emsp;
<input type="checkbox">Windows OS<br>&emsp;&emsp;&emsp;&emsp;
<input type="checkbox">Microsoft Office<br>&emsp;&emsp;&emsp;&emsp;
<input type="checkbox">Hyper Text Markup
Language<br>&emsp;&emsp;&emsp;&emsp;
<input type="checkbox">Cascaded Style Sheet<br><br>
<input type="submit" value="submit"><input type="reset">
</form>
</body>
</html>
Result:
Exercise 13
Objective:
Design simple web page with inline style sheet.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#009900;font-size:50px;font-style:italic;text-align:center;">
Welcome to NIMI
</p>
</body>
</html>
Result:
Exercise 14
Objective:
Design simple web page with internal style sheet.
Apparatus Required:
Procedure:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.a
{
text-align:center;
}
.b
{
color:#00FF00;
font-size:70 px;
font-weight:bold;
}
.c
{
font-weight:bold;
font-size:30 px;
}
</style>
</head>
<body>
<div class="a">National Instructional Media Institute(NIMI)</div>
<div class="b">A NIMI portal for online books</div>
<div class="c">Computer operator and programming assistant(COPA)</div>
</body>
</html>
Result:
Exercise 15
Objective:
Design simple web page with External style sheet.
Apparatus Required:
Procedure:
Result:

PRGM

Uploaded by

Copyright:

Available Formats

You might also like

PRGM

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PRGM

Uploaded by

Copyright:

Available Formats

Exercise 1

You might also like