Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
242 views

Lab Manual For INTERNET TECHNOLOGY

The document contains 11 aims related to HTML coding. Each aim demonstrates different HTML tags and concepts such as headings, text formatting, lists, images, tables, forms, frames and style sheets. The aims progress from simple "Hello World" examples to more complex uses of frames, tables, forms and style sheets. The final aim demonstrates using external CSS to style elements like paragraphs, lists, tables and the <span> tag.

Uploaded by

Jay Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
242 views

Lab Manual For INTERNET TECHNOLOGY

The document contains 11 aims related to HTML coding. Each aim demonstrates different HTML tags and concepts such as headings, text formatting, lists, images, tables, forms, frames and style sheets. The aims progress from simple "Hello World" examples to more complex uses of frames, tables, forms and style sheets. The final aim demonstrates using external CSS to style elements like paragraphs, lists, tables and the <span> tag.

Uploaded by

Jay Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-1 Write a HTML program to print Hello World in browser.


Code:

<html>
<head>
<title>This is first Web page.</title>
</head>
<Body>
<b>Hello World.</b>
</body>
</html>

Output:

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-2 Create a web page illustrating text formatting tags available in html(i.e<h1>,
<b>, <u>, <i>).
Code:

<html>
<head>
<title>HTML tags</title>
</head>
<body>
<p><h1>This is HTML Tag Examples.</h1></p>
<p><b>This is bold Tag.</b><br></p>
<p><u>This is underline Tag.</u><br></p>
<p><i>This is italic Tag.</i><br></p>
<p>I am <del>reading</del> <ins> writing.</ins></p><br></p>
</body>
</html>

Output:

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-3: Prepare a sample code for different type of Heading in HTML.


Code:

<html>
<head>
<title>Heading Tag</title>
</head>
<body>
<h1>This is Heading 1.</h1>
<h2>This is Heading 2.</h2>
<h3>This is Heading 3.</h3>
<h4>This is Heading 4.</h4>
<h5>This is Heading 5.</h5>
<h6>This is Heading 6.</h6>
</body>
</html>

Output:

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-4: Prepare a sample code to illustrate three types of list in HTML.


Code:

<html>
<head>
<title>HTML Different Types of List</title>
</head>
<Body>
<h1>This is unorder List.</h1>
<ul type="circle">
<li>beetroot</li>
<li>Ginger</li>
<li>potato</li>
<li>Radish</li>
</ul>
<h2>This is order list.</h2>
<ol type="i" start="4">
<li>beetroot</li>
<li>Ginger</li>
<li>potato</li>
<li>Radish</li>
</ol>
<h3>This is Definition List</h3>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language.</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol.</dd>
</body>
</html>
4

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-5:Create a HTML file that displays three images at left, right and center
respectively in the browser
Code:

<html>
<head>
<title>Images in webpage</title>
</head>
<body>
<imgsrc="Tulips.jpg" alt=Tulips image" width="150" height="100" align="left"/>
<imgsrc="Pink Tulips.jpg" alt=Pink Tulips image" width="150" height="100" align="right"/>
<imgsrc="tulip 003.jpg" alt=tulip 003 image" width="150" height="100" align="center"/>
</body>
</html>

Output:

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-6: Create a below given table.

CODE:
<html>
<head>
<title>HTML tables</title>
</head>
<body>
<table border="1" cellpaddings="5" cellspacing="5">
<tr>
<table border="1">
<tr>
<th>Coloumn 1</th>
<th>Coloumn 2</th>
<th>Coloumn 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>
7

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

<td colspan="3">Row 3 Cell 1</td>


</tr>
</table>
</body>
</html>

Output:

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-7 Using Frames Divide the web page as follows :

Code:

<html>
<frameset rows="25%,50%,25%">
<frame src="j.html">
<frameset cols="25%,75%">
<frame src="j1.html">
<frame src="j2.html">
</frameset>
<frame src="j3.html">
</frameset>
</frameset>
</html>

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

10

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-8: Create a student registration form using the following tags <form>, <input>
, <textarea>, <button>, <select>, <option>The registration form must consist of
following information :
First Name, Middle Name, Last Name, Gender (use radio button), Address, Phone
No., email id, Hobbies (use checkbox), City, State, Country, College Name (use
dropdown menu)
Code:

<html>
<head>
<title>Frorms</title>
</head>
<body>
<form>
First Name : <input type="text" name="first_name" />
<p>Last Name : <input type="text" name="last_name" /></p>
<p>Gender : <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female</p>
<p> Address : <input type="text" name="address" /> </p>
<p> Phone No. : <input type="text" name="phoneno" /></p>
<p> Email ID : <input type="text" name="emailid" /> </p>
<p> Mobile No. : <input type="text" name="phoneno" /> </p>
<p> Hobbies : <input type="checkbox" name="playing cricket" value="on">Playing Cricket
<input type="checkbox" name="watching movies" value="on">Watching movies
<input type="checkbox" name="Reading Books" value="on">Reading Books
<p> City : <input type="text" name="city" /></p>
<p> State : <input type="text" name="state" /> </p>
<p> Country : <input type="text" name="country" /> </p>
<p> College Name : <input type="text" name="College name" />
<select>
11

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

<option value="PIT">PIT</option>
<option value="PIET">PIET</option>
<option value="PGDM">PGDM</option>
<option value="PIP">PIP</option>
</select>
</p>
<p> <input type="submit" /> </p>
</form>
</body>
</html>

Output:

12

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-9 Make a student Registration form using CSS-inline, internal & external style
sheet.
CSS Code:
.main{
margin-left:200px;
width:600px;
border:2px;
background-color:#e9e2a2;
color:#eeffcc;
height:600px;
}
.banner{
width:600px;
margin-top:0px;
height:120px;
background-color:#002244;
text-align:center;
padding-top:40px;
font-size:50px;}
.menu{
width:600px;
margin-top:0px;
height:20px;
background-color:#c9c249;
text-align:center;
padding-top:0px;
font-size:14px;}
.maincontent{
color:#0000CC;
padding-left:60px;
13

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

text-align:center;
font-size:20px;
padding-top:30px;
}

Code:
<html>
<head>
<title>Parul University</title>
<link rel="stylesheet" type="text/css" href="tropical.css">
</head>
<body>
<div class="main">
<div class="banner"><marquee>Parul Institute of Technology</marquee></div>
<div class="menu"><span class="menucontent"><a href="home.html">Home</a></span>
<span class="menucontent"><a href="register.html" >Register</a></span> <span
class="menucontent"><a href="confirm.html" >Contact Us</a></span> </div>
<div class="maincontent"> Welcome to Parul Institute of Technology<br> Click on the Link Below to
Register for a Computer Programme.<p><a href="register.html"><input type="submit" value="Register"
/></a></p>
</div>
</div>
</body>
</html>

14

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

15

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-10 Write HTML/CSS Code to create table with 5 rows & 3 coloums that even
no. of rows display in green and odd no. of rows display in white color .
CSS Code:
table {
border-collapse: separate;
border-spacing: 0;
color: #4a4a4d;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
th,td {
padding: 10px 15px;
vertical-align: middle;
}
thead {
background: #395870;
background: linear-gradient(#49708f, #293f50);
color: #fff;
font-size: 11px;
text-transform: uppercase;
}
th:first-child {
border-top-left-radius: 5px;
text-align: left;
}
th:last-child {
border-top-right-radius: 5px;
}
tbody tr:nth-child(even) {
background: #5EFB6E;
color: #fff;}
16

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

td {
border-bottom: 1px solid #cecfd5;
border-right: 1px solid #cecfd5;
}
td:first-child {
border-left: 1px solid #cecfd5;
}
.book-title {
color: #395870;
display: block;}
.text-offset {
color: #7c7c80;
font-size: 12px;}
.item-stock,
.item-qty {
text-align: center;}
.item-price {
text-align: right;}
.item-multiple {
display: block;}
tfoot {
text-align: right;
color: #fff;}
tfoot tr:last-child {
background: #f0f0f2;
color: #395870;
font-weight: bold;}
tfoot tr:last-child td:first-child {
border-bottom-left-radius: 5px;
color: #fff;}
17

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

tfoot tr:last-child td:last-child {


border-bottom-right-radius: 5px;}

Code:
<html>
<head>
<title>Tables</title>
<link rel="stylesheet" type="text/css" href="table.css">
<table>
<thead>
<tr>
<th scope="col" colspan="2">COmpany Name</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong class="book-title">Parul Institute of Technology</strong>
<span class="text-offset">by Jay Patel</span>
</td>
<td class="item-stock">In Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$30.02</td>
</tr>
<tr>
<td>
<strong class="book-title">Parul Institute of Management</strong>
<span class="text-offset">by Shreemad Patel</span>
</td>
<td class="item-stock">In Stock</td>
18

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

<td class="item-qty">2</td>
<td class="item-price">$52.94
<span class="text-offset item-multiple">$26.47 &#215;2</span></td>
</tr>
<tr>
<td>
<strong class="book-title">Parul Institute of Pharmacy</strong>
<span class="text-offset">by Pinal Prajapati</span>
</td>
<td class="item-stock">Out of Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$22.23</td>
</tr>
<tr>
<td>
<strong class="book-title">Parul Institute of Diploma Studies</strong>
<span class="text-offset">by DanKumar Yadav</span>
</td>
<td class="item-stock">In Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$30.17</td>
</tr>
</tbody>
<tfoot>
<tr class="text-offset">
<td colspan="3">Subtotal</td>
<td>$135.36</td>
</tr>
<tr class="text-offset">
<td colspan="3">Tax</td>
<td>$13.54</td>
19

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

</tr>
<tr>
<td colspan="3">Total</td>
<td>$148.90</td>
</tr>
</tfoot>
</table>

Output:

20

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-11 Develop and demonstrate a HTML document that illustrates the use
external style sheet, ordered list, table, borders, padding, color, and the <span> tag.
CSS Code:
p,table,li,{
font-family: "lucida calligraphy", arial, 'sans serif';
margin-left: 10pt;}
p { word-spacing: 5px; }
body { background-color:rgb(200,255,205); }
p,li,td { font-size: 75%;}
td { padding: 0.5cm; }
th { text-align:center;
font-size: 85%;}
h1, h2, h3, hr {color:#483d8b;}
table{
border-style: outset;
background-color: rgb(100,255,105);}
li {list-style-type: lower-roman;}
span{
color:blue;
background-color:pink;
font-size: 29pt;
font-style: italic;
font-weight: bold;}

Code:
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> Lab program11 </title>
21

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
<table border="4" width="5%"> <!-- table with name & email -->
<tr>
<th width="204">Name </th>
<th>Email</th>
</tr>
<tr>
<td width="204">Dr. Jay</td>
<td>patel999jay@gmail.com</td>
</tr><tr>
<td width="204">Dr. Pinal</td>
<td>pinal.prajapati090@gmail.com</td>
</tr> <tr>
<td width="204">Dr. Shrimad</td>
<td>shreemadpatel3@gmail.com</td>
</tr> <tr>
<td width="204">Dr. Dan</td>
<td>yadav5048@gmail.com</td>
</tr></table>
<hr> <!-- horizontal line -->
<ol> <!-- ordered list -->
<li> LINUX</li>
<li> Windows</li>
<li> Sailfish</li>
</ol>
<p><span>This is a text.</span> This is a text. This is a text. This is a text. This is a
text. This is a text. This is a text. This is a text. This is a text. <span>This is a text.</span>
22

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

</p></body></html>

Output:

23

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-12 Develop and demonstrate a HTML document that illustrates the use
external style sheet, ordered list, table, borders, padding, color, and the <span> tag.
CSS Code:
label {display:block; margin-left:15px; color:blue; font-size:13pt;}
usn {color:red; font-size:12pt; margin-left: 15px;}
name {color:red; font-size:12pt; margin-left: 15px;}
college {color:red; font-size:12pt; margin-left: 15px;}
branch {color:red; font-size:12pt; margin-left: 15px;}
year {color:red; font-size:12pt; margin-left: 15px;}
email {color:red; font-size:12pt; margin-left: 15px;}
h1 {color:red;font-size:18pt;}
h2 {display:block;color:black;font-size:16pt:}

Code:
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/css" href = "6a.css" ?>
<students>
<h1> Student Information </h1>
<h2>Student 1</h2>
<GTU>
<label>USN: <usn> 0314EC003 </usn></label>
<label>NAME: <name> Jay </name></label>
<label>COLLEGE: <college> PIT </college></label>
<label>BRANCH: <branch> ECE</branch></label>
<label>YEAR of JOINING:<YOJ> 2014 </YOJ></label>
<label>EMAIL: <email> patel999jay@gmail.com </email></label>
</GTU>
<h2>Student 2</h2>
<GTU>
<label>USN : <usn> 0414EC004</usn></label>
<label>NAME: <name> Shreemad</name></label>
<label>COLLGE: <college> PIT </college></label>
24

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

<label>BRANCH: <branch> ECE </branch></label>


<label>YEAR of JOINING: <YOJ> 2014 </YOJ></label>
<label>EMAIL : <email> shreemadpatel3@gmail.com </email></label>
</GTU>
<h2>Student 3</h2>
<GTU>
<label>USN : <usn> 1414EC007 </usn></label>
<label>NAME <name> Pinal </name></label>
<label>COLLEGE: <college> PIT</college></label>
<label>BRANCH: <branch> ECE </branch></label>
<label>YEAR of JOINING: <YOJ> 2014</YOJ></label>
<label>EMAIL: <email> pinal.prajapati090@gmail.com </email></label>
</GTU>
</students>

Output:

25

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-13 Format your Profile Page Using Different CSS Elements.


(Note: e.g. CSS Background, Text, Font, Tables, Links, Images, Margin ).
CSS Code:
body{background:url(autumn.jpg) no-repeat top left;
background-repeat:repeat;
color:Blue;
margin: 10px 10px 10px 10px;
letter-spacing: 5px;
text-transform: uppercase;
word-spacing: 15px;
text-align: center;
text-decoration: underline;
font-size: 20px;
font-weight: bold;}

Code:
<html>
<head>
<title>Exp15</title>
<link rel="stylesheet" type="text/css" href="exp14.css">
</head>
<body style=font-family: Arial>
<p>This text will be Arial as well.</p>
<h1>Names</h1>
<h2>Jay Patel</h2>
</body>
</html>

26

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

27

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-14 Design a simple static website using HTML Frameset, Frame Having
Following Structure.

Code:
<html>
<frameset rows="25%,75%">
<frame src="banner.html">
<frameset cols="25%,75%">
<frame src="menus.html">
<frame src="paruls.html">
</frameset>
</frameset>
</frameset>
</html>

Output:

28

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-15 Write JavaScript to perform the following operations:


A. To calculate sum of 1 to n.
Code:
<html>
<head>
<script type = "text/javascript">
var num = window.prompt("Enter the number:","");
var n = parseInt(num);
result = sumnaturalno(n);
window.alert("The sum of " + n + "natural number is" + result);
function sumnaturalno(n)
{ var i;
var sum = 0;
for(i = 1;i <= n; i++){
sum = sum + i;}
return (sum);}
</script>
</head>
</html>

Output:

29

INTERNET TECHNOLOGY

B.

SUBJECT CODE: 2720214

To check if given no. is prime or not.

Code:
<html>
<head><TITLE></TITLE>
<script language="JavaScript">
var a=prompt("enter a value");
var c=0;
for(var i=2;i<a;i++)
{ if(a%i==0)
{
c=i; //alert("Now C IS:"+c);
} }
if(c==0)
{ alert("given no is prime"); }
else
{ alert("given no is not a prime"); }
</script>
</head> <body></body>
</html>
30

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

C. To check if given no. is Armstrong or not.


Code:
<html>
<head><TITLE></TITLE>
<script language="JavaScript">
var b,z,c=0;
var a=prompt("Enter a number");
z=a;
while(z>0)
{
b=z%10;
c=c+(b*b*b);
z=parseInt(z/10);
}
if(a==c)
alert("given no is amstrong number");
else
alert("given no is not an amstrong number");
</script>
</head>
<body></body>
</html>
31

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

D. To check if given no. is palindrome or not.


Code:
<html>
<body>
<script type="text/javascript">
function Palindrome() {
var revStr = "";
var str = document.getElementById("str").value;
var i = str.length;
for(var j=i; j>=0; j--) {
revStr = revStr+str.charAt(j);}
if(str == revStr) {
alert(str+" -is Palindrome");
}else { alert(str+" -is not a Palindrome");
}}
</script>
<form >
Enter a String/Number: <input type="text" id="str" name="string" /><br />
<input type="submit" value="Check" onclick="Palindrome();"/>
</form>
</body>
</html>
32

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

Output:

E. To find the roots of Quadratic Equation.


Code:
<html>
<head><title>Quadratic Equation</title></head>
<body><script type="text/javascript">
<!--

var a = prompt("Enter value of a","1");


var b = prompt("Enter value of b","4");
var c = prompt("Enter value of c","4");
var root_part = Math.sqrt(b*b-4*a*c);
var denom = 2*a;
var root1 = ( -b + root_part)/denom;
var root2 = ( -b - root_part)/denom;
document.write("1st root: "+root1+"<br />");
document.write("2nd root: "+root2+"<br />");

// --></script> </body></html>

Output:

33

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

F. To Calculate factorial of n numbers.


Code:
<html>
<body>
<script type = "text/javascript">
var n = parseInt(window.prompt("Enter the Number:"));
var result = fact(n);
window.alert("Factorial of the given number " + result);
function fact(n)
{
if(n == 0)
return 1;
else
return (n*fact(n-1));}
</script> </body></html>

Output:

34

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

G. To find highest from given three values.


Code:
<html>
<head><title>max</title></head>
<body>
<script type="text/javascript">
<!--

var a = prompt("Enter value of a");


var b = prompt("Enter value of b");
var c = prompt("Enter value of c");
var d = Math.max(a,b,c);
document.write("Maximum no is: "+d+"<br/>");

// -->
</script> </body></html>

Output:

35

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

H. To Prime any Triangle form for given n.


Code :
<html>
<head>
<title>Star</title>
<body>
<script language="Javascript">
var n = prompt("Enter value of n");
var x,y;
for(x=0;x<n;x++)
{for(y=0;y<=x;y=y+1)
{document.write("*");
}
document.write("<br>");}
</script></body></html>

Output:

I. To find all prime numbers that are lies between a given range.
CODE:
<html>
<head>
<title>LeapYears</title>
36

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

<script type="text/javascript">
/* <![CDATA[ */
function calcPrimeNumber(){
var beginNum = document.numbers.firstNum.value;
var endNum = document.numbers.secondNum.value;
var primeNumbs = new Array();
var ctr = 0;
while (beginNum <= endNum){ //throwaway
if ((beginNum % beginNum == 0) && (beginNum % 1 == 0)){
primeNumbs[ctr] = beginNum;
++ctr;
}
++beginNum;
}
if (primeNumbs == 0){
window.alert("There were no leap years within the range.");
}
else {
outputPrimeNums(primeNumbs);
}
}
function outputPrimeNums(primes){
document.write("<h2>Prime Numbers</h2>");
for (i=0;i<primes.length;i++){
document.write(primes[i] + "<br/>");
}
}
/* ]]> */
</script> </head>
<body>
37

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

<form name="numbers">
Beginning Number: <input type="text" name="firstNum" /> End Number: <input type="text"
name="secondNum" />
<input type="button" value="Find Prime Numbers" onclick="calcPrimeNumber()" />
</form> </body></html>

Output:

38

INTERNET TECHNOLOGY

SUBJECT CODE: 2720214

AIM-16 Create a blog of your favourite subject.

39

You might also like